portfolio/Ralph/IMPLEMENTATION_PLAN.md

Implementation Plan — React Conversion

Project Overview

Convert the completed concept.html (ECG Heartbeat CV Website) into a modern React application with TypeScript, Vite, and Tailwind CSS. The project will be a portfolio-grade React implementation that preserves all animations, interactions, and design details from the HTML concept while following React best practices.

Key Features to Port:

• Boot sequence with terminal typing animation
• ECG flatline and heartbeat SVG animations
• Branching lines that trace UI elements into existence
• Color transition from green ECG to teal/coral design system
• Floating pill navigation with active section tracking
• SVG circular skill gauges with scroll-triggered animations
• Experience timeline with ECG decoration
• Scroll-reveal animations using IntersectionObserver
• Fully responsive design (desktop/tablet/mobile)

Tech Stack:

• React 18+ with TypeScript
• Vite for build tooling
• Tailwind CSS for styling
• Framer Motion for complex animations (boot sequence, ECG transitions)
• React Intersection Observer for scroll-triggered animations
• Lucide React for icons (replacing unicode symbols)

Project Structure:

src/
├── components/
│   ├── BootSequence.tsx      # Terminal typing animation
│   ├── ECGAnimation.tsx      # Flatline, heartbeats, branching
│   ├── FloatingNav.tsx       # Pill navigation with active tracking
│   ├── Hero.tsx              # About section with vitals
│   ├── Skills.tsx            # Skill gauges with SVG circles
│   ├── Experience.tsx        # Timeline layout
│   ├── Education.tsx         # Education cards
│   ├── Projects.tsx          # Project cards with gradient borders
│   ├── Contact.tsx           # Contact grid
│   └── Footer.tsx            # Footer with ECG decoration
├── hooks/
│   ├── useScrollReveal.ts    # IntersectionObserver for scroll animations
│   └── useActiveSection.ts   # Track active nav section
├── lib/
│   └── utils.ts              # Utility functions (skill gauge math)
├── types/
│   └── index.ts              # TypeScript interfaces
├── App.tsx                   # Main app with boot/ECG/CV phases
├── main.tsx                  # Entry point
└── index.css                 # Tailwind + custom CSS variables

Reference Materials:

• References/concept.html — Complete working HTML implementation with all animations
• References/CV_v4.md — Source CV content to populate sections
• References/ECGVideo/ — Remotion video project with ECG animation patterns

Quality Checks

• npm run dev — Development server starts without errors
• npm run build — Production build completes without errors
• npm run lint — No ESLint errors
• npm run typecheck — No TypeScript errors
• Open http://localhost:5173 and verify:
  • Boot sequence plays exactly as in concept.html (terminal typing, 4 second duration)
  • ECG flatline draws left-to-right
  • Three heartbeats animate with increasing amplitude
  • Branching lines trace outward on third beat
  • Background transitions from black to white
  • Final CV design renders with all sections
  • Floating pill nav tracks active section on scroll
  • Skill gauges animate when scrolled into view
  • All hover effects work (card elevation, gradient borders)
  • Responsive layouts work at 768px and 480px
  • No console errors

Tasks

