docs: establish approved Phase 1 design + Phase 2 spec as project foundation

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

docs/design/02-ux/CANONICAL_CONTENT.md

@@ -0,0 +1,57 @@
+# CANONICAL_CONTENT.md
+Master source of truth for all site + CV copy (English). Provided by Connor, July 2026. All Phase 2/3 content derives from this file; the Norwegian versions are written natively against these *facts*, not translated sentence-by-sentence.
+
+---
+
+## Identity & contact
+- **Name:** Connor Babbington
+- **E-mail:** connor.babbington@cesnimda.co.uk
+- **Phone:** +47 41 33 44 70
+- **Website:** cesnimda.co.uk
+- **LinkedIn:** via redirect `cesnimda.co.uk/Linkedin`
+- **Location:** Tønsberg, Norway — valid residence permit
+- **Languages:** English (native) · Norwegian A2/B1, actively developing
+- **Availability:** open to remote, hybrid, or on-site developer roles
+
+## Profile (canonical facts behind the About section)
+- Systems developer, eight years in UK local government (2015–2023).
+- Full-stack: backend, frontend, and server administration.
+- Analyses and plans user needs; programs and tests with modern languages/frameworks; designs robust, scalable systems.
+- Collaborates with developers, designers, project managers, and customers.
+- Strong experience: Azure DevOps (CI/CD), GitHub.
+- Works well independently and in teams; structured and open-ended tasks.
+
+> Site framing decision (approved direction): self-label is **"Systems Developer"** — the CV's "mid-level" qualifier is dropped everywhere (site *and* reworked CV); seniority is shown through evidence. "Eight years" stays because the apprenticeship was on-the-job development work.
+
+## Experience
+
+### Warwickshire County Council, UK — System Developer · 2015–2023
+- **2015–2017 was an apprenticeship** → progressed to full developer role. Site treatment: show this *as progression* on the timeline (`2015–2017 apprentice → 2017–2023 developer`) — it's an asset (grew into the role, retained 8 years), not something to bury.
+- Developed and maintained multiple full-stack applications: **C#, Python, Ruby on Rails, SQL, JavaScript**.
+- Delivered reliable, well-tested software; resolved stability issues.
+- Translated stakeholder requirements into solutions; adapted across languages/frameworks as projects changed.
+- Responsibilities: backend + frontend design/build on several projects; bug fixing for stability and performance; clean maintainable code with testing and documentation; collaborative problem-solving; guided team members on code/process best practices.
+- **Concrete anchor (confirmed):** worked on the highways/streetlight fault-reporting system used across the whole of Warwickshire (county-wide public-facing + internal use). Draft site bullet: *"Worked on the county-wide highways and streetlight fault-reporting system used across Warwickshire."* Exact user counts unknown — say "county-wide", never invent numbers.
+
+### 2023 → now (confirmed)
+- Self-directed development: JobTrack, InboxIntel, self-hosted infrastructure lab.
+- **Norskkurs** — ongoing Norwegian language study. Gets a timeline node (`2023– · Norskkurs + full-stack product development · Tønsberg`); it substantiates the "aktiv språkutvikling" claim and fills the employment gap honestly.
+
+### Side roles (confirmed: part-time alongside the council role — vape shop weekend days, bar evenings/weekend evenings)
+- Royal Vapes, UK — Sales Representative · 2017–2021 (customer service, client issues, communications, payments)
+- The Hodcarrier, UK — Bartender · 2016–2018 (operations, multitasking)
+- Nuffield Health, UK — Receptionist · 2014–2015 (front of house, organisation)
+
+Site treatment per CONTENT_STRATEGY: compact one-liners, de-emphasised, grouped under "Earlier & alongside: customer-facing roles that shaped how I communicate."
+
+## Education
+- Warwickshire College, UK · 2012–2015 — **Extended Diploma NVQ Level 3 in ICT** (programming, systems administration, IT support).
+
+## Interests
+PC and board games (strategic thinking, problem solving), cooking, learning new skills. Site treatment: one plain line in About; no icons, no over-explanation.
+
+## Open items — all resolved July 2026
+1. ~~Side roles part-time?~~ Confirmed: weekend days (shop) and evenings/weekend evenings (bar), alongside the council role.
+2. ~~Concrete Warwickshire detail?~~ Confirmed: county-wide highways/streetlight fault-reporting system (see Experience above).
+3. ~~2023→now?~~ Confirmed: self-development + norskkurs (see section above).
+4. "Systems Developer, 8+ years" positioning: **approved by Connor.**

