Colophon

A colophon is a nobby designer word for ‘how this site was made’.

— Maggie Appleton

This page documents the principles, design choices and technology behind this site. Apart from this colophon, you might find interesting writings related to this site under the “portfolio” tag.

Principles

GLOSS

As with my other projects, this site is free/libre, free/gratis and open-source software, with the source code available on GitHub to use as you like. But don’t copy it and claim it as your own, because that would not be a nice thing to do.

Data first

At the heart of this site is a structured, machine-readable, JSON file that contains my résumé data. This file complies with the Récivi specification.

The Récivi PF renderer parses that document, validates it and generates a web site out of it, turning the same data into an interactive portfolio and print-ready PDFs of my résumé and CV. This turns the idea of how résumés have traditionally worked on its head. Instead of computers trying to extract facts from a freely formatted document, they can just read the JSON file.

IndieWeb

This site follows several IndieWeb principles: owning the domain, retaining control of the underlying data, favouring open-source tools and keeping authored content in durable plain-text formats. Contact and profile links use rel="me", which lets compatible services such as Mastodon verify that those profiles and this domain represent the same person through RelMeAuth.

Webmention is not implemented yet, but would be a natural next step toward making the site a more active participant in the independent web.

Progressive enhancement

The site’s content, links and navigation begin as semantic HTML. A minimal amount of CSS supplies the responsive layout, colour and print presentation. We sprinkle a little bit of client-side interactivity using Alpine.js. This is completely optional and even with JavaScript disabled, the experience of using the site remains mostly intact.

Design

Color palette

The colour palette comes from Catppuccin using the Latte theme for light mode and the Mocha theme for dark mode. The active flavour follows your OS/browser preference. Syntax highlighting colours use the same theme, giving the site a cohesive visual language.

I like Catppuccin not only because it is aesthetically pleasing, but also because it has ports for almost every piece of software I use, making it easy to use everywhere consistently. Earlier iterations of the site have used Solarized and Flexoki, both of which are also excellent color palettes.

Accessibility

The site tries to be as accessible as possible, with care taken to ensure semantic HTML, logical page structure and sufficient contrast. Its reading-focused layout is designed to make reading prose and code easier.

Typography

The site uses the following fonts.

• Headings: Space Grotesk by Florian Karsten Typefaces

  Space Grotesk is a proportional font based on the fixed-width Space Mono by Colophon Foundry. It retains the original’s many idiosyncratic details that give it character.

• Body (web): Inter by Rasmus Andersson

  Inter is a workhorse of a typeface carefully crafted & designed for computer screens. It is legible at all sizes and has Open Type features that we use like tabular numbers.

• Body (print): IBM Plex Sans by IBM

  IBM Plex Sans is a sans-serif font with a warm, slightly technical character and distinctive details. It is also narrow, making it suitable for width-constrained résumés.

• Code: JetBrains Mono by JetBrains

  JetBrains Mono is renowned font for developers with taller lowercase characters, unambiguous shapes for similar characters, and coding ligatures.

Inter is sourced from Rasmus’ website because he specifically advised against the old version on Google Fonts. All other fonts are sourced from Google Fonts. All four fonts are licensed under the SIL Open Font License 1.1.

Technology

For a developer portfolio, I find it ironic that the site is a collection of largely static HTML pages which are generated automatically at build time, from content written using MDX. MDX is the same Markdown we know and love, now with the added ability to embed components.

Récivi

This site is a combination of Astro and the Récivi PF renderer. Astro handles the routing, content and build systems, while the PF renderer does the rest of the heavy lifting:

• It creates an interactive résumé with focused pages for education, work and projects.
• It turns routes with a .pdf into actual PDFs during the build.
• It creates a blog/digital garden with features like categories and post series.
• It creates an RSS feed for the blog.
• It turns routes with a .png into actual images during the build.
• It adds metadata like canonical URLs and Open Graph images to all pages.
• It provides components and layouts to build your own pages.
• It exposes configuration hooks to deeply customise the site.

The result is opinionated enough to be useful immediately, but deliberately open at the edges. A site can replace individual components, extend its styles or add ordinary Astro pages without forking the integration.

GoatCounter

The site uses GoatCounter for some basic privacy-friendly metrics without adding too much bloat. Data is only retained for 31 days. The visitor can opt out by disabling JavaScript in their browser.

Creator

Unless otherwise noted, everything here was conceived, created, designed, developed, drawn or written by yours truly. I talk more about the sources of inspiration for the ideas behind this site on the inspirations page.

Past lives

This site is the latest of many iterations. Out of these, the one with the terminal, written in vanilla JS and the one with the over-engineered SPA were the most interesting and worth remembering.