How this site is made

Next.js 16 App Router, React 19, and TypeScript, styled with Tailwind CSS 4 on top of plain CSS custom properties. The design tokens live in one stylesheet and Tailwind reads them, so the CSS variables stay the single source of truth. Deployed on Vercel.

The five case studies and the notes are MDX, compiled with the Rust MDX compiler. Their metadata is typed TypeScript, not YAML frontmatter, so a bad date or a missing description fails the build instead of shipping.

Three faces, each with one job. Bricolage Grotesque carries display headings and uses its optical size axis. Geist carries body and interface text. Geist Mono carries annotations, labels, and tabular numbers. All three are variable fonts, self-hosted through next/font, subset, and preloaded, so text renders once and never shifts.

The scale uses a 1.25 ratio, hand-rounded, fluid only at the display sizes. Body text never drops below 16px.

Every color is OKLCH. A single slate hue (245) tints all of the neutrals, and one signal orange accent (hue 40) does the markup work: rules, underlines, deltas, the primary action. The accent stays under ten percent of any surface.

Tokens are layered primitive, semantic, component. Dark mode overrides only the semantic layer, so components never know which theme they are in. Building it this way surfaced two real contrast bugs before launch; that story is written up in the notes.

Transitions run 150 to 300ms on an ease-out-quint curve, and anything that moves does it with transform, never layout. Page entrances are a single 320ms rise. Scroll reveals are CSS scroll-driven animations, no JavaScript observer, so none of it touches the main thread.

Everything collapses to near-instant when your system asks for reduced motion. If you notice an animation here, that is a bug.

The target is WCAG 2.2 AA in both themes. Every page gets an automated axe scan in light and dark mode, in Chromium, Firefox, and WebKit profiles, desktop and mobile: about 160 checks per full run of the suite. Tooling output is evidence, not proof, so every screen also gets checked by eye at 360, 768, and 1280 pixels.

Lighthouse runs against a static export on every change and fails the build below 90 in any category. The budgets pin first contentful paint under 2.0s, largest contentful paint under 3.0s on simulated slow 4G (the display font is worth the wait), layout shift under 0.1, and total blocking time under 300ms. A bundle monitor holds the whole first-load payload, JavaScript, CSS, and assets together, under 1000 KB; it measures 994 KB today.

The portrait is hand-written SVG, about 4 KB of path data, drawn flat with no shading. It took five versions to get a likeness worth signing off on, and the one that worked came from studying the original illustration, not the reference photos. The geometry is locked; themes restyle it purely through CSS variables.

Click him on the home page. He winks.