- Created LoginScreen.tsx with character-by-character username typing (30ms/char)
- Password dots fill at 20ms per dot
- Button shows pressed state before transition
- Added 'login' phase to App.tsx flow
- Added PMR colors and fonts to tailwind.config.js
- Added Inter font family to index.html
- Respects prefers-reduced-motion: instant completion in ~500ms
- Changed exit phase from fade-to-white to clinical flatline transition
- After name tracing: hold 300ms, draw flatline rightward 300ms
- Fade canvas to black 200ms, then transition background to #1E293B (login screen color)
- Total ECG phase timing preserved (~5-6 seconds), exit adds ~1 second
- Prepares for LoginScreen component in Task 3
- Add src/types/pmr.ts with interfaces for Patient, Consultation, Medication, Problem, Investigation, Document
- Add src/data/consultations.ts with 5 roles mapped to clinical consultation format
- Add src/data/medications.ts with 18 skills as medications across Active/Clinical/PRN categories
- Add src/data/problems.ts with 11 achievements/problems using traffic light status system
- Add src/data/investigations.ts with 5 projects as clinical investigations
- Add src/data/documents.ts with 5 education/certification documents
- Add src/data/patient.ts with patient demographic data
All data matches CV_v4.md exactly (dates, numbers, achievements).
Task 1 of 15 complete.
- 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>
admin