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

Update progress: Mark Task 4 complete, add iteration 4 learnings

Browse Source
This commit is contained in:
A Charlwood
2026-02-11 01:05:40 +00:00
parent 8d26049b17
commit 65fc23e79b
2 changed files with 25 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Ralph/IMPLEMENTATION_PLAN.md
+1 -1
View File
@@ -119,7 +119,7 @@ src/
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. 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.
- [ ] **Task 4: Build PatientBanner component (full and condensed)** - [x] **Task 4: Build PatientBanner component (full and condensed)**
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. 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.
Ralph/progress.txt
+24
View File
@@ -129,3 +129,27 @@ This is a complete redesign of the CV presentation, moving from the ECG animatio
- **Learnings**: - **Learnings**:
- Geist Mono not available via Google Fonts, using Fira Code as fallback - Geist Mono not available via Google Fonts, using Fira Code as fallback
- Total login animation timing: ~1.2s (350ms username + 150ms pause + 160ms password + 150ms pause + 100ms button + 200ms hold) - Total login animation timing: ~1.2s (350ms username + 150ms pause + 160ms password + 150ms pause + 100ms button + 200ms hold)
### Iteration 4 — Task 4: Build PatientBanner component with full and condensed modes
- **Completed**: Task 4 - Created PatientBanner component with scroll-based condensation
- **Files created**:
- `src/hooks/useScrollCondensation.ts` - IntersectionObserver hook for scroll detection
- `src/components/PatientBanner.tsx` - Full (80px) and condensed (48px) banner modes
- **Design decisions**:
- IntersectionObserver with rootMargin -100px to detect scroll past threshold
- Smooth height transition using CSS `transition-all duration-200 ease-out`
- Sticky positioning with z-40 for persistent visibility
- Status dot: 8px circle, green for Active
- Badge: NHS blue background, white text, small pill shape
- Action buttons: outlined with NHS blue, fill on hover
- GPhC number formatted with spaces like NHS number (221 181 0)
- Tooltip on NHS No field explaining it's GPhC Registration Number
- **Accessibility**:
- `role="banner"` on header element
- `aria-label` on status dot
- Proper link semantics for phone and email
- **Quality checks**: `npm run typecheck` ✓, `npm run lint` ✓, `npm run build` ✓
- **Learnings**:
- IntersectionObserver with rootMargin provides cleaner scroll detection than scroll event listeners
- Sentinel element at top of viewport triggers condensation when it leaves view
- Sticky positioning requires no JavaScript for the sticky behavior itself