How this site was built — brief to deployed, one hand

Ground rule: copy is drawn from your materials (verbatim
where they're authoritative). No invented metrics or
claims — if a fact isn't in the sources, Claude asks
rather than fabricates.

Briefs, transcripts, and testimonials go into a folder; an agent drafts the study; the rules keep it honest.

/** Soft character limits per editable field — guidance so
 *  copy doesn't clip in the layout (the accordion especially:
 *  panels are `overflow: clip` … `peak.playLabel` is
 *  `white-space: nowrap`; many tile/meta fields are
 *  width-bounded). */

Every editable field carries a character budget derived from its container — agent-written copy fits by contract, not by luck.

All values are taken from the decoded JSX exports
(artboard.pretty.jsx.txt in each dossier), not eyeballed
from screenshots.
…
The four artboards are four states of ONE page, not four
pages. Diffing the decoded JSX confirms it: the entire
shell … is byte-identical across all four boards except
for exactly two things.

599 lines for one template — geometry, tokens, and interaction ground truth, written so a builder (human or agent) can't drift.

--ground: #090b0b;    --ink: #ffffff;
--hairline: #2e2e2e;  --ink-muted: #9c9094;
--red: #ff003c;       --red-glow: rgba(255, 16, 70, 0.55);
--font-display: 'Season', 'Niveau Grotesk', …;
--font-mono: 'Mono45 Headline', ui-monospace, …;
--maxw: 1500px;  --pad-x: 40px;  --rail-h: 48px;

Thirty custom properties carry ground, ink, type, and rhythm through every deck — change one, and every page follows.

multipart/form-data and text/plain bodies are CORS-safelisted,
so a cross-origin POST fires no preflight and the write lands
server-side …
- prod builds → 404: no write surface ships.
- Sec-Fetch-Site must be `same-origin`: blocks drive-by CSRF.
- Host must be loopback: blocks DNS-rebinding, where a rebound
  attacker page is same-origin to itself but reaches us with a
  foreign Host.
- Custom header must be present: forces a preflight on any
  cross-origin attempt, which these routes never satisfy.

The inline CMS writes to disk in dev, so it defends like it ships: four layers, each against a named attack.

function navigateTo(pageId, projectKey) {
  document.querySelectorAll('.page')
    .forEach(p => p.classList.remove('active'));
  const target = document.getElementById('page-' + pageId);
  if (target) target.classList.add('active');

1,883 lines of vanilla HTML, CSS, and JS — no framework, no build step. The judgment predates the acceleration; AI raised the ceiling, not the floor.

const landing: Record<string, string> = {
  source: utm.utm_source || refHost || "direct",
  medium: utm.utm_medium || (refHost ? "referral" : "direct"),
  landing_path: window.location.pathname,
};
if (utm.utm_campaign) landing.campaign = utm.utm_campaign;
sessionStorage.setItem("mk_landing", JSON.stringify(landing));
track("landing", landing);

A LinkedIn arrival, a résumé-PDF arrival, and a tailored application link all report as themselves — once per session, no cookies.

/** One import for every custom analytics event in the app.
 *  Wrapped so that analytics being disabled or blocked can
 *  never throw into the UI, and so the sink (currently Vercel
 *  Web Analytics) can be swapped for PostHog/Clarity later
 *  without touching any caller. */
export function track(event: string, props?: Props) {
  try {
    vercelTrack(event, props);
  } catch { /* analytics unavailable — never break the page */ }
}

Engaged seconds count only while the tab is visible; clicks classify by delegation — project opens, résumé, outbound, email — with no per-component wiring.