# sarifali1/my-portfolio architecture

> Architecture diagram of the GitHub repository sarifali1/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/sarifali1/my-portfolio
- Repository: https://github.com/sarifali1/my-portfolio

## Overview

This is a MERN portfolio site whose main visitor workflow is browsing portfolio sections and submitting a contact message for persistent storage. A separate admin workflow signs in, uses a JWT-protected dashboard, and manages stored messages. The frontend also provides theme, navigation, and analytics features. The graph includes the documented MongoDB-backed API and major portfolio sections; sampled source establishes the frontend contact request and backend routing, while some admin API details are supported by the README and source index rather than excerpts.

Main entry points: [`frontend/src/pages/Home.jsx`](https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/pages/Home.jsx) (Portfolio home), [`frontend/src/App.jsx`](https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/App.jsx) (App routes), [`backend/server.js`](https://github.com/sarifali1/my-portfolio/blob/main/backend/server.js) (Express server), [`frontend/src/utils/api.js`](https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/utils/api.js) (API client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_portfolio["Portfolio experience"]
  node_home["Portfolio home<br/>[Home.jsx]"]
  node_hero["Hero<br/>[Hero.jsx]"]
  node_skills["Skills<br/>[Skills.jsx]"]
  node_projects["Projects<br/>[Projects.jsx]"]
  node_education["Education<br/>[Education.jsx]"]
  node_achievements["Achievements"]
  node_contactform["Contact form<br/>[Contact.jsx]"]
  node_welcome["Welcome modal<br/>[WelcomeModal.jsx]"]
  node_footer["Footer<br/>[Footer.jsx]"]
end

subgraph group_frontend["Frontend shell"]
  node_app["App routes<br/>[App.jsx]"]
  node_navigation["Navigation<br/>[Navbar.jsx]"]
  node_theme["Theme toggle<br/>[DarkModeToggle.jsx]"]
  node_themehook["Theme state<br/>[useDarkMode.js]"]
  node_analytics["Analytics<br/>[analytics.js]"]
end

subgraph group_admin["Admin access"]
  node_adminlogin["Admin login<br/>[AdminLogin.jsx]"]
  node_guard["Route guard<br/>[ProtectedRoute.jsx]"]
  node_dashboard["Message dashboard<br/>[AdminDashboard.jsx]"]
end

subgraph group_backend["API services"]
  node_api["API client<br/>[api.js]"]
  node_server["Express server<br/>[server.js]"]
  node_authroutes["Auth routes<br/>[authRoutes.js]"]
  node_authcontroller["Auth controller<br/>[authController.js]"]
  node_authmiddleware["JWT guard<br/>[authMiddleware.js]"]
  node_contactroutes["Contact routes<br/>[contactRoutes.js]"]
  node_contactcontroller["Contact controller"]
  node_errors["Error handling<br/>[errorHandler.js]"]
end

subgraph group_data["Persistence"]
  node_adminmodel[("Admin model<br/>[Admin.js]")]
  node_contactmodel[("Contact model<br/>[Contact.js]")]
  node_dbconfig["Database connection<br/>[db.js]"]
end

node_visitor(("Visitor"))
node_mongodb[("MongoDB")]

node_visitor -->|"opens"| node_app
node_app -->|"routes to"| node_home
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_skills
node_home -->|"renders"| node_projects
node_home -->|"renders"| node_education
node_home -->|"renders"| node_achievements
node_home -->|"renders"| node_contactform
node_home -->|"renders"| node_welcome
node_home -->|"renders"| node_footer
node_app -->|"renders"| node_navigation
node_navigation -->|"renders"| node_theme
node_theme -->|"uses"| node_themehook
node_app -->|"initializes"| node_analytics
node_app -->|"routes to"| node_adminlogin
node_app -->|"routes through"| node_guard
node_guard -.->|"protects"| node_dashboard
node_adminlogin -->|"requests"| node_api
node_dashboard -->|"requests"| node_api
node_contactform -->|"posts message"| node_api
node_api -->|"calls API"| node_server
node_server -->|"mounts"| node_authroutes
node_server -->|"mounts"| node_contactroutes
node_server -->|"handles errors"| node_errors
node_authroutes -->|"dispatches"| node_authcontroller
node_contactroutes -->|"dispatches"| node_contactcontroller
node_contactroutes -->|"guards reads"| node_authmiddleware
node_authcontroller -->|"checks credentials"| node_adminmodel
node_contactcontroller -->|"stores messages"| node_contactmodel
node_server -->|"connects"| node_dbconfig
node_dbconfig -.->|"connects to"| node_mongodb
node_contactmodel -.->|"persists data"| node_mongodb
node_adminmodel -.->|"persists data"| node_mongodb

click node_app "https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/App.jsx"
click node_home "https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/pages/Home.jsx"
click node_hero "https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/components/Hero.jsx"
click node_skills "https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/components/Skills.jsx"
click node_projects "https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/components/Projects.jsx"
click node_education "https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/components/Education.jsx"
click node_achievements "https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/components/AchievementCounter.jsx"
click node_contactform "https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/components/Contact.jsx"
click node_welcome "https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/components/WelcomeModal.jsx"
click node_footer "https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/components/Footer.jsx"
click node_navigation "https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/components/Navbar.jsx"
click node_theme "https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/components/DarkModeToggle.jsx"
click node_themehook "https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/hooks/useDarkMode.js"
click node_analytics "https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/utils/analytics.js"
click node_adminlogin "https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/pages/AdminLogin.jsx"
click node_guard "https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/utils/ProtectedRoute.jsx"
click node_dashboard "https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/pages/AdminDashboard.jsx"
click node_api "https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/utils/api.js"
click node_server "https://github.com/sarifali1/my-portfolio/blob/main/backend/server.js"
click node_authroutes "https://github.com/sarifali1/my-portfolio/blob/main/backend/routes/authRoutes.js"
click node_authcontroller "https://github.com/sarifali1/my-portfolio/blob/main/backend/controllers/authController.js"
click node_authmiddleware "https://github.com/sarifali1/my-portfolio/blob/main/backend/middleware/authMiddleware.js"
click node_contactroutes "https://github.com/sarifali1/my-portfolio/blob/main/backend/routes/contactRoutes.js"
click node_contactcontroller "https://github.com/sarifali1/my-portfolio/blob/main/backend/controllers/contactController.js"
click node_errors "https://github.com/sarifali1/my-portfolio/blob/main/backend/middleware/errorHandler.js"
click node_adminmodel "https://github.com/sarifali1/my-portfolio/blob/main/backend/models/Admin.js"
click node_contactmodel "https://github.com/sarifali1/my-portfolio/blob/main/backend/models/Contact.js"
click node_dbconfig "https://github.com/sarifali1/my-portfolio/blob/main/backend/config/db.js"

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_hero,node_skills,node_projects,node_education,node_achievements,node_contactform,node_welcome,node_footer toneBlue
class node_app,node_navigation,node_theme,node_themehook,node_analytics,node_mongodb toneAmber
class node_adminlogin,node_guard,node_dashboard toneMint
class node_api,node_server,node_authroutes,node_authcontroller,node_authmiddleware,node_contactroutes,node_contactcontroller,node_errors toneRose
class node_adminmodel,node_contactmodel,node_dbconfig,node_visitor toneIndigo
```

## Components

### Portfolio experience

- [Portfolio home](https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/pages/Home.jsx): `frontend/src/pages/Home.jsx`
- [Hero](https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/components/Hero.jsx): `frontend/src/components/Hero.jsx`
- [Skills](https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/components/Skills.jsx): `frontend/src/components/Skills.jsx`
- [Projects](https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/components/Projects.jsx): `frontend/src/components/Projects.jsx`
- [Education](https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/components/Education.jsx): `frontend/src/components/Education.jsx`
- [Achievements](https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/components/AchievementCounter.jsx): `frontend/src/components/AchievementCounter.jsx`
- [Contact form](https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/components/Contact.jsx): `frontend/src/components/Contact.jsx`
- [Welcome modal](https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/components/WelcomeModal.jsx): `frontend/src/components/WelcomeModal.jsx`
- [Footer](https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/components/Footer.jsx): `frontend/src/components/Footer.jsx`

### Frontend shell

- [App routes](https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Navigation](https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/components/Navbar.jsx): `frontend/src/components/Navbar.jsx`
- [Theme toggle](https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/components/DarkModeToggle.jsx): `frontend/src/components/DarkModeToggle.jsx`
- [Theme state](https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/hooks/useDarkMode.js): `frontend/src/hooks/useDarkMode.js`
- [Analytics](https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/utils/analytics.js): `frontend/src/utils/analytics.js`

### Admin access

- [Admin login](https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/pages/AdminLogin.jsx): `frontend/src/pages/AdminLogin.jsx`
- [Route guard](https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/utils/ProtectedRoute.jsx): `frontend/src/utils/ProtectedRoute.jsx`
- [Message dashboard](https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/pages/AdminDashboard.jsx): `frontend/src/pages/AdminDashboard.jsx`

### API services

- [API client](https://github.com/sarifali1/my-portfolio/blob/main/frontend/src/utils/api.js): `frontend/src/utils/api.js`
- [Express server](https://github.com/sarifali1/my-portfolio/blob/main/backend/server.js): `backend/server.js`
- [Auth routes](https://github.com/sarifali1/my-portfolio/blob/main/backend/routes/authRoutes.js): `backend/routes/authRoutes.js`
- [Auth controller](https://github.com/sarifali1/my-portfolio/blob/main/backend/controllers/authController.js): `backend/controllers/authController.js`
- [JWT guard](https://github.com/sarifali1/my-portfolio/blob/main/backend/middleware/authMiddleware.js): `backend/middleware/authMiddleware.js`
- [Contact routes](https://github.com/sarifali1/my-portfolio/blob/main/backend/routes/contactRoutes.js): `backend/routes/contactRoutes.js`
- [Contact controller](https://github.com/sarifali1/my-portfolio/blob/main/backend/controllers/contactController.js): `backend/controllers/contactController.js`
- [Error handling](https://github.com/sarifali1/my-portfolio/blob/main/backend/middleware/errorHandler.js): `backend/middleware/errorHandler.js`

### Persistence

- [Admin model](https://github.com/sarifali1/my-portfolio/blob/main/backend/models/Admin.js): `backend/models/Admin.js`
- [Contact model](https://github.com/sarifali1/my-portfolio/blob/main/backend/models/Contact.js): `backend/models/Contact.js`
- [Database connection](https://github.com/sarifali1/my-portfolio/blob/main/backend/config/db.js): `backend/config/db.js`

### Other components

- **Visitor**
- **MongoDB**

## Connections

- Visitor → App routes: opens (evidence: `README.md`)
- App routes → Portfolio home: routes to (evidence: `frontend/src/App.jsx`)
- Portfolio home → Hero: renders (evidence: `frontend/src/pages/Home.jsx`)
- Portfolio home → Skills: renders (evidence: `frontend/src/pages/Home.jsx`)
- Portfolio home → Projects: renders (evidence: `frontend/src/pages/Home.jsx`)
- Portfolio home → Education: renders (evidence: `frontend/src/pages/Home.jsx`)
- Portfolio home → Achievements: renders (evidence: `frontend/src/pages/Home.jsx`)
- Portfolio home → Contact form: renders (evidence: `frontend/src/pages/Home.jsx`)
- Portfolio home → Welcome modal: renders (evidence: `frontend/src/pages/Home.jsx`)
- Portfolio home → Footer: renders (evidence: `frontend/src/pages/Home.jsx`)
- App routes → Navigation: renders (evidence: `frontend/src/App.jsx`)
- Navigation → Theme toggle: renders (evidence: `frontend/src/components/Navbar.jsx`)
- Theme toggle → Theme state: uses (evidence: `frontend/src/components/DarkModeToggle.jsx`)
- App routes → Analytics: initializes (evidence: `frontend/src/App.jsx`)
- App routes → Admin login: routes to (evidence: `frontend/src/App.jsx`)
- App routes → Route guard: routes through (evidence: `frontend/src/App.jsx`)
- Route guard → Message dashboard: protects
- Admin login → API client: requests (evidence: `frontend/src/pages/AdminLogin.jsx`)
- Message dashboard → API client: requests (evidence: `frontend/src/pages/AdminDashboard.jsx`)
- Contact form → API client: posts message (evidence: `frontend/src/components/Contact.jsx`)
- API client → Express server: calls API (evidence: `README.md`)
- Express server → Auth routes: mounts (evidence: `backend/server.js`)
- Express server → Contact routes: mounts (evidence: `backend/server.js`)
- Express server → Error handling: handles errors (evidence: `backend/server.js`)
- Auth routes → Auth controller: dispatches (evidence: `backend/routes/authRoutes.js`)
- Contact routes → Contact controller: dispatches (evidence: `backend/routes/contactRoutes.js`)
- Contact routes → JWT guard: guards reads (evidence: `backend/routes/contactRoutes.js`)
- Auth controller → Admin model: checks credentials (evidence: `backend/controllers/authController.js`)
- Contact controller → Contact model: stores messages (evidence: `backend/controllers/contactController.js`)
- Express server → Database connection: connects (evidence: `backend/server.js`)
- Database connection → MongoDB: connects to
- Contact model → MongoDB: persists data (evidence: `README.md`)
- Admin model → MongoDB: persists data (evidence: `README.md`)