Colophon

A colophon is a nobby designer word for 'how this site was made'

I designed and built this site myself. The source is on GitHub if you want to look around. It is more engineering than a personal website needs, but playing with web technology is a hobby I do not want to give up.

Technologies & Techniques

Next.js does most of the heavy lifting. Every page is rendered to static HTML when the site builds. Only the small interactive parts, such as the table of contents and the link previews, ship client-side JavaScript .

The interface is plain HTML and CSS with a little TypeScript. Styles live in one small file per component. Vercel takes care of hosting. Animations are CSS.

Writing and Editing Content

The content system is a folder of flat files. When I edit a post, I edit a file and push it. Ideas start in a private notes app and move here once they are mature enough to be read by someone else.

Other people prefer a setup with one publish button. I like the friction. It gives me one more chance to reread the thing.

Typography

Headers are set in Newsreader by Production Type, under the SIL Open Font License. Body copy is set in Reforma 1969 , designed by Alejandro Lo Celso at PampaType for the Universidad Nacional de Córdoba and used unmodified under the Creative Commons BY-ND 4.0 licence. Small text and labels are set in Lato .

The type uses a fluid type scale from Utopia . The font size changes continuously with the width of the browser.

Growth Stages

Every post on this site has a growth stage that shows how complete it is. Posts start as seedlings, grow into buddings, and end up as evergreens. You will often find notes that are unfinished. I do cycle back, sometimes months or years later.

Custom Components

I built a number of reusable components for the situations that keep coming up in my writing.

There is the coming soon component. It signals that a post is half-written:

Coming Soon

Feel free to bug me on Bluesky to finish writing this.

There is an assumed audience component that I put at the top of some posts to say who I am writing for:

Assumed Audience

People who care about how websites are built.

I occasionally need to alert readers to dangers and threats:

This is an alert

Stay vigilant to the threat of typography that is too small and low contrast.

Some are nicely styled callouts for books:

The Design of Everyday Things