# How this is 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 12 September 2026.

- `/`: 186 KB
- `/work`: 186 KB
- `/lab`: 226 KB
- `/notes`: 179 KB
- `/resume`: 180 KB

## 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 rock](https://polyhaven.com/a/moon_rock_07) — Poly 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-follower](https://github.com/Cuberto/mouse-follower) — Cuberto. The magnetic cursor.
- [cmdk](https://cmdk.paco.me) — Paco Coursey. The command palette. Also one of the design references this site was built against.
- [Lenis](https://lenis.darkroom.engineering) — Darkroom Engineering. Scroll.
- [Motion](https://motion.dev) — Matt Perry. Drag, with momentum and constraints.
- [@react-pdf/renderer](https://react-pdf.org) — Diego Muracciole. The resume PDF — real typesetting, not a print of the page.
- [Velite](https://velite.js.org) — zce. Typed content collections.
- [Archivo · JetBrains Mono](https://fonts.google.com/specimen/Archivo) — Omnibus-Type · JetBrains. Both OFL.

The writing is mine. The code for this site is mine. The rock is CC0 from Poly Haven.

---

Page: https://eitanf.com/colophon · Español: https://eitanf.com/es/colophon.md · llms.txt: https://eitanf.com/llms.txt