Colophon
What this site is made of.
A small accounting of the parts. Built in public, on a long evening, with the AI pair programmer at my elbow.
Stack
Next.js 16App router. React server components. Static generation for every page.
Tailwind v4Tokens live in CSS variables. Tailwind reads from them. One source of truth.
MDXCase studies and experiments are MDX. Long-form essays are plain markdown. Frontmatter is YAML.
TypeScriptStrict. Used for the route handlers and the small content layer.
VercelHosting and deploy automation. Push to main, watch it ship.
Type
Trade Gothic NextFrom Adobe Typekit. Body, navigation, display, almost everything.
Adobe Caslon ProFrom Adobe Typekit. Italic phrases inside H3s and pull-quotes.
Type scaleThree sizes do most of the work — display, section, body. The contrast between them is the hierarchy.
Structure
Tier compositionEvery long-form page is a sequence of typed Tier sections. Text, media, fourUpText, twoUp, array, credits, related. Same structure used by champion design studios.
Sustained color sectionsA case study isn't tier-by-tier alternating colors. It's chapters. Five to seven of them, each in one bg color, each anchored by a 106px section hero.
Single source of truthOne CSS variables block in globals.css. Every color, every type size, every motion easing. Edit one variable, retune the site.
Motion
Scroll revealIntersectionObserver fades content in 24px below baseline. Once per element. Honors prefers-reduced-motion.
Page transitionEach new route's main element fades in over 500ms. No router-level animation library.
Tile hover700ms scale-1.025 on every filtergrid block image. Champions does the same.
Tier parallaxModern browsers (animation-timeline: view) get a slow vertical drift on tier media. ±2% across viewport entry. CSS only.
Honest about how it was made
Most of this site was written and refactored alongside Claude Code, an AI pair programmer working from inside the terminal. The structure, voice, and design judgment are mine. The typing was shared.
That doesn't make the work less mine. It makes it faster, and it makes the writing in the case studies a clearer reflection of how I actually talk about the work, because I had a second voice to react to every paragraph.