# lyesprojet/portfolio architecture

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

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

## Overview

This is a personal portfolio site with two presentation modes: an interactive command-line view and a conventional GUI. The principal workflow is browser entry into App, mode selection, then exploration of identity, projects, experience, skills, and contact information; the terminal accepts commands and displays results, while the GUI offers corresponding sections. The sampled code confirms mode switching, terminal command dispatch, project and experience data use, and first-visit persistence. Other component wiring is inferred from names and remains unlinked where source was not sampled.

Main entry points: [`src/App.jsx`](https://github.com/lyesprojet/portfolio/blob/main/src/App.jsx) (App mode controller), [`src/components/terminal/Terminal.jsx`](https://github.com/lyesprojet/portfolio/blob/main/src/components/terminal/Terminal.jsx) (Terminal view), [`src/main.jsx`](https://github.com/lyesprojet/portfolio/blob/main/src/main.jsx) (React entry), [`src/hooks/useLocalStorage.js`](https://github.com/lyesprojet/portfolio/blob/main/src/hooks/useLocalStorage.js) (First-visit hook)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App and mode switching"]
  node_entry["React entry<br/>[main.jsx]"]
  node_app["App mode controller<br/>[App.jsx]"]
  node_visit["First-visit hook<br/>[useLocalStorage.js]"]
  node_mobile["Viewport hook<br/>[useIsMobile.js]"]
  node_loading["Loading screen<br/>[LoadingScreen.jsx]"]
  node_transition["Matrix transition"]
  node_typewriter["Typewriter hook<br/>[useTypewriter.js]"]
end

subgraph group_terminal["Terminal portfolio"]
  node_terminal["Terminal view<br/>[Terminal.jsx]"]
  node_commands["Command configuration<br/>[commands.config.js]"]
  node_input["Terminal input<br/>[TerminalInput.jsx]"]
  node_output["Terminal output<br/>[TerminalOutput.jsx]"]
  node_identity["Identity card<br/>[IdentityCard.jsx]"]
  node_timeline["Experience timeline"]
  node_projectlist["Project list<br/>[ProjectsList.jsx]"]
  node_skillsblock["Skills block<br/>[SkillsBlock.jsx]"]
  node_contactblock["Contact block<br/>[ContactBlock.jsx]"]
end

subgraph group_gui["GUI portfolio"]
  node_gui["GUI application<br/>[GuiApp.jsx]"]
  node_hero["Hero section<br/>[Hero.jsx]"]
  node_nav["Top navigation<br/>[TopNav.jsx]"]
  node_parcours["Experience section"]
  node_projectssection["Projects section"]
  node_contactsection["Contact section<br/>[ContactSection.jsx]"]
end

subgraph group_content["Portfolio content"]
  node_experiences["Experience data<br/>[experiences.js]"]
  node_projects["Project data<br/>[projects.js]"]
  node_skills["Skills data<br/>[skills.js]"]
  node_contact["Contact data<br/>[contact.js]"]
end

node_visitor(("Visitor"))
node_browser(("Browser"))
node_storage[("Browser local storage")]

node_visitor -->|"uses"| node_browser
node_browser -->|"loads"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"checks visit"| node_visit
node_visit -->|"reads and writes"| node_storage
node_app -->|"reads and writes mode"| node_storage
node_app -->|"checks viewport"| node_mobile
node_app -->|"shows"| node_loading
node_app -->|"renders terminal mode"| node_terminal
node_app -->|"renders GUI mode"| node_gui
node_app -->|"switches modes"| node_transition
node_terminal -->|"renders"| node_input
node_terminal -->|"renders"| node_output
node_terminal -->|"dispatches commands"| node_commands
node_terminal -->|"animates welcome"| node_typewriter
node_parcours -->|"reads"| node_experiences
node_projectssection -->|"reads"| node_projects

click node_entry "https://github.com/lyesprojet/portfolio/blob/main/src/main.jsx"
click node_app "https://github.com/lyesprojet/portfolio/blob/main/src/App.jsx"
click node_visit "https://github.com/lyesprojet/portfolio/blob/main/src/hooks/useLocalStorage.js"
click node_mobile "https://github.com/lyesprojet/portfolio/blob/main/src/hooks/useIsMobile.js"
click node_loading "https://github.com/lyesprojet/portfolio/blob/main/src/components/shared/LoadingScreen.jsx"
click node_transition "https://github.com/lyesprojet/portfolio/blob/main/src/components/shared/MatrixTransition.jsx"
click node_terminal "https://github.com/lyesprojet/portfolio/blob/main/src/components/terminal/Terminal.jsx"
click node_commands "https://github.com/lyesprojet/portfolio/blob/main/src/data/commands.config.js"
click node_input "https://github.com/lyesprojet/portfolio/blob/main/src/components/terminal/TerminalInput.jsx"
click node_output "https://github.com/lyesprojet/portfolio/blob/main/src/components/terminal/TerminalOutput.jsx"
click node_identity "https://github.com/lyesprojet/portfolio/blob/main/src/components/terminal/IdentityCard.jsx"
click node_timeline "https://github.com/lyesprojet/portfolio/blob/main/src/components/terminal/ExperienceTimeline.jsx"
click node_projectlist "https://github.com/lyesprojet/portfolio/blob/main/src/components/terminal/ProjectsList.jsx"
click node_skillsblock "https://github.com/lyesprojet/portfolio/blob/main/src/components/terminal/SkillsBlock.jsx"
click node_contactblock "https://github.com/lyesprojet/portfolio/blob/main/src/components/terminal/ContactBlock.jsx"
click node_gui "https://github.com/lyesprojet/portfolio/blob/main/src/components/gui/GuiApp.jsx"
click node_hero "https://github.com/lyesprojet/portfolio/blob/main/src/components/gui/Hero.jsx"
click node_nav "https://github.com/lyesprojet/portfolio/blob/main/src/components/gui/TopNav.jsx"
click node_parcours "https://github.com/lyesprojet/portfolio/blob/main/src/components/gui/ParcoursSection.jsx"
click node_projectssection "https://github.com/lyesprojet/portfolio/blob/main/src/components/gui/ProjectsSection.jsx"
click node_contactsection "https://github.com/lyesprojet/portfolio/blob/main/src/components/gui/ContactSection.jsx"
click node_experiences "https://github.com/lyesprojet/portfolio/blob/main/src/data/experiences.js"
click node_projects "https://github.com/lyesprojet/portfolio/blob/main/src/data/projects.js"
click node_skills "https://github.com/lyesprojet/portfolio/blob/main/src/data/skills.js"
click node_contact "https://github.com/lyesprojet/portfolio/blob/main/src/data/contact.js"
click node_typewriter "https://github.com/lyesprojet/portfolio/blob/main/src/hooks/useTypewriter.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_entry,node_app,node_visit,node_mobile,node_loading,node_transition,node_typewriter,node_browser toneBlue
class node_terminal,node_commands,node_input,node_output,node_identity,node_timeline,node_projectlist,node_skillsblock,node_contactblock,node_storage toneAmber
class node_gui,node_hero,node_nav,node_parcours,node_projectssection,node_contactsection toneMint
class node_experiences,node_projects,node_skills,node_contact toneRose
class node_visitor toneIndigo
```

## Components

### App and mode switching

- [React entry](https://github.com/lyesprojet/portfolio/blob/main/src/main.jsx): `src/main.jsx`
- [App mode controller](https://github.com/lyesprojet/portfolio/blob/main/src/App.jsx): `src/App.jsx`
- [First-visit hook](https://github.com/lyesprojet/portfolio/blob/main/src/hooks/useLocalStorage.js): `src/hooks/useLocalStorage.js`
- [Viewport hook](https://github.com/lyesprojet/portfolio/blob/main/src/hooks/useIsMobile.js): `src/hooks/useIsMobile.js`
- [Loading screen](https://github.com/lyesprojet/portfolio/blob/main/src/components/shared/LoadingScreen.jsx): `src/components/shared/LoadingScreen.jsx`
- [Matrix transition](https://github.com/lyesprojet/portfolio/blob/main/src/components/shared/MatrixTransition.jsx): `src/components/shared/MatrixTransition.jsx`
- [Typewriter hook](https://github.com/lyesprojet/portfolio/blob/main/src/hooks/useTypewriter.js): `src/hooks/useTypewriter.js`

### Terminal portfolio

- [Terminal view](https://github.com/lyesprojet/portfolio/blob/main/src/components/terminal/Terminal.jsx): `src/components/terminal/Terminal.jsx`
- [Command configuration](https://github.com/lyesprojet/portfolio/blob/main/src/data/commands.config.js): `src/data/commands.config.js`
- [Terminal input](https://github.com/lyesprojet/portfolio/blob/main/src/components/terminal/TerminalInput.jsx): `src/components/terminal/TerminalInput.jsx`
- [Terminal output](https://github.com/lyesprojet/portfolio/blob/main/src/components/terminal/TerminalOutput.jsx): `src/components/terminal/TerminalOutput.jsx`
- [Identity card](https://github.com/lyesprojet/portfolio/blob/main/src/components/terminal/IdentityCard.jsx): `src/components/terminal/IdentityCard.jsx`
- [Experience timeline](https://github.com/lyesprojet/portfolio/blob/main/src/components/terminal/ExperienceTimeline.jsx): `src/components/terminal/ExperienceTimeline.jsx`
- [Project list](https://github.com/lyesprojet/portfolio/blob/main/src/components/terminal/ProjectsList.jsx): `src/components/terminal/ProjectsList.jsx`
- [Skills block](https://github.com/lyesprojet/portfolio/blob/main/src/components/terminal/SkillsBlock.jsx): `src/components/terminal/SkillsBlock.jsx`
- [Contact block](https://github.com/lyesprojet/portfolio/blob/main/src/components/terminal/ContactBlock.jsx): `src/components/terminal/ContactBlock.jsx`

### GUI portfolio

- [GUI application](https://github.com/lyesprojet/portfolio/blob/main/src/components/gui/GuiApp.jsx): `src/components/gui/GuiApp.jsx`
- [Hero section](https://github.com/lyesprojet/portfolio/blob/main/src/components/gui/Hero.jsx): `src/components/gui/Hero.jsx`
- [Top navigation](https://github.com/lyesprojet/portfolio/blob/main/src/components/gui/TopNav.jsx): `src/components/gui/TopNav.jsx`
- [Experience section](https://github.com/lyesprojet/portfolio/blob/main/src/components/gui/ParcoursSection.jsx): `src/components/gui/ParcoursSection.jsx`
- [Projects section](https://github.com/lyesprojet/portfolio/blob/main/src/components/gui/ProjectsSection.jsx): `src/components/gui/ProjectsSection.jsx`
- [Contact section](https://github.com/lyesprojet/portfolio/blob/main/src/components/gui/ContactSection.jsx): `src/components/gui/ContactSection.jsx`

### Portfolio content

- [Experience data](https://github.com/lyesprojet/portfolio/blob/main/src/data/experiences.js): `src/data/experiences.js`
- [Project data](https://github.com/lyesprojet/portfolio/blob/main/src/data/projects.js): `src/data/projects.js`
- [Skills data](https://github.com/lyesprojet/portfolio/blob/main/src/data/skills.js): `src/data/skills.js`
- [Contact data](https://github.com/lyesprojet/portfolio/blob/main/src/data/contact.js): `src/data/contact.js`

### Other components

- **Visitor**
- **Browser**
- **Browser local storage**

## Connections

- Visitor → Browser: uses
- Browser → React entry: loads
- React entry → App mode controller: renders
- App mode controller → First-visit hook: checks visit
- First-visit hook → Browser local storage: reads and writes
- App mode controller → Browser local storage: reads and writes mode
- App mode controller → Viewport hook: checks viewport
- App mode controller → Loading screen: shows
- App mode controller → Terminal view: renders terminal mode
- App mode controller → GUI application: renders GUI mode
- App mode controller → Matrix transition: switches modes
- Terminal view → Terminal input: renders
- Terminal view → Terminal output: renders
- Terminal view → Command configuration: dispatches commands
- Terminal view → Typewriter hook: animates welcome
- Experience section → Experience data: reads
- Projects section → Project data: reads