# abgishere/portfolio architecture

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

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

## Overview

This is a scroll-driven portfolio whose main workflow is a visitor scrolling through one continuous rendered scene: mountain atmosphere, camera descent to a furnished desk, then a house and pool. Visitors can switch day/night and adjust the desk lamp; rendering uses WebGL with a layered DOM fallback. The README documents these product stages and capabilities, while sampled source shows renderer selection, theme state, scroll progress, and house-mesh loading. Some renderer internals and control wiring are unsampled, so uncertain connections are omitted.

Main entry points: [`components/gradient/gl/MistCanvas.jsx`](https://github.com/abgishere/portfolio/blob/main/components/gradient/gl/MistCanvas.jsx) (WebGL scene), [`components/AtmosphereField.jsx`](https://github.com/abgishere/portfolio/blob/main/components/AtmosphereField.jsx) (Sky and lamp controls), [`components/SmoothScroll.jsx`](https://github.com/abgishere/portfolio/blob/main/components/SmoothScroll.jsx) (Smooth scroll), [`components/scroll/descent.js`](https://github.com/abgishere/portfolio/blob/main/components/scroll/descent.js) (Descent progress)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Site shell"]
  node_home["Home route<br/>[page.jsx]"]
  node_shell["Root layout<br/>[layout.jsx]"]
  node_house_route["House explorer route<br/>[page.jsx]"]
end

subgraph group_experience["Scene experience"]
  node_theme["Theme state<br/>[ThemeProvider.jsx]"]
  node_theme_recipes["Theme recipes<br/>[themes.js]"]
  node_scroll["Smooth scroll<br/>[SmoothScroll.jsx]"]
  node_descent["Descent progress<br/>[descent.js]"]
  node_stops["Scroll stops<br/>[stops.js]"]
  node_stage["Scene stage<br/>[Stage.jsx]"]
  node_controls["Sky and lamp controls"]
  node_sun_control["Sun toggle<br/>[SunToggle.jsx]"]
  node_lamp_control["Lamp toggle<br/>[LampToggle.jsx]"]
end

subgraph group_rendering["Rendering and scene"]
  node_renderer["Renderer selection"]
  node_webgl["WebGL scene<br/>[MistCanvas.jsx]"]
  node_dom["Layered DOM scene<br/>[LayeredScene.jsx]"]
  node_scene_math["Atmosphere geometry<br/>[mistGeometry.js]"]
  node_colour["Colour maths<br/>[colour.js]"]
  node_orbit["Sky transition<br/>[orbit.js]"]
  node_camera["Mountain camera<br/>[camera.js]"]
  node_desk_camera["Desk and house camera<br/>[deskCamera.js]"]
end

subgraph group_house["House scene"]
  node_explorer["House explorer controls<br/>[HouseExplorer.jsx]"]
  node_house_worker["House mesh worker<br/>[houseWorker.js]"]
  node_house_mesh["House renderer<br/>[houseShader.js]"]
  node_house_rooms["Room geometry<br/>[houseRooms.js]"]
  node_house_shape["House shape<br/>[houseShape.js]"]
  node_lamp_shape["Lamp geometry<br/>[lampShape.js]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_home
node_home -->|"renders"| node_stage
node_shell -->|"mounts"| node_controls
node_shell -->|"provides"| node_theme
node_visitor -->|"scrolls"| node_scroll
node_scroll -->|"uses"| node_stops
node_scroll -->|"writes progress"| node_descent
node_descent -->|"progress read"| node_webgl
node_descent -->|"progress read"| node_dom
node_controls -->|"selects"| node_renderer
node_renderer -->|"loads"| node_webgl
node_renderer -->|"fallback"| node_dom
node_controls -->|"renders"| node_sun_control
node_controls -->|"renders"| node_lamp_control
node_theme -->|"reads"| node_theme_recipes
node_visitor -->|"switches sky"| node_sun_control
node_visitor -->|"adjusts lamp"| node_lamp_control
node_webgl -->|"uses"| node_scene_math
node_dom -->|"uses"| node_scene_math
node_scene_math -->|"uses"| node_colour
node_webgl -->|"uses"| node_orbit
node_dom -->|"uses"| node_orbit
node_camera -->|"uses"| node_scene_math
node_desk_camera -->|"uses"| node_camera
node_home -->|"mounts"| node_scroll
node_visitor -->|"opens"| node_house_route
node_house_route -->|"renders"| node_explorer
node_explorer -->|"pins progress"| node_descent
node_webgl -->|"starts worker"| node_house_worker
node_house_worker -->|"builds mesh"| node_house_mesh
node_house_worker -->|"builds rooms"| node_house_rooms
node_house_rooms -->|"uses"| node_house_shape
node_house_mesh -->|"uses"| node_desk_camera
node_lamp_control -->|"uses"| node_lamp_shape

click node_home "https://github.com/abgishere/portfolio/blob/main/app/page.jsx"
click node_shell "https://github.com/abgishere/portfolio/blob/main/app/layout.jsx"
click node_house_route "https://github.com/abgishere/portfolio/blob/main/app/house/page.jsx"
click node_theme "https://github.com/abgishere/portfolio/blob/main/components/ThemeProvider.jsx"
click node_theme_recipes "https://github.com/abgishere/portfolio/blob/main/components/gradient/themes.js"
click node_scroll "https://github.com/abgishere/portfolio/blob/main/components/SmoothScroll.jsx"
click node_descent "https://github.com/abgishere/portfolio/blob/main/components/scroll/descent.js"
click node_stops "https://github.com/abgishere/portfolio/blob/main/components/scroll/stops.js"
click node_stage "https://github.com/abgishere/portfolio/blob/main/components/Stage.jsx"
click node_controls "https://github.com/abgishere/portfolio/blob/main/components/AtmosphereField.jsx"
click node_sun_control "https://github.com/abgishere/portfolio/blob/main/components/SunToggle.jsx"
click node_lamp_control "https://github.com/abgishere/portfolio/blob/main/components/LampToggle.jsx"
click node_renderer "https://github.com/abgishere/portfolio/blob/main/components/AtmosphereField.jsx"
click node_webgl "https://github.com/abgishere/portfolio/blob/main/components/gradient/gl/MistCanvas.jsx"
click node_dom "https://github.com/abgishere/portfolio/blob/main/components/gradient/layers/LayeredScene.jsx"
click node_scene_math "https://github.com/abgishere/portfolio/blob/main/components/gradient/gl/mistGeometry.js"
click node_colour "https://github.com/abgishere/portfolio/blob/main/components/gradient/colour.js"
click node_orbit "https://github.com/abgishere/portfolio/blob/main/components/gradient/orbit.js"
click node_camera "https://github.com/abgishere/portfolio/blob/main/components/gradient/camera.js"
click node_desk_camera "https://github.com/abgishere/portfolio/blob/main/components/gradient/deskCamera.js"
click node_explorer "https://github.com/abgishere/portfolio/blob/main/components/HouseExplorer.jsx"
click node_house_worker "https://github.com/abgishere/portfolio/blob/main/components/gradient/gl/houseWorker.js"
click node_house_mesh "https://github.com/abgishere/portfolio/blob/main/components/gradient/gl/houseShader.js"
click node_house_rooms "https://github.com/abgishere/portfolio/blob/main/components/gradient/gl/houseRooms.js"
click node_house_shape "https://github.com/abgishere/portfolio/blob/main/components/gradient/gl/houseShape.js"
click node_lamp_shape "https://github.com/abgishere/portfolio/blob/main/components/gradient/gl/lampShape.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_home,node_shell,node_house_route toneBlue
class node_theme,node_theme_recipes,node_scroll,node_descent,node_stops,node_stage,node_controls,node_sun_control,node_lamp_control toneAmber
class node_renderer,node_webgl,node_dom,node_scene_math,node_colour,node_orbit,node_camera,node_desk_camera toneMint
class node_explorer,node_house_worker,node_house_mesh,node_house_rooms,node_house_shape,node_lamp_shape toneRose
class node_visitor toneIndigo
```

## Components

### Site shell

- [Home route](https://github.com/abgishere/portfolio/blob/main/app/page.jsx): `app/page.jsx`
- [Root layout](https://github.com/abgishere/portfolio/blob/main/app/layout.jsx): `app/layout.jsx`
- [House explorer route](https://github.com/abgishere/portfolio/blob/main/app/house/page.jsx): `app/house/page.jsx`

### Scene experience

- [Theme state](https://github.com/abgishere/portfolio/blob/main/components/ThemeProvider.jsx): `components/ThemeProvider.jsx`
- [Theme recipes](https://github.com/abgishere/portfolio/blob/main/components/gradient/themes.js): `components/gradient/themes.js`
- [Smooth scroll](https://github.com/abgishere/portfolio/blob/main/components/SmoothScroll.jsx): `components/SmoothScroll.jsx`
- [Descent progress](https://github.com/abgishere/portfolio/blob/main/components/scroll/descent.js): `components/scroll/descent.js`
- [Scroll stops](https://github.com/abgishere/portfolio/blob/main/components/scroll/stops.js): `components/scroll/stops.js`
- [Scene stage](https://github.com/abgishere/portfolio/blob/main/components/Stage.jsx): `components/Stage.jsx`
- [Sky and lamp controls](https://github.com/abgishere/portfolio/blob/main/components/AtmosphereField.jsx): `components/AtmosphereField.jsx`
- [Sun toggle](https://github.com/abgishere/portfolio/blob/main/components/SunToggle.jsx): `components/SunToggle.jsx`
- [Lamp toggle](https://github.com/abgishere/portfolio/blob/main/components/LampToggle.jsx): `components/LampToggle.jsx`

### Rendering and scene

- [Renderer selection](https://github.com/abgishere/portfolio/blob/main/components/AtmosphereField.jsx): `components/AtmosphereField.jsx`
- [WebGL scene](https://github.com/abgishere/portfolio/blob/main/components/gradient/gl/MistCanvas.jsx): `components/gradient/gl/MistCanvas.jsx`
- [Layered DOM scene](https://github.com/abgishere/portfolio/blob/main/components/gradient/layers/LayeredScene.jsx): `components/gradient/layers/LayeredScene.jsx`
- [Atmosphere geometry](https://github.com/abgishere/portfolio/blob/main/components/gradient/gl/mistGeometry.js): `components/gradient/gl/mistGeometry.js`
- [Colour maths](https://github.com/abgishere/portfolio/blob/main/components/gradient/colour.js): `components/gradient/colour.js`
- [Sky transition](https://github.com/abgishere/portfolio/blob/main/components/gradient/orbit.js): `components/gradient/orbit.js`
- [Mountain camera](https://github.com/abgishere/portfolio/blob/main/components/gradient/camera.js): `components/gradient/camera.js`
- [Desk and house camera](https://github.com/abgishere/portfolio/blob/main/components/gradient/deskCamera.js): `components/gradient/deskCamera.js`

### House scene

- [House explorer controls](https://github.com/abgishere/portfolio/blob/main/components/HouseExplorer.jsx): `components/HouseExplorer.jsx`
- [House mesh worker](https://github.com/abgishere/portfolio/blob/main/components/gradient/gl/houseWorker.js): `components/gradient/gl/houseWorker.js`
- [House renderer](https://github.com/abgishere/portfolio/blob/main/components/gradient/gl/houseShader.js): `components/gradient/gl/houseShader.js`
- [Room geometry](https://github.com/abgishere/portfolio/blob/main/components/gradient/gl/houseRooms.js): `components/gradient/gl/houseRooms.js`
- [House shape](https://github.com/abgishere/portfolio/blob/main/components/gradient/gl/houseShape.js): `components/gradient/gl/houseShape.js`
- [Lamp geometry](https://github.com/abgishere/portfolio/blob/main/components/gradient/gl/lampShape.js): `components/gradient/gl/lampShape.js`

### Other components

- **Visitor**

## Connections

- Visitor → Home route: opens (evidence: `README.md`)
- Home route → Scene stage: renders (evidence: `app/page.jsx`)
- Root layout → Sky and lamp controls: mounts (evidence: `app/layout.jsx`)
- Root layout → Theme state: provides (evidence: `app/layout.jsx`)
- Visitor → Smooth scroll: scrolls (evidence: `README.md`)
- Smooth scroll → Scroll stops: uses (evidence: `components/SmoothScroll.jsx`)
- Smooth scroll → Descent progress: writes progress (evidence: `components/SmoothScroll.jsx`)
- Descent progress → WebGL scene: progress read (evidence: `components/scroll/descent.js`)
- Descent progress → Layered DOM scene: progress read (evidence: `components/scroll/descent.js`)
- Sky and lamp controls → Renderer selection: selects (evidence: `components/AtmosphereField.jsx`)
- Renderer selection → WebGL scene: loads (evidence: `components/AtmosphereField.jsx`)
- Renderer selection → Layered DOM scene: fallback (evidence: `components/AtmosphereField.jsx`)
- Sky and lamp controls → Sun toggle: renders (evidence: `components/AtmosphereField.jsx`)
- Sky and lamp controls → Lamp toggle: renders (evidence: `components/AtmosphereField.jsx`)
- Theme state → Theme recipes: reads (evidence: `components/ThemeProvider.jsx`)
- Visitor → Sun toggle: switches sky (evidence: `README.md`)
- Visitor → Lamp toggle: adjusts lamp (evidence: `README.md`)
- WebGL scene → Atmosphere geometry: uses (evidence: `components/gradient/gl/MistCanvas.jsx`)
- Layered DOM scene → Atmosphere geometry: uses (evidence: `components/gradient/layers/LayeredScene.jsx`)
- Atmosphere geometry → Colour maths: uses (evidence: `components/gradient/gl/mistGeometry.js`)
- WebGL scene → Sky transition: uses (evidence: `components/gradient/gl/MistCanvas.jsx`)
- Layered DOM scene → Sky transition: uses (evidence: `components/gradient/layers/LayeredScene.jsx`)
- Mountain camera → Atmosphere geometry: uses (evidence: `components/gradient/camera.js`)
- Desk and house camera → Mountain camera: uses (evidence: `components/gradient/deskCamera.js`)
- Home route → Smooth scroll: mounts (evidence: `app/page.jsx`)
- Visitor → House explorer route: opens (evidence: `app/house/page.jsx`)
- House explorer route → House explorer controls: renders (evidence: `app/house/page.jsx`)
- House explorer controls → Descent progress: pins progress (evidence: `components/HouseExplorer.jsx`)
- WebGL scene → House mesh worker: starts worker (evidence: `components/gradient/gl/MistCanvas.jsx`)
- House mesh worker → House renderer: builds mesh (evidence: `components/gradient/gl/houseWorker.js`)
- House mesh worker → Room geometry: builds rooms (evidence: `components/gradient/gl/houseWorker.js`)
- Room geometry → House shape: uses (evidence: `components/gradient/gl/houseRooms.js`)
- House renderer → Desk and house camera: uses (evidence: `components/gradient/gl/houseShader.js`)
- Lamp toggle → Lamp geometry: uses (evidence: `components/LampToggle.jsx`)