# theyellowduck/portfolio-website architecture

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

- Interactive diagram: https://gitdiagram.com/theyellowduck/portfolio-website
- Repository: https://github.com/theyellowduck/portfolio-website

## Overview

Museum Portfolio serves a fast web portfolio and a canvas-based museum from shared exhibit content. Visitors browse the site, enter the museum, navigate rooms, and inspect exhibits; separate routes provide ghost presence and résumé/transcript data. The README documents the engine/UI boundary and major capabilities; sampled source confirms engine orchestration and ghost persistence, but does not expose every UI handoff or data-refresh implementation.

Main entry points: [`src/game/engine.ts`](https://github.com/theyellowduck/portfolio-website/blob/main/src/game/engine.ts) (Game engine), [`src/data/projects.ts`](https://github.com/theyellowduck/portfolio-website/blob/main/src/data/projects.ts) (Exhibit content), [`src/app/page.tsx`](https://github.com/theyellowduck/portfolio-website/blob/main/src/app/page.tsx) (Home page), [`src/components/SiteShell.tsx`](https://github.com/theyellowduck/portfolio-website/blob/main/src/components/SiteShell.tsx) (Site shell)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Visitor experiences"]
  node_home["Home page<br/>[page.tsx]"]
  node_site["Site shell<br/>[SiteShell.tsx]"]
  node_portfolio["Web portfolio<br/>[Portfolio.tsx]"]
  node_gamecanvas["Game canvas<br/>[GameCanvas.tsx]"]
  node_hud["Game HUD<br/>[HUD.tsx]"]
  node_overlays["Exhibit overlays<br/>[ExhibitOverlay.tsx]"]
end

subgraph group_engine["Museum engine"]
  node_engine["Game engine<br/>[engine.ts]"]
  node_player["Player movement<br/>[player.ts]"]
  node_collision["Collision<br/>[collision.ts]"]
  node_pathfinding["Pathfinding<br/>[pathfinding.ts]"]
  node_world["Generated world<br/>[tilemap.ts]"]
  node_renderer["Scene renderer<br/>[renderer.ts]"]
  node_ghostsystem["Ghost replay<br/>[ghosts.ts]"]
end

subgraph group_content["Portfolio content"]
  node_content["Exhibit content<br/>[projects.ts]"]
  node_skills["Skills wing<br/>[course-skills.ts]"]
end

subgraph group_services["Routes and services"]
  node_ghostroute["Ghost API<br/>[route.ts]"]
  node_redis[("Upstash Redis")]
  node_resumeapi["Résumé API<br/>[route.ts]"]
  node_transcriptapi["Transcript API<br/>[route.ts]"]
  node_resumeparser["Résumé parser<br/>[resume-parser.ts]"]
  node_transcriptparser["Transcript parser"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_home
node_home -->|"renders"| node_site
node_site -->|"shows"| node_portfolio
node_visitor -->|"enters museum"| node_gamecanvas
node_gamecanvas -->|"hosts"| node_engine
node_engine -->|"updates"| node_player
node_player -->|"resolves movement"| node_collision
node_engine -->|"finds routes"| node_pathfinding
node_engine -->|"reads map"| node_world
node_engine -->|"draws scene"| node_renderer
node_engine -->|"emits events"| node_hud
node_hud -->|"opens exhibits"| node_overlays
node_engine -->|"reads exhibits"| node_content
node_portfolio -->|"renders content"| node_content
node_content -->|"supplies skills"| node_skills
node_engine -->|"replays paths"| node_ghostsystem
node_engine -->|"loads and submits paths"| node_ghostroute
node_ghostroute -->|"reads and writes"| node_redis
node_visitor -->|"requests résumé"| node_resumeapi
node_visitor -->|"requests transcript"| node_transcriptapi
node_resumeapi -->|"serves parsed data"| node_resumeparser
node_transcriptapi -->|"serves parsed data"| node_transcriptparser

click node_home "https://github.com/theyellowduck/portfolio-website/blob/main/src/app/page.tsx"
click node_site "https://github.com/theyellowduck/portfolio-website/blob/main/src/components/SiteShell.tsx"
click node_portfolio "https://github.com/theyellowduck/portfolio-website/blob/main/src/components/site/Portfolio.tsx"
click node_gamecanvas "https://github.com/theyellowduck/portfolio-website/blob/main/src/components/GameCanvas.tsx"
click node_hud "https://github.com/theyellowduck/portfolio-website/blob/main/src/components/HUD.tsx"
click node_overlays "https://github.com/theyellowduck/portfolio-website/blob/main/src/components/overlays/ExhibitOverlay.tsx"
click node_engine "https://github.com/theyellowduck/portfolio-website/blob/main/src/game/engine.ts"
click node_player "https://github.com/theyellowduck/portfolio-website/blob/main/src/game/player.ts"
click node_collision "https://github.com/theyellowduck/portfolio-website/blob/main/src/game/collision.ts"
click node_pathfinding "https://github.com/theyellowduck/portfolio-website/blob/main/src/game/pathfinding.ts"
click node_world "https://github.com/theyellowduck/portfolio-website/blob/main/src/game/tilemap.ts"
click node_renderer "https://github.com/theyellowduck/portfolio-website/blob/main/src/game/renderer.ts"
click node_ghostsystem "https://github.com/theyellowduck/portfolio-website/blob/main/src/game/ghosts.ts"
click node_content "https://github.com/theyellowduck/portfolio-website/blob/main/src/data/projects.ts"
click node_skills "https://github.com/theyellowduck/portfolio-website/blob/main/src/lib/course-skills.ts"
click node_ghostroute "https://github.com/theyellowduck/portfolio-website/blob/main/src/app/api/ghosts/route.ts"
click node_resumeapi "https://github.com/theyellowduck/portfolio-website/blob/main/src/app/api/resume/route.ts"
click node_transcriptapi "https://github.com/theyellowduck/portfolio-website/blob/main/src/app/api/transcript/route.ts"
click node_resumeparser "https://github.com/theyellowduck/portfolio-website/blob/main/src/lib/resume-parser.ts"
click node_transcriptparser "https://github.com/theyellowduck/portfolio-website/blob/main/src/lib/transcript-parser.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_home,node_site,node_portfolio,node_gamecanvas,node_hud,node_overlays toneBlue
class node_engine,node_player,node_collision,node_pathfinding,node_world,node_renderer,node_ghostsystem toneAmber
class node_content,node_skills toneMint
class node_ghostroute,node_redis,node_resumeapi,node_transcriptapi,node_resumeparser,node_transcriptparser toneRose
class node_visitor toneIndigo
```

## Components

### Visitor experiences

- [Home page](https://github.com/theyellowduck/portfolio-website/blob/main/src/app/page.tsx): `src/app/page.tsx`
- [Site shell](https://github.com/theyellowduck/portfolio-website/blob/main/src/components/SiteShell.tsx): `src/components/SiteShell.tsx`
- [Web portfolio](https://github.com/theyellowduck/portfolio-website/blob/main/src/components/site/Portfolio.tsx): `src/components/site/Portfolio.tsx`
- [Game canvas](https://github.com/theyellowduck/portfolio-website/blob/main/src/components/GameCanvas.tsx): `src/components/GameCanvas.tsx`
- [Game HUD](https://github.com/theyellowduck/portfolio-website/blob/main/src/components/HUD.tsx): `src/components/HUD.tsx`
- [Exhibit overlays](https://github.com/theyellowduck/portfolio-website/blob/main/src/components/overlays/ExhibitOverlay.tsx): `src/components/overlays/ExhibitOverlay.tsx`

### Museum engine

- [Game engine](https://github.com/theyellowduck/portfolio-website/blob/main/src/game/engine.ts): `src/game/engine.ts`
- [Player movement](https://github.com/theyellowduck/portfolio-website/blob/main/src/game/player.ts): `src/game/player.ts`
- [Collision](https://github.com/theyellowduck/portfolio-website/blob/main/src/game/collision.ts): `src/game/collision.ts`
- [Pathfinding](https://github.com/theyellowduck/portfolio-website/blob/main/src/game/pathfinding.ts): `src/game/pathfinding.ts`
- [Generated world](https://github.com/theyellowduck/portfolio-website/blob/main/src/game/tilemap.ts): `src/game/tilemap.ts`
- [Scene renderer](https://github.com/theyellowduck/portfolio-website/blob/main/src/game/renderer.ts): `src/game/renderer.ts`
- [Ghost replay](https://github.com/theyellowduck/portfolio-website/blob/main/src/game/ghosts.ts): `src/game/ghosts.ts`

### Portfolio content

- [Exhibit content](https://github.com/theyellowduck/portfolio-website/blob/main/src/data/projects.ts): `src/data/projects.ts`
- [Skills wing](https://github.com/theyellowduck/portfolio-website/blob/main/src/lib/course-skills.ts): `src/lib/course-skills.ts`

### Routes and services

- [Ghost API](https://github.com/theyellowduck/portfolio-website/blob/main/src/app/api/ghosts/route.ts): `src/app/api/ghosts/route.ts`
- **Upstash Redis**
- [Résumé API](https://github.com/theyellowduck/portfolio-website/blob/main/src/app/api/resume/route.ts): `src/app/api/resume/route.ts`
- [Transcript API](https://github.com/theyellowduck/portfolio-website/blob/main/src/app/api/transcript/route.ts): `src/app/api/transcript/route.ts`
- [Résumé parser](https://github.com/theyellowduck/portfolio-website/blob/main/src/lib/resume-parser.ts): `src/lib/resume-parser.ts`
- [Transcript parser](https://github.com/theyellowduck/portfolio-website/blob/main/src/lib/transcript-parser.ts): `src/lib/transcript-parser.ts`

### Other components

- **Visitor**

## Connections

- Visitor → Home page: opens
- Home page → Site shell: renders
- Site shell → Web portfolio: shows
- Visitor → Game canvas: enters museum
- Game canvas → Game engine: hosts
- Game engine → Player movement: updates
- Player movement → Collision: resolves movement
- Game engine → Pathfinding: finds routes
- Game engine → Generated world: reads map
- Game engine → Scene renderer: draws scene
- Game engine → Game HUD: emits events
- Game HUD → Exhibit overlays: opens exhibits
- Game engine → Exhibit content: reads exhibits
- Web portfolio → Exhibit content: renders content
- Exhibit content → Skills wing: supplies skills
- Game engine → Ghost replay: replays paths
- Game engine → Ghost API: loads and submits paths
- Ghost API → Upstash Redis: reads and writes
- Visitor → Résumé API: requests résumé
- Visitor → Transcript API: requests transcript
- Résumé API → Résumé parser: serves parsed data
- Transcript API → Transcript parser: serves parsed data