# MOCKUPS.md
Master mockup document. High-fidelity SVG boards live beside this file (`M1…M6.svg`); this document specifies every required state, including those not economical to board. All measurements reference SPACING_SYSTEM tokens; colours reference COLOUR_SYSTEM tokens.

Boards:
- **M1** `M1-home-desktop-dark.svg` — homepage hero + proof strip + skills (dark, 1440)
- **M2** `M2-home-desktop-light.svg` — same region, light theme
- **M3** `M3-case-study-dark.svg` — JobTrack case-study page (dark, 1440)
- **M4** `M4-mobile-dark.svg` — mobile homepage + open nav overlay (390)
- **M5** `M5-header-states.svg` — navigation states, language switch, CV split button
- **M6** `M6-projects-experience-contact.svg` — homepage lower half (projects cards, timeline, contact band)

---

## 1. Homepage — hero + narrative flow (M1/M2)

```
┌────────────────────────────────────────────────────────────────────────┐
│ HEADER 72px: [CB●] Projects Experience About Contact │ EN|NO ☾ [CV ▾] │
├────────────────────────────────────────────────────────────────────────┤
│  (faint dot-grid + accent halo, top-left biased)                       │
│                                                                        │
│  mono-label: SYSTEMS DEVELOPER · TØNSBERG, NORWAY        ┌──────────┐  │
│  display:    Connor Babbington                           │ portrait │  │
│  h3-weight:  I design, build and run web systems.        │ hairline │  │
│  body-lg:    Eight-plus years delivering internal        │ frame,   │  │
│              software for UK local government — now      │ mono     │  │
│              building full-stack products in Norway.     │ caption  │  │
│  ── trace line ──┐___________ ● status: open to work     └──────────┘  │
│                                                                        │
│  chips: [Tønsberg, Norway] [Work permit ✓] [Remote/hybrid/on-site]     │
│         [English native · Norsk B1]                                    │
│  CTAs:  [■ View projects]  [□ Download CV · pdf]                       │
├────────────────────────────────────────────────────────────────────────┤
│ PROOF STRIP (4 tiles, surface-1, hairline): 8+ YRS · PUBLIC SECTOR ·   │
│ .NET/REACT/DOCKER · BASED IN NORWAY — mono labels, stat numerals       │
└────────────────────────────────────────────────────────────────────────┘
```
- Hero text column 7/12 cols; portrait 4/12, offset 1. Portrait: outdoor headshot, 4:5, radius 16, duotone in dark.
- Scroll behaviour: header compresses at 120px; sections reveal per A2.
- Hover states: CTAs per MICRO_INTERACTIONS buttons; portrait has no hover (non-interactive).

## 2. Skills section (M1 lower)

Three `surface-1` cards, 4/12 each, mono-labels `01 — DEVELOPMENT` / `02 — DEVOPS & INFRASTRUCTURE` / `03 — PRACTICES`; one context sentence (ink-muted) + chip rows. Card hover: border-strong. No proficiency bars.

## 3. Projects section — case-study cards (M6)

Two large cards (6/12 each): screenshot bleeding to top frame edge (browser-chrome mock), status chip overlaid top-right (`ACTIVE` accent / `IN DEVELOPMENT` amber), h3 title, 1-line problem statement, stack chips, ghost link `Read case study →`. Third slim full-width card for homelab: no screenshot; small topology glyph + one line. Hover per A3 (4px screenshot shift, border glow, arrow nudge).

## 4. Experience timeline (M6)

Left hairline spine with period dots. Featured item (System Developer, Warwickshire County Council, 2015–2023): expanded — role h4, employer + location mono-meta, 3 outcome bullets. Earlier roles: compact one-liners at 60% emphasis (`2017–2021 · Sales Representative · Royal Vapes` etc.). Education node at bottom. Timeline draws on entry (A8).

## 5. About section

7/12 text (3 short paragraphs per CONTENT_STRATEGY), 4/12 photo (same portrait, natural grade in light). Language chips repeated (`English — native` `Norsk — B1, aktiv utvikling`). Interests one mono-meta line, no icons.

## 6. Contact (M6 band + page)

