# ezykl/portfolio architecture

> Architecture diagram of the GitHub repository ezykl/portfolio, 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/ezykl/portfolio
- Repository: https://github.com/ezykl/portfolio

## Overview

This is a personal portfolio site whose main visitor journey is to enter through a gated, image-preloaded hero, explore interactive scene content and portfolio sections, and optionally send a contact message. The hero also hosts a find-the-object minigame using layered outside and room scenes. Internally, a reusable scene engine renders interactive layers and coordinates per-scene refs and glow state. The README is empty and several files are unsampled, so section wiring beyond the shown imports and explicitly documented behavior is not expanded.

Main entry points: [`src/App.tsx`](https://github.com/ezykl/portfolio/blob/master/src/App.tsx) (App Shell), [`src/engine/SceneEngine.tsx`](https://github.com/ezykl/portfolio/blob/master/src/engine/SceneEngine.tsx) (Scene Engine), [`src/components/Hero/Hero.tsx`](https://github.com/ezykl/portfolio/blob/master/src/components/Hero/Hero.tsx) (Hero), [`src/components/sections/ScrollSections.tsx`](https://github.com/ezykl/portfolio/blob/master/src/components/sections/ScrollSections.tsx) (Portfolio Sections)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Site Shell"]
  node_app["App Shell<br/>[App.tsx]"]
  node_load["Initial Load<br/>[useInitialLoad.ts]"]
  node_loading["Loading Screen<br/>[LoadingScreen.tsx]"]
  node_navbar["Navigation<br/>[NavBar.tsx]"]
  node_music["Music Host<br/>[MusicHost.tsx]"]
end

subgraph group_portfolio["Portfolio Content"]
  node_home["Home Page<br/>[HomePage.tsx]"]
  node_hero["Hero<br/>[Hero.tsx]"]
  node_sections["Portfolio Sections<br/>[ScrollSections.tsx]"]
  node_projects["Projects"]
  node_gallery["Gallery<br/>[GallerySection.tsx]"]
  node_flipbook["School Flipbook"]
  node_preview["Project Preview"]
end

subgraph group_interaction["Interactive Experiences"]
  node_workspace["Hero Scene<br/>[ZykCoding.tsx]"]
  node_popup["Popup Host<br/>[PopupHost.tsx]"]
  node_minigame["Find Object Game<br/>[MinigameHost.tsx]"]
  node_outside["Outside Scene<br/>[OutsideScene.tsx]"]
  node_room["Room Scene<br/>[RoomScene.tsx]"]
end

subgraph group_engine["Scene Engine"]
  node_engine["Scene Engine<br/>[SceneEngine.tsx]"]
  node_renderer["Scene Renderer<br/>[SceneRenderer.tsx]"]
  node_layerrenderer["Layer Renderer<br/>[LayerRenderer.tsx]"]
  node_layer["Interactive Layer"]
  node_refs["Scene Refs"]
  node_glow["Scene Glow"]
end

subgraph group_contact["Contact"]
  node_contactform["Contact Form<br/>[ContactForm.tsx]"]
  node_emailjs["EmailJS"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens site"| node_app
node_app -->|"checks assets"| node_load
node_app -->|"shows while loading"| node_loading
node_app -->|"renders"| node_home
node_app -->|"shows after reveal"| node_navbar
node_app -->|"renders"| node_music
node_load -->|"supplies progress"| node_loading
node_home -->|"presents"| node_hero
node_home -->|"presents"| node_sections
node_sections -->|"renders"| node_projects
node_sections -->|"renders"| node_gallery
node_sections -->|"renders"| node_flipbook
node_projects -->|"opens preview"| node_preview
node_hero -->|"renders"| node_workspace
node_hero -->|"hosts"| node_popup
node_hero -->|"hosts"| node_minigame
node_workspace -->|"uses"| node_engine
node_minigame -->|"renders"| node_outside
node_minigame -->|"renders"| node_room
node_minigame -->|"listens for layer clicks"| node_engine
node_engine -->|"renders scene"| node_renderer
node_renderer -->|"renders layers"| node_layerrenderer
node_layerrenderer -->|"renders interactive layer"| node_layer
node_engine -->|"provides refs"| node_refs
node_engine -->|"provides glow state"| node_glow
node_visitor -->|"submits message"| node_contactform
node_contactform -->|"sends emails"| node_emailjs

click node_app "https://github.com/ezykl/portfolio/blob/master/src/App.tsx"
click node_load "https://github.com/ezykl/portfolio/blob/master/src/hook/useInitialLoad.ts"
click node_loading "https://github.com/ezykl/portfolio/blob/master/src/components/LoadingScreen/LoadingScreen.tsx"
click node_navbar "https://github.com/ezykl/portfolio/blob/master/src/components/NavBar/NavBar.tsx"
click node_music "https://github.com/ezykl/portfolio/blob/master/src/components/MusicHost/MusicHost.tsx"
click node_home "https://github.com/ezykl/portfolio/blob/master/src/pages/HomePage.tsx"
click node_hero "https://github.com/ezykl/portfolio/blob/master/src/components/Hero/Hero.tsx"
click node_sections "https://github.com/ezykl/portfolio/blob/master/src/components/sections/ScrollSections.tsx"
click node_projects "https://github.com/ezykl/portfolio/blob/master/src/components/sections/ProjectsSection.tsx"
click node_gallery "https://github.com/ezykl/portfolio/blob/master/src/components/sections/GallerySection.tsx"
click node_flipbook "https://github.com/ezykl/portfolio/blob/master/src/components/sections/SchoolPaperFlipbook.tsx"
click node_preview "https://github.com/ezykl/portfolio/blob/master/src/components/sections/ImageProjectPreview.tsx"
click node_workspace "https://github.com/ezykl/portfolio/blob/master/src/components/ZykCoding/ZykCoding.tsx"
click node_popup "https://github.com/ezykl/portfolio/blob/master/src/components/Popup/PopupHost.tsx"
click node_minigame "https://github.com/ezykl/portfolio/blob/master/src/components/Minigame/MinigameHost.tsx"
click node_outside "https://github.com/ezykl/portfolio/blob/master/src/components/OutsideScene/OutsideScene.tsx"
click node_room "https://github.com/ezykl/portfolio/blob/master/src/components/RoomScene/RoomScene.tsx"
click node_engine "https://github.com/ezykl/portfolio/blob/master/src/engine/SceneEngine.tsx"
click node_renderer "https://github.com/ezykl/portfolio/blob/master/src/engine/SceneRenderer.tsx"
click node_layerrenderer "https://github.com/ezykl/portfolio/blob/master/src/engine/LayerRenderer.tsx"
click node_layer "https://github.com/ezykl/portfolio/blob/master/src/engine/InteractiveLayer.tsx"
click node_refs "https://github.com/ezykl/portfolio/blob/master/src/engine/SceneRefsContext.tsx"
click node_glow "https://github.com/ezykl/portfolio/blob/master/src/engine/SceneGlowContext.tsx"
click node_contactform "https://github.com/ezykl/portfolio/blob/master/src/components/Contact/ContactForm.tsx"

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_load,node_loading,node_navbar,node_music toneBlue
class node_home,node_hero,node_sections,node_projects,node_gallery,node_flipbook,node_preview toneAmber
class node_workspace,node_popup,node_minigame,node_outside,node_room toneMint
class node_engine,node_renderer,node_layerrenderer,node_layer,node_refs,node_glow toneRose
class node_contactform,node_emailjs,node_visitor toneIndigo
```

## Components

### Site Shell

- [App Shell](https://github.com/ezykl/portfolio/blob/master/src/App.tsx): `src/App.tsx`
- [Initial Load](https://github.com/ezykl/portfolio/blob/master/src/hook/useInitialLoad.ts): `src/hook/useInitialLoad.ts`
- [Loading Screen](https://github.com/ezykl/portfolio/blob/master/src/components/LoadingScreen/LoadingScreen.tsx): `src/components/LoadingScreen/LoadingScreen.tsx`
- [Navigation](https://github.com/ezykl/portfolio/blob/master/src/components/NavBar/NavBar.tsx): `src/components/NavBar/NavBar.tsx`
- [Music Host](https://github.com/ezykl/portfolio/blob/master/src/components/MusicHost/MusicHost.tsx): `src/components/MusicHost/MusicHost.tsx`

### Portfolio Content

- [Home Page](https://github.com/ezykl/portfolio/blob/master/src/pages/HomePage.tsx): `src/pages/HomePage.tsx`
- [Hero](https://github.com/ezykl/portfolio/blob/master/src/components/Hero/Hero.tsx): `src/components/Hero/Hero.tsx`
- [Portfolio Sections](https://github.com/ezykl/portfolio/blob/master/src/components/sections/ScrollSections.tsx): `src/components/sections/ScrollSections.tsx`
- [Projects](https://github.com/ezykl/portfolio/blob/master/src/components/sections/ProjectsSection.tsx): `src/components/sections/ProjectsSection.tsx`
- [Gallery](https://github.com/ezykl/portfolio/blob/master/src/components/sections/GallerySection.tsx): `src/components/sections/GallerySection.tsx`
- [School Flipbook](https://github.com/ezykl/portfolio/blob/master/src/components/sections/SchoolPaperFlipbook.tsx): `src/components/sections/SchoolPaperFlipbook.tsx`
- [Project Preview](https://github.com/ezykl/portfolio/blob/master/src/components/sections/ImageProjectPreview.tsx): `src/components/sections/ImageProjectPreview.tsx`

### Interactive Experiences

- [Hero Scene](https://github.com/ezykl/portfolio/blob/master/src/components/ZykCoding/ZykCoding.tsx): `src/components/ZykCoding/ZykCoding.tsx`
- [Popup Host](https://github.com/ezykl/portfolio/blob/master/src/components/Popup/PopupHost.tsx): `src/components/Popup/PopupHost.tsx`
- [Find Object Game](https://github.com/ezykl/portfolio/blob/master/src/components/Minigame/MinigameHost.tsx): `src/components/Minigame/MinigameHost.tsx`
- [Outside Scene](https://github.com/ezykl/portfolio/blob/master/src/components/OutsideScene/OutsideScene.tsx): `src/components/OutsideScene/OutsideScene.tsx`
- [Room Scene](https://github.com/ezykl/portfolio/blob/master/src/components/RoomScene/RoomScene.tsx): `src/components/RoomScene/RoomScene.tsx`

### Scene Engine

- [Scene Engine](https://github.com/ezykl/portfolio/blob/master/src/engine/SceneEngine.tsx): `src/engine/SceneEngine.tsx`
- [Scene Renderer](https://github.com/ezykl/portfolio/blob/master/src/engine/SceneRenderer.tsx): `src/engine/SceneRenderer.tsx`
- [Layer Renderer](https://github.com/ezykl/portfolio/blob/master/src/engine/LayerRenderer.tsx): `src/engine/LayerRenderer.tsx`
- [Interactive Layer](https://github.com/ezykl/portfolio/blob/master/src/engine/InteractiveLayer.tsx): `src/engine/InteractiveLayer.tsx`
- [Scene Refs](https://github.com/ezykl/portfolio/blob/master/src/engine/SceneRefsContext.tsx): `src/engine/SceneRefsContext.tsx`
- [Scene Glow](https://github.com/ezykl/portfolio/blob/master/src/engine/SceneGlowContext.tsx): `src/engine/SceneGlowContext.tsx`

### Contact

- [Contact Form](https://github.com/ezykl/portfolio/blob/master/src/components/Contact/ContactForm.tsx): `src/components/Contact/ContactForm.tsx`
- **EmailJS**

### Other components

- **Visitor**

## Connections

- Visitor → App Shell: opens site
- App Shell → Initial Load: checks assets
- App Shell → Loading Screen: shows while loading
- App Shell → Home Page: renders
- App Shell → Navigation: shows after reveal
- App Shell → Music Host: renders
- Initial Load → Loading Screen: supplies progress
- Home Page → Hero: presents
- Home Page → Portfolio Sections: presents
- Portfolio Sections → Projects: renders
- Portfolio Sections → Gallery: renders
- Portfolio Sections → School Flipbook: renders
- Projects → Project Preview: opens preview
- Hero → Hero Scene: renders
- Hero → Popup Host: hosts
- Hero → Find Object Game: hosts
- Hero Scene → Scene Engine: uses
- Find Object Game → Outside Scene: renders
- Find Object Game → Room Scene: renders
- Find Object Game → Scene Engine: listens for layer clicks
- Scene Engine → Scene Renderer: renders scene
- Scene Renderer → Layer Renderer: renders layers
- Layer Renderer → Interactive Layer: renders interactive layer
- Scene Engine → Scene Refs: provides refs
- Scene Engine → Scene Glow: provides glow state
- Visitor → Contact Form: submits message
- Contact Form → EmailJS: sends emails