designing this site as a circuit board
the dark theme is a pcb, the light theme is its assembly drawing. what the metaphor bought, and what it cost.
a personal site should be something you can describe in one sentence. this one is a circuit board.
the first version was a cream page with a serif. pleasant, and indistinguishable from every other text-first blog, and from what an ai produces when you ask for “minimal personal site”. i wanted something that couldn’t be guessed from the category.
i build frontends for iot devices. temperature loggers, container sensors, the dashboards that show what they measure. a board is the most honest picture of that world, and a board already has a slot for everything a site needs:
- one big chip in the middle. that is me,
U1. - smaller components around it. projects,
P1toP3. - test points along a rail. notes, in date order,
TP1,TP2. - copper traces between them. navigation.
- a title block in the corner. the footer: drawn by, revision, sheet.
the light theme is the same board as its assembly drawing. white paper, black line, copper accent. the toggle switches layers.
two rules keep the metaphor from becoming a costume.
every element does a job. a designator is an anchor. a pin is a link. a pad is where a trace lands. decoration gets removed.
the reading surface is off limits. notes render on a plain sheet, 66 characters a line, in atkinson hyperlegible. the board is the frame. the text is just text.
the cost is about eighty lines of javascript. it measures where pins and pads landed, routes an orthogonal path with 45° chamfers between them, and redraws on resize. it is the only script on the site besides the theme toggle. without it the board is still complete; you just don’t get the copper. on a phone the footprints stack and the traces daisy-chain from one to the next. the first attempt ran them under the cards and they came out as severed stubs.
the type is b612, designed for aircraft cockpit displays. it is the closest thing to real silkscreen lettering that also holds up at display size. b612 mono for designators and values. atkinson for everything you read.
the test of a design is whether a visitor can describe it an hour later. the cream page failed. the board passes.