# oussamajdig7/portfolio architecture

> Architecture diagram of the GitHub repository oussamajdig7/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/oussamajdig7/portfolio
- Repository: https://github.com/oussamajdig7/portfolio
- Video tour (about a minute): https://gitdiagram.com/oussamajdig7/portfolio/video

## Overview

This is a React portfolio site presenting a developer’s profile, skills, projects, career timeline, and contact options. A visitor enters through the routed app, views the home hero, and can navigate to portfolio pages or submit a contact form; the form validates input and sends it through EmailJS. Shared presentation includes navigation, motion, theme, and audio behavior. The README documents all six content areas, while sampled code confirms routing, the home hero, contact submission, and theme/audio state; wiring inside unsampled pages and Layout is therefore not shown.

Main entry points: [`src/App.jsx`](https://github.com/oussamajdig7/portfolio/blob/main/src/App.jsx) (Route app), [`src/components/sections/ContactSection.jsx`](https://github.com/oussamajdig7/portfolio/blob/main/src/components/sections/ContactSection.jsx) (Contact form), [`src/pages/Home.jsx`](https://github.com/oussamajdig7/portfolio/blob/main/src/pages/Home.jsx) (Home page), [`src/components/sections/HeroSection.jsx`](https://github.com/oussamajdig7/portfolio/blob/main/src/components/sections/HeroSection.jsx) (Hero section)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routing["Routing and pages"]
  node_app["Route app<br/>[App.jsx]"]
  node_home["Home page<br/>[Home.jsx]"]
  node_about["About page<br/>[About.jsx]"]
  node_skills["Skills page<br/>[Skills.jsx]"]
  node_projects["Projects page<br/>[Projects.jsx]"]
  node_timeline["Timeline page<br/>[Timeline.jsx]"]
  node_contactpage["Contact page<br/>[Contact.jsx]"]
end

subgraph group_content["Portfolio content"]
  node_hero["Hero section<br/>[HeroSection.jsx]"]
  node_aboutsection["About section<br/>[AboutSection.jsx]"]
  node_skillssection["Skills section<br/>[SkillsSection.jsx]"]
  node_projectssection["Projects section"]
  node_timelinesection["Timeline section"]
  node_portfolio["Portfolio data<br/>[portfolio.js]"]
end

subgraph group_shared["Shared experience"]
  node_layout["Site layout<br/>[Layout.jsx]"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
  node_theme["Theme state<br/>[useTheme.js]"]
  node_audio["Audio state<br/>[useAudio.js]"]
  node_sound["Sound manager<br/>[SoundManager.jsx]"]
  node_localstorage[("Browser storage")]
end

subgraph group_contact["Contact"]
  node_contactsection["Contact form<br/>[ContactSection.jsx]"]
end

node_visitor(("Visitor"))
node_emailjs["EmailJS service"]

node_visitor -->|"opens"| node_app
node_app -->|"wraps routes"| node_layout
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_about
node_app -->|"routes to"| node_skills
node_app -->|"routes to"| node_projects
node_app -->|"routes to"| node_timeline
node_app -->|"routes to"| node_contactpage
node_home -->|"renders"| node_hero
node_hero -->|"reads profile"| node_portfolio
node_contactsection -->|"reads socials"| node_portfolio
node_contactsection -->|"sends message"| node_emailjs
node_theme -->|"reads and writes"| node_localstorage
node_sound -->|"reads mute state"| node_audio
node_navbar -->|"uses mute controls"| node_audio

click node_app "https://github.com/oussamajdig7/portfolio/blob/main/src/App.jsx"
click node_layout "https://github.com/oussamajdig7/portfolio/blob/main/src/components/site/Layout.jsx"
click node_home "https://github.com/oussamajdig7/portfolio/blob/main/src/pages/Home.jsx"
click node_about "https://github.com/oussamajdig7/portfolio/blob/main/src/pages/About.jsx"
click node_skills "https://github.com/oussamajdig7/portfolio/blob/main/src/pages/Skills.jsx"
click node_projects "https://github.com/oussamajdig7/portfolio/blob/main/src/pages/Projects.jsx"
click node_timeline "https://github.com/oussamajdig7/portfolio/blob/main/src/pages/Timeline.jsx"
click node_contactpage "https://github.com/oussamajdig7/portfolio/blob/main/src/pages/Contact.jsx"
click node_hero "https://github.com/oussamajdig7/portfolio/blob/main/src/components/sections/HeroSection.jsx"
click node_aboutsection "https://github.com/oussamajdig7/portfolio/blob/main/src/components/sections/AboutSection.jsx"
click node_skillssection "https://github.com/oussamajdig7/portfolio/blob/main/src/components/sections/SkillsSection.jsx"
click node_projectssection "https://github.com/oussamajdig7/portfolio/blob/main/src/components/sections/ProjectsSection.jsx"
click node_timelinesection "https://github.com/oussamajdig7/portfolio/blob/main/src/components/sections/TimelineSection.jsx"
click node_contactsection "https://github.com/oussamajdig7/portfolio/blob/main/src/components/sections/ContactSection.jsx"
click node_portfolio "https://github.com/oussamajdig7/portfolio/blob/main/src/data/portfolio.js"
click node_navbar "https://github.com/oussamajdig7/portfolio/blob/main/src/components/site/Navbar.jsx"
click node_theme "https://github.com/oussamajdig7/portfolio/blob/main/src/hooks/useTheme.js"
click node_audio "https://github.com/oussamajdig7/portfolio/blob/main/src/hooks/useAudio.js"
click node_sound "https://github.com/oussamajdig7/portfolio/blob/main/src/components/site/SoundManager.jsx"

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_home,node_about,node_skills,node_projects,node_timeline,node_contactpage toneBlue
class node_hero,node_aboutsection,node_skillssection,node_projectssection,node_timelinesection,node_portfolio toneAmber
class node_layout,node_navbar,node_theme,node_audio,node_sound,node_localstorage toneMint
class node_contactsection toneRose
class node_visitor,node_emailjs toneIndigo
```

## Components

### Routing and pages

- [Route app](https://github.com/oussamajdig7/portfolio/blob/main/src/App.jsx): `src/App.jsx`
- [Home page](https://github.com/oussamajdig7/portfolio/blob/main/src/pages/Home.jsx): `src/pages/Home.jsx`
- [About page](https://github.com/oussamajdig7/portfolio/blob/main/src/pages/About.jsx): `src/pages/About.jsx`
- [Skills page](https://github.com/oussamajdig7/portfolio/blob/main/src/pages/Skills.jsx): `src/pages/Skills.jsx`
- [Projects page](https://github.com/oussamajdig7/portfolio/blob/main/src/pages/Projects.jsx): `src/pages/Projects.jsx`
- [Timeline page](https://github.com/oussamajdig7/portfolio/blob/main/src/pages/Timeline.jsx): `src/pages/Timeline.jsx`
- [Contact page](https://github.com/oussamajdig7/portfolio/blob/main/src/pages/Contact.jsx): `src/pages/Contact.jsx`

### Portfolio content

- [Hero section](https://github.com/oussamajdig7/portfolio/blob/main/src/components/sections/HeroSection.jsx): `src/components/sections/HeroSection.jsx`
- [About section](https://github.com/oussamajdig7/portfolio/blob/main/src/components/sections/AboutSection.jsx): `src/components/sections/AboutSection.jsx`
- [Skills section](https://github.com/oussamajdig7/portfolio/blob/main/src/components/sections/SkillsSection.jsx): `src/components/sections/SkillsSection.jsx`
- [Projects section](https://github.com/oussamajdig7/portfolio/blob/main/src/components/sections/ProjectsSection.jsx): `src/components/sections/ProjectsSection.jsx`
- [Timeline section](https://github.com/oussamajdig7/portfolio/blob/main/src/components/sections/TimelineSection.jsx): `src/components/sections/TimelineSection.jsx`
- [Portfolio data](https://github.com/oussamajdig7/portfolio/blob/main/src/data/portfolio.js): `src/data/portfolio.js`

### Shared experience

- [Site layout](https://github.com/oussamajdig7/portfolio/blob/main/src/components/site/Layout.jsx): `src/components/site/Layout.jsx`
- [Navigation](https://github.com/oussamajdig7/portfolio/blob/main/src/components/site/Navbar.jsx): `src/components/site/Navbar.jsx`
- [Theme state](https://github.com/oussamajdig7/portfolio/blob/main/src/hooks/useTheme.js): `src/hooks/useTheme.js`
- [Audio state](https://github.com/oussamajdig7/portfolio/blob/main/src/hooks/useAudio.js): `src/hooks/useAudio.js`
- [Sound manager](https://github.com/oussamajdig7/portfolio/blob/main/src/components/site/SoundManager.jsx): `src/components/site/SoundManager.jsx`
- **Browser storage**

### Contact

- [Contact form](https://github.com/oussamajdig7/portfolio/blob/main/src/components/sections/ContactSection.jsx): `src/components/sections/ContactSection.jsx`

### Other components

- **Visitor**
- **EmailJS service**

## Connections

- Visitor → Route app: opens
- Route app → Site layout: wraps routes
- Route app → Home page: routes to
- Route app → About page: routes to
- Route app → Skills page: routes to
- Route app → Projects page: routes to
- Route app → Timeline page: routes to
- Route app → Contact page: routes to
- Home page → Hero section: renders
- Hero section → Portfolio data: reads profile
- Contact form → Portfolio data: reads socials
- Contact form → EmailJS service: sends message
- Theme state → Browser storage: reads and writes
- Sound manager → Audio state: reads mute state
- Navigation → Audio state: uses mute controls