A unified Next.js architecture serving both online & offline identites from a single codebase.

Core Technologies: - Next.js 16 (App Router & Middleware) - TypeScript & Tailwind CSS 4 - Sanity CMS (Embedded Studio & Live Content API) Libraries: - Motion (previously Framer Motion) - Mux (Video Streaming) - html2canvas-pro (Custom Theme Wipe)
This portfolio represents the culmination of my technical expertise and design philosophy. The challenge: how to present two distinct identities - my professional real-world self and my creative online alias - without maintaining two separate codebases. The solution is a bespoke 'Site Variant' architecture powered by Next.js Middleware. It dynamically adapts content, assets, and styling based on the hostname, all managed via a single embedded Sanity Studio. Beyond the architecture, the site features complex 'scrollytelling' animations, a unique 'screenshot-wipe' theme switcher, and a puzzle-based contact form, all built with a strict design-first methodology.
* A detailed breakdown of the architecture, design challenges, and performance metrics will be available in the full case study.