# zenith-nguyen/package-cv-portfolio architecture

> Architecture diagram of the GitHub repository zenith-nguyen/package-cv-portfolio, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/zenith-nguyen/package-cv-portfolio
- Repository: https://github.com/zenith-nguyen/package-cv-portfolio

## Overview

CV Portfolio Survival Kit is a client-side coaching app that guides job-seekers from career-role selection through level- and role-adapted CV guidance to a finished ATS-friendly bullet and mobile preview. The graph follows the documented live flow and source-supported calls; README capabilities include role-specific verbs, skills, recruiter quotes, and analytics. The excerpts do not establish all internal stage wiring, so uncertain links are omitted. Several roadmap-listed components are explicitly legacy rather than part of the live workflow.

Main entry points: [`src/app/App.tsx`](https://github.com/zenith-nguyen/package-cv-portfolio/blob/main/src/app/App.tsx) (Screen orchestration), [`src/app/components/Screen3Workspace.tsx`](https://github.com/zenith-nguyen/package-cv-portfolio/blob/main/src/app/components/Screen3Workspace.tsx) (Guided workspace), [`src/main.tsx`](https://github.com/zenith-nguyen/package-cv-portfolio/blob/main/src/main.tsx) (App mount), [`src/utils/analytics.ts`](https://github.com/zenith-nguyen/package-cv-portfolio/blob/main/src/utils/analytics.ts) (Event tracking)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Coaching experience"]
  node_flow["Screen orchestration<br/>[App.tsx]"]
  node_role["Role selection<br/>[Screen1Pillars.tsx]"]
  node_workspace["Guided workspace"]
  node_finish["Finished bullet<br/>[Screen4Finish.tsx]"]
  node_mobile["Mobile preview"]
end

subgraph group_content["Guidance content"]
  node_roledata["Role-level content<br/>[roleData.ts]"]
end

subgraph group_telemetry["Analytics"]
  node_analyticsutil["Event tracking<br/>[analytics.ts]"]
  node_analytics["Vercel Analytics"]
end

node_jobseeker(("Job-seeker"))
node_mount["App mount<br/>[main.tsx]"]

node_jobseeker -->|"opens app"| node_mount
node_mount -->|"renders"| node_flow
node_flow -->|"shows selection"| node_role
node_role -->|"selects role"| node_flow
node_flow -->|"shows workspace"| node_workspace
node_workspace -->|"gets role-level guidance"| node_roledata
node_flow -->|"passes bullet"| node_finish
node_flow -->|"shows overlay"| node_mobile
node_flow -->|"tracks session"| node_analyticsutil
node_workspace -->|"tracks engagement"| node_analyticsutil
node_analyticsutil -.->|"sends events"| node_analytics
node_mount -.->|"renders analytics"| node_analytics

click node_mount "https://github.com/zenith-nguyen/package-cv-portfolio/blob/main/src/main.tsx"
click node_flow "https://github.com/zenith-nguyen/package-cv-portfolio/blob/main/src/app/App.tsx"
click node_role "https://github.com/zenith-nguyen/package-cv-portfolio/blob/main/src/app/components/Screen1Pillars.tsx"
click node_workspace "https://github.com/zenith-nguyen/package-cv-portfolio/blob/main/src/app/components/Screen3Workspace.tsx"
click node_roledata "https://github.com/zenith-nguyen/package-cv-portfolio/blob/main/src/data/roleData.ts"
click node_finish "https://github.com/zenith-nguyen/package-cv-portfolio/blob/main/src/app/components/Screen4Finish.tsx"
click node_mobile "https://github.com/zenith-nguyen/package-cv-portfolio/blob/main/src/app/components/MobileWorkspacePreview.tsx"
click node_analyticsutil "https://github.com/zenith-nguyen/package-cv-portfolio/blob/main/src/utils/analytics.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_flow,node_role,node_workspace,node_finish,node_mobile toneBlue
class node_roledata toneAmber
class node_analyticsutil,node_analytics toneMint
class node_jobseeker toneIndigo
class node_mount toneTeal
```

## Components

### Coaching experience

- [Screen orchestration](https://github.com/zenith-nguyen/package-cv-portfolio/blob/main/src/app/App.tsx): `src/app/App.tsx`
- [Role selection](https://github.com/zenith-nguyen/package-cv-portfolio/blob/main/src/app/components/Screen1Pillars.tsx): `src/app/components/Screen1Pillars.tsx`
- [Guided workspace](https://github.com/zenith-nguyen/package-cv-portfolio/blob/main/src/app/components/Screen3Workspace.tsx): `src/app/components/Screen3Workspace.tsx`
- [Finished bullet](https://github.com/zenith-nguyen/package-cv-portfolio/blob/main/src/app/components/Screen4Finish.tsx): `src/app/components/Screen4Finish.tsx`
- [Mobile preview](https://github.com/zenith-nguyen/package-cv-portfolio/blob/main/src/app/components/MobileWorkspacePreview.tsx): `src/app/components/MobileWorkspacePreview.tsx`

### Guidance content

- [Role-level content](https://github.com/zenith-nguyen/package-cv-portfolio/blob/main/src/data/roleData.ts): `src/data/roleData.ts`

### Analytics

- [Event tracking](https://github.com/zenith-nguyen/package-cv-portfolio/blob/main/src/utils/analytics.ts): `src/utils/analytics.ts`
- **Vercel Analytics**

### Other components

- **Job-seeker**
- [App mount](https://github.com/zenith-nguyen/package-cv-portfolio/blob/main/src/main.tsx): `src/main.tsx`

## Connections

- Job-seeker → App mount: opens app
- App mount → Screen orchestration: renders
- Screen orchestration → Role selection: shows selection
- Role selection → Screen orchestration: selects role
- Screen orchestration → Guided workspace: shows workspace
- Guided workspace → Role-level content: gets role-level guidance
- Screen orchestration → Finished bullet: passes bullet
- Screen orchestration → Mobile preview: shows overlay
- Screen orchestration → Event tracking: tracks session
- Guided workspace → Event tracking: tracks engagement
- Event tracking → Vercel Analytics: sends events
- App mount → Vercel Analytics: renders analytics