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