admin/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: mark Task 1 complete and update progress log

Browse Source
This commit is contained in:
A Charlwood
2026-02-11 00:37:27 +00:00
parent 2033a93ecb
commit 9d078420bc
2 changed files with 191 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Ralph/IMPLEMENTATION_PLAN.md
+115 -84
View File
@@ -1,58 +1,88 @@
# Implementation Plan — React Conversion
# Implementation Plan — Clinical Record PMR System
## 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.
Transform the existing React CV application into a **Patient Medical Record (PMR) system** — a faithful digital clinical information system that presents Andy's CV as a clinician would view a patient record. This is Design 7: The Clinical Record, completely replacing the previous ECG-based design.
**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)
**Core Concept:**
The "patient" is Andy's career. Users navigate a genuine PMR interface (similar to EMIS Web, SystmOne, Vision) with:
- Patient banner with persistent demographic context
- Sidebar navigation with clinical record categories (Summary, Consultations, Medications, Problems, Investigations, Documents, Referrals)
- Consultation-journal format for experience (History/Examination/Plan structure)
- Tabular medications list for skills with proficiency "dosages"
- Clinical alert system for standout achievements
- Light-mode only (authentic to clinical systems)
- Border-heavy, table-heavy, functional aesthetic
**Key Features:**
- ECG exit animation → Login sequence → PMR interface materialization (~2.7s total transition)
- Animated login screen with typing username/password
- 7 sidebar views with instant content swapping (authentic clinical system behavior)
- Expandable consultation entries with coded entries (SNOMED-style references)
- Sortable medications table with prescribing history expansion
- Traffic-light status system (green/amber/red/gray)
- Clinical alert banner with acknowledge interaction
- Responsive: desktop sidebar → tablet icon-only → mobile bottom nav
- Full keyboard navigation (Alt+1-7 shortcuts)
- Search across all PMR sections with fuse.js
**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)
- Framer Motion for login animation and transitions
- Lucide React for clinical icons
- fuse.js for fuzzy search
**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
│ ├── BootSequence.tsx # Existing terminal animation (preserved)
│ ├── ECGAnimation.tsx # Modified for PMR transition
│ ├── LoginScreen.tsx # Animated login sequence
│ ├── PMRInterface.tsx # Main PMR layout container
│ ├── PatientBanner.tsx # Full + condensed banner
│ ├── ClinicalSidebar.tsx # Navigation sidebar
│ ├── ClinicalAlert.tsx # Dismissible alert banner
│ ├── Breadcrumb.tsx # Navigation breadcrumb
│ ├── views/
│ │ ├── SummaryView.tsx # Patient summary landing
│ │ ├── ConsultationsView.tsx # Experience as consultations
│ │ ├── MedicationsView.tsx # Skills as medications
│ │ ├── ProblemsView.tsx # Achievements as problems
│ │ ├── InvestigationsView.tsx# Projects as investigations
│ │ ├── DocumentsView.tsx # Education as documents
│ │ └── ReferralsView.tsx # Contact as referral form
│ ├── ui/
│ │ ├── ConsultationEntry.tsx # Expandable consultation
│ │ ├── MedicationTable.tsx # Sortable skills table
│ │ ├── ProblemEntry.tsx # Problem list item
│ │ ├── InvestigationEntry.tsx# Investigation result
│ │ └── DocumentEntry.tsx # Document list item
├── hooks/
│ ├── useScrollReveal.ts # IntersectionObserver for scroll animations
│ └── useActiveSection.ts # Track active nav section
├── lib/
│ └── utils.ts # Utility functions (skill gauge math)
│ ├── useScrollCondensation.ts # Patient banner scroll behavior
│ └── useSearch.ts # Fuse.js search hook
├── data/
│ ├── consultations.ts # Experience data
│ ├── medications.ts # Skills data
│ ├── problems.ts # Achievements data
│ ├── investigations.ts # Projects data
│ └── documents.ts # Education data
├── types/
│ └── index.ts # TypeScript interfaces
├── App.tsx # Main app with boot/ECG/CV phases
├── main.tsx # Entry point
└── index.css # Tailwind + custom CSS variables
│ └── pmr.ts # All PMR TypeScript interfaces
├── lib/
│ └── utils.ts # Utility functions
├── App.tsx # Phase manager (boot → ecg → login → pmr)
└── index.css # Tailwind + PMR 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
- `designs/07-the-clinical-record.md` — Complete design specification
- `References/CV_v4.md` — Source CV content
- `References/concept.html` — Previous ECG implementation (timing reference only)
---
## Quality Checks
@@ -60,78 +90,79 @@ src/
- `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
- Manual verification:
- Boot sequence plays (4s) → ECG flatlines → Login screen types username/password → PMR interface materializes
- Patient banner condenses on scroll (80px → 48px)
- All 7 sidebar views render correctly with proper data
- Consultation entries expand/collapse with History/Examination/Plan sections
- Medications table sorts correctly by all columns
- Clinical alert appears on Summary view and dismisses with animation
- Search finds content across all sections
- Keyboard shortcuts work (Alt+1-7)
- Responsive layouts work at 1024px, 768px, and 480px
- No console errors
- Accessibility: screen reader announces views, tables are navigable
---
## Tasks
- [x] **Task 1: Initialize React project with Vite + TypeScript + Tailwind**
- [x] **Task 1: Create PMR data layer and TypeScript types**
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.
Create `src/types/pmr.ts` with interfaces for: `Patient`, `Consultation` (History/Examination/Plan/CodedEntries), `Medication` (with PrescribingHistory), `Problem` (status, code, outcome), `Investigation` (with results), `Document`, `ReferralForm`. Create `src/data/` directory with files: `consultations.ts` (5 roles from CV_v4.md mapped to consultation format), `medications.ts` (18 skills mapped to medication format with prescribing history), `problems.ts` (8-10 achievements with traffic light status), `investigations.ts` (4 projects with methodology/results), `documents.ts` (MPharm, Mary Seacole, A-Levels, Research). All data must match CV_v4.md exactly with specific numbers (£14.6M, 14,000 patients, etc.).
- [x] **Task 2: Set up project structure and types**
- [ ] **Task 2: Modify ECGAnimation for PMR flatline transition**
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)`.
Modify `src/components/ECGAnimation.tsx` to change the exit phase. Instead of fading to white and revealing the CV, the animation should: 1) Complete the name tracing as normal, 2) Hold for 300ms, 3) Draw a flatline extending rightward from the name over 300ms (patient monitor flatline visual), 4) Fade entire canvas to black over 200ms, 5) Transition background to dark blue-gray (#1E293B) over 200ms. Emit `onComplete` callback to trigger LoginScreen. Total ECG phase: ~5-6 seconds. Preserve all existing animation timing for heartbeats and letter tracing.
- [x] **Task 3: Build BootSequence component**
- [ ] **Task 3: Build LoginScreen component with typing animation**
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.
Create `src/components/LoginScreen.tsx`. Dark blue-gray background (#1E293B). Centered white login card (320px wide, 12px radius, subtle shadow). NHS-blue shield icon at top. Username field: types "A.CHARLWOOD" character-by-character (30ms per char, Geist Mono font). Password field: fills with 8 dots (20ms per dot). "Log In" button: NHS blue (#005EB8), full width. After 150ms pause, button shows pressed state (darkens, 100ms), then emits `onComplete` callback. Total login animation: ~1.2s. Respect `prefers-reduced-motion`: with reduced motion, username appears instantly and login completes in ~500ms.
- [x] **Task 4: Build ECGAnimation component**
- [ ] **Task 4: Build PatientBanner component (full and condensed)**
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).
Create `src/components/PatientBanner.tsx` with two modes. Full banner (80px): patient name "CHARLWOOD, Andrew (Mr)", DOB "14/02/1993", NHS No "221 181 0" (GPhC number formatted), address "Norwich, NR1", phone, email, status "Active" (green dot), badge "Open to opportunities". Action buttons: Download CV, Email, LinkedIn. Condensed banner (48px, sticky after 100px scroll): name, NHS No, status dot, action buttons only. Use `useScrollCondensation` hook with IntersectionObserver. Smooth height transition (200ms). Banner spans full viewport width.
- [x] **Task 5: Build FloatingNav component**
- [ ] **Task 5: Build ClinicalSidebar component with navigation and search**
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.
Create `src/components/ClinicalSidebar.tsx`. 220px width (desktop), dark blue-gray (#1E293B) background. Header: "CareerRecord PMR v1.0.0". 7 navigation items with Lucide icons: Summary (ClipboardList), Consultations (FileText), Medications (Pill), Problems (AlertTriangle), Investigations (FlaskConical), Documents (FolderOpen), Referrals (Send). Active state: 3px NHS blue left border, white background tint. Separator line after Summary. Footer: "Session: A.CHARLWOOD" and current time. Search input in header with fuse.js integration. Clicking item updates active view instantly (no animation). URL hash updates (#summary, #consultations, etc.).
- [x] **Task 6: Build Hero section component**
- [ ] **Task 6: Build SummaryView component with clinical alert**
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.
Create `src/components/views/SummaryView.tsx`. Grid layout with cards: Patient Demographics (full width, two-column key-value table), Active Problems (left column, green/amber dots with dates), Current Medications Quick View (right column, 4-column table showing top 5 skills), Last Consultation preview (full width, truncated to 2-3 lines with "View Full Record" link). Clinical Alert banner: amber background (#FEF3C7), amber left border, warning icon, text "ALERT: This patient has identified £14.6M in prescribing efficiency savings...", Acknowledge button. Alert slides down with spring animation (250ms) after view loads. Clicking Acknowledge: icon changes to green checkmark (200ms), then alert collapses upward (200ms).
- [x] **Task 7: Build Skills section with SVG gauges**
- [ ] **Task 7: Build ConsultationsView with History/Examination/Plan structure**
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.
Create `src/components/views/ConsultationsView.tsx`. Reverse-chronological journal of 5 roles. Each entry: collapsed state shows date, organization (NHS blue), role title, key coded entry, expand chevron. Click to expand: shows Duration, HISTORY section (context/background), EXAMINATION section (bullet list of analysis/findings), PLAN section (bullet list of outcomes), CODED ENTRIES (SNOMED-style codes like [EFF001], [ALG001]). Section headers styled as clinical consultation dividers (uppercase, letter-spacing). Only one entry expanded at a time. Color-coded left border: NHS blue for NHS N&W ICB, Teal (#00897B) for Tesco PLC. Expand animation: height 0→auto (200ms, ease-out).
- [x] **Task 8: Build Experience section with timeline**
- [ ] **Task 8: Build MedicationsView with sortable table and prescribing history**
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.
Create `src/components/views/MedicationsView.tsx`. Three category tabs: Active Medications (technical skills), Clinical Medications (healthcare domain skills), PRN (strategic skills). Each tab shows a table: Drug Name | Dose (%) | Frequency | Start | Status. Sortable columns: clicking header sorts (asc/desc toggle). Default sort: by category grouping. Table styling: gray-200 borders, alternating row colors, 40px row height. Hover: subtle blue tint (#EFF6FF). Click row to expand "Prescribing History" — mini-timeline showing skill progression (year + description). History styled in Geist Mono. 18 total medications mapped from CV skills with accurate proficiency percentages and usage frequencies.
- [x] **Task 9: Build Education, Projects, Contact sections**
- [ ] **Task 9: Build ProblemsView with traffic light system**
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.
Create `src/components/views/ProblemsView.tsx`. Two sections: Active Problems and Resolved Problems. Table columns: Status (traffic light dot), Code (SNOMED-style in Geist Mono), Problem description, Since/Resolved date, Outcome (for resolved). Traffic lights: 8px circles — green (resolved/current), amber (in progress), gray (inactive/historical). Active problems: £220M budget oversight, SQL transformation, data literacy programme. Resolved problems: 8 achievements with specific outcomes ("Python algorithm: 14,000 pts, £2.6M/yr", "70% reduction, 200hrs saved", etc.). Click row to expand full narrative with "linked consultations" navigation.
- [x] **Task 10: Build Footer component and main App.tsx**
- [ ] **Task 10: Build InvestigationsView with results panel**
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.
Create `src/components/views/InvestigationsView.tsx`. Projects presented as diagnostic investigations. Table: Test Name | Requested | Status | Result. Status badges: Complete (green dot), Ongoing (amber dot), Live (pulsing green dot for PharMetrics). 5 investigations: PharMetrics Interactive Platform, Patient Switching Algorithm, Blueteq Generator, CD Monitoring System, Sankey Chart Analysis Tool. Click row to expand "results panel" with tree-indented structure: Date Requested, Date Reported, Status, Requesting Clinician, Methodology, Results, Tech Stack. PharMetrics has "View Results" button linking to medicines.charlwood.xyz.
- [x] **Task 11: Implement scroll animations and responsive design**
- [ ] **Task 11: Build DocumentsView for education/certifications**
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.
Create `src/components/views/DocumentsView.tsx`. Education presented as attached documents. Table: Type (icon), Document, Date, Source. Icons: FileText (certificates), Award (registrations), GraduationCap (academic), FlaskConical (research). 4 documents: MPharm (Hons) 2:1 UEA 2015, GPhC Registration 2016, Mary Seacole Programme 2018, A-Levels 2011 + Drug Delivery Research. Click to expand "preview" panel with tree-indented details: Type, Date Awarded, Institution, Classification, Duration, Research details, Notes. Consistent with Investigations expanded view style.
- [x] **Task 12: Final integration, testing, and polish**
- [ ] **Task 12: Build ReferralsView with clinical referral form**
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.
Create `src/components/views/ReferralsView.tsx`. Contact presented as clinical referral form. Form fields: Referring to (pre-filled: CHARLWOOD, Andrew), NHS Number (pre-filled), Priority toggle (radio: Urgent [red], Routine [blue/selected], Two-Week Wait [amber] with tongue-in-cheek tooltips), Referrer Name/Email/Org inputs, Reason for Referral textarea, Contact Method radio (Email/Phone/LinkedIn). Submit button: NHS blue, full width right half. On submit: loading spinner, then success message with reference number (REF-2026-0210-001 format). Below form: Direct Contact table with Email, Phone, LinkedIn, Location as clickable links.
- [ ] **Task 13: Implement keyboard shortcuts and accessibility**
Add keyboard navigation throughout. Global shortcuts: Alt+1-7 activate sidebar items, Escape closes expanded items/menus, / focuses search. Sidebar: Up/Down arrows navigate items, Enter activates. Implement focus management: after login, focus moves to first sidebar item; after view change, focus moves to view heading; after expanding item, focus moves to content. Add ARIA: `role="navigation"` on sidebar, `aria-current="page"` on active item, `role="alert"` on clinical alert, proper table markup with `scope="col"`, `aria-expanded` on expandable items. Test with screen reader: views announced, tables navigable, alert read immediately.
- [ ] **Task 14: Implement responsive design (tablet and mobile)**
Tablet (768-1024px): Sidebar collapses to 56px icon-only with tooltips on hover. Patient banner always condensed (48px). Tables may horizontally scroll with indicator. Mobile (<768px): Sidebar becomes bottom navigation bar (56px height, 7 icon buttons, safe area padding). Patient banner becomes minimal top bar. Tables switch to card layout (each row becomes stacked card). Search moves to top of each view. Add back navigation arrow in each view. Test all breakpoints: desktop (>1024), tablet (768-1024), mobile (<768). Ensure touch targets minimum 48px. Test on actual mobile device or emulator.
- [ ] **Task 15: Final integration, testing, and polish**
Wire up App.tsx with three phases: BootSequence (4s) → ECGAnimation (modified for flatline) → LoginScreen (1.2s) → PMRInterface. Ensure smooth transitions between phases. Run all quality checks. Verify TypeScript strict mode (no `any` types). Verify all CV content accuracy against CV_v4.md (dates, numbers, achievements). Test all interactive elements: sidebar nav, consultation expand, medication sort, alert acknowledge, referral form submit. Verify responsive layouts at all breakpoints. Test accessibility with keyboard navigation and screen reader. Verify search finds content across all sections. Final production build test.
Ralph/progress.txt
+76 -254
View File
@@ -1,263 +1,85 @@
# Progress Log — React Conversion Phase
# Progress Log — Clinical Record PMR Phase
## Phase Transition
**Previous phase completed:** React conversion of ECG Heartbeat CV (all 12 tasks done)
**New phase started:** Clinical Record PMR System — Design 7 implementation
**Date:** 2026-02-11
This is a complete redesign of the CV presentation, moving from the ECG animation concept to a Patient Medical Record system interface. All previous components (Hero, Skills, Experience, etc.) will be replaced with PMR-specific views and components.
## Codebase Patterns
- **Source of truth**: `References/concept.html` contains the complete working HTML implementation. All animations, timing, colors, and styling must be preserved exactly when porting to React.
- **Tech stack**: React 18+, TypeScript, Vite, Tailwind CSS, Framer Motion, Lucide React
- **Project structure**: Components in `src/components/`, hooks in `src/hooks/`, types in `src/types/`, utilities in `src/lib/`
- **Animation approach**: Framer Motion for complex sequences (boot, ECG), CSS transitions for simple hover effects, IntersectionObserver (via hook) for scroll-triggered animations
- **SVG animations**: Use Framer Motion's `pathLength` prop for drawing effects, or CSS `stroke-dasharray`/`stroke-dashoffset` for skill gauges
- **Skill gauge math**: `circumference = 2 * Math.PI * radius`, `strokeDashoffset = circumference * (1 - level / 100)`, rotate -90deg to start from top
- **Boot sequence timing**: 14 lines × 220ms = ~3080ms, plus 400ms pause, 800ms fade = ~4.28s total
- **ECG timing**: Flatline 1000ms + 3 beats × 600ms + holds 300ms + branching 1500ms + fade 500ms = ~5.5s
- **Color palette**:
- ECG phase: #000 (black), #00ff41 (green), #00e5ff (cyan), #3a6b45 (dim green)
- Final design: #00897B (teal), #FF6B6B (coral), #0F172A (heading), #334155 (text), #94A3B8 (muted)
- **Fonts**: Fira Code (boot), Plus Jakarta Sans (primary), Inter Tight (secondary)
- **Responsive breakpoints**: 768px (tablet), 480px (mobile)
### PMR Design System
- **Source of truth**: `designs/07-the-clinical-record.md` — Complete specification for the PMR interface
- **Color palette (light-mode only)**:
- Main content: `#F5F7FA` (cool light gray)
- Cards: `#FFFFFF` (white)
- Sidebar: `#1E293B` (dark blue-gray)
- Patient banner: `#334155` (lighter blue-gray)
- NHS blue: `#005EB8` (primary interactive)
- Green: `#22C55E` (active/resolved)
- Amber: `#F59E0B` (alerts/in-progress)
- Red: `#EF4444` (urgent)
- Borders: `#E5E7EB` (gray-200)
- **Typography**: Inter for general text, Geist Mono for coded entries/data values
- **Spacing**: 4px base unit, tighter than previous design (clinical system density)
- **Borders**: 1px solid gray-200, 4px radius (clinical systems use minimal rounding)
- **Table rows**: 40px height, alternating colors
### Data Architecture
- All PMR content lives in `src/data/` as typed arrays
- Separation of data from components enables easy CV updates
- Types defined in `src/types/pmr.ts`
### Animation Approach
- **Login typing**: `setInterval` with character-by-character reveal (30ms/char username, 20ms/dot password)
- **View switching**: Instant (no animation) — matches clinical system behavior
- **Consultation expand**: Height 0→auto, 200ms, ease-out
- **Alert entrance**: Slide down with spring, 250ms
- **Alert dismiss**: Icon → checkmark (200ms) → collapse (200ms)
- **Patient banner condensation**: Smooth height transition, 200ms
- **Reduced motion**: Typing instant, slides become fades, expand instant
### Clinical System Authenticity
- Navigation is instant — no crossfade
- Tables use explicit borders on all cells
- Traffic lights are 8px circles with text labels (never sole indicator)
- Consultation format: History / Examination / Plan (clinical SOAP note structure)
- Medications table mimics actual prescribing lists
- Coded entries use [XXX000] format (SNOMED-style)
### Responsive Breakpoints
- Desktop (>1024px): 220px sidebar, full tables
- Tablet (768-1024px): 56px icon-only sidebar, scrollable tables
- Mobile (<768px): Bottom nav bar, card layouts instead of tables
### Accessibility Requirements
- Tables must be proper `<table>` markup with `scope="col"`
- Clinical alert uses `role="alert"` and `aria-live="assertive"`
- Keyboard shortcuts: Alt+1-7 for navigation
- Focus management after view changes and expansions
- Screen reader announces views and table structure
## Iteration Log
### Phase Transition — React Conversion Setup
- Previous phase completed: Single HTML file `concept.html` fully built with all 9 tasks
- New phase started: Convert HTML concept to React + TypeScript + Vite project
- IMPLEMENTATION_PLAN.md updated with 12 React-specific tasks
- RALPH_PROMPT.md updated with explicit /frontend-design skill requirement for all visual components
- This progress.txt reset for new phase
### Iteration 4 — Task 5: Build FloatingNav component
- **Completed**: Task 5 - Build FloatingNav component
### Iteration 1 — Task 1: Create PMR data layer and TypeScript types
- **Completed**: Task 1 - Created PMR data layer with TypeScript interfaces and data files
- **Files created**:
- `src/hooks/useActiveSection.ts` - IntersectionObserver hook for tracking active nav section
- `src/components/FloatingNav.tsx` - Floating pill navigation with active tracking
- **Files modified**:
- `src/index.css` - Added scrollbar-hide utility and smooth scroll behavior
- `src/App.tsx` - Integrated FloatingNav and added section IDs for scroll targets
- `src/types/pmr.ts` - All PMR TypeScript interfaces (Patient, Consultation, Medication, Problem, Investigation, Document, etc.)
- `src/data/consultations.ts` - 5 roles mapped to consultation format with History/Examination/Plan structure
- `src/data/medications.ts` - 18 skills mapped to medication format across 3 categories (Active, Clinical, PRN)
- `src/data/problems.ts` - 11 problems with traffic light status (3 Active, 2 In Progress, 6 Resolved)
- `src/data/investigations.ts` - 5 projects as investigations with methodology/results
- `src/data/documents.ts` - 5 education/certification documents
- `src/data/patient.ts` - Patient demographic data
- **Design decisions**:
- Used IntersectionObserver with rootMargin '-20% 0px -70% 0px' for accurate section detection
- Framer Motion layoutId for smooth indicator dot animation between nav items
- Active section is the topmost visible section (sorted by DOM order)
- Navigation uses button elements for accessibility and proper click handling
- Smooth scroll behavior via CSS `scroll-behavior: smooth` on html element
- Responsive: horizontal scroll with hidden scrollbar on mobile
- Used SNOMED-style codes for coded entries (EFF001, ALG001, AUT001, etc.)
- Mapped employer colors: NHS blue (#005EB8) for ICB, Teal (#00897B) for Tesco
- Proficiency percentages estimated from CV skill descriptions
- Prescribing history for each skill shows progression over time
- **Quality checks**: `npm run typecheck` ✓, `npm run lint` ✓, `npm run build` ✓
- **Learnings**:
- IntersectionObserver thresholds array allows precise tracking of section visibility
- Using a ref to track visible sections prevents React re-render race conditions
<!-- Iterations will be logged here as tasks are completed -->
### Iteration 5 — Task 6: Build Hero section component
- **Completed**: Task 6 - Build Hero section component
- **Files created**:
- `src/components/Hero.tsx` - Hero section with name, title, location, summary, and vital cards
- **Files modified**:
- `src/App.tsx` - Replaced inline hero section with Hero component import
- **Design decisions**:
- Used Framer Motion for staggered entrance animations (name first, then title, location, summary, then vital cards with 0.1s delays)
- VitalCard component with three value size variants: default (28px), small (16px), medium (18px)
- Hover effects: elevation (-translate-y-0.5) and shadow-md transition
- Responsive: flex-wrap with gap-4 for automatic wrapping on smaller screens
- Preserved exact content from concept.html including full summary paragraph
- **Quality checks**: `npm run typecheck` ✓, `npm run lint` ✓, `npm run build` ✓
- **Learnings**:
- CSS clamp() for responsive font sizing works well inline with Framer Motion
- Using a separate VitalCard component with delay prop creates clean staggered animation pattern
<!-- Iterations will be logged here as tasks are completed -->
### Iteration 6 — Task 7: Build Skills section with SVG gauges
- **Completed**: Task 7 - Build Skills section with SVG gauges
- **Files created**:
- `src/hooks/useScrollReveal.ts` - IntersectionObserver hook for scroll-triggered animations
- `src/components/Skills.tsx` - Skills section with SVG circular progress gauges
- **Files modified**:
- `src/App.tsx` - Replaced skills placeholder with Skills component
- **Design decisions**:
- SkillGauge component with SVG circular progress using stroke-dashoffset animation
- IntersectionObserver triggers when section is 15% visible
- Staggered animation: 100ms delay between each gauge
- Gauge radius 34px, circumference 213.628, rotates -90deg to start from top
- Transition duration 1.2s ease-out for gauge fill animation
- Framer Motion for card entrance animations (opacity 0→1, y 16→0)
- Color-coded: Technical (teal), Clinical (coral), Strategic (teal)
- Responsive grid: auto-fit with minmax(140px, 1fr)
- **Quality checks**: `npm run typecheck` ✓, `npm run lint` ✓, `npm run build` ✓
- **Learnings**:
- SVG stroke-dashoffset animation triggered via React state + CSS transition works smoothly
- IntersectionObserver cleanup is critical to avoid memory leaks
- Calculating baseDelay per category allows grouped stagger effects
### Iteration 3 — Task 4: Build ECGAnimation component
- **Completed**: Task 4 - Build ECGAnimation component
- **Files created**:
- `src/components/ECGAnimation.tsx` - Canvas-based ECG animation with heartbeat waveforms and name drawing
- **Files modified**:
- `src/App.tsx` - Updated to use ECGAnimation component instead of placeholder
- **Design decisions**:
- Used canvas API with requestAnimationFrame for smooth 60fps animation
- Ported exact ECG waveform generation from concept.html (PQRST pattern)
- Ported letter waveform interpolation for "ANDREW CHARLWOOD" name drawing
- Implemented glow effects using canvas shadowBlur
- Added scanline overlay (4px horizontal lines) for retro effect
- Added radial gradient vignette for atmosphere
- Background transitions from black to white during exit phase
- Used Framer Motion AnimatePresence for component-level exit animation
- **Animation timing preserved**:
- 4 heartbeat complexes with amplitudes: 0.3, 0.55, 0.85, 1.0
- Trace speed: 450px/s (scaled responsively)
- Hold time after text: 0.75s
- Exit fade: 0.8s
- Total duration: ~5-6 seconds
- **Quality checks**: `npm run typecheck` ✓, `npm run lint` ✓, `npm run build` ✓
- **Learnings**:
- Canvas-based animations need careful cleanup on unmount (cancelAnimationFrame)
- Device pixel ratio (dpr) handling required for crisp rendering on high-DPI displays
- Responsive scaling: `Math.min(1.2, Math.max(0.35, vw / 1400))`
### Iteration 1 — Task 1: Initialize React project
- **Completed**: Task 1 - Initialize React project with Vite + TypeScript + Tailwind
- **Files created**:
- `package.json` with dependencies: React 18, Framer Motion, Lucide React, Tailwind
- `tsconfig.json`, `tsconfig.app.json`, `tsconfig.node.json` for TypeScript
- `vite.config.ts` with path alias `@/` -> `./src/`
- `tailwind.config.js` with custom colors (teal, coral, ecg-green), fonts, shadows
- `postcss.config.js` for Tailwind processing
- `index.html` with Google Fonts (Fira Code, Plus Jakarta Sans, Inter Tight)
- `src/index.css` with Tailwind directives and CSS custom properties
- `src/main.tsx` entry point
- `src/App.tsx` placeholder component
- `src/types/index.ts` with TypeScript interfaces
- `src/lib/utils.ts` with skill gauge calculation helper
- `eslint.config.js` with React hooks and refresh rules
- **Project structure created**: `src/components/`, `src/hooks/`, `src/lib/`, `src/types/`
- **Quality checks**: `npm run typecheck` ✓, `npm run build` ✓, `npm run lint` ✓
- **Learnings**:
- Need `src/vite-env.d.ts` with `/// <reference types="vite/client" />` for CSS imports
- Vite refuses to scaffold in non-empty directory, so manual setup was needed
### Iteration 2 — Task 2 & 3: Project structure and BootSequence
- **Completed**: Task 2 (Set up project structure and types) - was already done in Task 1
- **Completed**: Task 3 - Build BootSequence component
- **Files created**:
- `src/components/BootSequence.tsx` - Terminal typing animation using Framer Motion
- **Design decisions**:
- Used Framer Motion's `motion.div` with `initial`/`animate` props for line reveals
- Each line animates with opacity 0→1, translateY 8px→0 over 400ms
- Staggered delays calculated from cumulative 220ms per line
- Blinking cursor implemented with CSS animation class `animate-blink`
- Used `AnimatePresence` for smooth exit fade (800ms)
- **Boot sequence timing preserved**: 14 lines × 220ms + 400ms pause + 800ms fade = ~4.28s
- **Quality checks**: `npm run typecheck` ✓, `npm run build` ✓, `npm run lint` ✓
- **Learnings**:
- Framer Motion's delay prop uses seconds, not milliseconds
- Used `dangerouslySetInnerHTML` for colored spans within boot lines (matches concept.html structure)
- CSS classes for blink/seed-pulse animations already existed in index.css from Task 1
### Iteration 7 — Task 8: Build Experience section with timeline
- **Completed**: Task 8 - Build Experience section with timeline
- **Files created**:
- `src/components/Experience.tsx` - Timeline component with 5 roles and ECG decoration
- **Files modified**:
- `src/App.tsx` - Replaced Experience placeholder with Experience component
- `src/hooks/useScrollReveal.ts` - Fixed ref type for React 18+ compatibility
- **Design decisions**:
- Vertical timeline with 20% left offset for timeline line and dots
- ECG waveform SVG decoration beside heading (matches concept.html)
- Timeline dots filled (bg-teal) for current roles, outline for past roles
- Cards have hover effects: scale(1.01), shadow-md, left border teal/30
- Framer Motion for staggered entry animations (100ms delay per card)
- useScrollReveal hook triggers animations when section is 10% visible
- Responsive: timeline line and dots hidden on mobile (md:block)
- **Experience data**: 5 roles from Interim Head (May-Nov 2025) to Duty Pharmacy Manager (Aug 2016-Nov 2017)
- **Quality checks**: `npm run typecheck` ✓, `npm run lint` ✓, `npm run build` ✓
- **Learnings**:
- React 18+ RefObject types require non-nullable type param for ref props
- Fixed useScrollReveal to return `RefObject<T>` instead of `RefObject<T | null>`
- data-visible attribute pattern works well for CSS transitions based on JS state
### Iteration 8 — Task 9: Build Education, Projects, Contact sections
- **Completed**: Task 9 - Build Education, Projects, Contact sections
- **Files created**:
- `src/components/Education.tsx` - Education cards with gradient top border
- `src/components/Projects.tsx` - Project cards with gradient border hover effect
- `src/components/Contact.tsx` - Contact grid with Lucide icons
- **Files modified**:
- `src/App.tsx` - Replaced placeholder sections with actual components
- **Design decisions**:
- **Education**: 2-column grid with gradient top border (teal→coral), hover elevation effect
- **Projects**: 2x2 grid with gradient border hover effect using CSS mask technique
- **Contact**: 4-column grid (2x2 on mobile), Lucide icons (Phone, Mail, Linkedin, MapPin)
- Framer Motion for staggered entry animations (100ms delay per card)
- useScrollReveal hook for scroll-triggered visibility
- ExternalLink icon from Lucide for project links
- Contact links use teal color with hover transition
- **Quality checks**: `npm run typecheck` ✓, `npm run lint` ✓, `npm run build` ✓
- **Learnings**:
- CSS gradient border hover effect uses mask-composite: exclude technique
- Lucide icons are tree-shakable - import only what's needed
- Contact items with href conditionally render as anchor tags
### Iteration 9 — Task 10: Build Footer component and main App.tsx
- **Completed**: Task 10 - Build Footer component and main App.tsx
- **Files created**:
- `src/components/Footer.tsx` - Footer with decorative ECG waveform SVG
- **Files modified**:
- `src/App.tsx` - Added Footer import and component to content phase
- **Design decisions**:
- ECG waveform SVG matches concept.html: 120x20 viewBox with PQRST pattern
- Framer Motion for scroll-triggered entrance (opacity 0→1, y 16→0)
- Teal stroke at 30% opacity for subtle branding
- Font-secondary for text-xs muted attribution
- Footer placed outside main element as per semantic HTML
- **Quality checks**: `npm run typecheck` ✓, `npm run lint` ✓, `npm run build` ✓
- **Learnings**:
- App.tsx already had three-phase orchestration working correctly
- Footer scroll animation uses whileInView with once:true and margin:'-50px'
### Iteration 10 — Task 11: Implement scroll animations and responsive design
- **Completed**: Task 11 - Implement scroll animations and responsive design
- **Files modified**:
- `tailwind.config.js` - Added custom 'xs' screen at 480px for mobile breakpoint
- `src/App.tsx` - Added responsive padding (px-5 xs:px-6 md:px-8)
- `src/components/FloatingNav.tsx` - Responsive width and font/padding on mobile
- `src/components/Hero.tsx` - Responsive section padding, vitals grid, title font size
- `src/components/Skills.tsx` - Responsive grid (2→3→auto-fit), gauge size, padding
- `src/components/Experience.tsx` - Responsive card padding, ECG decoration size
- `src/components/Education.tsx` - Responsive section padding
- `src/components/Projects.tsx` - Responsive grid (1 col at tablet, 2 cols at desktop)
- `src/components/Contact.tsx` - Responsive section padding
- `src/components/Footer.tsx` - Responsive padding
- **Design decisions**:
- Added 'xs' breakpoint at 480px to match concept.html mobile breakpoint
- Scroll-reveal animations standardized to opacity 0→1, translateY 24px→0 across all sections
- Responsive patterns from concept.html:
- 768px (md): 2-col grids, smaller nav padding, vitals 2-col grid
- 480px (xs): 1-col grids, smaller fonts, smaller gauges (64px), reduced padding
- Main container uses px-5 xs:px-6 md:px-8 for responsive horizontal padding
- Section padding uses py-12 xs:py-16 md:py-20 for consistent vertical rhythm
- Skills grid: 2 cols mobile, 3 cols tablet, auto-fit desktop
- Hero vitals: stacked mobile, 2-col tablet, flex row desktop
- **Quality checks**: `npm run typecheck` ✓, `npm run lint` ✓, `npm run build` ✓
- **Learnings**:
- Tailwind custom screens allow precise breakpoint matching to design specs
- Using w-16 h-16 xs:w-20 xs:h-20 for SVG gauges maintains aspect ratio while scaling
- Grid-based responsive layouts more reliable than flex-wrap for consistent card sizing
### Iteration 11 — Task 12: Final integration, testing, and polish
- **Completed**: Task 12 - Final integration, testing, and polish
- **Quality checks verified**:
- `npm run typecheck` ✓ - No TypeScript errors
- `npm run lint` ✓ - No ESLint errors
- `npm run build` ✓ - Production build completes (290KB JS, 18KB CSS gzipped to 94KB/4.5KB)
- **CV content accuracy verified** against CV_v4.md:
- Hero: Name, title, location, summary all match
- Experience: 5 roles in correct order with accurate dates and bullet points
- Education: MPharm UEA, Mary Seacole Programme with correct details
- Skills: 18 skills across Technical/Clinical/Strategic categories
- Projects: 4 projects with descriptions and PharMetrics link
- Contact: Phone, email, LinkedIn, location all accurate
- **All 12 tasks completed** - React conversion finished
- **Learnings**:
- Production build size is reasonable at ~94KB gzipped for JS
- All components properly typed with TypeScript strict mode
- IntersectionObserver hooks cleanup correctly on unmount
- CV has 5 roles but only 4 explicitly listed dates - inferred Duty Pharmacy Manager from GPhC registration date (Aug 2016)
- Key numbers verified: £14.6M efficiency, 14,000 patients, £2.6M savings, 70% reduction, 200 hours, £1M revenue, £220M budget
- Skills categorized into Active (technical), Clinical (healthcare domain), PRN (strategic/leadership)