# raptoredd/portfolio architecture

> Architecture diagram of the GitHub repository raptoredd/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/raptoredd/portfolio
- Repository: https://github.com/raptoredd/portfolio

## Overview

This is a React cybersecurity portfolio, not a backend service: visitors browse profile, career, projects and homelab material, follow security feeds, and play browser-based CTF challenges. The route shell dispatches visitors to those page-level experiences; the challenge flow includes challenge content, flag checking, and locally persisted progress. Other documented capabilities include theme/team switching and a contact form. Several links below are based on README descriptions or SOURCE INDEX references; unsampled internals are not inferred beyond that evidence.

Main entry points: [`src/App.jsx`](https://github.com/raptoredd/portfolio/blob/main/src/App.jsx) (Route shell), [`src/hooks/useCTFProgress.js`](https://github.com/raptoredd/portfolio/blob/main/src/hooks/useCTFProgress.js) (Challenge progress), [`src/pages/Parcours.jsx`](https://github.com/raptoredd/portfolio/blob/main/src/pages/Parcours.jsx) (Career timeline), [`src/pages/Projets.jsx`](https://github.com/raptoredd/portfolio/blob/main/src/pages/Projets.jsx) (Project showcase)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["App shell"]
  node_app["Route shell<br/>[App.jsx]"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
  node_themecontrol["Theme control<br/>[ThemeWidget.jsx]"]
end

subgraph group_portfolio["Portfolio content"]
  node_home["Profile home<br/>[Home.jsx]"]
  node_career["Career timeline<br/>[Parcours.jsx]"]
  node_certs["Certifications"]
  node_projects["Project showcase<br/>[Projets.jsx]"]
  node_projectdata["Project catalog<br/>[projectsData.js]"]
  node_homelab["Homelab view<br/>[Homelab.jsx]"]
  node_network["Network graph<br/>[NetworkGraph.jsx]"]
  node_timeline_data["Timeline content<br/>[timelineData.js]"]
end

subgraph group_ctf["CTF challenges"]
  node_ctfpage["Challenge browser<br/>[CTF.jsx]"]
  node_challenges["Challenge content<br/>[ctfData.js]"]
  node_flaginput["Flag validation<br/>[CTFFlagInput.jsx]"]
  node_progress["Challenge progress<br/>[useCTFProgress.js]"]
  node_solutions["Solution guide<br/>[CTFSolutions.jsx]"]
  node_vertex["Vertex simulation<br/>[VertexAdmin.jsx]"]
  node_visioncorp["VisionCorp scenario<br/>[VisionCorpPage.jsx]"]
end

subgraph group_security["Security resources"]
  node_veille["Security feed<br/>[Veille.jsx]"]
  node_rss["RSS aggregator<br/>[RSSFeed.jsx]"]
  node_feeddata["Feed sources<br/>[rssFeeds.js]"]
  node_contact["Contact form<br/>[Contact.jsx]"]
end

subgraph group_state["UI state"]
  node_team["Team mode state<br/>[TeamContext.jsx]"]
  node_theme["Theme state<br/>[ThemeContext.jsx]"]
end

node_visitor(("Visitor"))
node_formspree{{"Formspree"}}

node_visitor -->|"opens"| node_app
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_career
node_app -->|"routes to"| node_projects
node_app -->|"routes to"| node_ctfpage
node_app -->|"routes to"| node_solutions
node_app -->|"routes to"| node_vertex
node_app -->|"routes to"| node_visioncorp
node_app -->|"routes to"| node_homelab
node_app -->|"routes to"| node_veille
node_app -->|"routes to"| node_contact
node_career -->|"renders"| node_certs
node_career -->|"reads"| node_timeline_data
node_projects -->|"reads"| node_projectdata
node_projects -->|"reads mode"| node_team
node_navbar -->|"reads mode"| node_team
node_homelab -->|"renders"| node_network
node_ctfpage -->|"loads"| node_challenges
node_ctfpage -->|"reads progress"| node_progress
node_solutions -->|"loads"| node_challenges
node_solutions -->|"reads progress"| node_progress
node_flaginput -->|"checks flags"| node_challenges
node_flaginput -->|"records solve"| node_progress
node_progress -->|"persists locally"| node_visitor
node_veille -->|"renders"| node_rss
node_rss -->|"loads sources"| node_feeddata
node_rss -.-> node_formspree
node_contact -.->|"submits form"| node_formspree
node_themecontrol -->|"sets theme"| node_theme
node_visitor -->|"navigates"| node_navbar

click node_app "https://github.com/raptoredd/portfolio/blob/main/src/App.jsx"
click node_home "https://github.com/raptoredd/portfolio/blob/main/src/pages/Home.jsx"
click node_career "https://github.com/raptoredd/portfolio/blob/main/src/pages/Parcours.jsx"
click node_certs "https://github.com/raptoredd/portfolio/blob/main/src/components/home/CertificationsModal.jsx"
click node_projects "https://github.com/raptoredd/portfolio/blob/main/src/pages/Projets.jsx"
click node_projectdata "https://github.com/raptoredd/portfolio/blob/main/src/data/projectsData.js"
click node_homelab "https://github.com/raptoredd/portfolio/blob/main/src/pages/Homelab.jsx"
click node_network "https://github.com/raptoredd/portfolio/blob/main/src/components/homelab/NetworkGraph.jsx"
click node_ctfpage "https://github.com/raptoredd/portfolio/blob/main/src/pages/CTF.jsx"
click node_challenges "https://github.com/raptoredd/portfolio/blob/main/src/data/ctfData.js"
click node_flaginput "https://github.com/raptoredd/portfolio/blob/main/src/components/ctf/CTFFlagInput.jsx"
click node_progress "https://github.com/raptoredd/portfolio/blob/main/src/hooks/useCTFProgress.js"
click node_solutions "https://github.com/raptoredd/portfolio/blob/main/src/pages/CTFSolutions.jsx"
click node_vertex "https://github.com/raptoredd/portfolio/blob/main/src/pages/VertexAdmin.jsx"
click node_visioncorp "https://github.com/raptoredd/portfolio/blob/main/src/pages/VisionCorpPage.jsx"
click node_veille "https://github.com/raptoredd/portfolio/blob/main/src/pages/Veille.jsx"
click node_rss "https://github.com/raptoredd/portfolio/blob/main/src/components/veille/RSSFeed.jsx"
click node_feeddata "https://github.com/raptoredd/portfolio/blob/main/src/data/rssFeeds.js"
click node_contact "https://github.com/raptoredd/portfolio/blob/main/src/pages/Contact.jsx"
click node_navbar "https://github.com/raptoredd/portfolio/blob/main/src/components/layout/Navbar.jsx"
click node_team "https://github.com/raptoredd/portfolio/blob/main/src/context/TeamContext.jsx"
click node_theme "https://github.com/raptoredd/portfolio/blob/main/src/context/ThemeContext.jsx"
click node_themecontrol "https://github.com/raptoredd/portfolio/blob/main/src/components/layout/ThemeWidget.jsx"
click node_timeline_data "https://github.com/raptoredd/portfolio/blob/main/src/data/timelineData.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_navbar,node_themecontrol toneBlue
class node_home,node_career,node_certs,node_projects,node_projectdata,node_homelab,node_network,node_timeline_data toneAmber
class node_ctfpage,node_challenges,node_flaginput,node_progress,node_solutions,node_vertex,node_visioncorp toneMint
class node_veille,node_rss,node_feeddata,node_contact toneRose
class node_team,node_theme,node_visitor,node_formspree toneIndigo
```

## Components

### App shell

- [Route shell](https://github.com/raptoredd/portfolio/blob/main/src/App.jsx): `src/App.jsx`
- [Navigation](https://github.com/raptoredd/portfolio/blob/main/src/components/layout/Navbar.jsx): `src/components/layout/Navbar.jsx`
- [Theme control](https://github.com/raptoredd/portfolio/blob/main/src/components/layout/ThemeWidget.jsx): `src/components/layout/ThemeWidget.jsx`

### Portfolio content

- [Profile home](https://github.com/raptoredd/portfolio/blob/main/src/pages/Home.jsx): `src/pages/Home.jsx`
- [Career timeline](https://github.com/raptoredd/portfolio/blob/main/src/pages/Parcours.jsx): `src/pages/Parcours.jsx`
- [Certifications](https://github.com/raptoredd/portfolio/blob/main/src/components/home/CertificationsModal.jsx): `src/components/home/CertificationsModal.jsx`
- [Project showcase](https://github.com/raptoredd/portfolio/blob/main/src/pages/Projets.jsx): `src/pages/Projets.jsx`
- [Project catalog](https://github.com/raptoredd/portfolio/blob/main/src/data/projectsData.js): `src/data/projectsData.js`
- [Homelab view](https://github.com/raptoredd/portfolio/blob/main/src/pages/Homelab.jsx): `src/pages/Homelab.jsx`
- [Network graph](https://github.com/raptoredd/portfolio/blob/main/src/components/homelab/NetworkGraph.jsx): `src/components/homelab/NetworkGraph.jsx`
- [Timeline content](https://github.com/raptoredd/portfolio/blob/main/src/data/timelineData.js): `src/data/timelineData.js`

### CTF challenges

- [Challenge browser](https://github.com/raptoredd/portfolio/blob/main/src/pages/CTF.jsx): `src/pages/CTF.jsx`
- [Challenge content](https://github.com/raptoredd/portfolio/blob/main/src/data/ctfData.js): `src/data/ctfData.js`
- [Flag validation](https://github.com/raptoredd/portfolio/blob/main/src/components/ctf/CTFFlagInput.jsx): `src/components/ctf/CTFFlagInput.jsx`
- [Challenge progress](https://github.com/raptoredd/portfolio/blob/main/src/hooks/useCTFProgress.js): `src/hooks/useCTFProgress.js`
- [Solution guide](https://github.com/raptoredd/portfolio/blob/main/src/pages/CTFSolutions.jsx): `src/pages/CTFSolutions.jsx`
- [Vertex simulation](https://github.com/raptoredd/portfolio/blob/main/src/pages/VertexAdmin.jsx): `src/pages/VertexAdmin.jsx`
- [VisionCorp scenario](https://github.com/raptoredd/portfolio/blob/main/src/pages/VisionCorpPage.jsx): `src/pages/VisionCorpPage.jsx`

### Security resources

- [Security feed](https://github.com/raptoredd/portfolio/blob/main/src/pages/Veille.jsx): `src/pages/Veille.jsx`
- [RSS aggregator](https://github.com/raptoredd/portfolio/blob/main/src/components/veille/RSSFeed.jsx): `src/components/veille/RSSFeed.jsx`
- [Feed sources](https://github.com/raptoredd/portfolio/blob/main/src/data/rssFeeds.js): `src/data/rssFeeds.js`
- [Contact form](https://github.com/raptoredd/portfolio/blob/main/src/pages/Contact.jsx): `src/pages/Contact.jsx`

### UI state

- [Team mode state](https://github.com/raptoredd/portfolio/blob/main/src/context/TeamContext.jsx): `src/context/TeamContext.jsx`
- [Theme state](https://github.com/raptoredd/portfolio/blob/main/src/context/ThemeContext.jsx): `src/context/ThemeContext.jsx`

### Other components

- **Visitor**
- **Formspree**

## Connections

- Visitor → Route shell: opens (evidence: `src/App.jsx`)
- Route shell → Profile home: routes to (evidence: `src/App.jsx`)
- Route shell → Career timeline: routes to (evidence: `src/App.jsx`)
- Route shell → Project showcase: routes to (evidence: `src/App.jsx`)
- Route shell → Challenge browser: routes to (evidence: `src/App.jsx`)
- Route shell → Solution guide: routes to (evidence: `src/App.jsx`)
- Route shell → Vertex simulation: routes to (evidence: `src/App.jsx`)
- Route shell → VisionCorp scenario: routes to (evidence: `src/App.jsx`)
- Route shell → Homelab view: routes to (evidence: `src/App.jsx`)
- Route shell → Security feed: routes to (evidence: `src/App.jsx`)
- Route shell → Contact form: routes to (evidence: `src/App.jsx`)
- Career timeline → Certifications: renders (evidence: `src/pages/Parcours.jsx`)
- Career timeline → Timeline content: reads (evidence: `src/pages/Parcours.jsx`)
- Project showcase → Project catalog: reads (evidence: `src/pages/Projets.jsx`)
- Project showcase → Team mode state: reads mode (evidence: `src/pages/Projets.jsx`)
- Navigation → Team mode state: reads mode (evidence: `src/components/layout/Navbar.jsx`)
- Homelab view → Network graph: renders (evidence: `src/pages/Homelab.jsx`)
- Challenge browser → Challenge content: loads (evidence: `src/pages/CTF.jsx`)
- Challenge browser → Challenge progress: reads progress (evidence: `src/pages/CTF.jsx`)
- Solution guide → Challenge content: loads (evidence: `src/pages/CTFSolutions.jsx`)
- Solution guide → Challenge progress: reads progress (evidence: `src/pages/CTFSolutions.jsx`)
- Flag validation → Challenge content: checks flags (evidence: `src/components/ctf/CTFFlagInput.jsx`)
- Flag validation → Challenge progress: records solve (evidence: `src/components/ctf/CTFFlagInput.jsx`)
- Challenge progress → Visitor: persists locally (evidence: `src/hooks/useCTFProgress.js`)
- Security feed → RSS aggregator: renders (evidence: `src/pages/Veille.jsx`)
- RSS aggregator → Feed sources: loads sources (evidence: `src/components/veille/RSSFeed.jsx`)
- RSS aggregator → Formspree
- Contact form → Formspree: submits form (evidence: `README.md`)
- Theme control → Theme state: sets theme (evidence: `src/components/layout/ThemeWidget.jsx`)
- Visitor → Navigation: navigates (evidence: `README.md`)