portfolio/PROMPT.md

Task: Portfolio UX Improvements — GP Clinical System Theme Polish

Implement 11 prioritised UX improvements to the portfolio site. This is an interactive CV/portfolio themed as a GP primary care clinical system (like EMIS Web / SystmOne). The site should feel like a real GP system but function as a portfolio.

Important constraints:

• Do NOT change the overall structure or architecture
• Preserve the GP clinical system theme — improvements should reinforce it, not break it
• Respect existing conventions: TypeScript strict, Tailwind + CSS custom properties, Framer Motion with prefers-reduced-motion
• Path alias: @/* → src/*
• Quality gates: npm run lint && npm run typecheck && npm run build

Improvements (ordered by priority)

1. Restructure Profile Summary Text

File: src/components/tiles/PatientSummaryTile.tsx (or wherever the narrative renders) Problem: The patient summary narrative is a dense ~80-word paragraph — a wall of text. It's the first substantive content visitors see and doesn't match the structured clinical aesthetic. Change: Break into structured clinical-style data:

• Brief 1-2 sentence summary (like a presenting complaint)
• Key facts as labeled fields below: Specialisation, Current System, Population, Focus Areas
• Or collapse behind "Read more" with first sentence visible
• Must feel like GP system structured data, not a LinkedIn About section

2. Surface Impact Metrics on Project Cards

File: src/components/tiles/ProjectsTile.tsx (or the project card component) Problem: resultSummary exists in the data (e.g., "14,000 patients identified", "£2.6M savings") but is not rendered on project card faces. Recruiters scan for numbers. Change: Render resultSummary prominently on each project card — below the title, styled as a bold stat. If a project has no resultSummary, don't show a placeholder.

3. Add Prominent Contact/Download CV CTA

Problem: No visible "Get in touch" or "Download CV" button in the main content area. These actions only exist in the sidebar or command palette. Change: Add a small, visible row of action buttons (Email, LinkedIn, GitHub, Download CV) in the Patient Summary section. Style them as GP system action buttons to reinforce the theme. Keep it compact — not a hero CTA, but unmissable.

4. Reduce Boot + Login Sequence Time

Files: src/components/BootSequence.tsx, src/components/LoginScreen.tsx Problem: Boot (~6-8s) + Login (~4s) = ~10 seconds before content. Too slow for repeat visitors. Change: Reduce TYPING_SPEED multiplier to ~1.2 (from 2). Add sessionStorage detection — if user has visited before in this session, auto-skip directly to dashboard. Ensure skip button still appears early for first-time visitors.

5. Resolve Last Consultation / Timeline Duplication

Files: src/components/tiles/LastConsultationCard.tsx, src/components/tiles/TimelineInterventionsSubsection.tsx Problem: Current role appears twice — once as LastConsultationCard and again as first timeline accordion entry. Redundant. Change: Differentiate LastConsultationCard as a summary-only card (role, org, band, date range, one-line summary) without the full bullet points. The full details should only appear in the timeline accordion. Add a "Current" badge to the first timeline accordion entry.

6. Fix Text-Tertiary Contrast Ratio

File: src/index.css Problem: --text-tertiary: #8DA8A5 on --bg-dashboard: #F0F5F4 yields ~2.8:1 contrast, failing WCAG AA. Change: Darken --text-tertiary to at least #6B8886 (achieves ~4.5:1 on #F0F5F4). Verify the change looks good across dates, helper text, and monospace metadata.

7. Add Mobile Identity Bar

Problem: On mobile, no name or identity marker is visible without opening the drawer. Recruiters on mobile have no visual anchor. Change: Add a compact identity bar at the top of mobile layout showing "CHARLWOOD, Andrew" and brief role title. Only visible on mobile (below lg breakpoint where sidebar is hidden). Style it like a GP system patient banner strip.

8. Simplify KPI Section Header Language

File: The KPI/metrics section component Problem: "LATEST RESULTS (CLICK TO VIEW FULL REFERENCE RANGE)" is deep medical jargon that non-healthcare visitors won't understand. Change: Change to "KEY METRICS" or "IMPACT HIGHLIGHTS". Update the helper text to "Select a metric to inspect methodology, impact, and outcomes" (if not already). Keep the excellent metric cards unchanged.

9. Add Detail Panel Exit Animation

Files: src/components/DetailPanel.tsx Problem: Panel has panel-slide-in animation but closes instantly. panel-slide-out keyframe exists in CSS but is unused. Change: Implement exit animation — either wire up the existing panel-slide-out keyframe via a closing state, or use Framer Motion's AnimatePresence. The panel should slide out before unmounting.

10. Fix marginBottom Typo

File: src/components/tiles/LastConsultationCard.tsx (around line 89) Problem: marginBottom: '1=px' — typo, should be '1px' or appropriate value. Change: Fix the typo. Check surrounding styles for the correct intended value.

11. Add Arrow Navigation to Desktop Projects Carousel

File: src/components/tiles/ProjectsTile.tsx — ContinuousScrollCarousel component (lines ~356–480) Problem: The ContinuousScrollCarousel (desktop ≥1024px) auto-scrolls but offers no manual browsing. Change:

• Add prev/next arrow buttons (ChevronLeft, ChevronRight from lucide-react) positioned absolutely at left/right edges, vertically centered
• Style following the existing FullscreenButton pattern: var(--surface) background, var(--border) border, opacity hover effect, subtle shadow
• Arrow click handler: jump one card width + gap = ((viewportWidth - 36) / 4) + 12 pixels
• Apply temporary CSS transition on the track (transform 0.4s ease) for smooth animated jump; remove transition after completion so rAF loop isn't fighting CSS
• Handle wrapping: keep offset within [0, firstSetWidth) using modulo
• Pause/resume: on arrow click set isPausedRef = true, clear existing timeout, start 6-second timeout to resume auto-scroll
• Existing hover pause/resume still works independently
• Rapid clicks: each click resets the 6s timeout; transition handles overlapping clicks by snapping to current offset
• Reduced motion: arrows still work (instant jump, no transition), auto-scroll stays disabled per existing logic

Success Criteria

All of the following must be true:

• Profile summary is structured data, not a text wall — feels clinical
• Project cards display resultSummary when available
• Contact/Download CV actions are visible in the main content area
• Boot + login sequence completes in ~5 seconds or less for first visit; instant skip for return visitors
• LastConsultationCard is a distinct summary (no duplication with timeline)
• --text-tertiary passes WCAG AA contrast (4.5:1) on dashboard background
• Mobile shows identity/name without opening drawer
• KPI header uses plain language, not clinical jargon
• Detail panel has exit animation (slide out, not instant disappear)
• marginBottom typo is fixed
• Desktop projects carousel has prev/next arrow buttons
• Arrow buttons pause auto-scroll for 6s then resume
• npm run lint passes
• npm run typecheck passes
• npm run build passes
• No regressions — existing functionality preserved

Status

Track progress here. Mark items complete as you go. When all success criteria are met, print LOOP_COMPLETE.