03 — Web/Live
This site, built from scratch.
I didn't use a template or a page-builder. Every component, animation, and performance decision here was designed and written deliberately. The walkthrough below zooms through the real layers that make it work, one build decision at a time.
Architecture
It's built on the Next.js 14 App Router, with every route server-rendered. The real content and copy ship in the first HTML response, so the work stays findable by search engines and screen readers whether or not the animation layer ever loads.
The scroll engine
Lenis drives the momentum smooth-scroll while Framer Motion reads the native scroll position to scrub each pinned scene. A single requestAnimationFrame loop keeps the two from fighting, and nothing is scroll-jacked, so keyboard paging and the browser's own scrollbar still work exactly as you'd expect.
Per-device tiers
A capability gate splits every scene into three builds: a WebGL, scroll-scrubbed experience on capable desktops, a lighter CSS-3D version on phones, and a static poster for anyone who prefers reduced motion. The heavy 3D is code-split, so it only ever downloads where it can actually run well.
Motion as craft
Every transition uses an exponential ease-out with no bounce, and animates only transform and opacity, never layout or blur. A custom cursor, a film-grain grade, and a percentage preloader give the whole site a finished, filmed feel rather than a templated one.
Accessibility
Reduced-motion preferences are honored everywhere, and the tall scroll tracks aren't even rendered in that mode, so there's nothing left to hijack. The build keeps a real focus order, keyboard-operable controls, ARIA labels on the data visuals, and a skip link, all aimed at WCAG 2.2 AA.
Performance
Fonts are self-hosted, scene assets load lazily, animation loops pause off-screen and on hidden tabs, and the device-pixel-ratio is capped. The goal is simple: the headline paints first, and the spectacle never blocks it.
Every layer, running at once.
The site you're on isn't any one of these decisions — it's all of them stacked together, architecture through performance, working as a single piece.
The honest version: this site is itself a portfolio piece. The page you're reading is a literal teardown of the thing you're looking at.