Colophon
How this site is built.
A portfolio for a design engineer should show its own work. This is the stack, the type, and the details that took the longest to get right.
Stack
- Framework
- Next.js 16 (App Router), React 19, TypeScript
- Styling
- Tailwind CSS 4, with per-project themes as CSS variables
- Hosting
- Cloudflare Pages, as a fully static export
- Server
- One Pages Function, for the contact form
- Images
- Cloudflare R2, resized on request by Cloudflare Images
- Type
- Instrument Serif, Inter, and JetBrains Mono
Details
- 01
Glass that reads what's under it
The header and section nav are frosted glass. Their labels blend with plus-darker in light mode and plus-lighter in dark, the way iOS vibrancy works. Each label checks what's behind its own center (page colors, gradients, and screenshots, using a small brightness map generated for every image) and flips light or dark to match.
- 02
Tiles that become heroes
Opening a case study morphs its home-page tile into the page's hero image with the View Transitions API, through React's ViewTransition. Switching themes uses the same API: the new theme grows out in a circle from the toggle.
- 03
A shader that knows its limits
The animated gradient behind the hero is a WebGL shader. A check before first paint decides what the device gets: the animation, a still gradient, or solid color. After that, a frame-rate probe switches to the still gradient if the animation can't keep up.
- 04
A 404 you can look through
The 404 page sets the number from Instrument Serif's actual glyph outlines, extracted once with opentype.js. A WebGL lens shows the type's construction underneath: outlines, curve points, and metrics, with refraction and color fringing at the rim. It moves on springs modeled on SwiftUI's: it grows in, lifts when pressed, and squashes along its path without changing volume.
- 05
Case studies you can operate
The HornScore scorer runs the app's scoring rules on a real post. The Halo+ calculator runs the original cost model. The Breeze resume editor is a working reproduction, and the lead pipeline plays a nightly run that you can pause and explore one component at a time.
- 06
Cards and PDFs from the same data
Every case study's link preview and one-page PDF are rendered from the same project data by Playwright scripts, so a changed number updates everywhere on the next run.
- 07
A contact form without a backend
The form posts to a Cloudflare Pages Function. Turnstile checks for bots without a puzzle, and Resend delivers the brief with Reply-To set to the sender.