How this website was made

This site is three distinct worlds (Build, Breathe, Be) sharing a single URL, a single sigil, and a shared editorial membrane. The constraint was making each world feel materially different to inhabit while preserving a coherent identity, which turned out to be more about typography, motion, and rhythm than about palette.

The stack is Astro 5 with TypeScript for static-first generation, Tailwind v4 with a CSS-first config for the design system, GSAP for the membrane animations and View Transitions API for inter-page motion, and React islands selectively where they earn their weight. Content lives in MDX collections with Zod schemas for type-safe authoring. The whole thing deploys to Netlify.

Each world has its own typography pair: DM Sans + Fragment Mono for Build (code-editor in spirit), Cormorant Garamond for Breathe (editorial serif, romantic register), Lora for Be (quiet, grounded, mineral). One photo treatment pass, saturate(0.88) sepia(0.04) contrast(1.03), runs site-wide so fifteen years of cameras read as one body of work.

The seasonal layer on Breathe swaps the hero photo and a botanical illustration based on server-side date detection. The four botanicals are public-domain hand-colored plates from Margaret Roscoe's Floral Illustrations of the Seasons, dropped in as tipped-in marginalia rather than icons.

Accessibility: WCAG 2.2 AA throughout. The site passes its own a11y test suite, which was a priority.

The hardest decision was the one the visitor first sees: the membrane that hands off to the three worlds without making any of them subordinate. Three doors, same person.