- 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>
- Single self-contained HTML file with inline CSS and JS (IIFE, strict mode)
- Boot screen: fixed black overlay with Fira Code monospace font
- Boot text sequence matching guardrail format: CLINICAL TERMINAL v3.2.1,
profile init, SYSTEM/USER/ROLE/LOCATION labels, module loading, [OK] lines
- Green (#00ff41) for values/OK, cyan (#00e5ff) for labels, dim green (#3a6b45) for text
- Blinking cursor animation (step-end blink)
- Lines appear sequentially with 220ms delay (~4s total boot)
- Boot text fades out after 400ms pause, boot screen removed after fade
- CSS variables and font loading for all 3 Google Font families
- CV content container ready for subsequent tasks
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
admin