- Refactored BootSequence to config-driven architecture with type-safe line components
- Added cursor position capture and smooth cursor-to-dot morph transition
- Rebuilt ECGAnimation with mask-based text reveal technique
- Implemented connector lines between letters with per-character profiles
- ECG trace now starts from cursor position (no teleport)
- Added prefers-reduced-motion support for both phases
- Updated App.tsx to pass cursor position between components
Quality checks: typecheck ✓, lint ✓, build ✓
Task 1: Design system foundation and font setup
- Add Geist Mono font to Google Fonts import for PMR coded entries and timestamps
- Extend PMR color tokens in Tailwind config (card, text variants, borders, alert colors)
- Update border-radius defaults: 4px for cards/inputs, 12px for login card
- Add PMR-specific CSS custom properties in index.css
- Add .pmr-theme, .font-inter, .font-geist-mono utility classes
- Add pmr shadow token (minimal clinical system shadow)
All PMR color tokens now match ref-design-system.md spec exactly.
- Login card fades out with scale animation (200ms)
- Patient banner slides down from top (200ms)
- Sidebar slides in from left (250ms, 50ms delay)
- Main content fades in (300ms, 150ms delay)
- Mobile nav slides up (200ms)
- All animations respect prefers-reduced-motion
- Mark Task 15 complete in IMPLEMENTATION_PLAN.md
- Add useBreakpoint hook for responsive breakpoint detection
- Add MobileBottomNav component for mobile navigation
- Update ClinicalSidebar with tablet icon-only mode and tooltips
- Update PatientBanner with mobile minimal mode and overflow menu
- Update PMRInterface to handle responsive layouts and mobile search
- Add mobile card layouts to MedicationsView, ProblemsView,
InvestigationsView, and DocumentsView
- Desktop: 220px sidebar, full banner, tables
- Tablet: 56px icon sidebar, condensed banner, scrollable tables
- Mobile: Bottom nav, minimal banner, card layouts, search bar
- Create AccessibilityContext for global focus management and expanded state
- Add roving tabindex to sidebar with Up/Down/Enter/Home/End navigation
- Focus management: after login, after view change, after item expansion
- Global Escape closes expanded items across all views
- Add scope='col' to SummaryView table headers
- Add focus-after-expand to ConsultationsView
- Update ARIA roles: role='menu', role='menuitem', aria-current
- Created ReferralsView component with clinical referral form UI
- Pre-filled patient info (CHARLWOOD, Andrew; NHS Number)
- Priority toggle: Urgent/Routine/Two-Week Wait with tooltips
- Form fields: Referrer Name/Email/Org, Reason textarea
- Contact method radio: Email/Phone/LinkedIn
- Form validation for required fields
- Loading state with spinner on submit
- Success state with REF-YYYY-MMDD-NNN reference number
- Direct Contact table with clickable email/phone/LinkedIn links
- Responsive two-column layout for form fields
- Consistent clinical system styling with NHS blue accents
- Created InvestigationsView component with expandable rows
- Status badges: Complete (green), Ongoing (amber), Live (pulsing green)
- Tree-indented results panel with methodology, results, tech stack
- View Results button for PharMetrics linking to medicines.charlwood.xyz
- Proper semantic table markup with scope attributes
- Traffic lights always accompanied by text labels
- Accordion behavior: only one row expanded at a time
- Height animation 200ms ease-out for expand/collapse
- Respects prefers-reduced-motion
- Updated PMRInterface to include InvestigationsView
- Create MedicationsView component with three category tabs (Active, Clinical, PRN)
- Implement sortable columns with visual sort indicators
- Add expandable rows showing prescribing history timeline
- Use proper semantic table markup with scope attributes
- Add fadeIn animation for expanded content
- Traffic light status dots with text labels for accessibility
- Alternating row colors and hover states (#EFF6FF)
- Respects prefers-reduced-motion preference
Task 8 of Clinical Record PMR implementation
- Create ConsultationsView with 5 expandable consultation entries
- Each entry has color-coded left border by employer (NHS blue vs Teal)
- Collapsed state shows date, org, role, key coded entry
- Expanded state shows Duration, HISTORY, EXAMINATION, PLAN, CODED ENTRIES
- Accordion behavior: only one entry expanded at a time
- Expand animation 200ms ease-out, respects reduced motion
- Section headers in uppercase with letter-spacing
- Coded entries in [XXX000] format with Geist Mono font
- Create SummaryView component with clinical alert banner
- Clinical alert: amber background, warning icon, acknowledge interaction
- Alert animates in with spring effect, dismisses with checkmark → collapse
- Demographics card: full width, two-column key-value layout
- Active Problems card: 3 active/in-progress items with traffic lights
- Current Medications Quick View: 4-column table showing top 5 skills
- Last Consultation card: preview of most recent role
- Add navigation handlers for view switching
- Respects prefers-reduced-motion for all animations
- Proper table semantics and accessibility attributes
- Create ClinicalSidebar component with 7 navigation items
- NHS blue active state with 3px left border
- Search input with basic filtering (fuse.js integration pending)
- Keyboard shortcuts Alt+1-7 for navigation
- URL hash routing (#summary, #consultations, etc.)
- Session footer with current time
- Create PMRInterface container component
- Update App.tsx to use 'pmr' phase instead of 'content'
- Create useScrollCondensation hook with IntersectionObserver
- PatientBanner with 80px full mode and 48px condensed mode
- Smooth height transition (200ms) on scroll past 100px
- Status dot (green) and badge for 'Open to opportunities'
- Action buttons: Download CV, Email, LinkedIn
- NHS blue outlined buttons with hover fill effect
- Proper GPhC number formatting with tooltip
- Sticky positioning for persistent visibility
- 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
- 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
- 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.
- 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
- 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
- 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
admin