Colophon

This site is designed, built and maintained by me. It’s a small, deliberately lightweight corner of the web — a place to write, share what I’m working on, and keep learning in the open. This page documents how it’s put together and the choices behind it.

About this site

The source code is open on GitHub. I rebuild and refine it little by little rather than chasing a big redesign, so it grows the same way I do — incrementally, and with intention.

Technology

• Framework: SvelteKit 3 with Svelte 5 and its runes, written in TypeScript.
• Content: written in Markdown and processed with mdsvex, so posts and pages like this one are just files.
• Images: optimised at build time with @sveltejs/enhanced-img into AVIF and WebP, in several widths sized to the column they sit in.
• Code highlighting: Prism with the One Dark theme.
• Hosting: deployed on Netlify.
• Tooling: Vite, ESLint and Prettier keep the codebase tidy.
• Testing: end-to-end tests with Playwright.

Typography

• Display: Instrument Serif, a condensed, editorial serif for titles and headings, with its italic for the odd accent.
• Text: Geist, a clean sans-serif for everything you read.

Both are self-hosted as subsetted woff2 files, about 53 KB for all three, so there’s no third-party request and only the glyphs the site actually needs are downloaded. Each font has a local fallback resized to match its metrics, so the text doesn’t jump when the web fonts arrive.

Design

• Styling: Tailwind CSS v4 with the typography plugin.
• Colour: warm paper and ink, hairline rules instead of shadows, and a single terracotta accent borrowed from the lit windows of the solarpunk house on the home page, in both light and dark modes.
• Illustration: the solarpunk house on the home page is drawn by a small script that models the island in 3D and projects it to a flat SVG. Day and night share one cached file, and the moving parts animate only position and opacity, which are cheap for the browser to draw.
• The aim is calm, readable, and out of the way of the words.

Energy & performance

This site is built to be light. There’s very little JavaScript shipped to the browser, fonts are subsetted, and every page is pre-rendered to static HTML at build time, so nothing runs on a server when you visit. The only exception is the contact form, which needs one small function to send a message.

Images are compressed hard and served in the size your screen actually needs: a phone gets the narrow version instead of the desktop one. Sizing them to the article column cut the images for reading every post on a typical phone from about 1 MB to 330 KB.

I care about the energy cost of the web — you can read more about that in my writing on sustainable and regenerative software.

Accessibility

I aim to meet WCAG 2.2 Level AA: semantic HTML, sufficient colour contrast, keyboard navigation and respect for reduced-motion preferences. If something doesn’t work for you, please let me know — I’d genuinely like to fix it.

Privacy

No invasive analytics, no advertising, no tracking cookies. I don’t want your data — I just want the site to be useful.

The one third-party script is on the contact page: Cloudflare Turnstile checks that a message comes from a person rather than a bot, without a puzzle to solve. Messages are then stored with Netlify Forms, and only I read them.

---

This page was inspired by Ky Decker’s colophon and the colophons of the wider indie web. If you have one too, I’d love to see it.