Skip to main content

Colophon

This page describes how this website is built—the technical stack, design decisions, and the tools that power it.

Architecture & Framework

The website is built using SvelteKit, the only full-stack framework I’ve ever learnt to use and the one I’ll stick to. The production runs as a full-stack Node.js website on my own server rented from the German cloud provider Hetzner. My domain is registred at the Swiss Infomaniak. DNS hosting is done through the German non-profit deSEC. Automated building and deployment ( CI/CDW) happens on a self-hosted Gitea instance.

Blogging

The blog is built on MDSvex, the best markdown preprocessor for Svelte that lets me write in Markdown while allowing for interactive Svelte components at the same time. There’s no separate CMS; md files are edited directly in Obsidian using a symlinkW from the project folder to my vault.

MDSvex processes markdown through a fully customizable pipeline. Mine includes:

  • Syntax highlighting via Shiki with dual themes (github-light and github-dark-high-contrast)
  • Math rendering through KaTeX for LaTeX equations
  • Footnotes with automatic bibliography generation
  • Video embedding that auto-converts image syntax with video extensions to <video> tags
  • Custom callouts using ::TIP, ::WARNING, ::IMPORTANT, and ::NOTE syntax
  • Margin notes and table labeling via custom rehype plugins

Headings are automatically extracted and slugified for table of contents generation.

Typography

Headers are set in Crow by Lyons Type, body copy is set in Charter. Supporting sans-serif uses a simple system UI stack. Text scales fluidly using David Hellman’s tailwindcss-fluid-typeGH plugin.

Design Philosophy & Inspiration

I’m going for a flat document aesthetic that emphasizes textual content, proportion and readibility. I use a minimal border radius and very few box shadows (except the RSS button).

The current design has been inspired by Gwern.net, Tufte CSS and Maggie Appleton.

Styling

TailwindCSS provides the styling foundation, with extensive customization:

  • Custom color variables mapped to semantic tokens
  • Prose styling for markdown content with fluid sizing
  • Dark mode support throughout using CSS variables
  • Custom components from shadcn-svelte for UI primitives

Internationalization

The site supports bilingual content in English and Dutch, with translations stored in a structured object (/src/lib/i18n/translations.js).

Build-Time Features

Git commit information is injected at build time through Vite, exposing the current commit hash and date in the footer.

Technical Details

  • SEO: Dynamic Open Graph images generated via serverless function
  • Reading list: Integrated with Hardcover.app API
  • Webmentions: Support for social interactions via the Webmention protocol
  • RSS: Full-content RSS feed for syndication