# manyamnaveen/personal-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/manyamnaveen/personal-portfolio
- Repository: https://github.com/manyamnaveen/personal-portfolio

## Overview

This is a personal developer portfolio: visitors browse professional background, project work, skills, education, and downloadable résumé, then can inspect project case studies or make contact. The page component assembles the experience; project data and case-study content feed the presentation, while contact submissions are handled by a server route with email delivery and a WhatsApp option. The README documents broader capabilities; contact form request wiring and several section implementations were not sampled, so those connections are based on documentation or omitted where uncertain.

Main entry points: [`app/page.tsx`](https://github.com/manyamnaveen/personal-portfolio/blob/main/app/page.tsx) (Home page), [`components/Projects.tsx`](https://github.com/manyamnaveen/personal-portfolio/blob/main/components/Projects.tsx) (Project showcase), [`app/api/contact/route.ts`](https://github.com/manyamnaveen/personal-portfolio/blob/main/app/api/contact/route.ts) (Contact handler), [`components/CaseStudyModal.tsx`](https://github.com/manyamnaveen/personal-portfolio/blob/main/components/CaseStudyModal.tsx) (Case study modal)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_presentation["Portfolio presentation"]
  node_home["Home page<br/>[page.tsx]"]
  node_layout["Root layout<br/>[layout.tsx]"]
  node_navbar["Navigation<br/>[Navbar.tsx]"]
  node_hero["Introduction<br/>[Hero.tsx]"]
  node_sections["Profile sections"]
  node_projects["Project showcase<br/>[Projects.tsx]"]
  node_case_modal["Case study modal<br/>[CaseStudyModal.tsx]"]
  node_theme["Theme provider<br/>[ThemeProvider.tsx]"]
end

subgraph group_content["Portfolio content"]
  node_portfolio_data["Portfolio data<br/>[portfolioData.ts]"]
  node_case_data["Case study content<br/>[caseStudies.ts]"]
  node_resume["Résumé files"]
end

subgraph group_contact["Contact and outreach"]
  node_contact_form["Contact form<br/>[Contact.tsx]"]
  node_contact_api["Contact handler<br/>[route.ts]"]
  node_email_service["Email delivery"]
  node_whatsapp["WhatsApp chat"]
end

node_visitor(("Portfolio visitor"))

node_visitor -->|"opens portfolio"| node_home
node_home -->|"renders within"| node_layout
node_home -->|"renders"| node_navbar
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_sections
node_home -->|"renders"| node_projects
node_home -->|"renders"| node_contact_form
node_home -->|"renders"| node_case_modal
node_layout -->|"provides theme"| node_theme
node_navbar -->|"uses theme"| node_theme
node_hero -->|"reads profile"| node_portfolio_data
node_sections -->|"reads content"| node_portfolio_data
node_projects -->|"reads projects"| node_portfolio_data
node_projects -->|"opens study"| node_case_modal
node_case_modal -->|"reads study"| node_case_data
node_visitor -->|"downloads résumé"| node_resume
node_visitor -->|"submits inquiry"| node_contact_form
node_contact_form -->|"posts inquiry"| node_contact_api
node_contact_api -->|"sends email"| node_email_service
node_contact_api -.->|"provides chat link"| node_whatsapp

click node_home "https://github.com/manyamnaveen/personal-portfolio/blob/main/app/page.tsx"
click node_layout "https://github.com/manyamnaveen/personal-portfolio/blob/main/app/layout.tsx"
click node_navbar "https://github.com/manyamnaveen/personal-portfolio/blob/main/components/Navbar.tsx"
click node_hero "https://github.com/manyamnaveen/personal-portfolio/blob/main/components/Hero.tsx"
click node_sections "https://github.com/manyamnaveen/personal-portfolio/tree/main/components"
click node_projects "https://github.com/manyamnaveen/personal-portfolio/blob/main/components/Projects.tsx"
click node_case_modal "https://github.com/manyamnaveen/personal-portfolio/blob/main/components/CaseStudyModal.tsx"
click node_theme "https://github.com/manyamnaveen/personal-portfolio/blob/main/components/ThemeProvider.tsx"
click node_portfolio_data "https://github.com/manyamnaveen/personal-portfolio/blob/main/data/portfolioData.ts"
click node_case_data "https://github.com/manyamnaveen/personal-portfolio/blob/main/data/caseStudies.ts"
click node_resume "https://github.com/manyamnaveen/personal-portfolio/tree/main/public/resume"
click node_contact_form "https://github.com/manyamnaveen/personal-portfolio/blob/main/components/Contact.tsx"
click node_contact_api "https://github.com/manyamnaveen/personal-portfolio/blob/main/app/api/contact/route.ts"

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_layout,node_navbar,node_hero,node_sections,node_projects,node_case_modal,node_theme toneBlue
class node_portfolio_data,node_case_data,node_resume toneAmber
class node_contact_form,node_contact_api,node_email_service,node_whatsapp toneMint
class node_visitor toneIndigo
```

## Components

### Portfolio presentation

- [Home page](https://github.com/manyamnaveen/personal-portfolio/blob/main/app/page.tsx): `app/page.tsx`
- [Root layout](https://github.com/manyamnaveen/personal-portfolio/blob/main/app/layout.tsx): `app/layout.tsx`
- [Navigation](https://github.com/manyamnaveen/personal-portfolio/blob/main/components/Navbar.tsx): `components/Navbar.tsx`
- [Introduction](https://github.com/manyamnaveen/personal-portfolio/blob/main/components/Hero.tsx): `components/Hero.tsx`
- [Profile sections](https://github.com/manyamnaveen/personal-portfolio/tree/main/components): `components`
- [Project showcase](https://github.com/manyamnaveen/personal-portfolio/blob/main/components/Projects.tsx): `components/Projects.tsx`
- [Case study modal](https://github.com/manyamnaveen/personal-portfolio/blob/main/components/CaseStudyModal.tsx): `components/CaseStudyModal.tsx`
- [Theme provider](https://github.com/manyamnaveen/personal-portfolio/blob/main/components/ThemeProvider.tsx): `components/ThemeProvider.tsx`

### Portfolio content

- [Portfolio data](https://github.com/manyamnaveen/personal-portfolio/blob/main/data/portfolioData.ts): `data/portfolioData.ts`
- [Case study content](https://github.com/manyamnaveen/personal-portfolio/blob/main/data/caseStudies.ts): `data/caseStudies.ts`
- [Résumé files](https://github.com/manyamnaveen/personal-portfolio/tree/main/public/resume): `public/resume`

### Contact and outreach

- [Contact form](https://github.com/manyamnaveen/personal-portfolio/blob/main/components/Contact.tsx): `components/Contact.tsx`
- [Contact handler](https://github.com/manyamnaveen/personal-portfolio/blob/main/app/api/contact/route.ts): `app/api/contact/route.ts`
- **Email delivery**
- **WhatsApp chat**

### Other components

- **Portfolio visitor**

## Connections

- Portfolio visitor → Home page: opens portfolio
- Home page → Root layout: renders within
- Home page → Navigation: renders
- Home page → Introduction: renders
- Home page → Profile sections: renders
- Home page → Project showcase: renders
- Home page → Contact form: renders
- Home page → Case study modal: renders
- Root layout → Theme provider: provides theme
- Navigation → Theme provider: uses theme
- Introduction → Portfolio data: reads profile
- Profile sections → Portfolio data: reads content
- Project showcase → Portfolio data: reads projects
- Project showcase → Case study modal: opens study
- Case study modal → Case study content: reads study
- Portfolio visitor → Résumé files: downloads résumé
- Portfolio visitor → Contact form: submits inquiry
- Contact form → Contact handler: posts inquiry
- Contact handler → Email delivery: sends email
- Contact handler → WhatsApp chat: provides chat link