Performance Lab BUILD GUIDE ← Dashboard
Document · How this site was built

One prompt, zero frameworks, all signal.

This dashboard was generated by Claude Code — Anthropic's agentic coding tool — from a single prompt and one JSON file containing the full 19-week training program. No templates, no page builders, no frameworks.

01The stack

Authoring Claude Code, single promptThe coach's plan (plan.json) went in; this site came out. Human review, machine execution.
Markup Static HTML — two pagesThe dashboard and this guide. Semantic elements, ARIA on interactive controls.
Styling Hand-written CSS, ~600 linesCustom properties for the design tokens. No preprocessor, no utility framework.
Logic Vanilla JavaScriptWeek computation, countdown, timeline, SVG charts — no libraries, no dependencies.
Data Training plan embedded as a JS objectEvery set, rep and load on the dashboard comes verbatim from the coach's plan.json v2.0.
Charts Inline SVG, generated at runtime5K progression and taper volume — drawn from data, no chart library.
State localStorageCompleted weeks, 5K times and notes never leave this device. No accounts, no server, no tracking.
Build step NoneWhat you read in the source is what ships. View-source friendly by design.
Hosting Cloudflare PagesStatic files on a global CDN — fast everywhere, effectively free to run.

02How it works

  1. The plan is the database. The 19-week program — 4 phases, weekly schedules, 8 race stations, HR zones, the v2.0 exercise changelog — lives as one structured object inside the page. One source of truth.
  2. The current week computes itself. Week 1 starts Monday 2026-07-13. The dashboard counts days from that anchor, divides by seven, and clamps to weeks 1–19 — so it always opens on today's training reality.
  3. Phase 4 is resolved per week. Taper weeks carry per-week variants (weeks 16–17, 18, and race week 19). The renderer matches the selected week against those ranges and shows the exact prescription — including the 0 / 20 / 40 / 80% volume cuts.
  4. Your logs stay yours. Marking a week complete, logging a 5K, writing notes — all of it writes to the browser's local storage and re-renders the charts instantly. Clearing browser data resets it.

03Design notes

The aesthetic is sports-science, not hype — the internal tooling of a pro team rather than a landing page. Warm dark neutrals, hairline rules, and a single amber accent reserved for live data: the countdown, the current week, the target line.

Type is Inter for reading and IBM Plex Mono for anything measured — times, loads, distances, labels — with tabular numerals throughout so columns of data align. The four training phases each carry one muted identity color, used only where it encodes information.

04Why it's built this way

A training dashboard opened every day for 19 weeks has one job: load instantly and tell the truth. Static files have no backend to fail during race week. No framework means no dependency ever breaks it. And because the entire site is plain HTML, CSS and JavaScript, it can be versioned, audited and rebuilt — the same philosophy as the training plan itself, which ships as v2.0 with a changelog.

← Back to the dashboard