CV Heap is a job platform built on one argument: a CV is a condensed summary of job tasks, and matching on keywords is the problem rather than the fix. The product starts from the work someone actually did.

I was brought in for phase one, the front page and the 404, as plain HTML and CSS that would drop into the client's existing documentation site without a toolchain.

The page is a case file on a desk. The navigation is the folder's tabs. Each section is a sheet of paper, turned by a fraction of a degree, because paper in a folder never lands square. A red pen strikes the words the product argues against, a highlighter keeps the ones it argues for, and the example application is marked up the way a keyword filter would mark it up.

The metaphor is not decoration. The marks carry the meaning: struck lines are del, kept words are mark, and the scorecard is a real table with row and column headers. The page says the same thing with colour removed, in high contrast mode, or with a screen reader running.

No framework and no build step. make copies src into dist, and that is the whole build.

WCAG 2.2 AA throughout.

The stylesheet had to be liftable into a Sphinx site on its own.

No JavaScript at all, until the client lifted that for one thing.

Halfway through, the client asked for a dark theme and opened the door to a switch. Three states: left alone the page follows the reader's system preference, and two overrides let them say otherwise.

All forty two colours were measured against the surface they actually land on rather than arrived at by inverting the light ones. Depth turns over too. A shadow is the absence of light, and on a dark desk there is none left to take away, so a lit top edge does the work instead.

The one script reads and writes that choice and nothing else. It runs in the head before first paint, so a reader who asked for dark never gets a white flash on the way in.

Every change that was meant to be invisible was proved invisible before it shipped.

113 runs of text checked for contrast in both themes, each against the background it actually sits on. Tightest: 4.51 in light and 4.56 in dark, against a floor of 4.50.

Full page pixel diffs before and after each refactor. Moving every colour and size onto design tokens moved zero of 17.5 million pixels.

30 keyboard focus stops, every one with a visible ring, none hidden behind the sticky folder header.

Widths from 320 to 2560, with scripting off, stylesheet off, print, reduced motion and high contrast mode.

A real iPhone, which found a defect no amount of desktop resizing could: turned sideways a phone is 932 wide and 430 tall, so it passed the width test for the desktop layout and failed the real one.

An earlier pass had the sheets pile up as you scrolled, each one pinned a step below the last. It was built, and it worked.

It was also only ever going to exist on a wide window. Below 72rem a sheet runs three screens long, and pinning one would have put its own last lines permanently out of reach. Most of this page is read on a phone. One page in everyone's hands beat one effect in a few, so the effect went.

Forty two colour tokens, each with its measured contrast ratio written beside it, mirrored one to one by a Figma collection carrying the same names in both modes. A README that explains why each decision was made rather than what the code does. The repository was transferred to the client with its full history intact.

Tools: HTML · CSS · Figma · Git