• Task 1: Initialize React project with Vite + TypeScript + Tailwind

  Run npm create vite@latest . -- --template react-ts to scaffold the project. Install dependencies: npm install framer-motion lucide-react. Initialize Tailwind: npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p. Configure tailwind.config.js with custom colors (teal #00897B, coral #FF6B6B, etc.). Set up src/index.css with Tailwind directives and CSS custom properties matching concept.html.

• Task 2: Set up project structure and types

  Create the folder structure (components/, hooks/, lib/, types/). Define TypeScript interfaces in types/index.ts for: Skill (name, level, category, color), Experience (role, org, date, bullets), Education (degree, institution, period, detail), Project (title, description, link?). Create lib/utils.ts with helper function calculateSkillOffset(level: number, radius: number): number that returns 2 * Math.PI * radius * (1 - level / 100).

• Task 3: Build BootSequence component

  Create components/BootSequence.tsx. Implement terminal typing animation using Framer Motion or CSS transitions. Display boot lines with correct colors (cyan labels, green values, dim text). Use exact boot text from concept.html: "CLINICAL TERMINAL v3.2.1", "Initialising pharmacist profile...", SYSTEM/USER/ROLE/LOCATION, module loading, [OK] lines, READY. Duration: ~4 seconds. Emit onComplete callback when finished. Styling: black background, Fira Code font.

• Task 4: Build ECGAnimation component

  Create components/ECGAnimation.tsx. Port the ECG logic from concept.html:

  • SVG flatline drawing left-to-right (1000ms)
  • Three PQRST heartbeats with increasing amplitude (40px → 60px → 100px)
  • Color interpolation: #00ff41 → #00C9A7 → #00897B
  • Branching lines from third R peak tracing UI outlines (pill nav, hero, cards)
  • Background transition from black to white
  • Emit onComplete callback when animation finishes Use Framer Motion for path drawing animations (pathLength).

• Task 5: Build FloatingNav component

  Create components/FloatingNav.tsx. Floating pill navigation bar fixed at top center. Links: About, Skills, Experience, Education, Projects, Contact. Active link tracking via useActiveSection hook (IntersectionObserver). Smooth scroll to sections on click. Responsive: horizontal scroll on mobile. Styling: white bg, rounded-full, shadow-md, teal active state with dot indicator.

• Task 6: Build Hero section component

  Create components/Hero.tsx. Port hero section from concept.html: centered layout, name (clamp 36-52px), job title (muted), location pill (teal border), summary paragraph (max-width 560px). Four vital sign metric cards in a row: "10+ Years Experience", "Python/SQL/BI Analytics Stack", "Pop. Health Focus Area", "NHS N&W System". Cards have teal border-top, hover elevation. Responsive: 2x2 grid on tablet, stacked on mobile.

• Task 7: Build Skills section with SVG gauges

  Create components/Skills.tsx. Three skill categories: Technical (8 skills, teal), Clinical (6 skills, coral), Strategic (4 skills, teal). Each skill has circular SVG progress gauge using calculated stroke-dashoffset. Scroll-triggered animation: gauges fill when section enters viewport, staggered by 100ms. Port all 18 skills with correct percentages from concept.html.

• Task 8: Build Experience section with timeline

  Create components/Experience.tsx. Vertical timeline with 5 roles: Interim Head (May-Nov 2025), Deputy Head (Jul 2024-Present), High-Cost Drugs (May 2022-Jul 2024), Pharmacy Manager (Nov 2017-May 2022), Duty Pharmacy Manager (Aug 2016-Nov 2017). Decorative ECG waveform SVG beside heading. Timeline dot filled for current roles. Cards with hover effect (scale, shadow, left border). Responsive: hide timeline line on mobile, stack cards.

• Task 9: Build Education, Projects, Contact sections

  Create components/Education.tsx, components/Projects.tsx, components/Contact.tsx.

  Education: 2-column grid. MPharm (Hons) UEA 2011-2015 (2:1). Mary Seacole Leadership Programme 2018. Gradient top border (teal→coral). A-Levels line below.

  Projects: 2x2 grid. PharMetrics (with link), Patient Pathway Analysis, Blueteq Generator, NMS Video. Gradient border hover effect.

  Contact: 4-column grid. Phone, Email, LinkedIn, Location. Use Lucide icons (Phone, Mail, Linkedin, MapPin). Responsive: 2x2 on mobile.

• Task 10: Build Footer component and main App.tsx

  Create components/Footer.tsx. Decorative ECG waveform SVG, attribution text. Update App.tsx to orchestrate the three phases: 1) BootSequence (4s), 2) ECGAnimation (4s), 3) CV Content (with all sections). Use React state to track current phase. Ensure smooth transitions between phases.

• Task 11: Implement scroll animations and responsive design

  Create hooks/useScrollReveal.ts. IntersectionObserver-based hook for scroll-triggered section reveals. Add scroll-reveal animations to all sections (opacity 0→1, translateY 24px→0). Ensure animations only trigger once. Add responsive breakpoints: tablet (768px), mobile (480px). Test all layouts.

• Task 12: Final integration, testing, and polish

  Run all quality checks. Verify TypeScript compiles without errors. Verify no console errors. Test boot sequence timing matches concept.html (~4s). Test ECG animation timing and easing. Verify all CV content accuracy against CV_v4.md. Test all interactive elements (nav, hover effects, scroll animations). Verify responsive layouts at all breakpoints. Final build test.