diff --git a/Ralph/IMPLEMENTATION_PLAN.md b/Ralph/IMPLEMENTATION_PLAN.md index 86fc19c..f52d0ff 100644 --- a/Ralph/IMPLEMENTATION_PLAN.md +++ b/Ralph/IMPLEMENTATION_PLAN.md @@ -110,7 +110,7 @@ src/ Create `components/Skills.tsx`. Three skill categories: Technical (8 skills, teal), Clinical (6 skills, coral), Strategic (4 skills, teal). Each skill has circular SVG progress gauge using calculated stroke-dashoffset. Scroll-triggered animation: gauges fill when section enters viewport, staggered by 100ms. Port all 18 skills with correct percentages from concept.html. -- [ ] **Task 8: Build Experience section with timeline** +- [x] **Task 8: Build Experience section with timeline** Create `components/Experience.tsx`. Vertical timeline with 5 roles: Interim Head (May-Nov 2025), Deputy Head (Jul 2024-Present), High-Cost Drugs (May 2022-Jul 2024), Pharmacy Manager (Nov 2017-May 2022), Duty Pharmacy Manager (Aug 2016-Nov 2017). Decorative ECG waveform SVG beside heading. Timeline dot filled for current roles. Cards with hover effect (scale, shadow, left border). Responsive: hide timeline line on mobile, stack cards. diff --git a/Ralph/progress.txt b/Ralph/progress.txt index b8afa13..d6645ea 100644 --- a/Ralph/progress.txt +++ b/Ralph/progress.txt @@ -152,3 +152,25 @@ - Framer Motion's delay prop uses seconds, not milliseconds - Used `dangerouslySetInnerHTML` for colored spans within boot lines (matches concept.html structure) - CSS classes for blink/seed-pulse animations already existed in index.css from Task 1 + +### Iteration 7 — Task 8: Build Experience section with timeline +- **Completed**: Task 8 - Build Experience section with timeline +- **Files created**: + - `src/components/Experience.tsx` - Timeline component with 5 roles and ECG decoration +- **Files modified**: + - `src/App.tsx` - Replaced Experience placeholder with Experience component + - `src/hooks/useScrollReveal.ts` - Fixed ref type for React 18+ compatibility +- **Design decisions**: + - Vertical timeline with 20% left offset for timeline line and dots + - ECG waveform SVG decoration beside heading (matches concept.html) + - Timeline dots filled (bg-teal) for current roles, outline for past roles + - Cards have hover effects: scale(1.01), shadow-md, left border teal/30 + - Framer Motion for staggered entry animations (100ms delay per card) + - useScrollReveal hook triggers animations when section is 10% visible + - Responsive: timeline line and dots hidden on mobile (md:block) +- **Experience data**: 5 roles from Interim Head (May-Nov 2025) to Duty Pharmacy Manager (Aug 2016-Nov 2017) +- **Quality checks**: `npm run typecheck` ✓, `npm run lint` ✓, `npm run build` ✓ +- **Learnings**: + - React 18+ RefObject types require non-nullable type param for ref props + - Fixed useScrollReveal to return `RefObject` instead of `RefObject` + - data-visible attribute pattern works well for CSS transitions based on JS state