/colophon
HOW THIS
IS BUILT
A colophon is the note at the end of a book describing how it was made — the type, the paper, the press. This is that, for a website.
Stack
Typography
Chosen for long-form reading. Serif body text is what technical publications people actually finish use — Increment, Stripe's blog, most academic writing. It also carries the research half of what I do without needing to say so.
Same family as the serif, designed to sit alongside it. Keeps the chrome quiet so the content leads.
Anything numeric or structural. Monospace makes columns of figures line up and signals 'this is data, not prose'.
Decisions
Bone accent (#e8e0d0)
This started as burnt orange, which read as startup rather than practitioner. Bone is warm off-white against a near-black background — it draws the eye without shouting. In light mode it inverts to a warm umber so the same family works both ways.
Zero border radius
Everything is square. Rounded corners are the default of every component library, and defaults are what make a site feel assembled rather than made.
No animation library
No Framer Motion, no GSAP. Every transition is CSS plus IntersectionObserver. Less JavaScript on the main thread, and the animations stay subtle because they are harder to overdo this way.
One stylesheet
All authored CSS lives in a single SCSS file — tokens, article typography, cursor, print styles, app chrome. Tailwind handles utilities. Changing the accent colour is one value in one map.
Canvas over html2canvas
The Dear Diary app originally rendered styled DOM and screenshotted it. Gradients drifted, transforms broke, fonts fell back. Rewriting it to paint directly to a canvas fixed alignment, image placement, and responsive width in one go.
Own blog, canonical to dev.to
Posts live here and on dev.to. The canonical URL points at whichever came first so search engines are not asked to pick. The homepage merges both feeds by date.
Analytics without cookies
Views, read time, scroll depth, referrer, country. All anonymous, keyed on a random session ID in localStorage. No cookie banner because there is nothing to consent to.
Written in Rome. Deployed from a terminal. The source is on GitHub if you want to take any of it.