- Create Experience.tsx component with vertical timeline layout
- Add 5 roles from NHS and Tesco with bullet points
- ECG waveform SVG decoration beside heading
- Timeline dots filled for current roles
- Hover effects on cards (scale, shadow, left border)
- Scroll-triggered animations using useScrollReveal hook
- Responsive: hide timeline line/dots on mobile
- Fix useScrollReveal ref type for React 18+ compatibility
- Created useActiveSection hook using IntersectionObserver for scroll tracking
- Built FloatingNav with Framer Motion animated indicator dot
- Added section IDs to App.tsx for scroll targets
- Added scrollbar-hide utility and smooth scroll to index.css
- Scaffolded project with React 18, Vite, TypeScript
- Configured Tailwind CSS with custom design tokens (teal, coral, ecg colors)
- Added Framer Motion and Lucide React dependencies
- Set up Google Fonts (Fira Code, Plus Jakarta Sans, Inter Tight)
- Created TypeScript interfaces for CV data types
- Added utility function for skill gauge calculations
- Quality checks passing: typecheck, build, lint all clean
- Add IntersectionObserver-based scroll reveal for all sections
- Sections start at opacity:0/translateY(24px), animate to visible on scroll
- Hero section immediately visible (above fold, no animation)
- Staggered child card/item animations with 60ms delay per item
- Animations fire once only (observer unobserved after reveal)
- Fix hover transform specificity for cards, education, projects
- Fix vital-card hover at hero-level specificity
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Education section with 2-column grid: MPharm (Hons) UEA and Mary Seacole Programme
- A-Levels displayed below education cards
- Projects section with 2x2 grid and gradient hover border effect
- PharMetrics project includes live link to medicines.charlwood.xyz
- Contact section with 4-column grid: phone, email, LinkedIn, location
- Footer with decorative ECG waveform SVG and attribution text
- Responsive: projects 1fr at 768px, education 1fr and contact 2x2 at 480px
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Skills HTML/CSS/JS already built in prior iterations; this commit
polishes: coral hover background for clinical skills, moves
text-align:center to .section-heading class (removes inline style),
confirms responsive gauge sizing at 480px
- 18 SVG circular gauges across 3 categories (Technical/Clinical/Strategic)
- Scroll-triggered IntersectionObserver animates stroke-dashoffset
staggered by 100ms per gauge
- Clinical skills use coral color; technical/strategic use teal
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add floating pill nav bar (fixed, centered, 600px max-width, pill-shaped)
- Add nav links for all 6 sections: About, Skills, Experience, Education, Projects, Contact
- Add active state with teal dot indicator via ::after pseudo-element
- Add IntersectionObserver for active section tracking (threshold 0.3, rootMargin -20%/0/-60%/0)
- Add smooth scroll on nav link click (offset -70px for nav clearance)
- Add main container with max-width 1000px and section padding
- Add .section-heading utility class for consistent section titles
- Add responsive breakpoints: 768px (scrollable nav, 20px padding) and 480px (compact nav, 16px padding)
- Initialize nav tracking after ECG phase reveal completes
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Second heartbeat: R peak 60px, color shifts green→teal (#00C9A7), bg lightens to #0A0A0A
- Third heartbeat: R peak 100px, full teal (#00897B), bg lightens to #141414
- Overflow branching from third R peak apex: 7 SVG branch paths trace UI outlines
- Branch 1: pill nav bar rounded rectangle at top center
- Branches 2-3: hero section left/right edges
- Branches 4-7: four vital sign card outlines
- Branches staggered by 50-150ms with cubic-bezier easing (800ms draw)
- Background transitions rapidly from near-black to white during branching
- All SVG lines fade out over 500ms, overlays removed from DOM, CV content revealed
- Glow filter dynamically matched to stroke color (green→teal)
- Total animation timing ~8.5s (within 8-9s guardrail)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add the ECG animation phase between boot sequence fade and CV reveal.
After boot text fades out, a green flatline draws left-to-right across
the viewport center over 1000ms, followed by a PQRST heartbeat waveform
(R peak 40px) animating over 600ms. Uses SVG with stroke-dasharray/
dashoffset for line-drawing effect with green glow filter. The
drawHeartbeat() function is reusable for Task 3's escalating beats.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
admin