Attribution
What this site is made of
Where the design came from, and what it runs on.
None of this came out of nowhere. Below are the sites I kept open while designing, and every project doing real work on the page you are reading. If something is on this list it is in the build, not on a wishlist.
How it ended up like this
I set the constraints before writing any code. One column at 688px, a single grey ramp with no accent colour, four type sizes, and every page as typed TypeScript rather than markup. Constraints picked up front are ones you don't relitigate at 2am.
Some of them didn't survive. The first version had square corners, a serif display face and uppercase mono labels, and in a column this narrow they shouted. The display type went, and hierarchy moved to weight and colour. DESIGN.md keeps a list of what was removed and why, so I don't rebuild it by accident.
It runs on Next.js 16 and React 19, styled with Tailwind v4. I plan, build and review with Claude Code, which is all AI-native means here. It buys pace. The review is what stops the pace turning into a shortcut.
What I wanted was a site that loads fast, works with a keyboard and a screen reader, and shows the work instead of describing it.
Where the ideas came from
The guestbook came from his site. His layout and interaction work is where I started.
Geist, the typeface everything here is set in, is theirs. Their product pages are the restraint I was aiming at.
Hairlines instead of boxes, and one grey ramp instead of an accent colour.
Sonner, which handles every toast on this site, is his.
The stack
App Router, and the static rendering behind every page here.
Server Components by default, client code only on the interactive leaves.
Strict. Every page of content is a typed object, so a malformed post fails the build.
v4, so every token lives in globals.css and there is no config file.
The base-nova primitives, copied into the repo rather than installed.
The unstyled behaviour and accessibility under those primitives.
The reveal on scroll and the hover transitions, all of which stop under prefers-reduced-motion.
Validates the contact form and the guestbook before anything reaches the server.
Type and icons
Vercel's sans and mono. Everything you are reading is set in one of the two.
Frank Grießhammer's serif, used for the body of a long article and nowhere else.
The interface icons, including the arrow on the right of this row.
Brand glyphs for the stack lists and the social links.
What it runs on
The longer version
I wrote up how the whole thing was put together, including what I tried first, in the build logThe build log for this site, stack and decisions included.. If you came for the hardware and the apps rather than the credits, those are on the uses pageThe hardware, editor, and tools I actually use..