# ganatadi8-cmyk/gana-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/ganatadi8-cmyk/gana-portfolio
- Repository: https://github.com/ganatadi8-cmyk/gana-portfolio

## Overview

This is a static personal portfolio, not a backend application. Its main workflow is visitors browsing portfolio sections while scrolling drives a continuous 3D scene and a chapter indicator. The README documents the page content, styling, motion controls, responsive behavior and accessibility; the excerpts show the scene and chapter logic. The older CSS and scroll script are explicitly not loaded. The tree does not include the documented bundled Three.js file, so it is not represented as a repository component.

Main entry points: [`index.html`](https://github.com/ganatadi8-cmyk/gana-portfolio/blob/main/index.html) (Portfolio sections), [`chapters.js`](https://github.com/ganatadi8-cmyk/gana-portfolio/blob/main/chapters.js) (Chapter indicator), [`scene.js`](https://github.com/ganatadi8-cmyk/gana-portfolio/blob/main/scene.js) (3D scene), [`immersive.css`](https://github.com/ganatadi8-cmyk/gana-portfolio/blob/main/immersive.css) (Responsive styling)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_portfolio["Portfolio content"]
  node_page["Portfolio sections<br/>[index.html]"]
end

subgraph group_visuals["Visual experience"]
  node_appearance["Responsive styling<br/>[immersive.css]"]
  node_scene["3D scene<br/>[scene.js]"]
end

subgraph group_navigation["Chapter navigation"]
  node_indicator["Chapter indicator<br/>[chapters.js]"]
end

node_visitor(("Visitor"))
node_webgl["WebGL renderer"]

node_visitor -->|"browses"| node_page
node_page -->|"sets chapters"| node_scene
node_scene -->|"renders scene"| node_webgl
node_indicator -->|"reads sections"| node_page
node_indicator -->|"marks navigation"| node_page
node_appearance -->|"styles layout"| node_page

click node_page "https://github.com/ganatadi8-cmyk/gana-portfolio/blob/main/index.html"
click node_appearance "https://github.com/ganatadi8-cmyk/gana-portfolio/blob/main/immersive.css"
click node_scene "https://github.com/ganatadi8-cmyk/gana-portfolio/blob/main/scene.js"
click node_indicator "https://github.com/ganatadi8-cmyk/gana-portfolio/blob/main/chapters.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_page toneBlue
class node_appearance,node_scene toneAmber
class node_indicator toneMint
class node_visitor,node_webgl toneIndigo
```

## Components

### Portfolio content

- [Portfolio sections](https://github.com/ganatadi8-cmyk/gana-portfolio/blob/main/index.html): `index.html`

### Visual experience

- [Responsive styling](https://github.com/ganatadi8-cmyk/gana-portfolio/blob/main/immersive.css): `immersive.css`
- [3D scene](https://github.com/ganatadi8-cmyk/gana-portfolio/blob/main/scene.js): `scene.js`

### Chapter navigation

- [Chapter indicator](https://github.com/ganatadi8-cmyk/gana-portfolio/blob/main/chapters.js): `chapters.js`

### Other components

- **Visitor**
- **WebGL renderer**

## Connections

- Visitor → Portfolio sections: browses (evidence: `README.md`)
- Portfolio sections → 3D scene: sets chapters (evidence: `README.md`)
- 3D scene → WebGL renderer: renders scene (evidence: `scene.js`)
- Chapter indicator → Portfolio sections: reads sections (evidence: `chapters.js`)
- Chapter indicator → Portfolio sections: marks navigation (evidence: `chapters.js`)
- Responsive styling → Portfolio sections: styles layout (evidence: `README.md`)