· meta · web
Colophon: how this site works
Astro, Tailwind, hand-rolled SVG charts, and real SARB data — the stack behind the redesign.
This site used to be an al-folio Jekyll theme that, for two years, proudly listed Albert Einstein’s publications as mine. Time for a rebuild.
The stack
- Astro — static site generator. It ships zero JavaScript by default; the only JS on the homepage is the chart’s hover interaction, the theme toggle, and a small scroll-reveal observer.
- Tailwind CSS v4 — styling, driven by a small set of design tokens (CSS custom properties) so dark and light mode are the same components with different variables.
- Fonts — Space Grotesk for display, Inter for body, JetBrains Mono for anything that smells like data. Self-hosted, variable, subset.
- GitHub Pages + Actions — push to master, site deploys.
The chart
The homepage chart is the South African Reserve Bank’s policy rate since 2000 — every change in the rate, rendered as a step function. There’s no charting library: the SVG path is computed at build time from a JSON file, so the browser downloads a finished picture and a few hundred bytes of hover logic.
House rule, borrowed from the best data-portfolio sites: every chart on this site is real data. No decorative squiggles.
Why not a template?
Templates are how you end up with someone else’s website. The design here is deliberate: dark-first because that’s where technical work lives, monospace for numbers because tabular figures matter, and one accent colour that doubles as the chart colour. The whole site is a few hundred lines of components — small enough to actually maintain.