01stack

Plain files, on Cloudflare Pages

Every page is plain HTML, CSS and JavaScript. There is no build step and no framework, so any browser can open the files straight from a folder. It is hosted on Cloudflare Pages, which serves it from a global network for free.

I chose this after losing the first version. The old site lived inside a sitebuilder plan, and when the host removed access, the site went with it. Plain files can move to any host in an afternoon. More on that in Notes.

02design system

An operating record

The look borrows from logs and dashboards: status lines, coordinates, version numbers, monospace labels. The idea is that my site should read like the systems I run, not like a brochure.

color

ground#12141C
panel#1A1D28
ink#E8E4D9
signal teal#3FA79A
amber#C98A3E
stone#8A8E9C

type

Newsreader · headings, editorialBuild what does not yet exist.
Work Sans · body, interfaceImprove what does not work.
IBM Plex Mono · labels, metricsscale / what proves valuable

two languages, everywhere

Section labels carry English and Spanish side by side, and dotted labels reveal their Spanish on hover or keyboard focus. The EN / ES switch in the menu translates the Home, About and Contact pages in full.

03the HD mark

Letters made of particles

The HD on the homepage is not an image. The script draws the letters once on a hidden canvas, samples which pixels are filled, and turns each sample into a small square that eases into place. Move your cursor across it and the squares get pushed away, then settle back.

The first version rendered as a scattered mess. The bug was a fractional canvas width: the browser reported something like 394.4 pixels, and the math that reads the pixel data assumed whole numbers, so most samples landed in the wrong place. Rounding the width fixed the sampling. At that narrow size, round dots still read as noise, so I switched to tightly packed squares, which rebuild clean letterforms.

If your system asks for reduced motion, the letters draw in place with no animation.

04small features

Details worth finding

  • Command menu. Press Ctrl K (or ⌘K on a Mac) on any page to jump anywhere, copy my email, or grab the resume.
  • Sourced numbers. Hover or tap any impact metric to see where it comes from and what it covers.
  • Print to résumé. Printing the Work page gives you a clean, light one-document résumé instead of a dark web page.
  • Status panel. The homepage shows what I am working on and when I last updated it.
  • Accessible by default. Keyboard focus is visible everywhere, small text meets WCAG AA contrast, and motion respects your system setting.
05AI in the build

Where AI fit in

I split the work across layers. ChatGPT is the thinking layer: strategy and pushback on decisions before I commit. Claude is the execution layer: the design system, the screens, and most of the code, working from my specs and decisions. I own the direction, the copy, every number, and the call on what ships.

The rule that made it work: nothing important lives only in a chat. Decisions, verified facts and the approved wording for every metric sit in my own documents, which is exactly why this site came back in days after the old host wiped it.

This is the same way I approach AI operations work generally: a layer that questions the plan, a layer that executes it, and a paper trail a person can audit.