# ryunumchon/portfolio architecture

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

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

## Overview

This is a browser-based personal profile presented as a Windows-style desktop. A visitor opens profile sections from desktop shortcuts or the Start menu; application configuration maps those entries to content components, while shared window state drives the window area and taskbar. The profile covers skills, work, education, biography, contact, downloads, schools, achievements, and test scores. The sampled sources show the shell, navigation, window management, theme, and drag behavior; some content components and the window-section implementation were not excerpted, so their internal wiring is not inferred.

Main entry points: [`src/config/apps.tsx`](https://github.com/ryunumchon/portfolio/blob/main/src/config/apps.tsx) (App registry), [`src/App.tsx`](https://github.com/ryunumchon/portfolio/blob/main/src/App.tsx) (App layout), [`src/components/common/Icon.tsx`](https://github.com/ryunumchon/portfolio/blob/main/src/components/common/Icon.tsx) (Icon renderer), [`src/context/WindowContext.tsx`](https://github.com/ryunumchon/portfolio/blob/main/src/context/WindowContext.tsx) (Window state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Desktop shell"]
  node_app["App layout<br/>[App.tsx]"]
  node_desktop["Desktop<br/>[Desktop.tsx]"]
  node_taskbar["Taskbar<br/>[Taskbar.tsx]"]
end

subgraph group_navigation["App navigation"]
  node_startmenu["Start menu<br/>[StartMenu.tsx]"]
  node_desktopicon["Desktop icons<br/>[DesktopIcon.tsx]"]
  node_startitems["Start menu items<br/>[StartMenuItem.tsx]"]
  node_startheader["Menu header"]
  node_appsconfig["App registry<br/>[apps.tsx]"]
end

subgraph group_windowing["Window system"]
  node_windowsection["Window area<br/>[WindowSection.tsx]"]
  node_window["App windows<br/>[Window.tsx]"]
  node_windowcontrols["Window controls"]
  node_windowbody["Window body<br/>[WindowBody.tsx]"]
  node_error["Error dialogs<br/>[ErrorDialog.tsx]"]
end

subgraph group_profile["Profile content"]
  node_skills["Skills<br/>[Skills.tsx]"]
  node_work["Work history<br/>[Work.tsx]"]
  node_education["Education<br/>[Education.tsx]"]
  node_about["About<br/>[About.tsx]"]
  node_contact["Contact<br/>[Contact.tsx]"]
  node_downloads["Downloads<br/>[Downloads.tsx]"]
  node_schoolpages["School profiles<br/>[Siit.tsx]"]
  node_achievements["Achievements<br/>[Achievements.tsx]"]
  node_testscores["Test scores<br/>[TestScores.tsx]"]
end

subgraph group_shared["Shared services"]
  node_windowstate["Window state<br/>[WindowContext.tsx]"]
  node_theme["Theme state<br/>[ThemeContext.tsx]"]
  node_icons["Icon assets<br/>[icons.ts]"]
  node_iconrenderer["Icon renderer<br/>[Icon.tsx]"]
  node_folderitem["Folder item<br/>[FolderItem.tsx]"]
  node_drag["Drag behavior<br/>[useDraggable.ts]"]
  node_clock["Clock hook<br/>[useClock.ts]"]
  node_apptypes["App types<br/>[app.ts]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens profile"| node_app
node_app -->|"renders"| node_desktop
node_app -->|"renders"| node_windowsection
node_app -->|"renders"| node_startmenu
node_app -->|"renders"| node_taskbar
node_app -->|"provides state"| node_windowstate
node_app -->|"provides theme"| node_theme
node_desktop -->|"reads entries"| node_appsconfig
node_desktop -->|"renders"| node_desktopicon
node_desktop -->|"opens windows"| node_windowstate
node_startmenu -->|"reads entries"| node_appsconfig
node_startmenu -->|"renders"| node_startitems
node_startmenu -->|"renders"| node_startheader
node_startmenu -->|"opens windows"| node_windowstate
node_desktopicon -->|"renders"| node_iconrenderer
node_startitems -->|"renders"| node_iconrenderer
node_taskbar -->|"reads state"| node_windowstate
node_taskbar -->|"renders clock"| node_clock
node_taskbar -->|"renders"| node_iconrenderer
node_appsconfig -->|"registers"| node_skills
node_appsconfig -->|"registers"| node_work
node_appsconfig -->|"registers"| node_education
node_appsconfig -->|"registers"| node_about
node_appsconfig -->|"registers"| node_contact
node_appsconfig -->|"registers"| node_downloads
node_appsconfig -->|"registers"| node_schoolpages
node_appsconfig -->|"registers"| node_achievements
node_appsconfig -->|"registers"| node_testscores
node_windowsection -.->|"displays"| node_window
node_window -->|"manages windows"| node_windowstate
node_window -->|"uses"| node_drag
node_window -->|"renders"| node_windowcontrols
node_window -->|"renders"| node_windowbody
node_error -->|"manages dialogs"| node_windowstate
node_error -->|"uses"| node_drag
node_error -->|"renders"| node_windowcontrols
node_error -->|"renders"| node_windowbody
node_error -->|"renders"| node_iconrenderer
node_iconrenderer -->|"reads theme"| node_theme
node_folderitem -->|"renders"| node_iconrenderer
node_window -->|"uses definitions"| node_apptypes
node_windowstate -->|"uses state types"| node_apptypes
node_skills -->|"renders"| node_iconrenderer
node_work -->|"renders"| node_iconrenderer
node_education -->|"renders"| node_folderitem
node_downloads -->|"renders"| node_folderitem

click node_app "https://github.com/ryunumchon/portfolio/blob/main/src/App.tsx"
click node_desktop "https://github.com/ryunumchon/portfolio/blob/main/src/components/desktop/Desktop.tsx"
click node_taskbar "https://github.com/ryunumchon/portfolio/blob/main/src/components/taskbar/Taskbar.tsx"
click node_startmenu "https://github.com/ryunumchon/portfolio/blob/main/src/components/startmenu/StartMenu.tsx"
click node_desktopicon "https://github.com/ryunumchon/portfolio/blob/main/src/components/desktop/DesktopIcon.tsx"
click node_startitems "https://github.com/ryunumchon/portfolio/blob/main/src/components/startmenu/StartMenuItem.tsx"
click node_startheader "https://github.com/ryunumchon/portfolio/blob/main/src/components/startmenu/StartMenuHeader.tsx"
click node_appsconfig "https://github.com/ryunumchon/portfolio/blob/main/src/config/apps.tsx"
click node_windowsection "https://github.com/ryunumchon/portfolio/blob/main/src/components/window/WindowSection.tsx"
click node_window "https://github.com/ryunumchon/portfolio/blob/main/src/components/window/Window.tsx"
click node_windowcontrols "https://github.com/ryunumchon/portfolio/blob/main/src/components/window/TitleBarControls.tsx"
click node_windowbody "https://github.com/ryunumchon/portfolio/blob/main/src/components/window/WindowBody.tsx"
click node_error "https://github.com/ryunumchon/portfolio/blob/main/src/components/error/ErrorDialog.tsx"
click node_skills "https://github.com/ryunumchon/portfolio/blob/main/src/components/applications/Skills.tsx"
click node_work "https://github.com/ryunumchon/portfolio/blob/main/src/components/applications/Work.tsx"
click node_education "https://github.com/ryunumchon/portfolio/blob/main/src/components/applications/Education.tsx"
click node_about "https://github.com/ryunumchon/portfolio/blob/main/src/components/applications/About.tsx"
click node_contact "https://github.com/ryunumchon/portfolio/blob/main/src/components/applications/Contact.tsx"
click node_downloads "https://github.com/ryunumchon/portfolio/blob/main/src/components/applications/Downloads.tsx"
click node_schoolpages "https://github.com/ryunumchon/portfolio/blob/main/src/components/applications/Siit.tsx"
click node_achievements "https://github.com/ryunumchon/portfolio/blob/main/src/components/applications/Achievements.tsx"
click node_testscores "https://github.com/ryunumchon/portfolio/blob/main/src/components/applications/TestScores.tsx"
click node_windowstate "https://github.com/ryunumchon/portfolio/blob/main/src/context/WindowContext.tsx"
click node_theme "https://github.com/ryunumchon/portfolio/blob/main/src/context/ThemeContext.tsx"
click node_icons "https://github.com/ryunumchon/portfolio/blob/main/src/config/icons.ts"
click node_iconrenderer "https://github.com/ryunumchon/portfolio/blob/main/src/components/common/Icon.tsx"
click node_folderitem "https://github.com/ryunumchon/portfolio/blob/main/src/components/common/FolderItem.tsx"
click node_drag "https://github.com/ryunumchon/portfolio/blob/main/src/hooks/useDraggable.ts"
click node_clock "https://github.com/ryunumchon/portfolio/blob/main/src/hooks/useClock.ts"
click node_apptypes "https://github.com/ryunumchon/portfolio/blob/main/src/types/app.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_app,node_desktop,node_taskbar toneBlue
class node_startmenu,node_desktopicon,node_startitems,node_startheader,node_appsconfig toneAmber
class node_windowsection,node_window,node_windowcontrols,node_windowbody,node_error toneMint
class node_skills,node_work,node_education,node_about,node_contact,node_downloads,node_schoolpages,node_achievements,node_testscores toneRose
class node_windowstate,node_theme,node_icons,node_iconrenderer,node_folderitem,node_drag,node_clock,node_apptypes,node_visitor toneIndigo
```

## Components

### Desktop shell

- [App layout](https://github.com/ryunumchon/portfolio/blob/main/src/App.tsx): `src/App.tsx`
- [Desktop](https://github.com/ryunumchon/portfolio/blob/main/src/components/desktop/Desktop.tsx): `src/components/desktop/Desktop.tsx`
- [Taskbar](https://github.com/ryunumchon/portfolio/blob/main/src/components/taskbar/Taskbar.tsx): `src/components/taskbar/Taskbar.tsx`

### App navigation

- [Start menu](https://github.com/ryunumchon/portfolio/blob/main/src/components/startmenu/StartMenu.tsx): `src/components/startmenu/StartMenu.tsx`
- [Desktop icons](https://github.com/ryunumchon/portfolio/blob/main/src/components/desktop/DesktopIcon.tsx): `src/components/desktop/DesktopIcon.tsx`
- [Start menu items](https://github.com/ryunumchon/portfolio/blob/main/src/components/startmenu/StartMenuItem.tsx): `src/components/startmenu/StartMenuItem.tsx`
- [Menu header](https://github.com/ryunumchon/portfolio/blob/main/src/components/startmenu/StartMenuHeader.tsx): `src/components/startmenu/StartMenuHeader.tsx`
- [App registry](https://github.com/ryunumchon/portfolio/blob/main/src/config/apps.tsx): `src/config/apps.tsx`

### Window system

- [Window area](https://github.com/ryunumchon/portfolio/blob/main/src/components/window/WindowSection.tsx): `src/components/window/WindowSection.tsx`
- [App windows](https://github.com/ryunumchon/portfolio/blob/main/src/components/window/Window.tsx): `src/components/window/Window.tsx`
- [Window controls](https://github.com/ryunumchon/portfolio/blob/main/src/components/window/TitleBarControls.tsx): `src/components/window/TitleBarControls.tsx`
- [Window body](https://github.com/ryunumchon/portfolio/blob/main/src/components/window/WindowBody.tsx): `src/components/window/WindowBody.tsx`
- [Error dialogs](https://github.com/ryunumchon/portfolio/blob/main/src/components/error/ErrorDialog.tsx): `src/components/error/ErrorDialog.tsx`

### Profile content

- [Skills](https://github.com/ryunumchon/portfolio/blob/main/src/components/applications/Skills.tsx): `src/components/applications/Skills.tsx`
- [Work history](https://github.com/ryunumchon/portfolio/blob/main/src/components/applications/Work.tsx): `src/components/applications/Work.tsx`
- [Education](https://github.com/ryunumchon/portfolio/blob/main/src/components/applications/Education.tsx): `src/components/applications/Education.tsx`
- [About](https://github.com/ryunumchon/portfolio/blob/main/src/components/applications/About.tsx): `src/components/applications/About.tsx`
- [Contact](https://github.com/ryunumchon/portfolio/blob/main/src/components/applications/Contact.tsx): `src/components/applications/Contact.tsx`
- [Downloads](https://github.com/ryunumchon/portfolio/blob/main/src/components/applications/Downloads.tsx): `src/components/applications/Downloads.tsx`
- [School profiles](https://github.com/ryunumchon/portfolio/blob/main/src/components/applications/Siit.tsx): `src/components/applications/Siit.tsx`
- [Achievements](https://github.com/ryunumchon/portfolio/blob/main/src/components/applications/Achievements.tsx): `src/components/applications/Achievements.tsx`
- [Test scores](https://github.com/ryunumchon/portfolio/blob/main/src/components/applications/TestScores.tsx): `src/components/applications/TestScores.tsx`

### Shared services

- [Window state](https://github.com/ryunumchon/portfolio/blob/main/src/context/WindowContext.tsx): `src/context/WindowContext.tsx`
- [Theme state](https://github.com/ryunumchon/portfolio/blob/main/src/context/ThemeContext.tsx): `src/context/ThemeContext.tsx`
- [Icon assets](https://github.com/ryunumchon/portfolio/blob/main/src/config/icons.ts): `src/config/icons.ts`
- [Icon renderer](https://github.com/ryunumchon/portfolio/blob/main/src/components/common/Icon.tsx): `src/components/common/Icon.tsx`
- [Folder item](https://github.com/ryunumchon/portfolio/blob/main/src/components/common/FolderItem.tsx): `src/components/common/FolderItem.tsx`
- [Drag behavior](https://github.com/ryunumchon/portfolio/blob/main/src/hooks/useDraggable.ts): `src/hooks/useDraggable.ts`
- [Clock hook](https://github.com/ryunumchon/portfolio/blob/main/src/hooks/useClock.ts): `src/hooks/useClock.ts`
- [App types](https://github.com/ryunumchon/portfolio/blob/main/src/types/app.ts): `src/types/app.ts`

### Other components

- **Visitor**

## Connections

- Visitor → App layout: opens profile
- App layout → Desktop: renders (evidence: `src/App.tsx`)
- App layout → Window area: renders (evidence: `src/App.tsx`)
- App layout → Start menu: renders (evidence: `src/App.tsx`)
- App layout → Taskbar: renders (evidence: `src/App.tsx`)
- App layout → Window state: provides state (evidence: `src/App.tsx`)
- App layout → Theme state: provides theme (evidence: `src/App.tsx`)
- Desktop → App registry: reads entries (evidence: `src/components/desktop/Desktop.tsx`)
- Desktop → Desktop icons: renders (evidence: `src/components/desktop/Desktop.tsx`)
- Desktop → Window state: opens windows (evidence: `src/components/desktop/Desktop.tsx`)
- Start menu → App registry: reads entries (evidence: `src/components/startmenu/StartMenu.tsx`)
- Start menu → Start menu items: renders (evidence: `src/components/startmenu/StartMenu.tsx`)
- Start menu → Menu header: renders (evidence: `src/components/startmenu/StartMenu.tsx`)
- Start menu → Window state: opens windows (evidence: `src/components/startmenu/StartMenu.tsx`)
- Desktop icons → Icon renderer: renders (evidence: `src/components/desktop/DesktopIcon.tsx`)
- Start menu items → Icon renderer: renders (evidence: `src/components/startmenu/StartMenuItem.tsx`)
- Taskbar → Window state: reads state (evidence: `src/components/taskbar/Taskbar.tsx`)
- Taskbar → Clock hook: renders clock
- Taskbar → Icon renderer: renders (evidence: `src/components/taskbar/Taskbar.tsx`)
- App registry → Skills: registers (evidence: `src/config/apps.tsx`)
- App registry → Work history: registers (evidence: `src/config/apps.tsx`)
- App registry → Education: registers (evidence: `src/config/apps.tsx`)
- App registry → About: registers (evidence: `src/config/apps.tsx`)
- App registry → Contact: registers (evidence: `src/config/apps.tsx`)
- App registry → Downloads: registers (evidence: `src/config/apps.tsx`)
- App registry → School profiles: registers (evidence: `src/config/apps.tsx`)
- App registry → Achievements: registers (evidence: `src/config/apps.tsx`)
- App registry → Test scores: registers (evidence: `src/config/apps.tsx`)
- Window area → App windows: displays
- App windows → Window state: manages windows (evidence: `src/components/window/Window.tsx`)
- App windows → Drag behavior: uses (evidence: `src/components/window/Window.tsx`)
- App windows → Window controls: renders (evidence: `src/components/window/Window.tsx`)
- App windows → Window body: renders (evidence: `src/components/window/Window.tsx`)
- Error dialogs → Window state: manages dialogs (evidence: `src/components/error/ErrorDialog.tsx`)
- Error dialogs → Drag behavior: uses (evidence: `src/components/error/ErrorDialog.tsx`)
- Error dialogs → Window controls: renders (evidence: `src/components/error/ErrorDialog.tsx`)
- Error dialogs → Window body: renders (evidence: `src/components/error/ErrorDialog.tsx`)
- Error dialogs → Icon renderer: renders (evidence: `src/components/error/ErrorDialog.tsx`)
- Icon renderer → Theme state: reads theme (evidence: `src/components/common/Icon.tsx`)
- Folder item → Icon renderer: renders (evidence: `src/components/common/FolderItem.tsx`)
- App windows → App types: uses definitions (evidence: `src/components/window/Window.tsx`)
- Window state → App types: uses state types (evidence: `src/context/WindowContext.tsx`)
- Skills → Icon renderer: renders (evidence: `src/components/applications/Skills.tsx`)
- Work history → Icon renderer: renders (evidence: `src/components/applications/Work.tsx`)
- Education → Folder item: renders (evidence: `src/components/applications/Education.tsx`)
- Downloads → Folder item: renders (evidence: `src/components/applications/Downloads.tsx`)