# mamoudouu/portfolio architecture

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

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

## Overview

This is a single-page personal portfolio. A visitor reads the page while a WebGL particle scene changes with scrolling and pointer input; separate interface code adds optional scroll and cursor animations. The README also identifies the page content, styling, and local font assets. The tree does not include the documented local Three.js copy, and the preview server is not part of the deployed product workflow, so neither is mapped as a product component.

Main entry points: [`index.html`](https://github.com/mamoudouu/portfolio/blob/main/index.html) (Page content), [`main.js`](https://github.com/mamoudouu/portfolio/blob/main/main.js) (Particle engine), [`interface.js`](https://github.com/mamoudouu/portfolio/blob/main/interface.js) (Interface animations)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_page["Portfolio page"]
  node_content["Page content<br/>[index.html]"]
end

subgraph group_visuals["Visual experience"]
  node_particles["Particle engine<br/>[main.js]"]
  node_interface["Interface animations<br/>[interface.js]"]
end

subgraph group_assets["Presentation assets"]
  node_styling["Page styling<br/>[style.css]"]
  node_fonts["Archivo font"]
end

node_visitor(("Visitor"))

node_visitor -->|"reads page"| node_content
node_visitor -->|"scrolls and points"| node_particles
node_visitor -->|"scrolls and points"| node_interface

click node_content "https://github.com/mamoudouu/portfolio/blob/main/index.html"
click node_particles "https://github.com/mamoudouu/portfolio/blob/main/main.js"
click node_interface "https://github.com/mamoudouu/portfolio/blob/main/interface.js"
click node_styling "https://github.com/mamoudouu/portfolio/blob/main/style.css"
click node_fonts "https://github.com/mamoudouu/portfolio/tree/main/polices"

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_content toneBlue
class node_particles,node_interface toneAmber
class node_styling,node_fonts toneMint
class node_visitor toneIndigo
```

## Components

### Portfolio page

- [Page content](https://github.com/mamoudouu/portfolio/blob/main/index.html): `index.html`

### Visual experience

- [Particle engine](https://github.com/mamoudouu/portfolio/blob/main/main.js): `main.js`
- [Interface animations](https://github.com/mamoudouu/portfolio/blob/main/interface.js): `interface.js`

### Presentation assets

- [Page styling](https://github.com/mamoudouu/portfolio/blob/main/style.css): `style.css`
- [Archivo font](https://github.com/mamoudouu/portfolio/tree/main/polices): `polices`

### Other components

- **Visitor**

## Connections

- Visitor → Page content: reads page (evidence: `README.md`)
- Visitor → Particle engine: scrolls and points (evidence: `main.js`)
- Visitor → Interface animations: scrolls and points (evidence: `interface.js`)