Colophon
How thisis made.
A colophon is the page at the back of a book that says how it was printed. This one says how the site is built, with the numbers measured rather than promised.
The principle
The content lives in the HTML; JavaScript only adds behaviour. Everything readable on this site is in the served HTML with nothing executed — with JS off, for a screen reader, and for the crawlers that answer questions about people without running scripts.
Stack
Framework
Next.js 16, App Router, every route prerendered
Language
TypeScript
Styles
Tailwind 4, OKLCH tokens, CSS Modules for stateful parts
Content
MDX through Velite, schemas validated at build time
Motion
Lenis for scroll, Motion for the lab’s drag, rAF for the rest
3D
Hand-written WebGL2 — a textured scan at rest, 150k points on hover, no three.js
Command palette
cmdk, loaded on first ⌘K
Cursor
mouse-follower (Cuberto) + GSAP, loaded on the first mouse move
Sound
Web Audio, synthesised — no files
Type
Archivo and JetBrains Mono, self-hosted
The resume PDF
Typeset with @react-pdf/renderer at build time, from the same data the web page reads — so the document and the page cannot drift
For agents
Every page also as Markdown — ask with Accept: text/markdown or add .md — plus llms.txt and Content Signals in robots.txt
Hosting
Vercel
Numbers
JavaScript transferred on first load, gzipped, measured against the production build on .
What I missed
I set a budget of 120 KB of JS per route and I miss it: the floor is around 179 KB. That number was unrealistic for the Next App Router, whose client runtime spends most of the budget before I write a line. Two things did come down: the section rail stopped using an animation library (a dock magnification is a subtraction, it does not need Motion) and the command palette now loads on the first ⌘K. That took the home from 245 KB to 186 KB. The rest is the framework floor, and saying so is more useful than deleting the promise.
Credits
The rockPoly Haven — moon_rock_07
CC0. A real photogrammetry scan; its mesh, albedo, normal map and ambient occlusion form the solid rock, then the same surface becomes points on hover.
mouse-followerCuberto
The magnetic cursor.
cmdkPaco Coursey
The command palette. Also one of the design references this site was built against.
LenisDarkroom Engineering
Scroll.
MotionMatt Perry
Drag, with momentum and constraints.
@react-pdf/rendererDiego Muracciole
The resume PDF — real typesetting, not a print of the page.
Velitezce
Typed content collections.
Archivo · JetBrains MonoOmnibus-Type · JetBrains
Both OFL.
The writing is mine. The code for this site is mine. The rock is CC0 from Poly Haven.