# ali-hassan1590/my-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/ali-hassan1590/my-portfolio
- Repository: https://github.com/ali-hassan1590/my-portfolio

## Overview

This React portfolio presents a visitor-facing profile through an ordered page of biography, experience, skills, projects, and contact content. The runtime entry point mounts the root component, which renders the page sections; the navigation links jump to section anchors. The contact form submits entered details to Formspree and displays submission status. Evidence is based on the README and sampled source; styling and any unsampled integrations are not expanded into separate subsystems.

Main entry points: [`src/App.jsx`](https://github.com/ali-hassan1590/my-portfolio/blob/main/src/App.jsx) (Page composition), [`src/components/Navbar.jsx`](https://github.com/ali-hassan1590/my-portfolio/blob/main/src/components/Navbar.jsx) (Section navigation), [`src/components/Contact.jsx`](https://github.com/ali-hassan1590/my-portfolio/blob/main/src/components/Contact.jsx) (Contact section), [`src/main.jsx`](https://github.com/ali-hassan1590/my-portfolio/blob/main/src/main.jsx) (React entry point)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Page shell"]
  node_main["React entry point<br/>[main.jsx]"]
  node_app["Page composition<br/>[App.jsx]"]
end

subgraph group_profile["Portfolio content"]
  node_navbar["Section navigation<br/>[Navbar.jsx]"]
  node_hero["Introduction<br/>[Hero.jsx]"]
  node_experience["Experience<br/>[Experience.jsx]"]
  node_skills["Skills showcase<br/>[Skills.jsx]"]
  node_projects["Project showcase<br/>[Projects.jsx]"]
end

subgraph group_contact["Contact flow"]
  node_contact["Contact section<br/>[Contact.jsx]"]
end

node_visitor(("Portfolio visitor"))
node_formspree{{"Formspree"}}

node_visitor -->|"opens site"| node_main
node_main -->|"mounts"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_experience
node_app -->|"renders"| node_skills
node_app -->|"renders"| node_projects
node_app -->|"renders"| node_contact
node_visitor -->|"uses links"| node_navbar
node_navbar -->|"jumps to home"| node_hero
node_navbar -->|"jumps to experience"| node_experience
node_navbar -->|"jumps to skills"| node_skills
node_navbar -->|"jumps to systems"| node_projects
node_navbar -->|"jumps to contact"| node_contact
node_visitor -->|"submits message"| node_contact
node_contact -->|"posts form data"| node_formspree

click node_main "https://github.com/ali-hassan1590/my-portfolio/blob/main/src/main.jsx"
click node_app "https://github.com/ali-hassan1590/my-portfolio/blob/main/src/App.jsx"
click node_navbar "https://github.com/ali-hassan1590/my-portfolio/blob/main/src/components/Navbar.jsx"
click node_hero "https://github.com/ali-hassan1590/my-portfolio/blob/main/src/components/Hero.jsx"
click node_experience "https://github.com/ali-hassan1590/my-portfolio/blob/main/src/components/Experience.jsx"
click node_skills "https://github.com/ali-hassan1590/my-portfolio/blob/main/src/components/Skills.jsx"
click node_projects "https://github.com/ali-hassan1590/my-portfolio/blob/main/src/components/Projects.jsx"
click node_contact "https://github.com/ali-hassan1590/my-portfolio/blob/main/src/components/Contact.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_main,node_app toneBlue
class node_navbar,node_hero,node_experience,node_skills,node_projects toneAmber
class node_contact toneMint
class node_visitor,node_formspree toneIndigo
```

## Components

### Page shell

- [React entry point](https://github.com/ali-hassan1590/my-portfolio/blob/main/src/main.jsx): `src/main.jsx`
- [Page composition](https://github.com/ali-hassan1590/my-portfolio/blob/main/src/App.jsx): `src/App.jsx`

### Portfolio content

- [Section navigation](https://github.com/ali-hassan1590/my-portfolio/blob/main/src/components/Navbar.jsx): `src/components/Navbar.jsx`
- [Introduction](https://github.com/ali-hassan1590/my-portfolio/blob/main/src/components/Hero.jsx): `src/components/Hero.jsx`
- [Experience](https://github.com/ali-hassan1590/my-portfolio/blob/main/src/components/Experience.jsx): `src/components/Experience.jsx`
- [Skills showcase](https://github.com/ali-hassan1590/my-portfolio/blob/main/src/components/Skills.jsx): `src/components/Skills.jsx`
- [Project showcase](https://github.com/ali-hassan1590/my-portfolio/blob/main/src/components/Projects.jsx): `src/components/Projects.jsx`

### Contact flow

- [Contact section](https://github.com/ali-hassan1590/my-portfolio/blob/main/src/components/Contact.jsx): `src/components/Contact.jsx`

### Other components

- **Portfolio visitor**
- **Formspree**

## Connections

- Portfolio visitor → React entry point: opens site
- React entry point → Page composition: mounts
- Page composition → Section navigation: renders
- Page composition → Introduction: renders
- Page composition → Experience: renders
- Page composition → Skills showcase: renders
- Page composition → Project showcase: renders
- Page composition → Contact section: renders
- Portfolio visitor → Section navigation: uses links
- Section navigation → Introduction: jumps to home
- Section navigation → Experience: jumps to experience
- Section navigation → Skills showcase: jumps to skills
- Section navigation → Project showcase: jumps to systems
- Section navigation → Contact section: jumps to contact
- Portfolio visitor → Contact section: submits message
- Contact section → Formspree: posts form data