asim.dev

colophon

How this site is built, why it looks the way it does, and what it costs to load.

by Asim Hussain

A colophon is the note at the back of an old book that tells you how it was made. The typeface, the paper, the press, the hands. A small act of honesty from the maker to the reader. Websites don't have paper, but they do have a footprint, a character, and a pile of decisions behind every pixel. So this is that note, for this site.

how it's built

The site is built with Astro, a framework that bakes every page into plain static HTML ahead of time. When you arrive, no server is assembling anything for you. The page is already a file, sitting there, ready to send. That is the oldest trick on the web and still the fastest and the lightest.

There is no database and no content system humming in the background. Every essay, every talk, every link in the feed is a text file living next to the site's own code, in Markdown. Styling is Tailwind. The two typefaces (JetBrains Mono for almost everything, Inter for long prose) are self-hosted and loaded with the right hints, so the text doesn't flash or jump around while the page settles. The whole thing is kept honest by a set of automated checks that run as I write and again before anything is committed, so the rules that matter can't quietly rot.

why it looks like this

I wanted this to feel like the early web. Back when a personal site was a room someone had decorated, not a landing page tuned to convert. The modern web, and the tools that learned from it, will always nudge you toward the same smooth, safe, optimised shape. That shape is the product of a million A/B tests, and it works, but it is the opposite of personal. It is a machine's idea of what you should want.

Good user experience pulls hard toward order, and past a certain point order is where expression goes to die. So this site is a small argument with that gravity. Wherever the obvious, frictionless, internet-approved choice sat on one side and the thing I actually wanted to make sat on the other, I leaned toward the second one more often than is sensible. Not recklessly. It's still a normal site you can read and navigate. But there is grit in it on purpose.

That is what the living field of noise behind every page is, and the signal traces in the feed, and the rail drawing itself down the side of this very page as you read, and the faint misalignment in the headings. It is the edge of chaos made visible, the seam between too much order and too much chaos where everything alive actually lives. A personal site should be an expression of the person behind it, not an algorithm optimised to death. This is mine.

one number runs the whole thing

The golden ratio, φ ≈ 1.618, is the cut that splits a line so the whole is to the longer part as the longer part is to the shorter. Nature reaches for it wherever things grow by packing tight — the seed spirals of a sunflower, the scales of a pinecone, leaves set around a stem — because φ is the “most irrational” number, the hardest to round to a neat fraction, so the parts never quite line up and nothing overlaps.

I use it because one ratio keeps every size on the page related to every other, and because that same irrationality makes φ the last steady beat before a moving system slips into chaos — the edge this site is named for. Two sizes are chosen by eye, for legibility; everything else is φ.

measurerulevalue
text sizechosen by eye21px
text columnchosen by eye46rem · ~70 chars
line heighttext × φ34px
h3 headingtext × √φ27px
h2 · pull-quotetext × φ34px
article titletext × φ²55px
home titletext × φ²·⁵70px
side marginscolumn × φtext : margins = φ : 1
lead imagecolumn × φ74rem
spacing stepsφ⁻² … φ³ rem0.38 · 0.62 · 1 · 1.62 · 2.62 · 4.24

light and accessible, despite the look

A site that dresses up as a glitching terminal sounds like it should be a heavy, hostile, inaccessible mess. It isn't, and that was a point of pride. Nearly all of the texture is cheap to draw, the imagery is sized down hard, and the interactive flourishes only wake up once the page has settled, so they never fight the words you came for.

None of it is load-bearing. Every animation respects your system's reduced-motion setting. Ask your device for less movement and the noise field freezes still, the headings stop drifting, the rail goes static, and you are left with a calm, plain, readable page. The markup underneath is ordinary semantic HTML with real headings, labelled controls, alt text on images, and a keyboard path through everything. Every page I measure scores in the nineties for accessibility and a clean 100 for best practices and search basics. The per-page detail is in the report card further down, accessibility score and all, unvarnished.

the carbon side

Measuring software's footprint is my actual day job, so it would be strange not to measure my own. Every page load burns a little electricity, to serve the files, push them across the network, and light them up on your screen. I didn't want to take a number off some third-party badge and call it done. I wanted to calculate it myself, with an open method, in figures you can reproduce.

So I do three things. I run Google Lighthouse against the real pages, on a simulated mid-range phone over a slow connection, several times, and take the median weight. I feed those bytes to CO2.js, the Green Web Foundation's open library, using the Sustainable Web Design v4 model, which accounts for the data centre, the network, and your device. Then the grams map onto a familiar A+ to F grade. The little tool that does all of this is open, so you can run it on your own site.

where it lands today

Page weight is the total bytes a first, cold-cache visit pulls down. Grams are that weight run through the model on a non-green host, the honest worst case. The last two columns are Lighthouse's performance and accessibility scores for the very same load, so the whole report card sits in one place.

page KiB g CO₂e rate perf a11y
/ (home feed)2040.031A+9690
/about7430.113A8896
/projects1960.030A+9893
/thesis2000.030A+9791
/wire/what-is-sustainability9920.150A7692
/colophon2520.038A+9696
site average4310.065A+9293

bands (g CO₂e per view) · A+ <0.095 · A <0.185 · B <0.341 · C <0.493 · D <0.656 · E <0.846 · F ≥0.846

For scale, a single Google search runs to roughly 0.2 g at global-grid averages, and a minute of streamed video sits somewhere between half a gram and a gram. Across the whole site a first visit averages 0.065 g and an A+, with every page rated A or better. The heaviest pages are the essays carrying a full-width lead image, which is exactly where the remaining bytes are, and the lever is always the same, send fewer of them.

honest caveats

This is a model, not a meter, and it is worth saying where the edges are.

credits

Set in JetBrains Mono and Inter, both open-source. The photograph on the about page is by Trys Mudford, from FFConf 2025. Words, design, and everything under the hood by me.

~ Asim