Colophon: how this site is made

A colophon is the note at the back of a book that tells you how it was made. This is that note for the site.

The idea

The portfolio is meant to feel calm. The first version did too much at once: a cassette, a ticker, build metadata, theme controls and several competing ways to browse the same work. It was busy before it was useful.

The current version is simpler. There is one reading column, one project gallery and a short index for everything else. The work gets the colour. The interface stays out of its way.

The covers

Each project has its own cover, drawn in HTML and CSS. They borrow the physical presence of books and record sleeves without pretending to be screenshots of the products.

On a fine pointer, the covers respond gently to movement. The effect uses a small amount of vanilla JavaScript and updates only the CSS transform. With reduced motion enabled, they stay still.

The build

The site is built with Astro, TypeScript and plain CSS. There is no client-side framework.

Archivo, IBM Plex Mono and Newsreader are self-hosted, so reading the site does not require a font request to a third party. The Now page loads Spotify only after the play button is pressed. The writing has an RSS feed, and the CV keeps a print stylesheet for saving a clean PDF.

That is the whole setup. Small enough to understand, and enough room for the work to speak.