# mmamunurrashid/my-portfolio-nextjs architecture

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

## Overview

This is a personal portfolio website: visitors browse the owner’s profile, work, skills, projects, and contact options, then can submit a message for email delivery. The home page’s component sequence and the contact submission path are supported by sampled source. Other page routes and shared-shell wiring are represented as capabilities from the tree; their internal connections are not asserted because those sources were not sampled.

Main entry points: [`src/app/page.tsx`](https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/app/page.tsx) (Home page), [`src/app/contact/page.tsx`](https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/app/contact/page.tsx) (Contact page), [`src/components/navbar/navbar.tsx`](https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/components/navbar/navbar.tsx) (Navigation), [`src/app/api/send-email/route.ts`](https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/app/api/send-email/route.ts) (Email endpoint)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Portfolio content"]
  node_home["Home page<br/>[page.tsx]"]
  node_header["Introduction<br/>[header.tsx]"]
  node_whatido["Services<br/>[what-i-do.tsx]"]
  node_shortwork["Work summary"]
  node_skillssection["Skills summary<br/>[skills.tsx]"]
  node_projectsection["Project summary<br/>[projects.tsx]"]
  node_contactsection["Contact summary<br/>[contact.tsx]"]
  node_about["About page<br/>[page.tsx]"]
  node_projects["Projects page<br/>[page.tsx]"]
  node_experiencepage["Experience page<br/>[page.tsx]"]
  node_skillspage["Skills page<br/>[page.tsx]"]
end

subgraph group_site["Site navigation"]
  node_navbar["Navigation<br/>[navbar.tsx]"]
  node_layout["Shared layout<br/>[layout.tsx]"]
  node_footer["Footer<br/>[footer.tsx]"]
end

subgraph group_contact["Contact delivery"]
  node_contactpage["Contact page<br/>[page.tsx]"]
  node_emailapi["Email endpoint<br/>[route.ts]"]
end

subgraph group_presentation["UI and preferences"]
  node_theme["Theme provider<br/>[ThemeProviders.tsx]"]
  node_browserstorage[("Browser storage")]
  node_visualeffects["Canvas effects"]
end

node_visitor(("Visitor"))
node_gmail(("Gmail"))

node_visitor -->|"opens"| node_home
node_visitor -->|"opens"| node_about
node_visitor -->|"opens"| node_projects
node_visitor -->|"opens"| node_experiencepage
node_visitor -->|"opens"| node_skillspage
node_visitor -->|"opens"| node_contactpage
node_home -->|"renders"| node_header
node_home -->|"renders"| node_whatido
node_home -->|"renders"| node_shortwork
node_home -->|"renders"| node_skillssection
node_home -->|"renders"| node_projectsection
node_home -->|"renders"| node_contactsection
node_home -->|"renders"| node_footer
node_visitor -->|"uses"| node_navbar
node_navbar -->|"reads theme"| node_theme
node_theme -->|"reads/writes"| node_browserstorage
node_visitor -->|"submits form"| node_contactpage
node_contactpage -->|"POSTs message"| node_emailapi
node_emailapi -->|"sends email"| node_gmail

click node_home "https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/app/page.tsx"
click node_header "https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/components/pages/header/header.tsx"
click node_whatido "https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/components/pages/what-i-do/what-i-do.tsx"
click node_shortwork "https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/components/pages/short-experience/short-experience.tsx"
click node_skillssection "https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/components/pages/skills/skills.tsx"
click node_projectsection "https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/components/pages/projects/projects.tsx"
click node_contactsection "https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/components/pages/contact/contact.tsx"
click node_about "https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/app/about/page.tsx"
click node_projects "https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/app/projects/page.tsx"
click node_experiencepage "https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/app/experience/page.tsx"
click node_skillspage "https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/app/skills/page.tsx"
click node_contactpage "https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/app/contact/page.tsx"
click node_emailapi "https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/app/api/send-email/route.ts"
click node_navbar "https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/components/navbar/navbar.tsx"
click node_layout "https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/components/layout.tsx"
click node_footer "https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/components/footer/footer.tsx"
click node_theme "https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/providers/ThemeProviders.tsx"
click node_visualeffects "https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/components/ui/canvas-reveal-effect.tsx"

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_header,node_whatido,node_shortwork,node_skillssection,node_projectsection,node_contactsection,node_about,node_projects,node_experiencepage,node_skillspage toneBlue
class node_navbar,node_layout,node_footer toneAmber
class node_contactpage,node_emailapi toneMint
class node_theme,node_browserstorage,node_visualeffects toneRose
class node_visitor,node_gmail toneIndigo
```

## Components

### Portfolio content

- [Home page](https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/app/page.tsx): `src/app/page.tsx`
- [Introduction](https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/components/pages/header/header.tsx): `src/components/pages/header/header.tsx`
- [Services](https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/components/pages/what-i-do/what-i-do.tsx): `src/components/pages/what-i-do/what-i-do.tsx`
- [Work summary](https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/components/pages/short-experience/short-experience.tsx): `src/components/pages/short-experience/short-experience.tsx`
- [Skills summary](https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/components/pages/skills/skills.tsx): `src/components/pages/skills/skills.tsx`
- [Project summary](https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/components/pages/projects/projects.tsx): `src/components/pages/projects/projects.tsx`
- [Contact summary](https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/components/pages/contact/contact.tsx): `src/components/pages/contact/contact.tsx`
- [About page](https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/app/about/page.tsx): `src/app/about/page.tsx`
- [Projects page](https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/app/projects/page.tsx): `src/app/projects/page.tsx`
- [Experience page](https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/app/experience/page.tsx): `src/app/experience/page.tsx`
- [Skills page](https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/app/skills/page.tsx): `src/app/skills/page.tsx`

### Site navigation

- [Navigation](https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/components/navbar/navbar.tsx): `src/components/navbar/navbar.tsx`
- [Shared layout](https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/components/layout.tsx): `src/components/layout.tsx`
- [Footer](https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/components/footer/footer.tsx): `src/components/footer/footer.tsx`

### Contact delivery

- [Contact page](https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/app/contact/page.tsx): `src/app/contact/page.tsx`
- [Email endpoint](https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/app/api/send-email/route.ts): `src/app/api/send-email/route.ts`

### UI and preferences

- [Theme provider](https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/providers/ThemeProviders.tsx): `src/providers/ThemeProviders.tsx`
- **Browser storage**
- [Canvas effects](https://github.com/mmamunurrashid/my-portfolio-nextjs/blob/main/src/components/ui/canvas-reveal-effect.tsx): `src/components/ui/canvas-reveal-effect.tsx`

### Other components

- **Visitor**
- **Gmail**

## Connections

- Visitor → Home page: opens
- Visitor → About page: opens
- Visitor → Projects page: opens
- Visitor → Experience page: opens
- Visitor → Skills page: opens
- Visitor → Contact page: opens
- Home page → Introduction: renders
- Home page → Services: renders
- Home page → Work summary: renders
- Home page → Skills summary: renders
- Home page → Project summary: renders
- Home page → Contact summary: renders
- Home page → Footer: renders
- Visitor → Navigation: uses
- Navigation → Theme provider: reads theme
- Theme provider → Browser storage: reads/writes
- Visitor → Contact page: submits form
- Contact page → Email endpoint: POSTs message
- Email endpoint → Gmail: sends email