# marwanatef96/marwan-portfolio-v1 architecture

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

- Interactive diagram: https://gitdiagram.com/marwanatef96/marwan-portfolio-v1
- Repository: https://github.com/marwanatef96/marwan-portfolio-v1

## Overview

This is a Next.js personal portfolio: visitors browse an assembled home page containing an introduction, biography, skills, project showcase, contact form, and footer. The contact form validates input and sends submissions through EmailJS; visitors can also switch the site theme, whose preference is stored in local storage. The sampled source shows page composition, theme wiring, project/skill data usage, and the EmailJS call. Other section internals were not sampled, so their finer interactions are omitted.

Main entry points: [`src/app/page.tsx`](https://github.com/marwanatef96/marwan-portfolio-v1/blob/main/src/app/page.tsx) (Home Page), [`src/app/ThemeProviderClient.tsx`](https://github.com/marwanatef96/marwan-portfolio-v1/blob/main/src/app/ThemeProviderClient.tsx) (Theme Provider), [`src/app/layout.tsx`](https://github.com/marwanatef96/marwan-portfolio-v1/blob/main/src/app/layout.tsx) (Root Layout), [`src/app/components/Navbar.tsx`](https://github.com/marwanatef96/marwan-portfolio-v1/blob/main/src/app/components/Navbar.tsx) (Navigation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Portfolio Site"]
  node_layout["Root Layout<br/>[layout.tsx]"]
  node_home["Home Page<br/>[page.tsx]"]
  node_navbar["Navigation<br/>[Navbar.tsx]"]
end

subgraph group_content["Portfolio Content"]
  node_hero["Hero<br/>[Hero.tsx]"]
  node_about["About<br/>[About.tsx]"]
  node_skills["Skills<br/>[Skills.tsx]"]
  node_projects["Projects<br/>[Projects.tsx]"]
  node_contact["Contact Form<br/>[Contact.tsx]"]
  node_footer["Footer<br/>[Footer.tsx]"]
  node_projectdata["Project Data<br/>[projects.ts]"]
  node_skilldata["Skill Data<br/>[skills.ts]"]
end

subgraph group_presentation["Theme and Presentation"]
  node_themeprovider["Theme Provider"]
  node_themecontext["Theme Context<br/>[ThemeContext.tsx]"]
  node_tokens["Theme Tokens<br/>[theme.ts]"]
end

node_visitor(("Visitor"))
node_emailjs{{"EmailJS"}}

node_visitor -->|"views"| node_home
node_layout -->|"renders"| node_navbar
node_layout -->|"wraps"| node_themeprovider
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_about
node_home -->|"renders"| node_skills
node_home -->|"renders"| node_projects
node_home -->|"renders"| node_contact
node_home -->|"renders"| node_footer
node_projects -->|"reads"| node_projectdata
node_skills -->|"reads"| node_skilldata
node_themeprovider -->|"uses"| node_themecontext
node_themeprovider -->|"loads tokens"| node_tokens
node_navbar -->|"toggles theme"| node_themecontext
node_contact -->|"sends email"| node_emailjs

click node_layout "https://github.com/marwanatef96/marwan-portfolio-v1/blob/main/src/app/layout.tsx"
click node_home "https://github.com/marwanatef96/marwan-portfolio-v1/blob/main/src/app/page.tsx"
click node_navbar "https://github.com/marwanatef96/marwan-portfolio-v1/blob/main/src/app/components/Navbar.tsx"
click node_hero "https://github.com/marwanatef96/marwan-portfolio-v1/blob/main/src/app/components/Hero.tsx"
click node_about "https://github.com/marwanatef96/marwan-portfolio-v1/blob/main/src/app/components/About.tsx"
click node_skills "https://github.com/marwanatef96/marwan-portfolio-v1/blob/main/src/app/components/Skills.tsx"
click node_projects "https://github.com/marwanatef96/marwan-portfolio-v1/blob/main/src/app/components/Projects.tsx"
click node_contact "https://github.com/marwanatef96/marwan-portfolio-v1/blob/main/src/app/components/Contact.tsx"
click node_footer "https://github.com/marwanatef96/marwan-portfolio-v1/blob/main/src/app/components/Footer.tsx"
click node_projectdata "https://github.com/marwanatef96/marwan-portfolio-v1/blob/main/src/app/data/projects.ts"
click node_skilldata "https://github.com/marwanatef96/marwan-portfolio-v1/blob/main/src/app/data/skills.ts"
click node_themeprovider "https://github.com/marwanatef96/marwan-portfolio-v1/blob/main/src/app/ThemeProviderClient.tsx"
click node_themecontext "https://github.com/marwanatef96/marwan-portfolio-v1/blob/main/src/app/context/ThemeContext.tsx"
click node_tokens "https://github.com/marwanatef96/marwan-portfolio-v1/blob/main/src/app/theme/theme.ts"

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_layout,node_home,node_navbar toneBlue
class node_hero,node_about,node_skills,node_projects,node_contact,node_footer,node_projectdata,node_skilldata toneAmber
class node_themeprovider,node_themecontext,node_tokens toneMint
class node_visitor,node_emailjs toneIndigo
```

## Components

### Portfolio Site

- [Root Layout](https://github.com/marwanatef96/marwan-portfolio-v1/blob/main/src/app/layout.tsx): `src/app/layout.tsx`
- [Home Page](https://github.com/marwanatef96/marwan-portfolio-v1/blob/main/src/app/page.tsx): `src/app/page.tsx`
- [Navigation](https://github.com/marwanatef96/marwan-portfolio-v1/blob/main/src/app/components/Navbar.tsx): `src/app/components/Navbar.tsx`

### Portfolio Content

- [Hero](https://github.com/marwanatef96/marwan-portfolio-v1/blob/main/src/app/components/Hero.tsx): `src/app/components/Hero.tsx`
- [About](https://github.com/marwanatef96/marwan-portfolio-v1/blob/main/src/app/components/About.tsx): `src/app/components/About.tsx`
- [Skills](https://github.com/marwanatef96/marwan-portfolio-v1/blob/main/src/app/components/Skills.tsx): `src/app/components/Skills.tsx`
- [Projects](https://github.com/marwanatef96/marwan-portfolio-v1/blob/main/src/app/components/Projects.tsx): `src/app/components/Projects.tsx`
- [Contact Form](https://github.com/marwanatef96/marwan-portfolio-v1/blob/main/src/app/components/Contact.tsx): `src/app/components/Contact.tsx`
- [Footer](https://github.com/marwanatef96/marwan-portfolio-v1/blob/main/src/app/components/Footer.tsx): `src/app/components/Footer.tsx`
- [Project Data](https://github.com/marwanatef96/marwan-portfolio-v1/blob/main/src/app/data/projects.ts): `src/app/data/projects.ts`
- [Skill Data](https://github.com/marwanatef96/marwan-portfolio-v1/blob/main/src/app/data/skills.ts): `src/app/data/skills.ts`

### Theme and Presentation

- [Theme Provider](https://github.com/marwanatef96/marwan-portfolio-v1/blob/main/src/app/ThemeProviderClient.tsx): `src/app/ThemeProviderClient.tsx`
- [Theme Context](https://github.com/marwanatef96/marwan-portfolio-v1/blob/main/src/app/context/ThemeContext.tsx): `src/app/context/ThemeContext.tsx`
- [Theme Tokens](https://github.com/marwanatef96/marwan-portfolio-v1/blob/main/src/app/theme/theme.ts): `src/app/theme/theme.ts`

### Other components

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

## Connections

- Visitor → Home Page: views (evidence: `README.md`)
- Root Layout → Navigation: renders (evidence: `src/app/layout.tsx`)
- Root Layout → Theme Provider: wraps (evidence: `src/app/layout.tsx`)
- Home Page → Hero: renders (evidence: `src/app/page.tsx`)
- Home Page → About: renders (evidence: `src/app/page.tsx`)
- Home Page → Skills: renders (evidence: `src/app/page.tsx`)
- Home Page → Projects: renders (evidence: `src/app/page.tsx`)
- Home Page → Contact Form: renders (evidence: `src/app/page.tsx`)
- Home Page → Footer: renders (evidence: `src/app/page.tsx`)
- Projects → Project Data: reads (evidence: `src/app/components/Projects.tsx`)
- Skills → Skill Data: reads (evidence: `src/app/components/Skills.tsx`)
- Theme Provider → Theme Context: uses (evidence: `src/app/ThemeProviderClient.tsx`)
- Theme Provider → Theme Tokens: loads tokens (evidence: `src/app/ThemeProviderClient.tsx`)
- Navigation → Theme Context: toggles theme (evidence: `src/app/components/Navbar.tsx`)
- Contact Form → EmailJS: sends email (evidence: `src/app/components/Contact.tsx`)