The portfolio is also a case study.

What was built

Seven pages, one system.

The artifact under study is the whole site you may have just walked through — every page below appears again in this case as evidence.

The problem

Deep work, narrow shelf.

Two strong case studies — both enterprise, both security-and-money, both under NDA. Left alone, that body of work files its author under “enterprise security designer.” The site’s first job: prove the method travels to any domain, inside a recruiter’s 30-second scan.

The newer problem: portfolios are increasingly compressed by AI before a human sees them. The brief became one site, honest at two depths — a cinematic layer that earns the person, a complete plain-text layer beneath carrying the same facts for anything that parses — because when a screener summarizes you before a human reads you, semantic HTML and structured data are how the facts survive the compression.

Creative direction

A moodboard before a single line of code.

The direction was committed before code: six colour values, two typefaces, and one communication rule — a recruiter scans before they read, so type carries the hierarchy and motion carries attention, never information. The visual references were cinematographers (Deakins, Fraser), chosen for restraint: darkness, one light source, nothing decorative.

The moodboard also specced a sound layer — cut before build: audio a visitor must mute is a cost wearing a craft costume. Every later decision answered to this document, and the constraints tested it immediately.

Constraints, and the way around each

Four constraints, four design responses.

• NDA on both flagship projects → no screenshots allowed. Workaround: living canvas illustrations that act out each problem’s shape — triage finding the critical alert, a tangle resolving into order. The constraint produced the site’s most distinctive section — and the approach was kept even where screenshots were permitted, because the shape of a problem reads faster than its interface.
• No engineering team → one designer, one AI. Workaround: treat the AI as the build crew and reserve the human entirely for direction — references, rejections, and final calls. In practice: the build never queued behind engineering availability, and ideas were tested the day they were proposed.
• Must run beautifully on any device → premium and lightweight defined as one requirement, never a tradeoff. Animation loops sleep offscreen, pixel density is capped, and every effect carries a quieter fallback: reduced motion, no WebGL, no JavaScript, print.
• No frameworks, no build step → each page is a single self-contained file. Hosting is trivial, first paint is fast, and nothing rots when a dependency does.

Within those walls, the work went through its own trials — nowhere harder than the section recruiters see first.

Iteration

Built four times. Shipped once.

Cards read as template. Big numbers failed the glance test — twice. A proof sentence demanded reading. What shipped: living illustrations that play on arrival, with the real numbers demoted to captions. Rebuilds that cheap demand a system for judging them — so I built one.

Directing the AI

First drafts are free. Judgment isn’t.

The loop ran at implementation speed: I set the target with a reference, the AI builds, a headless browser measures, I judge. First drafts were reliably competent-generic — catching that was my job. One frame of Blade Runner 2049 redirected the hero water better than any paragraph of adjectives.

Nothing was called fixed because it looked right — it had to survive measurement. The loop caught what mattered: an invented motive corrected to the truth, a chronology error in the story’s first draft, an ornament that implied the wrong career order.

Where the AI consistently failed, by name: it twice invented plausible-but-false biography; its copy drifted toward poster language until an outside standard — “the most capable people sound the most subdued” — recalibrated it; and two breakages passed every code check, caught only by screenshot. The counts tell the iteration story: four builds of one cybersecurity scene, three of the film beat, four approaches to one hover magnifier, five rounds on two sentences of contact copy. That volume would be unaffordable by hand — and unsafe without the review. That review had a price.

The hard part

Taste was the bottleneck.

With implementation nearly free, the scarce inputs were references, rejections, and truth. The discipline cut both ways: a twenty-year-old personal aphorism died the day it read as cheesy. What survived hardened into something reusable.

The design system

Six tokens in; a system grew out.

None of this was designed as a “system” up front. Six founding values grew to sixteen tokens; components built for one page were promoted the moment a second page needed them. The sheet below is the inventory.

Seven rules hold it together: everything expressive is made of light; premium and lightweight are one requirement; attractors fire before decisions; the fallback is the truth; numbers are captions; one horizontal line per surface; and the amber italic is spent only at climaxes. Beneath the components sit a handful of structural calls.

Decisions that mattered

Chosen, not defaulted.

• Custom code over Webflow, CMS, or frameworks. Each page is one self-contained file: first paint stays under control, hosting is trivial, and nothing breaks when a dependency or platform changes. The content is a handful of case studies and a life story — it changes rarely; a CMS would be infrastructure without a tenant.
• Scroll-driven narrative over click navigation. A recruiter’s attention is continuous and brief, not exploratory. One gesture they were already making carries the entire story; navigation exists for the return visit.
• Illustrations over screenshots. Forced by NDA, kept by choice — an animated drawing of the problem (triage finding the critical alert; a tangle resolving) communicates in two seconds what an interface screenshot makes the viewer decode.
• A plain-text layer as the canonical document. The storybook, the resume road, and the shader hero are enhancements over complete semantic HTML with structured data. One decision serves three readers: constrained humans, screen readers, and AI screeners all get the same facts.
• Numbers became captions. Evidence supports; it doesn’t attract. The illustrations earn the glance; the figures earn the trust.

What these cost: the storybook is desktop-only, so the site’s best artifact is invisible on phones; no CMS means every edit is hand-made HTML; self-contained pages duplicate shared components; and a scroll narrative taxes the skimmer — mitigated, never erased, by the fallback layer.

Takeaways

What this taught me about AI-assisted product development.

• Generation is abundant; judgment is scarce. Plan to say no more times than you ever have, and treat that as the job.
• References outperform prompts. One film frame redirected the hero water better than any paragraph of adjectives. The highest-bandwidth instruction is an image and “like this, but ours.”
• Verification scales better than intuition. A screenshot plus a number is the trust protocol; assertions are hypotheses.
• AI compresses implementation and expands review responsibility in equal measure. The hours saved building were reinvested in judging.
• Cheap iteration is what makes high standards affordable. Four rebuilds of one scene cost minutes each — which is precisely why none of the first three shipped.

Honest outcome

What holds, what’s open.

Verified: zero overflow, zero errors, fallbacks engaging exactly where designed, ambient motion measured in the thousands of changing pixels at rest. Open: not yet shipped — no recruiter data, and this page won’t pretend otherwise.

What AI made possible, in order of importance:

1. Effort moved from implementation to evaluationThe designer’s hours went where they compound.
2. A verification harness impractical to hand-buildScreenshots, pixel counts, and probes on every change.
3. Ideas tested the day they were conceivedThe gap between “what if” and “here it is, measured” collapsed to hours.
4. Four complete directions explored for one sectionInstead of committing to the first plausible one.

The resulting scale: seven pages, roughly forty components, the canvas scene engines behind them, a WebGL shader, a twenty-scene scroll film, and a hidden arcade game — built and rebuilt through repeated generate-measure-judge cycles (the counts cited earlier are from single components alone), in a timeframe where hand-building would have produced a fraction of it.

This site exists to demonstrate a workflow, not a website. The transferable part is that workflow: reference-driven direction, AI implementation, instrumented verification, human judgment as the gate. None of it is portfolio-specific. It is how I now build product — this site is its first shipped output, and Flow, the budgeting app, is the second.