portfolio/landingPagePolish.md

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.