This site, as a template
I open-sourced the scaffold behind this site — layout, design system, and build — with my content and images stripped out. Point your AI at it and it interviews you and fills it back in.
The interesting part isn't the HTML. It's the decisions — every default here is an opinion I can defend — and the fill mechanism: the template is a spec an agent operates on, not a file you hand-edit.
What you get
- A multi-page Eleventy site — home, about, work, writing, connect — with one data file (
profile.js) driving nearly all the copy. - The whole design system in a single stylesheet: dark, editorial, restrained accent, elevated cards, the scrolling monochrome logo strip.
- An
og-card.htmllink-preview generator, content-hash cache-busting, reduced-motion-safe animation, and a mobile nav. - No personal content or images — placeholder copy and placeholder art only. Bring your own.
The fill mechanism (the actual point)
Instead of hunting through a dozen templates, all the editable copy lives in one commented data
file. Ship with that a prompt — PROMPT.md — that turns Claude, ChatGPT, or an
in-editor agent into an intake interviewer: it asks you short rounds of questions, drafts tight
copy from your rough answers, refuses to invent facts, and writes the result straight into the
data file. The template stops being something you fill in and becomes something an agent fills in
for you.
The design decisions — and the tradeoffs
These are the calls worth defending, because each had a real alternative I rejected:
- Flat editorial, not glassy SaaS. Sans type, one restrained accent, hairline dividers over boxes. The rejected path — a full material/glass restyle — dilutes a builder's site into a generic landing page.
- Squircle corners as progressive enhancement.
corner-shape: superellipse(2)gives true Apple continuous-curvature corners in Chromium and degrades to normal rounded corners elsewhere. I rejected the JS polyfill: it masks the element, which clips the card shadows the design depends on. - Content-hash cache-busting. A build step hashes the CSS, the OG image, and the logos and stamps the hash onto their URLs. Changed files refetch instantly; unchanged ones cache hard. This is why nobody ever has to hard-refresh — and it's the fix for a real bug where a new CSS filter hit stale cached logos.
- Monochrome logos via CSS filter, not vectorized art. Forcing logos to one gray keeps the row cohesive on the dark background — and avoids re-drawing each mark, which is lossy and doesn't scale.
- Motion that never strands content. Scroll-reveal only hides-then-shows when JavaScript is present and reduced motion is off. No-JS and reduced-motion visitors get everything immediately — the common failure mode is content stuck invisible, and this design can't hit it.
Get it
Two ways in — clone the template repo on GitHub, or grab the zip:
Use the template on GitHub → Download the zip ↓
MIT licensed — the code is yours to use and change. The words and images you add stay yours; nothing personal of mine ships in the template.
Curious how I think about the AI plumbing underneath this? Read You down with MCP? or Build your own MCP.
