Commit Graph

13 Commits

Author SHA1 Message Date
admin 8ee9046bb3 Task 3: Build LoginScreen component with typing animation
- 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
2026-02-11 00:54:48 +00:00
admin 2692e7ee86 Task 2: Modify ECGAnimation for PMR flatline transition
- 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
2026-02-11 00:45:05 +00:00
admin 2033a93ecb feat(pmr): create PMR data layer and TypeScript types
- 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.
2026-02-11 00:37:20 +00:00
admin 6cc54d8a29 Task 11: Implement scroll animations and responsive design
- Add xs (480px) breakpoint to tailwind config for mobile
- Standardize scroll-reveal animations to opacity 0→1, y 24→0
- Add responsive padding to main container (px-5 xs:px-6 md:px-8)
- Add responsive section padding (py-12 xs:py-16 md:py-20)
- FloatingNav: responsive width and font/padding on mobile
- Hero: responsive vitals grid, title font clamp to 28px min
- Skills: responsive grid (2→3→auto-fit), smaller gauges on mobile
- Experience: responsive card padding, ECG decoration size
- Education/Projects: responsive grids matching concept.html
- Contact/Footer: responsive padding
2026-02-10 17:20:27 +00:00
admin 1a2c43323b Task 10: Build Footer component with ECG decoration
- Created Footer.tsx with decorative ECG waveform SVG
- Footer uses Framer Motion for scroll-triggered entrance animation
- Centered layout with border-top, muted attribution text
- Integrated Footer into App.tsx content phase
- Three-phase orchestration (boot → ecg → content) already working
2026-02-10 17:03:11 +00:00
admin 13c2aa2121 feat: Build Education, Projects, and Contact sections (Task 9) 2026-02-10 16:54:25 +00:00
admin 09e4f92270 feat: Build Experience section with timeline (Task 8)
- 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
2026-02-10 16:48:14 +00:00
admin 0ffc71f110 feat: Build Skills section with SVG circular gauges
- Create Skills.tsx with three categories (Technical, Clinical, Strategic)
- Add SkillGauge component with animated circular SVG progress
- Create useScrollReveal.ts hook for IntersectionObserver-based animations
- Staggered gauge fill animations (100ms delay per skill)
- Exact 18 skills with percentages from concept.html
- Hover effects matching concept.html styling
2026-02-10 16:39:39 +00:00
admin e5042260c1 feat: Build Hero section component (Task 6)
- Create Hero.tsx with name, title, location pill, summary paragraph
- Add four vital sign metric cards (10+ Years, Python/SQL/BI, Pop. Health, NHS N&W)
- Implement staggered entrance animations with Framer Motion
- Add hover elevation effects on vital cards
- Responsive design with flex-wrap for mobile
2026-02-10 16:32:55 +00:00
admin 3eb91a3cec Task 5: Build FloatingNav component with active section tracking
- 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
2026-02-10 16:25:14 +00:00
admin a07557091a Task 4: Build ECGAnimation component with canvas-based heartbeat and name drawing 2026-02-10 16:08:07 +00:00
admin 77c03144a9 Task 2 & 3: Set up project structure and build BootSequence component
- Task 2: Project structure and types already complete from Task 1
- Task 3: Create BootSequence component with Framer Motion
  - 14 boot lines with 220ms staggered delays
  - Terminal typing animation with opacity/translateY transitions
  - Blinking cursor using CSS animation
  - AnimatePresence for 800ms exit fade
  - Total boot time ~4.28s matching concept.html
- Update App.tsx to use BootSequence with phase transitions
2026-02-10 15:59:44 +00:00
admin f140c16881 Task 1: Initialize React project with Vite, TypeScript, Tailwind
- 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
2026-02-10 15:39:29 +00:00