# pat-on/portfolio_page architecture

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

- Interactive diagram: https://gitdiagram.com/pat-on/portfolio_page
- Repository: https://github.com/pat-on/portfolio_page

## Overview

This is a React portfolio site with an interactive Three.js space scene and an optional arcade-combat mode. A visitor enters through the app, explores the scene or portfolio, and can start combat; game events update reducer state and drive the HUD. The tree also shows dedicated experience, projects, certifications, and about sections. The README only documents Create React App, and sampled excerpts do not show Layout’s composition or Scene’s engine wiring, so those connections are left out where uncertain.

Main entry points: [`src/App.js`](https://github.com/pat-on/portfolio_page/blob/main/src/App.js) (App), [`src/TreeJSComponents/ViewGL.js`](https://github.com/pat-on/portfolio_page/blob/main/src/TreeJSComponents/ViewGL.js) (WebGL renderer), [`src/state/gameReducer.js`](https://github.com/pat-on/portfolio_page/blob/main/src/state/gameReducer.js) (Game reducer), [`src/TreeJSComponents/Scene.js`](https://github.com/pat-on/portfolio_page/blob/main/src/TreeJSComponents/Scene.js) (Scene component)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App and state"]
  node_app["App<br/>[App.js]"]
  node_reducer["Game reducer<br/>[gameReducer.js]"]
  node_explore["Explore controls<br/>[ExploreButton.js]"]
  node_mobileoverlay["Mobile overlay"]
end

subgraph group_portfolio["Portfolio content"]
  node_layout["Portfolio layout<br/>[Layout.js]"]
  node_about["About section<br/>[About.js]"]
  node_experience["Experience section<br/>[Experience.js]"]
  node_projects["Projects section<br/>[MyProjects.js]"]
  node_certifications["Certifications section<br/>[Certifications.js]"]
end

subgraph group_scene["3D scene"]
  node_sceneentry["Scene component<br/>[Scene.js]"]
  node_viewgl["WebGL renderer<br/>[ViewGL.js]"]
  node_registry["Scene registry<br/>[registry.js]"]
  node_stars["Star background<br/>[stars.js]"]
  node_lights["Scene lighting<br/>[lights.js]"]
  node_space["Space texture<br/>[spaceTexture.js]"]
  node_belt["Asteroid belt<br/>[asteroidBelt.js]"]
  node_comet["Comet model<br/>[comet.js]"]
end

subgraph group_combat["Combat game"]
  node_game["Game system<br/>[GameSystem.js]"]
  node_audio["Game audio<br/>[GameAudio.js]"]
  node_hud["Game HUD<br/>[GameHUD.js]"]
  node_briefing["Game briefing<br/>[GameBriefing.js]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_app
node_app -->|"renders"| node_sceneentry
node_app -->|"renders"| node_layout
node_app -->|"renders"| node_explore
node_app -->|"renders"| node_mobileoverlay
node_app -->|"renders"| node_hud
node_app -->|"renders"| node_briefing
node_app -->|"dispatches actions"| node_reducer
node_app -->|"sends controls"| node_sceneentry
node_app -->|"reads state"| node_reducer
node_viewgl -->|"reads definitions"| node_registry
node_viewgl -->|"uses lighting"| node_lights
node_viewgl -->|"uses texture"| node_space
node_viewgl -->|"builds belt"| node_belt
node_viewgl -->|"builds comet"| node_comet
node_viewgl -->|"loads game"| node_game

click node_app "https://github.com/pat-on/portfolio_page/blob/main/src/App.js"
click node_reducer "https://github.com/pat-on/portfolio_page/blob/main/src/state/gameReducer.js"
click node_layout "https://github.com/pat-on/portfolio_page/blob/main/src/HOC/Layout.js"
click node_about "https://github.com/pat-on/portfolio_page/blob/main/src/Components/About/About.js"
click node_experience "https://github.com/pat-on/portfolio_page/blob/main/src/Components/Experience/Experience.js"
click node_projects "https://github.com/pat-on/portfolio_page/blob/main/src/Components/MyProjects/MyProjects.js"
click node_certifications "https://github.com/pat-on/portfolio_page/blob/main/src/Components/Certifications/Certifications.js"
click node_sceneentry "https://github.com/pat-on/portfolio_page/blob/main/src/TreeJSComponents/Scene.js"
click node_viewgl "https://github.com/pat-on/portfolio_page/blob/main/src/TreeJSComponents/ViewGL.js"
click node_registry "https://github.com/pat-on/portfolio_page/blob/main/src/TreeJSComponents/registry.js"
click node_stars "https://github.com/pat-on/portfolio_page/blob/main/src/TreeJSComponents/stars/stars.js"
click node_lights "https://github.com/pat-on/portfolio_page/blob/main/src/TreeJSComponents/lights/lights.js"
click node_space "https://github.com/pat-on/portfolio_page/blob/main/src/TreeJSComponents/spaceTexture/spaceTexture.js"
click node_belt "https://github.com/pat-on/portfolio_page/blob/main/src/TreeJSComponents/planets/asteroidBelt/asteroidBelt.js"
click node_comet "https://github.com/pat-on/portfolio_page/blob/main/src/TreeJSComponents/planets/comet/comet.js"
click node_game "https://github.com/pat-on/portfolio_page/blob/main/src/TreeJSComponents/game/GameSystem.js"
click node_audio "https://github.com/pat-on/portfolio_page/blob/main/src/TreeJSComponents/game/GameAudio.js"
click node_hud "https://github.com/pat-on/portfolio_page/blob/main/src/Components/GameHUD/GameHUD.js"
click node_briefing "https://github.com/pat-on/portfolio_page/blob/main/src/Components/GameBriefing/GameBriefing.js"
click node_explore "https://github.com/pat-on/portfolio_page/blob/main/src/Components/ExploreButton/ExploreButton.js"
click node_mobileoverlay "https://github.com/pat-on/portfolio_page/blob/main/src/Components/MobileExploreOverlay/MobileExploreOverlay.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_app,node_reducer,node_explore,node_mobileoverlay toneBlue
class node_layout,node_about,node_experience,node_projects,node_certifications toneAmber
class node_sceneentry,node_viewgl,node_registry,node_stars,node_lights,node_space,node_belt,node_comet toneMint
class node_game,node_audio,node_hud,node_briefing toneRose
class node_visitor toneIndigo
```

## Components

### App and state

- [App](https://github.com/pat-on/portfolio_page/blob/main/src/App.js): `src/App.js`
- [Game reducer](https://github.com/pat-on/portfolio_page/blob/main/src/state/gameReducer.js): `src/state/gameReducer.js`
- [Explore controls](https://github.com/pat-on/portfolio_page/blob/main/src/Components/ExploreButton/ExploreButton.js): `src/Components/ExploreButton/ExploreButton.js`
- [Mobile overlay](https://github.com/pat-on/portfolio_page/blob/main/src/Components/MobileExploreOverlay/MobileExploreOverlay.js): `src/Components/MobileExploreOverlay/MobileExploreOverlay.js`

### Portfolio content

- [Portfolio layout](https://github.com/pat-on/portfolio_page/blob/main/src/HOC/Layout.js): `src/HOC/Layout.js`
- [About section](https://github.com/pat-on/portfolio_page/blob/main/src/Components/About/About.js): `src/Components/About/About.js`
- [Experience section](https://github.com/pat-on/portfolio_page/blob/main/src/Components/Experience/Experience.js): `src/Components/Experience/Experience.js`
- [Projects section](https://github.com/pat-on/portfolio_page/blob/main/src/Components/MyProjects/MyProjects.js): `src/Components/MyProjects/MyProjects.js`
- [Certifications section](https://github.com/pat-on/portfolio_page/blob/main/src/Components/Certifications/Certifications.js): `src/Components/Certifications/Certifications.js`

### 3D scene

- [Scene component](https://github.com/pat-on/portfolio_page/blob/main/src/TreeJSComponents/Scene.js): `src/TreeJSComponents/Scene.js`
- [WebGL renderer](https://github.com/pat-on/portfolio_page/blob/main/src/TreeJSComponents/ViewGL.js): `src/TreeJSComponents/ViewGL.js`
- [Scene registry](https://github.com/pat-on/portfolio_page/blob/main/src/TreeJSComponents/registry.js): `src/TreeJSComponents/registry.js`
- [Star background](https://github.com/pat-on/portfolio_page/blob/main/src/TreeJSComponents/stars/stars.js): `src/TreeJSComponents/stars/stars.js`
- [Scene lighting](https://github.com/pat-on/portfolio_page/blob/main/src/TreeJSComponents/lights/lights.js): `src/TreeJSComponents/lights/lights.js`
- [Space texture](https://github.com/pat-on/portfolio_page/blob/main/src/TreeJSComponents/spaceTexture/spaceTexture.js): `src/TreeJSComponents/spaceTexture/spaceTexture.js`
- [Asteroid belt](https://github.com/pat-on/portfolio_page/blob/main/src/TreeJSComponents/planets/asteroidBelt/asteroidBelt.js): `src/TreeJSComponents/planets/asteroidBelt/asteroidBelt.js`
- [Comet model](https://github.com/pat-on/portfolio_page/blob/main/src/TreeJSComponents/planets/comet/comet.js): `src/TreeJSComponents/planets/comet/comet.js`

### Combat game

- [Game system](https://github.com/pat-on/portfolio_page/blob/main/src/TreeJSComponents/game/GameSystem.js): `src/TreeJSComponents/game/GameSystem.js`
- [Game audio](https://github.com/pat-on/portfolio_page/blob/main/src/TreeJSComponents/game/GameAudio.js): `src/TreeJSComponents/game/GameAudio.js`
- [Game HUD](https://github.com/pat-on/portfolio_page/blob/main/src/Components/GameHUD/GameHUD.js): `src/Components/GameHUD/GameHUD.js`
- [Game briefing](https://github.com/pat-on/portfolio_page/blob/main/src/Components/GameBriefing/GameBriefing.js): `src/Components/GameBriefing/GameBriefing.js`

### Other components

- **Visitor**

## Connections

- Visitor → App: opens
- App → Scene component: renders
- App → Portfolio layout: renders
- App → Explore controls: renders
- App → Mobile overlay: renders
- App → Game HUD: renders
- App → Game briefing: renders
- App → Game reducer: dispatches actions
- App → Scene component: sends controls
- App → Game reducer: reads state
- WebGL renderer → Scene registry: reads definitions
- WebGL renderer → Scene lighting: uses lighting
- WebGL renderer → Space texture: uses texture
- WebGL renderer → Asteroid belt: builds belt
- WebGL renderer → Comet model: builds comet
- WebGL renderer → Game system: loads game