Rebuilding this site: from graph paper to pixels

This site used to look like an engineering notebook — graph-paper background, rubber-stamp labels, registration marks in the corners. I liked it, but it read like a portfolio, and a portfolio wasn’t really the point. The projects on here are meant to be rebuildable: parts lists, wiring, the mistakes left in. That’s a guide site, so now it looks and acts like one.

The new look

The inspiration was leandrolinares.com — a site that feels handmade without being busy. The trick, as far as I can tell, is restraint: almost everything is a plain white page with a normal readable font. The personality comes from exactly three things — a pixel font used only for headings, a pixel-art character, and generous empty space.

So that’s the formula here too:

• Pixelify Sans for headings, nav, and the little labels — nothing else
• Space Grotesk for everything you actually read
• One burnt-orange accent, light and dark themes, zero textures

The avatar is just rectangles

The pixel character on the home page isn’t an image file. It’s an inline SVG drawn from an array of strings in the component’s frontmatter — one string per row, one character per pixel:

'....hhhhhhhh....'
'...hhhhhhhhhh...'
'...hssssssssh...'
'...hsessssesh...'

Each character maps to a fill color (h is hair, s is skin, and so on) and renders as a <rect> on a 16×16 grid with shape-rendering="crispEdges" so the browser never smooths the edges. Editing my haircut is a string edit. The shirt inherits the site accent color, so it changes with the theme.

What moved where

The build logs are now guides — same content, same numbering, but framed the way I actually want them used: as instructions someone else can follow. Experience didn’t disappear, it just moved below the work, where it belongs. And this blog exists now, for the shorter stuff that doesn’t need a parts list.