138 lines
9.0 KiB
Markdown
138 lines
9.0 KiB
Markdown
# 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
|
|
|
|
- [x] **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.
|
|
|
|
- [x] **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)`.
|
|
|
|
- [x] **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.
|
|
|
|
- [x] **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).
|
|
|
|
- [x] **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.
|