← Portfolio How this site was made
How this site was made

Colophon

A small note about the materials, tools, and decisions behind this site.

Typefaces

Display & headings are set in Bricolage Grotesque, a contemporary grotesque by Mathieu Triay with a slightly editorial cut.

Body text uses Geist, the variable family from Vercel — clear, neutral, and quietly opinionated about numerals.

Code, metadata, and labels are set in JetBrains Mono, chosen for its honest character widths and readable lowercase.

Accents and italic flourishes are Newsreader, a variable serif by Production Type for the Google Fonts Knowledge project, used sparingly across editorial moments.

Stack

  • Framework: Astro 6, with MDX for long-form content and a few React islands for interactive bits (theme toggle, mobile menu).
  • Hosting: Netlify, with edge functions for the contact form.
  • Email: Resend handles the contact form delivery.
  • Type system: TypeScript end-to-end, with content schemas validated by Zod.
  • Tooling: Biome for lint and format, Playwright for visual checks.

Design notes

The site uses a dual-theme system (warm editorial light, terminal dark) built on oklch colour tokens, with the accent locked to a single orange across both. The grid backdrop and cursor trail are React components that respect prefers-reduced-motion.

Everything is hand-coded. There is no CMS — just files in a repository, edited like source code.

Credits

Inspired by the long tradition of book colophons, and by the many engineers and designers whose work informs this one. If something here looks familiar, it probably is — typography is a long conversation.