docs/design/02-ux/CONTENT_STRATEGY.md

@@ -0,0 +1,82 @@
+# CONTENT_STRATEGY.md
+
+## 1. Voice & tone
+
+| Attribute | Do | Don't |
+|---|---|---|
+| **Plain-spoken** | "I build and run web systems." | "Passionate technologist crafting digital experiences." |
+| **Evidence-led** | "Replaced spreadsheet-driven reporting workflows for a UK county council." | "Extensive experience with stakeholders." |
+| **Understated confidence** (Norwegian-market calibrated) | "Eight years building and maintaining production systems." | "Senior rockstar engineer." |
+| **Honest** | "SQLite was the right call for a single-user app; I'd move to Postgres for multi-tenant." | Hiding limitations. |
+
+**Seniority framing decision:** the site never self-labels "senior". Role line = **"Systems Developer"** (EN) / **"Systemutvikler"** (NO), qualified by "8+ years". Seniority is demonstrated through trade-off writing, security notes, and production thinking. This is honest against the CV ("mid-level, eight years"), safe in Norwegian culture, and *more* convincing to P2/P3 than a claimed title.
+
+## 2. Hero copy (approved-draft level)
+
+**EN**
+> **Connor Babbington**
+> Systems Developer — .NET, full-stack & infrastructure
+> I design, build and run web systems: eight-plus years delivering internal software for UK local government, now building full-stack products in Norway.
+> Chips: `Tønsberg, Norway` `Work permit ✓` `Open to remote / hybrid / on-site` `English native · Norsk B1`
+> CTAs: **[View projects]** **[Download CV]**
+
+**NO (written natively, not translated)**
+> **Connor Babbington**
+> Systemutvikler — .NET, fullstack og infrastruktur
+> Jeg utvikler og drifter websystemer. Åtte års erfaring med fagsystemer i britisk offentlig sektor — nå bygger jeg fullstack-løsninger fra Tønsberg.
+> Chips: `Bosatt i Tønsberg` `Gyldig oppholdstillatelse` `Åpen for remote / hybrid / oppmøte` `Engelsk morsmål · Norsk B1`
+> CTAs: **[Se prosjekter]** **[Last ned CV]**
+
+## 3. Section content rules
+
+- **Skills:** grouped chips + one context line per group. Never percentage bars, never star ratings. Groups: *Development* (C#, .NET, Python, JavaScript/TypeScript, React, SQL) · *DevOps & Infrastructure* (Docker, Linux, CI/CD, Azure DevOps, nginx/reverse proxies, monitoring, self-hosting) · *Practices* (testing, security hardening, OAuth2 integrations, stakeholder communication, production support). Each chip must be defensible in an interview.
+- **Experience:** the 2015–2023 Warwickshire role gets 3–4 highlight bullets (outcomes, not duties), with the 2015–2017 apprenticeship shown as *progression* on the timeline (apprentice → developer — a retention/growth signal, not a footnote). Non-dev roles (sales, bartender, receptionist — held alongside/before the council role) collapse into one line — "Earlier & alongside: customer-facing roles that shaped how I communicate" — present for timeline honesty, de-emphasised visually. NO version frames council work as "fagsystemer for lokalforvaltning". Canonical facts: see CANONICAL_CONTENT.md.
+- **About:** 3 short paragraphs — (1) how I work, (2) the homelab/personal-projects habit as evidence of currency, (3) life in Norway + language journey + interests (games → strategic thinking framing kept light). Photo: the outdoor headshot (warm, approachable); the suit photo reserved for CV/LinkedIn.
+
+## 4. Case-study content sources & angles
+
+### JobTrack (`/projects/jobtrack`)
+- **Source:** `D:\Job tracker\website_details.md` (already portfolio-shaped — reuse its headline, features, use cases) + README (stack: React, ASP.NET Core (.NET 9), SQLite, FastAPI summarizer, Ollama, Docker, PWA share-target).
+- **Angle:** *product thinking + integration depth.* Story: "I had a real problem (job hunting), built a real tool, then hardened it like production software."
+- **Decision candidates:** SQLite vs Postgres for single-user; local AI (Ollama) vs cloud API (privacy + cost); PWA share-target vs native app; no offline cache by design (deploy freshness) — this one is *gold*: a deliberate anti-feature with reasoning.
+- **Security notes:** Google ID-token auth, ownership checks, secure file uploads.
+
+### InboxIntel (`/projects/inboxintel`)
+- **Source:** repo README + docs/ARCHITECTURE.md.
+- **Angle:** *architecture discipline.* Story: "Clean Architecture in practice: four-layer .NET solution, background sync worker, safe-by-design destructive operations."
+- **Decision candidates:** Clean Architecture layering & dependency rule; encrypted-at-rest OAuth refresh tokens (Data Protection API); preview-then-confirm for all destructive cleanup; advisory-only AI layer; Polly retry/backoff against Gmail API.
+- **Honesty note:** README calls it a scaffold with marked extension points — the case study says "in active development" with a roadmap, and status chip `In development`. Never overclaim; P4 will probe.
+
+### Homelab (`/projects/homelab`) — capability page, lighter template
+- Ubuntu + Docker services, reverse proxy, auth, monitoring, self-hosted Gitea (git.cesnimda.uk — itself proof), backups. Angle: *operations competence* — "I don't just deploy; I keep things running." Include a small topology diagram.
+
+### The site itself (footer meta-link)
+- One short page/footnote: performance budget, accessibility choices, bilingual architecture. Written *after* implementation (Phase 3 content); designed now as a P2 hook.
+
+## 5. Localisation strategy (content level)
+
+1. **Write EN and NO as siblings, not source→target.** NO sentences should be shorter and plainer; Bokmål tolerates directness English pads out.
+2. **Equivalence, not identity:** the NO About may spend more words on the Norway/language story; the EN version more on UK career detail. Facts identical; emphasis local.
+3. **Glossary (fixed term pairs):** Systems Developer/Systemutvikler · case study/prosjektgjennomgang · public sector/offentlig sektor · work permit/oppholdstillatelse · experience/erfaring · skills/kompetanse · self-hosted/egendriftet. Keep product names (JobTrack, InboxIntel) and technology names untranslated.
+4. **Quality gate:** a native/fluent Bokmål speaker reviews all NO copy before launch (flagged as an explicit pre-launch task — the current CV's Norwegian has minor tells, e.g. "Ytret fremragende kundeservice" should be "Ytet…"; the site must be cleaner than the CV).
+5. **Tone parity:** understated in both; the NO version must never read as marketing-translated.
+
+## 6. CV improvement recommendations (assets provided → must improve)
+
+The current PDFs are two-column, heavily letter-spaced graphical CVs. Problems: (a) letter-spaced headings ("E X P E R I E N C E") and two-column order break ATS parsing badly — text extraction confirms scrambled reading order; (b) content undersells projects; (c) "mid-level" self-label undercuts an 8-year record.
+
+**Recommendations (content design, no implementation):**
+1. Produce a **single-column, ATS-safe layout**: standard headings (Experience, Education, Skills, Projects), no letter-spacing tricks, real text, consistent date formats.
+2. Replace "Mid-level system developer" with **"Systems developer with eight years' experience"** in both languages.
+3. Add a **Projects section** (JobTrack, InboxIntel, homelab — 2 lines each with stack) — currently the CV omits his strongest recent evidence entirely.
+4. Split the 2015–2023 role into outcome bullets mirroring site copy (single source of truth with the site content model).
+5. Fix Norwegian errors ("Ytret" → "Ytet", "holdt baren oppdatert på lager" → "holdt baren velfylt"); native review pass.
+6. Add the website URL prominently; site and CV cross-promote.
+7. Keep a designed "pretty" variant for humans if desired, but the *download default* is the ATS-safe version. Filenames: `Connor-Babbington-CV-EN.pdf` / `Connor-Babbington-CV-NO.pdf`.
+
+## 7. SEO content (conceptual)
+
+- Title patterns: `Connor Babbington — Systems Developer (.NET, React) · Tønsberg, Norway` / `Connor Babbington — Systemutvikler (.NET, React) · Tønsberg`. Case studies: `JobTrack — case study · Connor Babbington`.
+- Meta descriptions handwritten per page per language (≤ 155 chars), answering "who/what/where".
+- Structured data (conceptual): `Person` on home (name, jobTitle, address locality, sameAs → LinkedIn/Gitea), `SoftwareSourceCode`/`CreativeWork` per case study.
+- OpenGraph: per-language OG images (name + role line + accent motif; generated per design system).

docs/design/02-ux/INFORMATION_ARCHITECTURE.md

@@ -0,0 +1,91 @@
+# INFORMATION_ARCHITECTURE.md
+
+## 1. Site map
+
+```
+/                        Home (EN default)
+/no                      Hjem (Bokmål)
+│
+├── /projects            Projects index (teaser cards)          /no/prosjekter
+│   ├── /projects/jobtrack        Case study: JobTrack          /no/prosjekter/jobtrack
+│   ├── /projects/inboxintel      Case study: InboxIntel        /no/prosjekter/inboxintel
+│   └── /projects/homelab         Capability page: Self-hosted  /no/prosjekter/hjemmelab
+│                                  infrastructure lab
+├── /experience          Experience & timeline                  /no/erfaring
+├── /about               About + photo + languages + interests  /no/om-meg
+├── /contact             Contact (form + direct channels)       /no/kontakt
+└── /cv                  CV hub (EN/NO download, web-readable   /no/cv
+                          version, ATS note)
+404                       Styled, bilingual, links home
+```
+
+**Depth rule:** nothing is more than 2 levels deep. Home teases everything; dedicated pages carry depth. This replaces the current one-pager because case studies need URLs of their own (shareable by recruiters into ATS/Slack, individually indexable per language).
+
+**Home remains a narrative one-page scroll** (hero → proof → skills → featured projects → experience summary → about teaser → contact CTA) so the P1 fast lane never requires navigation. Deep pages serve P2/P4.
+
+## 2. Navigation model
+
+**Header (persistent, all pages):**
+```
+[CB monogram]   Projects   Experience   About   Contact   |   [EN/NO]  [☾/☀]  [Download CV ▾]
+```
+- Monogram → home. 4 nav items max — recruiters don't explore menus.
+- `Download CV ▾` is a split-button: primary action downloads the CV matching current locale; the chevron reveals the other language. Persistent = criterion "CV in ≤1 interaction from any scroll position".
+- Header is sticky, shrinks on scroll (see SCROLL_EXPERIENCE.md); backdrop blurs over content.
+- Mobile: monogram + CV button + hamburger (full-screen overlay panel, large tap targets, language + theme controls inside the panel top).
+
+**Footer (all pages):** e-mail, LinkedIn, git.cesnimda.uk, CV both languages, language switch repeat, "Built by me — [how this site works]" link (small meta-page or case-study footnote; a deliberate P2 hook).
+
+**Local navigation inside case studies:** right-side "On this page" mini-TOC (desktop ≥1200px only): Problem · Architecture · Decisions · Security · Outcome · Next.
+
+## 3. Homepage section order & rationale
+
+| # | Section | Serves | First-fact placement |
+|---|---|---|---|
+| 1 | **Hero** — name, role line, 2-line summary, location/permit/availability chips, CTAs (View projects / Download CV), portrait | P1 P3 | Everything from RECRUITER §2.1 |
+| 2 | **Proof strip** — 4 compact stat/fact tiles: `8+ yrs experience` · `UK public sector` · `.NET / React / Docker` · `Based in Tønsberg, NO` | P1 | Reinforces scan pass |
+| 3 | **Skills matrix** — 3 columns (Development / DevOps & Infrastructure / Practices), grouped chips with context lines, no percentage bars | P1 P2 | Keyword match |
+| 4 | **Featured projects** — 2 large case-study cards (JobTrack, InboxIntel) + 1 slim homelab card; each: screenshot, 1-line problem, stack chips, "Read case study →" | P2 P4 | Deep-lane entry |
+| 5 | **Experience** — compact vertical timeline (System Developer 2015–2023 emphasised; earlier roles collapsed one-liners) | P1 P3 | Employment verification |
+| 6 | **About teaser** — photo, 3 sentences, language levels, "More about me →" | P3 | Human trust |
+| 7 | **Contact CTA band** — "Looking for a systems developer in Norway?" + e-mail button + form link | all | Conversion |
+
+## 4. Case study page template (both projects share it)
+
+```
+1. Header: project mark + name, one-line value prop, status chip (Active / In development),
+   stack chips, links (live demo if applicable · repository)
+2. Hero screenshot (framed browser mock, themed)
+3. TL;DR box — 4 bullets: What / Why / Stack / My role   ← the only part P1 reads
+4. Problem & context
+5. Architecture — diagram first, then short prose (frontend / API / data / workers / integrations)
+6. Key decisions & trade-offs — 3–5 numbered decisions, each: choice, alternative, why
+7. Security & production notes — auth, secrets, encryption-at-rest, backups, CI
+8. Screenshots gallery — 3–5 annotated captures
+9. What I'd improve next — honest, specific
+10. Footer nav: ← other project | All projects
+```
+
+Content per project sourced from `website_details.md` (JobTrack) and InboxIntel README/docs — see CONTENT_STRATEGY.md §4.
+
+## 5. Bilingual architecture (conceptual)
+
+- **URL strategy:** path-prefix locales. English at root (`/projects/jobtrack`), Norwegian under `/no/` with **localised slugs** (`/no/prosjekter/jobtrack`). Rationale: root-EN keeps existing inbound links and international reach; `/no/` prefix is the conventional, SEO-clean pattern; localised slugs signal genuine Norwegian content.
+- **Language switch behaviour:** switches to the *same page* in the other language (per-page mapping table), never to the other homepage. Preference remembered for return visits; first visit may show a one-time, dismissible "Denne siden finnes på norsk" hint if the browser prefers Norwegian — never an auto-redirect (recruiters share links across languages; links must stay stable).
+- **Parity rule:** every page exists in both languages; content is *equivalent, not identical* (CONTENT_STRATEGY §5). If a page ever ships EN-first, the NO version shows a short native-Norwegian summary + "full versjon på engelsk" link — never machine output, never a broken switch.
+- **SEO (conceptual):** `hreflang` pairs on every page + `x-default` → EN; per-language titles/descriptions/OpenGraph; per-language sitemap entries; canonical per locale (no cross-language canonicals — the versions are alternates, not duplicates).
+
+## 6. Content model (design-level, informs Phase 2 data model)
+
+```
+Profile        name, roleLine ×2 lang, summary ×2, chips (location, permit,
+               availability, languages), photo variants, links
+SkillGroup     title ×2, ordered skills[] {name, contextLine ×2 (optional)}
+Project        slug ×2, name, valueProp ×2, status, stack[], links[],
+               tldr ×2, sections[] ×2 (problem/architecture/decisions/
+               security/next), media[] {image, alt ×2, caption ×2}, diagram
+ExperienceItem employer, role ×2, period, location, summary ×2,
+               highlights[] ×2, emphasis (featured | compact)
+Page meta      title ×2, description ×2, ogImage per lang
+```
+Every user-visible string exists per-language by construction — this is the "avoid duplication issues" answer: one structural source, two content channels, no forked page trees.

docs/design/02-ux/USER_JOURNEYS.md

@@ -0,0 +1,52 @@
+# USER_JOURNEYS.md
+Five journeys validated against the IA. Format: step → what they see → design element that makes it succeed.
+
+---
+
+## J1 · Recruiter Silje — LinkedIn → CV in ATS (target: < 60 s)
+1. Clicks site link on LinkedIn (mobile). → Hero: "Connor Babbington — Systems Developer · .NET / React / Docker · Tønsberg, Norway · Open to work." Portrait matches LinkedIn photo. *(Identity confirmed in ~3 s.)*
+2. Thumb-scrolls once. → Proof strip chips: 8+ yrs · UK public sector · work permit ✓ · EN native/NO B1. *(All screening objections cleared without reading prose.)*
+3. Scrolls skills matrix. → Keyword match against job spec: C#, .NET, SQL, React, Docker, CI/CD. *(Chips, not bars — parseable at a glance.)*
+4. Taps persistent **Download CV** in header. → Gets `Connor-Babbington-CV-EN.pdf` (locale-matched). *(Split-button defaults correctly; no hunting.)*
+5. Done — candidate shortlisted. **Exit quality: converted without ever leaving the fast lane.**
+
+## J2 · Eng manager Martin — shortlist e-mail → interview recommendation (target: ≤ 7 min)
+1. Opens link on desktop, dark IDE habits → site respects `prefers-color-scheme`, loads instantly. *(First silent evidence.)*
+2. Skims hero, ignores chips, clicks **Projects** in nav. → Two case-study cards with real screenshots + stack chips. Picks InboxIntel (Gmail/OAuth catches his eye).
+3. Case study: reads TL;DR box, jumps via mini-TOC to **Architecture**. → Clean-architecture diagram: React SPA → ASP.NET API → PostgreSQL, background sync worker, Gmail API, token encryption. *(Diagram before prose — his reading order.)*
+4. Reads **Decisions & trade-offs** ("why a hosted worker instead of a queue", "why advisory-only AI"). → Judgement demonstrated, not claimed.
+5. Reads **Security & production notes** (encrypted refresh tokens, confirmed-flag destructive ops, integration tests asserting authz). → *This* is the interview trigger for a production-minded manager.
+6. Opens dev tools out of habit → semantic HTML, no framework soup, fast. Checks the footer "how this site works" link, smirks approvingly.
+7. Replies to recruiter: "Yes, bring him in — ask about the sync worker." **Exit quality: P4 (interviewer prep) journey pre-seeded.**
+
+## J3 · CTO Anne (Norwegian) — application → forwarded to colleague (target: ≤ 5 min)
+1. Opens link from application e-mail. Browser prefers `nb-NO` → dismissible hint: "Denne siden finnes på norsk →". Clicks it. → `/no` with natively-written Bokmål. *(Effort signal received before any content.)*
+2. Hero: "Systemutvikler · åtte års erfaring fra britisk offentlig sektor · bosatt i Tønsberg." *(Public-sector frame + local residence = risk questions answered.)*
+3. Reads **Erfaring**: Warwickshire County Council role described in kommune-relatable terms (saksbehandlingssystemer, rapportering, drift). 
+4. Reads **Om meg**: photo, plain-spoken 3 paragraphs, "norsk B1, i aktiv utvikling", interests. *(Understated tone; janteloven-compatible.)*
+5. Copies URL of `/no/prosjekter/jobtrack` into e-mail to her senior dev. *(Per-language, per-page URLs make forwarding work.)*
+**Exit quality: converted in Norwegian end-to-end; never saw English.**
+
+## J4 · Engineer Priya — interview prep deep-read (target: 10+ min, accuracy critical)
+1. Arrives directly on `/projects/jobtrack` (link from Martin). Reads whole case study top-to-bottom.
+2. Mini-TOC lets her jump back to Architecture while reading Decisions. Screenshots are annotated so she can reference specific UI ("the Gmail import view").
+3. **What I'd improve next** gives her interview questions the candidate is *prepared for*. 
+**Design requirement surfaced: every claim in case studies must be true and demoable.**
+
+## J5 · Return visitor / language edge cases
+- **Language switch mid-page:** Anne's colleague (English-speaking) receives the `/no/...` link → header `EN` switch → lands on `/projects/jobtrack`, same scroll context (same page mapping, position preserved where feasible).
+- **Theme:** system default on first visit; manual toggle persists; no flash of wrong theme on load (Phase 2 must solve this; Phase 1 flags it as a perceived-quality requirement).
+- **404:** mistyped shared link → bilingual 404 with links to both homepages and projects index. Never a dead end for a recruiter.
+- **Slow connection (mobile, train to Oslo):** text renders first; screenshots lazy-load below fold with fixed aspect-ratio placeholders (no layout shift — see MOTION_GUIDELINES loading states).
+
+---
+
+## Journey-derived requirements checklist
+- [x] Locale-matched CV default with one-tap access anywhere (J1)
+- [x] Architecture diagram ≤ 2 clicks from entry (J2)
+- [x] Security/testing content in every case study (J2)
+- [x] Native Bokmål, public-sector framing (J3)
+- [x] Stable per-language deep links; switch maps page↔page (J3, J5)
+- [x] Honest, demoable case-study claims (J4)
+- [x] No auto-redirect on language; hint pattern only (J3, J5)
+- [x] Zero layout shift on image load (J5)