Colophon — how this was built

This page exists because the working method is part of what the artifact demonstrates, not just the content.

The trigger

A mobile bank built on a hardware root of trust — a private key in the phone’s secure enclave, gated by biometrics, signing a hash into every request — is adding web banking. The browser gives none of that for free. This portal works out what the web security layer has to be to hold the same bar for UK/EU banking, and teaches every concept it touches along the way. That real problem is the spine everything else hangs on; it isn’t a generic security glossary that happened to pick a banking example.

Atlas-first

Before any page existed, the concept glossary did: ~95 concepts, grouped by the eight capabilities (C1–C8) the domain decomposes into, each marked for whether it earns a full deep-dive page (★), an interactive demo (▶), or is a regulatory touchpoint (⚑). Writing the atlas first forced the scope decision up front — which concepts get full treatment and which stay one-line entries — rather than discovering the shape of the project page by page. The Atlas and Capability Map are still the two pages everything else links back into.

The phasing

Three phases, each a complete, working slice rather than a partial pass at everything:

• Phase 1 — the spine. Portal scaffold, deploy pipeline, and the FAPI 2.0 / DPoP core: enough to prove the whole pattern (atlas → deep-dive → live demo → deploy) end to end before scaling breadth.
• Phase 2 — breadth. The browser-side threat cluster (clickjacking, CSRF, XSS, CSP, SRI), the front-door auth concepts (OAuth/OIDC, WebAuthn/passkeys), and the Standards & Compliance thread.
• Phase 3 — the risk layer, advanced demos, and publish. The C6–C8 cluster (device intelligence, behavioral biometrics, RAT/malware, adaptive authentication), the two demos that make C2 tangible — a real non-extractable WebCrypto key and a real, verifiable, tamper-detecting DPoP proof — and the visual/publishing pass that makes this a shareable artifact rather than a working draft.

Each phase kept the one before it untouched by contract: new concept pages are new files plus a _meta.js entry; new demos are new, self-contained components with no required props; the only edits ever made to an already-shipped page were turning Atlas markers into live links as the pages they pointed to landed. That discipline is why three phases of work compose into one coherent site instead of three overlapping drafts.

Tier-2 interactivity, deliberately bounded

Every demo runs entirely client-side — JWT decoding, PKCE hashing, a live DPoP proof signed with a non-extractable WebCrypto key, a CSP policy parser — and nothing is ever sent anywhere. That’s a deliberate scope line: this portal teaches the mechanism through a real, working browser API call, not a full attack/defense sandbox. For hands-on exploitation labs, it links out to PortSwigger’s Web Security Academy rather than rebuilding one.

Tools

• Nextra 3 (Next.js + MDX) for the docs chrome — sidebar, search, TOC, dark mode — with a custom full-width hero and brand layer on top so it reads as a designed portal rather than a stock docs template.
• Static export, served by Caddy on a VM (matched to the existing deploy convention on that box rather than the nginx+certbot plan originally assumed — see DECISIONS.md D7 for why that changed mid-build).
• Claude Code, working from a knowledge base and phase specs, running installs/builds/deploys autonomously and iterating on real build failures — a missing custom _app.jsx, an unpinned typescript transitive dependency breaking the twoslash code-highlighter, a hand-crafted sample JWT with invalid base64url — rather than a hand-tuned demo script.

What this is not

Not a product, not an eval harness, and not a claim of completeness — the Atlas still lists concepts beyond what’s shipped, left as an incremental long tail rather than a blocking scope. It’s a learning artifact: built to understand the web-auth security stack well enough to explain it to a client, by building the explanation rather than reading one.