cesnimda
117 lines
9.5 KiB
Markdown
117 lines
9.5 KiB
Markdown
# 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).
|