ResumeSite/docs/design/05-mockups/MOCKUPS.md

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).