# josephamuasi001/my-portfolio architecture

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

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

## Overview

This is a personal developer portfolio: visitors browse selected work, biography, services and skills, then can submit a project enquiry through the contact form. The React application renders those sections; the form posts to a FastAPI endpoint, which validates the payload, stores it in Supabase and sends an email notification. The backend also documents enquiry retrieval and health/database checks. The frontend section wiring and backend calls are visible in the excerpts and SOURCE INDEX; the retrieval endpoints are documented in the README, but their implementation details were not separately inspected.

Main entry points: [`frontend/src/App.jsx`](https://github.com/josephamuasi001/my-portfolio/blob/master/frontend/src/App.jsx) (App shell), [`backend/app/enquiries.py`](https://github.com/josephamuasi001/my-portfolio/blob/master/backend/app/enquiries.py) (Enquiry routes), [`backend/app/main.py`](https://github.com/josephamuasi001/my-portfolio/blob/master/backend/app/main.py) (FastAPI application), [`backend/app/database.py`](https://github.com/josephamuasi001/my-portfolio/blob/master/backend/app/database.py) (Supabase client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_portfolio["Portfolio frontend"]
  node_frontend_entry["React entry<br/>[main.jsx]"]
  node_app_shell["App shell<br/>[App.jsx]"]
  node_navigation["Navigation and theme<br/>[Navbar.jsx]"]
  node_hero["Introduction<br/>[Hero.jsx]"]
  node_projects["Selected projects<br/>[Projects.jsx]"]
  node_about["About profile<br/>[About.jsx]"]
  node_services["Services<br/>[Services.jsx]"]
  node_skills["Skills and stack<br/>[Skills.jsx]"]
  node_contact["Contact form<br/>[Contact.jsx]"]
  node_footer["Portfolio footer<br/>[Footer.jsx]"]
end

subgraph group_api["Enquiry API"]
  node_api_app["FastAPI application<br/>[main.py]"]
  node_enquiry_routes["Enquiry routes<br/>[enquiries.py]"]
  node_validation["Enquiry schema<br/>[schemas.py]"]
end

subgraph group_persistence["Persistence"]
  node_supabase_client["Supabase client<br/>[database.py]"]
  node_enquiry_store[("Supabase enquiries")]
end

subgraph group_notifications["Notifications"]
  node_email_service["Email notification<br/>[email_service.py]"]
end

node_visitor(("Portfolio visitor"))
node_smtp_service["SMTP server"]

node_visitor -->|"opens portfolio"| node_frontend_entry
node_frontend_entry -->|"renders"| node_app_shell
node_app_shell -->|"renders"| node_navigation
node_app_shell -->|"renders"| node_hero
node_app_shell -->|"renders"| node_projects
node_app_shell -->|"renders"| node_about
node_app_shell -->|"renders"| node_services
node_app_shell -->|"renders"| node_skills
node_app_shell -->|"renders"| node_contact
node_app_shell -->|"renders"| node_footer
node_contact -->|"posts enquiry"| node_api_app
node_api_app -->|"registers routes"| node_enquiry_routes
node_api_app -->|"queries health check"| node_supabase_client
node_enquiry_routes -->|"validates payload"| node_validation
node_enquiry_routes -->|"reads and writes"| node_supabase_client
node_supabase_client -->|"connects to"| node_enquiry_store
node_enquiry_routes -->|"sends notification"| node_email_service
node_email_service -->|"sends email"| node_smtp_service

click node_frontend_entry "https://github.com/josephamuasi001/my-portfolio/blob/master/frontend/src/main.jsx"
click node_app_shell "https://github.com/josephamuasi001/my-portfolio/blob/master/frontend/src/App.jsx"
click node_navigation "https://github.com/josephamuasi001/my-portfolio/blob/master/frontend/src/components/Navbar.jsx"
click node_hero "https://github.com/josephamuasi001/my-portfolio/blob/master/frontend/src/sections/Hero.jsx"
click node_projects "https://github.com/josephamuasi001/my-portfolio/blob/master/frontend/src/sections/Projects.jsx"
click node_about "https://github.com/josephamuasi001/my-portfolio/blob/master/frontend/src/sections/About.jsx"
click node_services "https://github.com/josephamuasi001/my-portfolio/blob/master/frontend/src/sections/Services.jsx"
click node_skills "https://github.com/josephamuasi001/my-portfolio/blob/master/frontend/src/sections/Skills.jsx"
click node_contact "https://github.com/josephamuasi001/my-portfolio/blob/master/frontend/src/sections/Contact.jsx"
click node_footer "https://github.com/josephamuasi001/my-portfolio/blob/master/frontend/src/sections/Footer.jsx"
click node_api_app "https://github.com/josephamuasi001/my-portfolio/blob/master/backend/app/main.py"
click node_enquiry_routes "https://github.com/josephamuasi001/my-portfolio/blob/master/backend/app/enquiries.py"
click node_validation "https://github.com/josephamuasi001/my-portfolio/blob/master/backend/app/schemas.py"
click node_supabase_client "https://github.com/josephamuasi001/my-portfolio/blob/master/backend/app/database.py"
click node_email_service "https://github.com/josephamuasi001/my-portfolio/blob/master/backend/app/email_service.py"

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_frontend_entry,node_app_shell,node_navigation,node_hero,node_projects,node_about,node_services,node_skills,node_contact,node_footer toneBlue
class node_api_app,node_enquiry_routes,node_validation toneAmber
class node_supabase_client,node_enquiry_store,node_smtp_service toneMint
class node_email_service toneRose
class node_visitor toneIndigo
```

## Components

### Portfolio frontend

- [React entry](https://github.com/josephamuasi001/my-portfolio/blob/master/frontend/src/main.jsx): `frontend/src/main.jsx`
- [App shell](https://github.com/josephamuasi001/my-portfolio/blob/master/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Navigation and theme](https://github.com/josephamuasi001/my-portfolio/blob/master/frontend/src/components/Navbar.jsx): `frontend/src/components/Navbar.jsx`
- [Introduction](https://github.com/josephamuasi001/my-portfolio/blob/master/frontend/src/sections/Hero.jsx): `frontend/src/sections/Hero.jsx`
- [Selected projects](https://github.com/josephamuasi001/my-portfolio/blob/master/frontend/src/sections/Projects.jsx): `frontend/src/sections/Projects.jsx`
- [About profile](https://github.com/josephamuasi001/my-portfolio/blob/master/frontend/src/sections/About.jsx): `frontend/src/sections/About.jsx`
- [Services](https://github.com/josephamuasi001/my-portfolio/blob/master/frontend/src/sections/Services.jsx): `frontend/src/sections/Services.jsx`
- [Skills and stack](https://github.com/josephamuasi001/my-portfolio/blob/master/frontend/src/sections/Skills.jsx): `frontend/src/sections/Skills.jsx`
- [Contact form](https://github.com/josephamuasi001/my-portfolio/blob/master/frontend/src/sections/Contact.jsx): `frontend/src/sections/Contact.jsx`
- [Portfolio footer](https://github.com/josephamuasi001/my-portfolio/blob/master/frontend/src/sections/Footer.jsx): `frontend/src/sections/Footer.jsx`

### Enquiry API

- [FastAPI application](https://github.com/josephamuasi001/my-portfolio/blob/master/backend/app/main.py): `backend/app/main.py`
- [Enquiry routes](https://github.com/josephamuasi001/my-portfolio/blob/master/backend/app/enquiries.py): `backend/app/enquiries.py`
- [Enquiry schema](https://github.com/josephamuasi001/my-portfolio/blob/master/backend/app/schemas.py): `backend/app/schemas.py`

### Persistence

- [Supabase client](https://github.com/josephamuasi001/my-portfolio/blob/master/backend/app/database.py): `backend/app/database.py`
- **Supabase enquiries**

### Notifications

- [Email notification](https://github.com/josephamuasi001/my-portfolio/blob/master/backend/app/email_service.py): `backend/app/email_service.py`

### Other components

- **Portfolio visitor**
- **SMTP server**

## Connections

- Portfolio visitor → React entry: opens portfolio (evidence: `README.md`)
- React entry → App shell: renders (evidence: `frontend/src/main.jsx`)
- App shell → Navigation and theme: renders (evidence: `frontend/src/App.jsx`)
- App shell → Introduction: renders (evidence: `frontend/src/App.jsx`)
- App shell → Selected projects: renders (evidence: `frontend/src/App.jsx`)
- App shell → About profile: renders (evidence: `frontend/src/App.jsx`)
- App shell → Services: renders (evidence: `frontend/src/App.jsx`)
- App shell → Skills and stack: renders (evidence: `frontend/src/App.jsx`)
- App shell → Contact form: renders (evidence: `frontend/src/App.jsx`)
- App shell → Portfolio footer: renders (evidence: `frontend/src/App.jsx`)
- Contact form → FastAPI application: posts enquiry (evidence: `frontend/src/sections/Contact.jsx`)
- FastAPI application → Enquiry routes: registers routes (evidence: `backend/app/main.py`)
- FastAPI application → Supabase client: queries health check (evidence: `backend/app/main.py`)
- Enquiry routes → Enquiry schema: validates payload (evidence: `backend/app/enquiries.py`)
- Enquiry routes → Supabase client: reads and writes (evidence: `backend/app/enquiries.py`)
- Supabase client → Supabase enquiries: connects to (evidence: `README.md`)
- Enquiry routes → Email notification: sends notification (evidence: `backend/app/enquiries.py`)
- Email notification → SMTP server: sends email (evidence: `backend/app/email_service.py`)