From e6f416410aa8195557a6170f51a98d449d2970ca Mon Sep 17 00:00:00 2001 From: A Charlwood Date: Mon, 9 Feb 2026 11:09:04 +0000 Subject: [PATCH] Mark Task 7 complete, update progress log Co-Authored-By: Claude Opus 4.6 --- IMPLEMENTATION_PLAN.md | 2 +- progress.txt | 12 ++++++++++++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/IMPLEMENTATION_PLAN.md b/IMPLEMENTATION_PLAN.md index fc72d3a..09ca626 100644 --- a/IMPLEMENTATION_PLAN.md +++ b/IMPLEMENTATION_PLAN.md @@ -153,7 +153,7 @@ **Scroll-triggered animation:** Use IntersectionObserver on the skills section. When it enters the viewport (threshold 0.15), animate each skill gauge's `stroke-dashoffset` to its target value. Stagger each gauge by `100ms` (first gauge starts immediately, second at 100ms, third at 200ms, etc.). -- [ ] **Task 7: Build experience section with timeline and ECG decoration** +- [x] **Task 7: Build experience section with timeline and ECG decoration** Experience section (`#experience`). Section heading "Experience" in `font-size: 24px; font-weight: 700; color: var(--heading);`. diff --git a/progress.txt b/progress.txt index 01d853b..9903602 100644 --- a/progress.txt +++ b/progress.txt @@ -89,3 +89,15 @@ - 18 skills total: 8 Technical (teal), 6 Clinical (coral), 4 Strategic (teal) — all with correct percentages - IntersectionObserver-based scroll animation with 100ms stagger is in place via `initSkillGauges()` - Learnings: SVG `width`/`height` attributes are presentation attributes; CSS can override them when a `viewBox` is set + +### Iteration 7 — Task 7: Build experience section with timeline and ECG decoration +- Added complete experience section with 5 roles in a vertical timeline layout +- Timeline has vertical line at 20% from left with dots (`.current` class fills dot with teal for active roles) +- Decorative ECG waveform SVG (200x30, PQRST shape) beside section heading at 30% opacity +- 5 timeline cards with role title, organisation (teal), date pill, and bullet points +- Cards have hover effect: scale(1.01), shadow-md elevation, teal left border appears +- Responsive 768px: timeline line and dots hidden, entries become full-width stacked +- Responsive 480px: reduced card padding (16px), smaller ECG decoration (120px via CSS width) +- All CV content verified accurate: correct titles, orgs, dates, key numbers (£14.6M, 14,000, £2.6M, 70%, 200+, £220M, £1M+, 3,000+) +- HTML tag balance verified: all section/div/ul/li/h3 tags matched correctly +- No new codebase pattern learnings — timeline pattern straightforward with existing conventions