# Landing Page Polish Plan

## KPI Cards (Make Evidence Drawer Obvious)

### Core copy change
- Update subsection header to: `Latest Results (click to view full reference range)`.

### Recommended interaction and affordance updates
1. Add explicit CTA text on every KPI card:
- `Click to view evidence` or `Open case summary`.
- Keep this always visible (do not hide behind hover).

2. Add a visible action affordance icon:
- Use a chevron, plus, or document icon in the card corner.
- Keep icon visible at all times to signal clickability.

3. Strengthen hover and focus states:
- On hover/focus: slightly lift card, increase border contrast, subtle shadow/glow.
- Ensure clear keyboard focus ring for accessibility.
- Keep `cursor: pointer` on full card.

4. Add a one-time coachmark:
- Pulse a single KPI card on first visit.
- Message: `Open any metric to see evidence`.
- Dismiss permanently after first KPI click.

5. Add a section-level helper hint above KPI grid:
- `Select a metric to inspect methodology, impact, and outcomes`.

6. Keep interaction labels persistent for mobile:
- Do not rely on hover-only affordances.
- Ensure all cues are visible on touch devices.

7. Add click/tap micro-feedback:
- Subtle pressed-state animation on card tap.
- Immediate drawer motion to confirm action.

### Priority (low effort -> high gain)
1. Header copy update
2. Persistent CTA text + action icon
3. Strong hover/focus states
4. One-time coachmark
5. Micro-animation polish

---

## Network Graph (Career Constellation) Improvements

## Key issues identified in current implementation
1. Keyboard accessibility overlay is incorrect:
- Hidden focus buttons are all centered rather than mapped to real node coordinates.

2. Simulation starts from poor initial state:
- Nodes initialize from `(0,0)`, causing visual jumpiness and unstable first impression.

3. Label readability and collision handling are weak:
- Dense regions become hard to scan quickly.

4. Interaction is hover-first:
- Mobile/touch and keyboard parity is limited.

5. Timeline logic is invisible:
- Layout uses years but lacks visual timeline scaffolding (ticks/axis/era cues).

## Direction agreed
- Desktop: pivot to a two-column workspace.
- Left column: graph (sticky).
- Right column: chronological clinical record stream (work + education).
- Mobile/tablet: keep stacked layout (graph above timeline).

## Important implementation note
- Do **not** visually rotate the SVG with CSS transforms.
- Instead, remap the graph layout so time runs vertically:
- Roles aligned by year from top (oldest) to bottom (newest).
- Skills positioned around their linked roles.

## Recommended graph changes
1. Add timeline guides:
- Year ticks/markers and subtle era separators.
- Small legend for node/link semantics.

2. Seed deterministic initial positions:
- Pre-place role nodes on year track.
- Pre-place skill nodes near connected role clusters.
- Then run constrained simulation for gentle settling, not dramatic motion.

3. Fix keyboard/touch interaction model:
- Map focusable hit targets to actual node positions.
- Add tap-to-pin highlight mode for mobile.
- Keep Enter/Space behavior equivalent for keyboard users.

4. Improve label system:
- Smarter truncation, optional reveal-on-hover/focus, and collision avoidance.
- Increase contrast and spacing where clusters are dense.

5. Preserve and enhance relationship highlighting:
- Keep connected-node/link emphasis behavior.
- Improve selected state persistence (not just hover transient state).

## Priority (low effort -> high gain)
1. Timeline guides + legend
2. Deterministic initial positions
3. Correct keyboard hit-target mapping
4. Tap-to-pin for mobile
5. Label collision/declutter strategy

---

## Layout Note for Chronology Column
- Use a single chronological stream with type badges (`Role`, `Education`).
- This preserves the same current visual order while staying future-proof if entries interleave later.