Todd Ludington
← Back to projects

A Site That Listens: Making This Portfolio Human

A story from Jul 2026 · web, design, ux

Seven extensions in one week turned a tidy static portfolio into something with a voice — a site that answers questions in my own words, shows its depth honestly, and draws twenty years of work as a transit map.

Astro Tailwind CSS SVG Vanilla JS Cloudflare Pages

The site speaks in my voice or it stays quiet.

The decision this one is about

Background

This site was in decent shape — clean, calm, current enough. But reading it honestly, the craft spoke and the person did not. The homepage was navigation: a tagline, three buttons, a menu of paths. The adjectives I care about — reliable, simple, human — were claimed in one sentence and demonstrated nowhere closer than three clicks deep. And every entry, whether a 700-word case study or a 19-line field note, wore the same card, as if all work were the same size.

Over one week, seven extensions changed what the site is. The theme connecting them: a portfolio should behave like the person it represents.

Opening by listening

The front door is now a question. “What are you looking for?” sits where the path cards used to be — a plain HTML form that feeds a small client-side search engine on the projects page. Type “monitoring” or “has he done hardware?” and the site filters everything I have built, and, when the question matches something I actually have a point of view on, it answers in a written first-person voice before showing the results.

That voice is deliberately not a chatbot. There is no model behind it, no conversation state, no generated text — just curated answers I wrote, keyed to the topics my work actually covers, riding on a hand-rolled scorer over a build-time index that ships as a single inline payload with a byte budget enforced at build. The site speaks in my voice or it stays quiet.

Staying honest about time

A “Now” strip on the homepage pairs a hand-written sentence about what I am doing with the three newest entries, computed at build. The build refuses an empty sentence, so the strip can never render hollow — currency is enforced, not aspirational.

Respecting visitors I will never see

I do not use dark mode. The site now ships one anyway: visitors whose systems ask for dark get a warm, paper-after-dark version of the same palette — same hues, lights off — through a single media query, with no toggle and no JavaScript. Light mode stayed pixel-identical, verified by asserting on the compiled CSS. The same respect runs through the details: visible focus rings, honest disclosure semantics when sections collapse, reduced-motion support everywhere something moves.

Letting depth have a shape

Entries now carry a kind. Stories — the long case studies — earn an essay layout: serif prose at a reading measure, with the project’s central design decision pulled out as the page’s anchor. Field notes collapse into a dated notebook list where a quick how-to no longer costs the same screen space as a real story. New entries default to notes; promoting one is a single line of frontmatter.

Drawing the through-lines

The piece I am fondest of: the threads page renders my work as a transit map. Five colored lines — each hue derived from the same OKLCH recipe as the site accent — carry entries as stations, laid out chronologically by a deterministic build-time SVG generator. Where a project belongs to two threads, the lines physically meet at an interchange station.

The interaction rule is the part worth writing down: the legend pills are deliberately single-select, and the only way to focus two lines at once is to click an interchange. Multi-focus is earned through the map’s geography, not control stacking. Unfocused threads collapse to one-line stubs — really collapsed, out of the tab order, not faded ghosts — and everything degrades to a fully readable static page without JavaScript.

How it was built

Every feature ran the same pipeline: a design conversation, a written spec, an independent review by a second model that repeatedly earned its keep, an implementation plan with verification steps proven satisfiable, fresh-context agents building task by task with a reviewer between every step, a final whole-branch review, and my own walk before merge.

The catches justify the ceremony. A final review found that short search triggers would have fired confident wrong answers on words like “pipeline” before any visitor saw one. A payload budget guard tripped the same day it shipped, exactly as designed. And once, a reviewer traced an implementer’s suspicious workaround to its true root cause: an unsatisfiable assertion in my own plan. The plan was the bug. The accountability flowed the right way, and that discipline — trace first, fix the actual cause, write it down — is the same one the rest of this portfolio describes.

Why it matters

None of these extensions is large. Together they change the nature of the site: it listens before it presents, shows its work at true depth, respects preferences its owner does not share, and draws its own history as a map you can ride. A portfolio that demonstrates the practice it describes is worth more than one that lists it.

Related projects

All projects →