# justdanyuen/portfolio architecture

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

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

## Overview

This is a personal portfolio site for an audio and software engineer. Visitors encounter a landing page, then explore biography and education, project work, and a résumé, with shared navigation and contact links. The project page presents the SV2 audio visualizer, its features, media, and thesis PDF; the résumé page previews and links to a downloadable PDF. The map covers these documented and sampled capabilities. Source excerpts show component usage and asset-path handling; unsampled page details and runtime routing are not expanded.

Main entry points: [`app/layout.tsx`](https://github.com/justdanyuen/portfolio/blob/main/app/layout.tsx) (Site layout), [`app/about/page.tsx`](https://github.com/justdanyuen/portfolio/blob/main/app/about/page.tsx) (About page), [`app/projects/page.tsx`](https://github.com/justdanyuen/portfolio/blob/main/app/projects/page.tsx) (Project showcase), [`app/resume/page.tsx`](https://github.com/justdanyuen/portfolio/blob/main/app/resume/page.tsx) (Résumé page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Shared site UI"]
  node_layout["Site layout<br/>[layout.tsx]"]
  node_navigation["Navigation<br/>[Nav.tsx]"]
  node_footer["Contact footer<br/>[Footer.tsx]"]
  node_hero["Intro hero<br/>[HeroText.tsx]"]
  node_accent["Accent blocks<br/>[AccentBlock.tsx]"]
  node_carousel["Photo carousel<br/>[PhotoCarousel.tsx]"]
  node_pathhelper["Asset path helper<br/>[basePath.ts]"]
end

subgraph group_pages["Portfolio pages"]
  node_home["Home page<br/>[page.tsx]"]
  node_about["About page<br/>[page.tsx]"]
  node_projects["Project showcase<br/>[page.tsx]"]
  node_resume["Résumé page<br/>[page.tsx]"]
end

subgraph group_media["Portfolio media"]
  node_images["Portfolio images"]
  node_resume_pdf["Résumé PDF<br/>[resume.pdf]"]
  node_thesis_pdf["Thesis PDF<br/>[SV2ThesisPaper.pdf]"]
  node_videos["Project videos"]
end

node_visitor(("Site visitor"))

node_visitor -.->|"visits"| node_layout
node_layout -->|"renders"| node_navigation
node_layout -->|"renders"| node_footer
node_layout -.->|"displays route"| node_home
node_layout -.->|"displays route"| node_about
node_layout -.->|"displays route"| node_projects
node_layout -.->|"displays route"| node_resume
node_home -->|"renders"| node_hero
node_hero -->|"formats asset path"| node_pathhelper
node_about -->|"renders"| node_accent
node_about -->|"formats asset paths"| node_pathhelper
node_about -->|"loads images"| node_images
node_about -.->|"imports carousel"| node_carousel
node_projects -->|"formats asset paths"| node_pathhelper
node_projects -->|"loads images"| node_images
node_projects -->|"loads video"| node_videos
node_projects -->|"links thesis PDF"| node_thesis_pdf
node_resume -->|"formats asset paths"| node_pathhelper
node_resume -->|"loads preview image"| node_images
node_resume -->|"links résumé PDF"| node_resume_pdf

click node_layout "https://github.com/justdanyuen/portfolio/blob/main/app/layout.tsx"
click node_navigation "https://github.com/justdanyuen/portfolio/blob/main/components/Nav.tsx"
click node_footer "https://github.com/justdanyuen/portfolio/blob/main/components/Footer.tsx"
click node_home "https://github.com/justdanyuen/portfolio/blob/main/app/page.tsx"
click node_hero "https://github.com/justdanyuen/portfolio/blob/main/components/HeroText.tsx"
click node_about "https://github.com/justdanyuen/portfolio/blob/main/app/about/page.tsx"
click node_accent "https://github.com/justdanyuen/portfolio/blob/main/components/AccentBlock.tsx"
click node_carousel "https://github.com/justdanyuen/portfolio/blob/main/components/PhotoCarousel.tsx"
click node_projects "https://github.com/justdanyuen/portfolio/blob/main/app/projects/page.tsx"
click node_resume "https://github.com/justdanyuen/portfolio/blob/main/app/resume/page.tsx"
click node_pathhelper "https://github.com/justdanyuen/portfolio/blob/main/lib/basePath.ts"
click node_images "https://github.com/justdanyuen/portfolio/tree/main/public/images"
click node_resume_pdf "https://github.com/justdanyuen/portfolio/blob/main/public/resume.pdf"
click node_thesis_pdf "https://github.com/justdanyuen/portfolio/blob/main/public/SV2ThesisPaper.pdf"
click node_videos "https://github.com/justdanyuen/portfolio/tree/main/public/videos"

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_layout,node_navigation,node_footer,node_hero,node_accent,node_carousel,node_pathhelper toneBlue
class node_home,node_about,node_projects,node_resume toneAmber
class node_images,node_resume_pdf,node_thesis_pdf,node_videos toneMint
class node_visitor toneIndigo
```

## Components

### Shared site UI

- [Site layout](https://github.com/justdanyuen/portfolio/blob/main/app/layout.tsx): `app/layout.tsx`
- [Navigation](https://github.com/justdanyuen/portfolio/blob/main/components/Nav.tsx): `components/Nav.tsx`
- [Contact footer](https://github.com/justdanyuen/portfolio/blob/main/components/Footer.tsx): `components/Footer.tsx`
- [Intro hero](https://github.com/justdanyuen/portfolio/blob/main/components/HeroText.tsx): `components/HeroText.tsx`
- [Accent blocks](https://github.com/justdanyuen/portfolio/blob/main/components/AccentBlock.tsx): `components/AccentBlock.tsx`
- [Photo carousel](https://github.com/justdanyuen/portfolio/blob/main/components/PhotoCarousel.tsx): `components/PhotoCarousel.tsx`
- [Asset path helper](https://github.com/justdanyuen/portfolio/blob/main/lib/basePath.ts): `lib/basePath.ts`

### Portfolio pages

- [Home page](https://github.com/justdanyuen/portfolio/blob/main/app/page.tsx): `app/page.tsx`
- [About page](https://github.com/justdanyuen/portfolio/blob/main/app/about/page.tsx): `app/about/page.tsx`
- [Project showcase](https://github.com/justdanyuen/portfolio/blob/main/app/projects/page.tsx): `app/projects/page.tsx`
- [Résumé page](https://github.com/justdanyuen/portfolio/blob/main/app/resume/page.tsx): `app/resume/page.tsx`

### Portfolio media

- [Portfolio images](https://github.com/justdanyuen/portfolio/tree/main/public/images): `public/images`
- [Résumé PDF](https://github.com/justdanyuen/portfolio/blob/main/public/resume.pdf): `public/resume.pdf`
- [Thesis PDF](https://github.com/justdanyuen/portfolio/blob/main/public/SV2ThesisPaper.pdf): `public/SV2ThesisPaper.pdf`
- [Project videos](https://github.com/justdanyuen/portfolio/tree/main/public/videos): `public/videos`

### Other components

- **Site visitor**

## Connections

- Site visitor → Site layout: visits
- Site layout → Navigation: renders (evidence: `app/layout.tsx`)
- Site layout → Contact footer: renders (evidence: `app/layout.tsx`)
- Site layout → Home page: displays route
- Site layout → About page: displays route
- Site layout → Project showcase: displays route
- Site layout → Résumé page: displays route
- Home page → Intro hero: renders (evidence: `app/page.tsx`)
- Intro hero → Asset path helper: formats asset path (evidence: `components/HeroText.tsx`)
- About page → Accent blocks: renders (evidence: `app/about/page.tsx`)
- About page → Asset path helper: formats asset paths (evidence: `app/about/page.tsx`)
- About page → Portfolio images: loads images (evidence: `app/about/page.tsx`)
- About page → Photo carousel: imports carousel (evidence: `app/about/page.tsx`)
- Project showcase → Asset path helper: formats asset paths (evidence: `app/projects/page.tsx`)
- Project showcase → Portfolio images: loads images (evidence: `app/projects/page.tsx`)
- Project showcase → Project videos: loads video (evidence: `app/projects/page.tsx`)
- Project showcase → Thesis PDF: links thesis PDF (evidence: `app/projects/page.tsx`)
- Résumé page → Asset path helper: formats asset paths (evidence: `app/resume/page.tsx`)
- Résumé page → Portfolio images: loads preview image (evidence: `app/resume/page.tsx`)
- Résumé page → Résumé PDF: links résumé PDF (evidence: `app/resume/page.tsx`)