# zahedce91/portfolio_old architecture

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

- Interactive diagram: https://gitdiagram.com/zahedce91/portfolio_old
- Repository: https://github.com/zahedce91/portfolio_old

## Overview

This repository is a personal portfolio website for a civil engineer, teacher, and web developer. The browser entry renders a single-page portfolio: visitors can navigate profile, education, experience, skills, services, projects, testimonials, and contact sections. The header and footer provide social links; the header also links to a downloadable CV. Contact offers direct messaging links and an email form handled through EmailJS. The README identifies only the project as a portfolio; component relationships are based on the sampled App and source-index references.

Main entry points: [`src/App.jsx`](https://github.com/zahedce91/portfolio_old/blob/main/src/App.jsx) (Portfolio Page), [`src/components/header/Header.jsx`](https://github.com/zahedce91/portfolio_old/blob/main/src/components/header/Header.jsx) (Profile Header), [`src/components/footer/Footer.jsx`](https://github.com/zahedce91/portfolio_old/blob/main/src/components/footer/Footer.jsx) (Page Footer), [`src/components/contact/Contact.jsx`](https://github.com/zahedce91/portfolio_old/blob/main/src/components/contact/Contact.jsx) (Contact Form & Links)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Page Shell"]
  node_app["Portfolio Page<br/>[App.jsx]"]
  node_header["Profile Header<br/>[Header.jsx]"]
  node_nav["Section Navigation<br/>[Nav.jsx]"]
  node_footer["Page Footer<br/>[Footer.jsx]"]
end

subgraph group_profile["Profile &amp; Credentials"]
  node_about["About Profile<br/>[About.jsx]"]
  node_education["Education<br/>[Education.jsx]"]
  node_experience["Experience &amp; Publications<br/>[Experience.jsx]"]
end

subgraph group_work["Skills &amp; Work"]
  node_skills["Skills<br/>[Skills.jsx]"]
  node_services["Services<br/>[Services.jsx]"]
  node_portfolio["Project Portfolio<br/>[Portfolio.jsx]"]
end

subgraph group_engagement["Visitor Engagement"]
  node_testimonials["Testimonials<br/>[Testimonials.jsx]"]
  node_contact["Contact Form &amp; Links<br/>[Contact.jsx]"]
  node_socials["Social Links<br/>[Socials.jsx]"]
  node_cta["CV Download Link<br/>[CTA.jsx]"]
  node_cv["CV PDF<br/>[cv.pdf]"]
end

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

node_visitor -->|"opens"| node_app
node_app -->|"renders"| node_header
node_app -->|"renders"| node_nav
node_app -->|"renders"| node_about
node_app -->|"renders"| node_education
node_app -->|"renders"| node_experience
node_app -->|"renders"| node_skills
node_app -->|"renders"| node_services
node_app -->|"renders"| node_portfolio
node_app -->|"renders"| node_testimonials
node_app -->|"renders"| node_contact
node_app -->|"renders"| node_footer
node_header -->|"renders"| node_cta
node_header -->|"renders"| node_socials
node_footer -->|"renders"| node_socials
node_cta -->|"links to"| node_cv
node_contact -->|"submits form"| node_emailjs

click node_app "https://github.com/zahedce91/portfolio_old/blob/main/src/App.jsx"
click node_header "https://github.com/zahedce91/portfolio_old/blob/main/src/components/header/Header.jsx"
click node_nav "https://github.com/zahedce91/portfolio_old/blob/main/src/components/nav/Nav.jsx"
click node_footer "https://github.com/zahedce91/portfolio_old/blob/main/src/components/footer/Footer.jsx"
click node_about "https://github.com/zahedce91/portfolio_old/blob/main/src/components/about/About.jsx"
click node_education "https://github.com/zahedce91/portfolio_old/blob/main/src/components/education/Education.jsx"
click node_experience "https://github.com/zahedce91/portfolio_old/blob/main/src/components/experience/Experience.jsx"
click node_skills "https://github.com/zahedce91/portfolio_old/blob/main/src/components/skills/Skills.jsx"
click node_services "https://github.com/zahedce91/portfolio_old/blob/main/src/components/services/Services.jsx"
click node_portfolio "https://github.com/zahedce91/portfolio_old/blob/main/src/components/portfolio/Portfolio.jsx"
click node_testimonials "https://github.com/zahedce91/portfolio_old/blob/main/src/components/testimonials/Testimonials.jsx"
click node_contact "https://github.com/zahedce91/portfolio_old/blob/main/src/components/contact/Contact.jsx"
click node_socials "https://github.com/zahedce91/portfolio_old/blob/main/src/components/socials/Socials.jsx"
click node_cta "https://github.com/zahedce91/portfolio_old/blob/main/src/components/header/CTA.jsx"
click node_cv "https://github.com/zahedce91/portfolio_old/blob/main/src/assets/cv.pdf"

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_header,node_nav,node_footer toneBlue
class node_about,node_education,node_experience toneAmber
class node_skills,node_services,node_portfolio toneMint
class node_testimonials,node_contact,node_socials,node_cta,node_cv toneRose
class node_visitor,node_emailjs toneIndigo
```

## Components

### Page Shell

- [Portfolio Page](https://github.com/zahedce91/portfolio_old/blob/main/src/App.jsx): `src/App.jsx`
- [Profile Header](https://github.com/zahedce91/portfolio_old/blob/main/src/components/header/Header.jsx): `src/components/header/Header.jsx`
- [Section Navigation](https://github.com/zahedce91/portfolio_old/blob/main/src/components/nav/Nav.jsx): `src/components/nav/Nav.jsx`
- [Page Footer](https://github.com/zahedce91/portfolio_old/blob/main/src/components/footer/Footer.jsx): `src/components/footer/Footer.jsx`

### Profile & Credentials

- [About Profile](https://github.com/zahedce91/portfolio_old/blob/main/src/components/about/About.jsx): `src/components/about/About.jsx`
- [Education](https://github.com/zahedce91/portfolio_old/blob/main/src/components/education/Education.jsx): `src/components/education/Education.jsx`
- [Experience & Publications](https://github.com/zahedce91/portfolio_old/blob/main/src/components/experience/Experience.jsx): `src/components/experience/Experience.jsx`

### Skills & Work

- [Skills](https://github.com/zahedce91/portfolio_old/blob/main/src/components/skills/Skills.jsx): `src/components/skills/Skills.jsx`
- [Services](https://github.com/zahedce91/portfolio_old/blob/main/src/components/services/Services.jsx): `src/components/services/Services.jsx`
- [Project Portfolio](https://github.com/zahedce91/portfolio_old/blob/main/src/components/portfolio/Portfolio.jsx): `src/components/portfolio/Portfolio.jsx`

### Visitor Engagement

- [Testimonials](https://github.com/zahedce91/portfolio_old/blob/main/src/components/testimonials/Testimonials.jsx): `src/components/testimonials/Testimonials.jsx`
- [Contact Form & Links](https://github.com/zahedce91/portfolio_old/blob/main/src/components/contact/Contact.jsx): `src/components/contact/Contact.jsx`
- [Social Links](https://github.com/zahedce91/portfolio_old/blob/main/src/components/socials/Socials.jsx): `src/components/socials/Socials.jsx`
- [CV Download Link](https://github.com/zahedce91/portfolio_old/blob/main/src/components/header/CTA.jsx): `src/components/header/CTA.jsx`
- [CV PDF](https://github.com/zahedce91/portfolio_old/blob/main/src/assets/cv.pdf): `src/assets/cv.pdf`

### Other components

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

## Connections

- Site Visitor → Portfolio Page: opens
- Portfolio Page → Profile Header: renders (evidence: `src/App.jsx`)
- Portfolio Page → Section Navigation: renders (evidence: `src/App.jsx`)
- Portfolio Page → About Profile: renders (evidence: `src/App.jsx`)
- Portfolio Page → Education: renders (evidence: `src/App.jsx`)
- Portfolio Page → Experience & Publications: renders (evidence: `src/App.jsx`)
- Portfolio Page → Skills: renders (evidence: `src/App.jsx`)
- Portfolio Page → Services: renders (evidence: `src/App.jsx`)
- Portfolio Page → Project Portfolio: renders (evidence: `src/App.jsx`)
- Portfolio Page → Testimonials: renders (evidence: `src/App.jsx`)
- Portfolio Page → Contact Form & Links: renders (evidence: `src/App.jsx`)
- Portfolio Page → Page Footer: renders (evidence: `src/App.jsx`)
- Profile Header → CV Download Link: renders (evidence: `src/components/header/Header.jsx`)
- Profile Header → Social Links: renders (evidence: `src/components/header/Header.jsx`)
- Page Footer → Social Links: renders (evidence: `src/components/footer/Footer.jsx`)
- CV Download Link → CV PDF: links to (evidence: `src/components/header/CTA.jsx`)
- Contact Form & Links → EmailJS: submits form (evidence: `src/components/contact/Contact.jsx`)