Homepage band: `surface-2`, h2 "Looking for a systems developer in Norway?" / NO: "Ser dere etter en systemutvikler?", primary e-mail button (click-to-copy), secondary "Contact form →".
Contact page: 6/12 form (name/e-mail/message, labels above, per MICRO_INTERACTIONS form), 5/12 direct channels card: e-mail (copy), LinkedIn, git.cesnimda.uk, response-time note. Success state per A9.

## 7. Navigation states (M5)

Boards show: (a) default header, (b) scrolled/compressed with blur, (c) CV split-button open (EN/NO menu with file sizes), (d) language switch EN-active vs NO-active with sliding thumb, (e) focus-visible rings on nav item + toggle, (f) mobile header + full-screen overlay (nav stack, language segmented control, theme toggle, CV buttons, contact shortcuts).

## 8. Mobile layouts (M4)

390px reference. Order: slim header (56px: monogram · CV icon-button · burger) → mono-label + name (40px) → summary → chips (wrap, 2 rows) → CTAs stacked full-width → proof strip 2×2 tiles → skills cards stacked → project cards full-width (screenshot 16:10) → timeline (spine indented 16px) → about → contact band → footer. Touch targets ≥44px; no parallax; reveals opacity-only.

## 9. Dark + light (M1 vs M2)

Identical geometry; token swap only. Light: shadows-card active on cards, dot-grid at 5% instead of 8%, accent `#0E8C72`, portrait natural. Boards demonstrate both to prove parity.

## 10. Loading states

Specified in MOTION_GUIDELINES §4; visually: skeleton = `surface-2` rounded block, aspect-locked, mono caption `loading capture…` bottom-left, no shimmer sweep (shimmer reads as ad-tech; static + cross-fade is calmer). Form submit dots and language cross-fade per A7/A9.

## 11. Language switch UX (M5 detail)

- Segmented `EN | NO` control, header right cluster, thumb slide 160ms.
- Switching maps current page → same page other locale (URL strategy per IA §5); content cross-fade per A7; scroll ratio preserved.
- First-visit hint (browser prefers nb): dismissible one-line banner under header: `Denne siden finnes på norsk → [Bytt] [×]` — shown once, never auto-redirect.
- All chrome strings localise with content (nav labels, CV button, form labels, alt text, skip-link).

## 12. Case-study page (M3)

```
┌ header ────────────────────────────────────────────────────────────────┐
│ mono-label: CASE STUDY · PERSONAL PRODUCT                              │
│ h1: JobTrack  [ACTIVE ●]                                               │
│ body-lg: A job-application workspace covering the full journey         │
│          from application to follow-up.                                │
│ chips: .NET 9 · React · TypeScript · SQLite · FastAPI · Ollama ·       │
│        Docker    links: [Repository ↗]                                 │
├─ hero screenshot (browser frame, full-bleed to 1200) ─────────────────┤
├─ TL;DR box (surface-2, 3px accent left edge): What/Why/Stack/Role ────┤
│                                              ┌ mini-TOC (sticky) ──┐   │
│ ## Problem & context            (72ch)       │ Problem             │   │
│ ## Architecture                              │ Architecture ●      │   │
│    [diagram breakout 1200px]                 │ Decisions           │   │
│ ## Key decisions & trade-offs                │ Security            │   │
│    numbered blocks: choice/alt/why           │ Outcome             │   │
│ ## Security & production notes               │ Next                │   │
│ ## Screenshots (lightbox gallery)            └─────────────────────┘   │
│ ## What I'd improve next                                               │
├─ footer nav: ← InboxIntel | All projects ─────────────────────────────┤
```
Diagram style per COLOUR_SYSTEM §3.5: surface nodes, accent flow, amber external systems (Gmail API), mono labels.

## 13. Asset integration notes

- **Portraits:** outdoor headshot → hero/about; square crop → favicon-adjacent/OG fallback; suit photo → not used on site (kept for LinkedIn/CV).
- **JobTrack media plan** (from `website_details.md`): applications table, job-details dialog, Gmail import view, dashboard analytics — 4 captures + 1 architecture diagram + workflow diagram.
- **InboxIntel media plan:** dashboard grid, cleanup preview/confirm flow, architecture diagram (Clean Architecture layers), sync-worker sequence sketch.
- Screenshots need a capture pass at 2× on seeded demo data — **flagged as a Phase 3 prerequisite task** (no real personal job-hunt data on the public site; seed fictional companies).