# ahmaderan/ahmaderanportfolio architecture

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

## Overview

This is a personal portfolio website. A visitor opens the React app, which routes to the home page and presents portfolio sections; the project section displays project imagery, and the contact form can submit a message to Formspree. The source also includes GitHub API queries, project-list pages and offline caching, though some are inactive or optional in the sampled app. The README only identifies the product as a personal portfolio; unsampled page wiring is represented conservatively.

Main entry points: [`src/App.js`](https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/App.js) (App and routes), [`src/pages/Home.jsx`](https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/pages/Home.jsx) (Home page), [`src/components/Projects.jsx`](https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/components/Projects.jsx) (Project gallery), [`src/app/apiSlice.js`](https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/app/apiSlice.js) (API queries)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Portfolio experience"]
  node_home["Home page<br/>[Home.jsx]"]
  node_about["About<br/>[AboutMe.jsx]"]
  node_skills["Skills<br/>[Skills.jsx]"]
  node_projects["Project gallery<br/>[Projects.jsx]"]
  node_projectcard["Project card<br/>[ProjectCard.jsx]"]
  node_allprojects["All projects<br/>[AllProjects.jsx]"]
  node_contact["Contact section<br/>[Contact.jsx]"]
  node_form["Contact form<br/>[ContactForm.jsx]"]
  node_navbar["Navigation<br/>[NavBar.jsx]"]
  node_footer["Footer<br/>[Footer.jsx]"]
end

subgraph group_data["Portfolio data"]
  node_config["Portfolio config<br/>[config.js]"]
  node_projectstate["Project state<br/>[projectsSlice.js]"]
  node_apistate["API queries<br/>[apiSlice.js]"]
  node_store["Redux store<br/>[store.js]"]
  node_assets["Static portfolio assets"]
end

subgraph group_runtime["App runtime"]
  node_app["App and routes<br/>[App.js]"]
  node_utils["Theme and requests<br/>[utils.js]"]
  node_workerreg["Worker registration"]
  node_worker["Offline cache worker<br/>[service-worker.js]"]
end

node_visitor(("Visitor"))
node_github["GitHub API"]
node_formspree["Formspree"]

node_visitor -->|"opens"| node_app
node_app -->|"routes"| node_home
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_footer
node_app -->|"reads state"| node_store
node_app -->|"sets theme"| node_utils
node_home -->|"presents"| node_about
node_home -->|"presents"| node_skills
node_home -->|"presents"| node_projects
node_home -->|"presents"| node_contact
node_projects -->|"reads gallery data"| node_config
node_projects -->|"queries projects"| node_apistate
node_projects -->|"reads projects"| node_projectstate
node_allprojects -->|"reads projects"| node_projectstate
node_allprojects -->|"queries projects"| node_apistate
node_allprojects -->|"renders"| node_projectcard
node_contact -->|"presents"| node_form
node_form -->|"reads endpoint"| node_config
node_form -->|"posts message"| node_utils
node_utils -->|"submits"| node_formspree
node_apistate -->|"reads username"| node_config
node_apistate -->|"requests profile and repos"| node_github
node_workerreg -.->|"registers"| node_worker
node_worker -.->|"precaches and caches"| node_assets

click node_app "https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/App.js"
click node_home "https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/pages/Home.jsx"
click node_about "https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/components/AboutMe.jsx"
click node_skills "https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/components/Skills.jsx"
click node_projects "https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/components/Projects.jsx"
click node_projectcard "https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/components/ProjectCard.jsx"
click node_allprojects "https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/pages/AllProjects.jsx"
click node_contact "https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/components/Contact.jsx"
click node_form "https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/components/ContactForm.jsx"
click node_navbar "https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/components/NavBar.jsx"
click node_footer "https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/components/Footer.jsx"
click node_config "https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/config.js"
click node_projectstate "https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/app/projectsSlice.js"
click node_apistate "https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/app/apiSlice.js"
click node_store "https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/app/store.js"
click node_utils "https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/utils.js"
click node_workerreg "https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/serviceWorkerRegistration.js"
click node_worker "https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/service-worker.js"
click node_assets "https://github.com/ahmaderan/ahmaderanportfolio/tree/main/public"

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_home,node_about,node_skills,node_projects,node_projectcard,node_allprojects,node_contact,node_form,node_navbar,node_footer toneBlue
class node_config,node_projectstate,node_apistate,node_store,node_assets toneAmber
class node_app,node_utils,node_workerreg,node_worker,node_github toneMint
class node_visitor,node_formspree toneIndigo
```

## Components

### Portfolio experience

- [Home page](https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/pages/Home.jsx): `src/pages/Home.jsx`
- [About](https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/components/AboutMe.jsx): `src/components/AboutMe.jsx`
- [Skills](https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/components/Skills.jsx): `src/components/Skills.jsx`
- [Project gallery](https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/components/Projects.jsx): `src/components/Projects.jsx`
- [Project card](https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/components/ProjectCard.jsx): `src/components/ProjectCard.jsx`
- [All projects](https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/pages/AllProjects.jsx): `src/pages/AllProjects.jsx`
- [Contact section](https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/components/Contact.jsx): `src/components/Contact.jsx`
- [Contact form](https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/components/ContactForm.jsx): `src/components/ContactForm.jsx`
- [Navigation](https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/components/NavBar.jsx): `src/components/NavBar.jsx`
- [Footer](https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/components/Footer.jsx): `src/components/Footer.jsx`

### Portfolio data

- [Portfolio config](https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/config.js): `src/config.js`
- [Project state](https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/app/projectsSlice.js): `src/app/projectsSlice.js`
- [API queries](https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/app/apiSlice.js): `src/app/apiSlice.js`
- [Redux store](https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/app/store.js): `src/app/store.js`
- [Static portfolio assets](https://github.com/ahmaderan/ahmaderanportfolio/tree/main/public): `public`

### App runtime

- [App and routes](https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/App.js): `src/App.js`
- [Theme and requests](https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/utils.js): `src/utils.js`
- [Worker registration](https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/serviceWorkerRegistration.js): `src/serviceWorkerRegistration.js`
- [Offline cache worker](https://github.com/ahmaderan/ahmaderanportfolio/blob/main/src/service-worker.js): `src/service-worker.js`

### Other components

- **Visitor**
- **GitHub API**
- **Formspree**

## Connections

- Visitor → App and routes: opens
- App and routes → Home page: routes
- App and routes → Navigation: renders
- App and routes → Footer: renders
- App and routes → Redux store: reads state
- App and routes → Theme and requests: sets theme
- Home page → About: presents
- Home page → Skills: presents
- Home page → Project gallery: presents
- Home page → Contact section: presents
- Project gallery → Portfolio config: reads gallery data
- Project gallery → API queries: queries projects
- Project gallery → Project state: reads projects
- All projects → Project state: reads projects
- All projects → API queries: queries projects
- All projects → Project card: renders
- Contact section → Contact form: presents
- Contact form → Portfolio config: reads endpoint
- Contact form → Theme and requests: posts message
- Theme and requests → Formspree: submits
- API queries → Portfolio config: reads username
- API queries → GitHub API: requests profile and repos
- Worker registration → Offline cache worker: registers
- Offline cache worker → Static portfolio assets: precaches and caches