AJ
Back to Builds
WebComplete

Therapy with Akansha

Professional website for a licensed clinical psychologist offering individual therapy, trauma treatment, and relationship counselling. Five-page site with a 5-theme and 10-font-pair switcher, built fully static with no backend.

Next.js 16Framer MotionTailwind CSSTypeScript

Overview

Therapy with Akansha is a 5-page professional site for a clinical psychologist, covering Home, About, Services, Approach, and Contact. It presents 6 services, 6 credentials, 4 therapeutic pillars, and 6 evidence-based methods (CBT, DBT, EMDR, mindfulness-based, somatic, person-centred), with WhatsApp and phone as the only contact channels, no booking system.

Why it was built

A client project for a practising psychologist who needed a calm, trustworthy web presence that could convey credentials and therapeutic approach clearly to prospective clients, without the complexity or cost of a booking platform or CMS. The brief leaned on tone and visual softness as much as content structure, given the sensitivity of the subject matter.

5 Theme + 10 Font-Pair System

Five colour themes (Rose, Lavender, Sage, Sand, Sky) and 10 heading/body font pairings (Crisp, Classic, Modern, Warm, Editorial, and more) are independently switchable and persisted to localStorage via React Context.

Glassmorphic, Animated UI

Semi-transparent cards, a backdrop-blurred navbar on scroll, and 3 floating background orbs animating on staggered 9s/13s/17s loops give the site a calmer, less clinical feel than a typical service site.

Services & Approach Pages

6 service cards (Individual Therapy, Anxiety & Stress, Depression & Mood, Relationship Counselling, Trauma & PTSD, Personal Growth) each list helps-with bullets, session duration, and format. The Approach page documents 6 specific therapeutic methods.

Tech Breakdown

Next.js 16

A fully static 5-page site with no data fetching; the App Router and Metadata API are enough without reaching for any backend.

React Context (theme + font)

Two independent Context providers manage theme and font-pair state with localStorage persistence, avoiding any external state library for what is fundamentally two enums.

CSS Custom Properties

Like the theme system on other builds, all 5 colour themes are defined as CSS variables under data-theme selectors so components never reference a colour directly.

Framer Motion

Drives scroll-triggered reveals (useInView) on every major section and the floating background orbs, used consistently rather than sparingly given the calmer pacing the brief called for.

Challenges
  • 1

    Running two independent customization systems (5 themes and 10 font pairs) at once meant the colour and typography variables had to be fully decoupled, so any theme could pair with any font without clashing.

  • 2

    Conveying clinical credibility and warmth at the same time meant the credentials and methods sections needed to read as precise and evidence-based, while the surrounding visual design (blobs, glass cards, soft palettes) stayed deliberately gentle.

What's Next

Possible additions include a short blog or resources section for common questions, a downloadable credentials summary, and a sitemap.xml/robots.txt pass, none of which exist yet since the site has stayed deliberately minimal.

See it live

Check out the deployed site.