# shreyesjishnu/shreyes_portfolio architecture

> Architecture diagram of the GitHub repository shreyesjishnu/shreyes_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/shreyesjishnu/shreyes_portfolio
- Repository: https://github.com/shreyesjishnu/shreyes_portfolio

## Overview

This is a personal portfolio site presented as a scroll-driven, elemental 3D world. Visitors move through an introduction and project chapters, browse project cards, and open detail sheets for previews or links to live work. The React app coordinates chapter state, theme, and the lazy-loaded scene; the scene derives its motion and effects from path, particle, and performance rules. The README is only the default Vite template, so product capabilities are inferred from the supplied source excerpts and tree; unsampled component wiring is not expanded.

Main entry points: [`src/App.jsx`](https://github.com/shreyesjishnu/shreyes_portfolio/blob/main/src/App.jsx) (Portfolio app), [`src/components/ProjectSheet.jsx`](https://github.com/shreyesjishnu/shreyes_portfolio/blob/main/src/components/ProjectSheet.jsx) (Project details), [`src/scene/IsoWorld.jsx`](https://github.com/shreyesjishnu/shreyes_portfolio/blob/main/src/scene/IsoWorld.jsx) (Isometric scene), [`src/components/CardRail.jsx`](https://github.com/shreyesjishnu/shreyes_portfolio/blob/main/src/components/CardRail.jsx) (Project rail)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Portfolio experience"]
  node_entry["React entry<br/>[main.jsx]"]
  node_app["Portfolio app<br/>[App.jsx]"]
  node_preloader["Preloader<br/>[Preloader.jsx]"]
  node_hud["HUD controls<br/>[Hud.jsx]"]
end

subgraph group_projects["Project discovery"]
  node_cards["Project rail<br/>[CardRail.jsx]"]
  node_card["Project card<br/>[ProjectCard.jsx]"]
  node_sheet["Project details<br/>[ProjectSheet.jsx]"]
  node_projectsdata["Project catalogue<br/>[projects.js]"]
  node_media["Project media<br/>[media.js]"]
end

subgraph group_world["3D world"]
  node_scene["Isometric scene<br/>[IsoWorld.jsx]"]
  node_path["World path<br/>[path.js]"]
  node_motes["Particle rules<br/>[motes.js]"]
  node_budget["Scene budget<br/>[budget.js]"]
  node_elements["Element settings<br/>[elementConfigs.js]"]
end

subgraph group_state["Page state"]
  node_theme["Theme state<br/>[theme.js]"]
  node_visited["Visit state<br/>[visited.js]"]
end

node_visitor(("Visitor"))
node_youtube{{"YouTube"}}
node_stores{{"App stores / sites"}}

node_visitor -->|"opens site"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"renders"| node_preloader
node_app -->|"renders"| node_hud
node_app -->|"renders"| node_cards
node_cards -->|"renders"| node_card
node_app -->|"opens selection"| node_sheet
node_app -->|"reads catalogue"| node_projectsdata
node_app -->|"uses theme"| node_theme
node_app -->|"tracks visits"| node_visited
node_app -->|"reads chapters"| node_elements
node_app -->|"loads scene"| node_scene
node_scene -->|"uses route"| node_path
node_scene -->|"uses particle rules"| node_motes
node_scene -->|"checks limits"| node_budget
node_sheet -->|"gets poster"| node_media
node_sheet -.->|"loads on play"| node_youtube
node_sheet -.->|"links out"| node_stores
node_visitor -->|"browses"| node_cards
node_visitor -->|"changes theme"| node_hud
node_visitor -->|"selects project"| node_sheet

click node_entry "https://github.com/shreyesjishnu/shreyes_portfolio/blob/main/src/main.jsx"
click node_app "https://github.com/shreyesjishnu/shreyes_portfolio/blob/main/src/App.jsx"
click node_preloader "https://github.com/shreyesjishnu/shreyes_portfolio/blob/main/src/components/Preloader.jsx"
click node_hud "https://github.com/shreyesjishnu/shreyes_portfolio/blob/main/src/components/Hud.jsx"
click node_cards "https://github.com/shreyesjishnu/shreyes_portfolio/blob/main/src/components/CardRail.jsx"
click node_card "https://github.com/shreyesjishnu/shreyes_portfolio/blob/main/src/components/ProjectCard.jsx"
click node_sheet "https://github.com/shreyesjishnu/shreyes_portfolio/blob/main/src/components/ProjectSheet.jsx"
click node_projectsdata "https://github.com/shreyesjishnu/shreyes_portfolio/blob/main/src/data/projects.js"
click node_media "https://github.com/shreyesjishnu/shreyes_portfolio/blob/main/src/data/media.js"
click node_scene "https://github.com/shreyesjishnu/shreyes_portfolio/blob/main/src/scene/IsoWorld.jsx"
click node_path "https://github.com/shreyesjishnu/shreyes_portfolio/blob/main/src/scene/path.js"
click node_motes "https://github.com/shreyesjishnu/shreyes_portfolio/blob/main/src/scene/motes.js"
click node_budget "https://github.com/shreyesjishnu/shreyes_portfolio/blob/main/src/scene/budget.js"
click node_elements "https://github.com/shreyesjishnu/shreyes_portfolio/blob/main/src/scene/elementConfigs.js"
click node_theme "https://github.com/shreyesjishnu/shreyes_portfolio/blob/main/src/theme.js"
click node_visited "https://github.com/shreyesjishnu/shreyes_portfolio/blob/main/src/data/visited.js"

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_entry,node_app,node_preloader,node_hud toneBlue
class node_cards,node_card,node_sheet,node_projectsdata,node_media toneAmber
class node_scene,node_path,node_motes,node_budget,node_elements toneMint
class node_theme,node_visited toneRose
class node_visitor,node_youtube,node_stores toneIndigo
```

## Components

### Portfolio experience

- [React entry](https://github.com/shreyesjishnu/shreyes_portfolio/blob/main/src/main.jsx): `src/main.jsx`
- [Portfolio app](https://github.com/shreyesjishnu/shreyes_portfolio/blob/main/src/App.jsx): `src/App.jsx`
- [Preloader](https://github.com/shreyesjishnu/shreyes_portfolio/blob/main/src/components/Preloader.jsx): `src/components/Preloader.jsx`
- [HUD controls](https://github.com/shreyesjishnu/shreyes_portfolio/blob/main/src/components/Hud.jsx): `src/components/Hud.jsx`

### Project discovery

- [Project rail](https://github.com/shreyesjishnu/shreyes_portfolio/blob/main/src/components/CardRail.jsx): `src/components/CardRail.jsx`
- [Project card](https://github.com/shreyesjishnu/shreyes_portfolio/blob/main/src/components/ProjectCard.jsx): `src/components/ProjectCard.jsx`
- [Project details](https://github.com/shreyesjishnu/shreyes_portfolio/blob/main/src/components/ProjectSheet.jsx): `src/components/ProjectSheet.jsx`
- [Project catalogue](https://github.com/shreyesjishnu/shreyes_portfolio/blob/main/src/data/projects.js): `src/data/projects.js`
- [Project media](https://github.com/shreyesjishnu/shreyes_portfolio/blob/main/src/data/media.js): `src/data/media.js`

### 3D world

- [Isometric scene](https://github.com/shreyesjishnu/shreyes_portfolio/blob/main/src/scene/IsoWorld.jsx): `src/scene/IsoWorld.jsx`
- [World path](https://github.com/shreyesjishnu/shreyes_portfolio/blob/main/src/scene/path.js): `src/scene/path.js`
- [Particle rules](https://github.com/shreyesjishnu/shreyes_portfolio/blob/main/src/scene/motes.js): `src/scene/motes.js`
- [Scene budget](https://github.com/shreyesjishnu/shreyes_portfolio/blob/main/src/scene/budget.js): `src/scene/budget.js`
- [Element settings](https://github.com/shreyesjishnu/shreyes_portfolio/blob/main/src/scene/elementConfigs.js): `src/scene/elementConfigs.js`

### Page state

- [Theme state](https://github.com/shreyesjishnu/shreyes_portfolio/blob/main/src/theme.js): `src/theme.js`
- [Visit state](https://github.com/shreyesjishnu/shreyes_portfolio/blob/main/src/data/visited.js): `src/data/visited.js`

### Other components

- **Visitor**
- **YouTube**
- **App stores / sites**

## Connections

- Visitor → React entry: opens site
- React entry → Portfolio app: renders
- Portfolio app → Preloader: renders
- Portfolio app → HUD controls: renders
- Portfolio app → Project rail: renders
- Project rail → Project card: renders
- Portfolio app → Project details: opens selection
- Portfolio app → Project catalogue: reads catalogue
- Portfolio app → Theme state: uses theme
- Portfolio app → Visit state: tracks visits
- Portfolio app → Element settings: reads chapters
- Portfolio app → Isometric scene: loads scene
- Isometric scene → World path: uses route
- Isometric scene → Particle rules: uses particle rules
- Isometric scene → Scene budget: checks limits
- Project details → Project media: gets poster
- Project details → YouTube: loads on play
- Project details → App stores / sites: links out
- Visitor → Project rail: browses
- Visitor → HUD controls: changes theme
- Visitor → Project details: selects project