# nathanaelraverdy-sketch/projetportefolio3 architecture

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

- Interactive diagram: https://gitdiagram.com/nathanaelraverdy-sketch/projetportefolio3
- Repository: https://github.com/nathanaelraverdy-sketch/projetportefolio3

## Overview

Ville des projets is a portfolio presented as an interactive, pre-rendered city, with a separate admin for managing project content. The visitor journey runs from the animated landing page to the map, project markers and cards, then project detail and its tools; the navigation also exposes the About globe, while the time control changes the city’s lighting. Admins edit projects, media and tools and can save or publish changes. The README documents Blender city generation; the sampled source supports the main rendering and admin relationships, but not every UI-to-module connection.

Main entry points: [`tools/build.py`](https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/tools/build.py) (City renderer), [`src/main.js`](https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/src/main.js) (Project map), [`src/admin/admin.js`](https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/src/admin/admin.js) (Admin interface), [`src/accueil.js`](https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/src/accueil.js) (Landing page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_visitor["Visitor experience"]
  node_landing["Landing page<br/>[accueil.js]"]
  node_screens["3D screens<br/>[ecrans.js]"]
  node_about["About globe<br/>[globe.js]"]
  node_map["Project map<br/>[main.js]"]
  node_projectcard["Project cards<br/>[main.js]"]
  node_detail["Project detail<br/>[detail.js]"]
end

subgraph group_content["Portfolio content"]
  node_landingdata["Landing content<br/>[accueil.json]"]
  node_cityimage["Rendered city"]
  node_placements["Building positions<br/>[emplacements.json]"]
  node_projects["Projects<br/>[projets.js]"]
  node_toolsdata["Project tools<br/>[outils.json]"]
  node_media["Uploaded media"]
end

subgraph group_admin["Content administration"]
  node_adminui["Admin interface<br/>[admin.js]"]
  node_adminservice["Admin service<br/>[vite.config.js]"]
end

subgraph group_city["City generation"]
  node_builder["City renderer<br/>[build.py]"]
  node_buildings["Building models<br/>[batiments.py]"]
  node_roads["Road network<br/>[roads.py]"]
  node_geometry["Geometry accumulator<br/>[geo.py]"]
  node_materials["Render materials<br/>[mats.py]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_landing
node_landing -->|"reads"| node_landingdata
node_landing -->|"loads"| node_screens
node_landing -->|"opens map"| node_map
node_visitor -->|"explores"| node_map
node_map -->|"displays"| node_cityimage
node_map -->|"positions markers"| node_placements
node_map -->|"reads projects"| node_projects
node_map -->|"opens card"| node_projectcard
node_projectcard -->|"opens detail"| node_detail
node_detail -->|"reads tools"| node_toolsdata
node_visitor -->|"visits About"| node_about
node_visitor -->|"manages content"| node_adminui
node_adminui -->|"edits projects"| node_projects
node_adminui -->|"edits tools"| node_toolsdata
node_adminui -->|"requests save"| node_adminservice
node_adminservice -->|"writes projects"| node_projects
node_adminui -->|"uploads media"| node_adminservice
node_adminservice -->|"writes uploads"| node_media
node_builder -->|"executes"| node_buildings
node_builder -->|"uses network"| node_roads
node_builder -->|"accumulates geometry"| node_geometry
node_builder -->|"uses materials"| node_materials
node_builder -->|"renders images"| node_cityimage
node_builder -->|"exports positions"| node_placements

click node_landing "https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/src/accueil.js"
click node_landingdata "https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/src/accueil.json"
click node_screens "https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/src/ecrans.js"
click node_about "https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/src/globe.js"
click node_map "https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/src/main.js"
click node_cityimage "https://github.com/nathanaelraverdy-sketch/projetportefolio3/tree/main/public/city"
click node_placements "https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/public/city/emplacements.json"
click node_projects "https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/src/projets.js"
click node_projectcard "https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/src/main.js"
click node_detail "https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/src/detail.js"
click node_toolsdata "https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/src/outils.json"
click node_adminui "https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/src/admin/admin.js"
click node_adminservice "https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/vite.config.js"
click node_media "https://github.com/nathanaelraverdy-sketch/projetportefolio3/tree/main/public/medias"
click node_builder "https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/tools/build.py"
click node_buildings "https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/tools/batiments.py"
click node_roads "https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/tools/roads.py"
click node_geometry "https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/tools/geo.py"
click node_materials "https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/tools/mats.py"

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_landing,node_screens,node_about,node_map,node_projectcard,node_detail toneBlue
class node_landingdata,node_cityimage,node_placements,node_projects,node_toolsdata,node_media toneAmber
class node_adminui,node_adminservice toneMint
class node_builder,node_buildings,node_roads,node_geometry,node_materials toneRose
class node_visitor toneIndigo
```

## Components

### Visitor experience

- [Landing page](https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/src/accueil.js): `src/accueil.js`
- [3D screens](https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/src/ecrans.js): `src/ecrans.js`
- [About globe](https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/src/globe.js): `src/globe.js`
- [Project map](https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/src/main.js): `src/main.js`
- [Project cards](https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/src/main.js): `src/main.js`
- [Project detail](https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/src/detail.js): `src/detail.js`

### Portfolio content

- [Landing content](https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/src/accueil.json): `src/accueil.json`
- [Rendered city](https://github.com/nathanaelraverdy-sketch/projetportefolio3/tree/main/public/city): `public/city`
- [Building positions](https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/public/city/emplacements.json): `public/city/emplacements.json`
- [Projects](https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/src/projets.js): `src/projets.js`
- [Project tools](https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/src/outils.json): `src/outils.json`
- [Uploaded media](https://github.com/nathanaelraverdy-sketch/projetportefolio3/tree/main/public/medias): `public/medias`

### Content administration

- [Admin interface](https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/src/admin/admin.js): `src/admin/admin.js`
- [Admin service](https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/vite.config.js): `vite.config.js`

### City generation

- [City renderer](https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/tools/build.py): `tools/build.py`
- [Building models](https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/tools/batiments.py): `tools/batiments.py`
- [Road network](https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/tools/roads.py): `tools/roads.py`
- [Geometry accumulator](https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/tools/geo.py): `tools/geo.py`
- [Render materials](https://github.com/nathanaelraverdy-sketch/projetportefolio3/blob/main/tools/mats.py): `tools/mats.py`

### Other components

- **Visitor**

## Connections

- Visitor → Landing page: opens
- Landing page → Landing content: reads
- Landing page → 3D screens: loads
- Landing page → Project map: opens map
- Visitor → Project map: explores
- Project map → Rendered city: displays
- Project map → Building positions: positions markers
- Project map → Projects: reads projects
- Project map → Project cards: opens card
- Project cards → Project detail: opens detail
- Project detail → Project tools: reads tools
- Visitor → About globe: visits About
- Visitor → Admin interface: manages content
- Admin interface → Projects: edits projects
- Admin interface → Project tools: edits tools
- Admin interface → Admin service: requests save
- Admin service → Projects: writes projects
- Admin interface → Admin service: uploads media
- Admin service → Uploaded media: writes uploads
- City renderer → Building models: executes
- City renderer → Road network: uses network
- City renderer → Geometry accumulator: accumulates geometry
- City renderer → Render materials: uses materials
- City renderer → Rendered city: renders images
- City renderer → Building positions: exports positions