# adityamittal1604/portfolio architecture

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

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

## Overview

This is a static personal developer portfolio. A visitor browses the profile and project work, filters projects and skills, reviews achievements and education, then may download the resume or open the contact form. React components render typed content from the portfolio data module; the README documents the page composition and modal state, while sampled component excerpts confirm the content imports and interactions. App composition and the contact modal implementation were not sampled, so those links rely on README statements rather than inspected source.

Main entry points: [`src/App.tsx`](https://github.com/adityamittal1604/portfolio/blob/main/src/App.tsx) (Page composition), [`src/data/portfolio.ts`](https://github.com/adityamittal1604/portfolio/blob/main/src/data/portfolio.ts) (Portfolio data), [`src/components/Hero.tsx`](https://github.com/adityamittal1604/portfolio/blob/main/src/components/Hero.tsx) (Profile hero), [`src/components/ContactModal.tsx`](https://github.com/adityamittal1604/portfolio/blob/main/src/components/ContactModal.tsx) (Contact modal)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Page shell"]
  node_mount["React mount<br/>[main.tsx]"]
  node_app["Page composition<br/>[App.tsx]"]
  node_navbar["Navigation<br/>[Navbar.tsx]"]
  node_footer["Footer links<br/>[Footer.tsx]"]
end

subgraph group_profile["Profile content"]
  node_hero["Profile hero<br/>[Hero.tsx]"]
  node_about["Education and about<br/>[About.tsx]"]
end

subgraph group_work["Portfolio content"]
  node_skills["Skills browser<br/>[Skills.tsx]"]
  node_projects["Project browser<br/>[Projects.tsx]"]
  node_achievements["Achievements<br/>[Achievements.tsx]"]
  node_portfolio_data["Portfolio data<br/>[portfolio.ts]"]
end

subgraph group_contact["Contact and assets"]
  node_contact_modal["Contact modal<br/>[ContactModal.tsx]"]
  node_resume["Resume PDF<br/>[resume.pdf]"]
end

node_visitor(("Portfolio visitor"))
node_browser["Browser APIs"]

node_visitor -->|"opens site"| node_mount
node_mount -.->|"mounts React app"| node_app
node_app -.->|"renders"| node_navbar
node_app -.->|"renders"| node_hero
node_app -.->|"renders"| node_projects
node_app -.->|"renders"| node_skills
node_app -.->|"renders"| node_achievements
node_app -.->|"renders"| node_about
node_app -.->|"renders"| node_footer
node_app -.->|"owns modal state"| node_contact_modal
node_hero -->|"reads profile"| node_portfolio_data
node_about -->|"reads profile"| node_portfolio_data
node_navbar -->|"reads profile"| node_portfolio_data
node_footer -->|"reads profile"| node_portfolio_data
node_projects -->|"reads projects"| node_portfolio_data
node_skills -->|"reads skills"| node_portfolio_data
node_achievements -.->|"reads milestones"| node_portfolio_data
node_hero -->|"copies email"| node_browser
node_hero -.->|"requests contact"| node_contact_modal
node_navbar -.->|"requests contact"| node_contact_modal
node_footer -.->|"requests contact"| node_contact_modal
node_hero -->|"links resume"| node_resume
node_footer -->|"links resume"| node_resume
node_navbar -->|"links resume"| node_resume
node_contact_modal -.->|"opens mail client"| node_browser

click node_mount "https://github.com/adityamittal1604/portfolio/blob/main/src/main.tsx"
click node_app "https://github.com/adityamittal1604/portfolio/blob/main/src/App.tsx"
click node_navbar "https://github.com/adityamittal1604/portfolio/blob/main/src/components/Navbar.tsx"
click node_footer "https://github.com/adityamittal1604/portfolio/blob/main/src/components/Footer.tsx"
click node_hero "https://github.com/adityamittal1604/portfolio/blob/main/src/components/Hero.tsx"
click node_about "https://github.com/adityamittal1604/portfolio/blob/main/src/components/About.tsx"
click node_skills "https://github.com/adityamittal1604/portfolio/blob/main/src/components/Skills.tsx"
click node_projects "https://github.com/adityamittal1604/portfolio/blob/main/src/components/Projects.tsx"
click node_achievements "https://github.com/adityamittal1604/portfolio/blob/main/src/components/Achievements.tsx"
click node_portfolio_data "https://github.com/adityamittal1604/portfolio/blob/main/src/data/portfolio.ts"
click node_contact_modal "https://github.com/adityamittal1604/portfolio/blob/main/src/components/ContactModal.tsx"
click node_resume "https://github.com/adityamittal1604/portfolio/blob/main/public/resume.pdf"

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_mount,node_app,node_navbar,node_footer,node_browser toneBlue
class node_hero,node_about toneAmber
class node_skills,node_projects,node_achievements,node_portfolio_data toneMint
class node_contact_modal,node_resume toneRose
class node_visitor toneIndigo
```

## Components

### Page shell

- [React mount](https://github.com/adityamittal1604/portfolio/blob/main/src/main.tsx): `src/main.tsx`
- [Page composition](https://github.com/adityamittal1604/portfolio/blob/main/src/App.tsx): `src/App.tsx`
- [Navigation](https://github.com/adityamittal1604/portfolio/blob/main/src/components/Navbar.tsx): `src/components/Navbar.tsx`
- [Footer links](https://github.com/adityamittal1604/portfolio/blob/main/src/components/Footer.tsx): `src/components/Footer.tsx`

### Profile content

- [Profile hero](https://github.com/adityamittal1604/portfolio/blob/main/src/components/Hero.tsx): `src/components/Hero.tsx`
- [Education and about](https://github.com/adityamittal1604/portfolio/blob/main/src/components/About.tsx): `src/components/About.tsx`

### Portfolio content

- [Skills browser](https://github.com/adityamittal1604/portfolio/blob/main/src/components/Skills.tsx): `src/components/Skills.tsx`
- [Project browser](https://github.com/adityamittal1604/portfolio/blob/main/src/components/Projects.tsx): `src/components/Projects.tsx`
- [Achievements](https://github.com/adityamittal1604/portfolio/blob/main/src/components/Achievements.tsx): `src/components/Achievements.tsx`
- [Portfolio data](https://github.com/adityamittal1604/portfolio/blob/main/src/data/portfolio.ts): `src/data/portfolio.ts`

### Contact and assets

- [Contact modal](https://github.com/adityamittal1604/portfolio/blob/main/src/components/ContactModal.tsx): `src/components/ContactModal.tsx`
- [Resume PDF](https://github.com/adityamittal1604/portfolio/blob/main/public/resume.pdf): `public/resume.pdf`

### Other components

- **Portfolio visitor**
- **Browser APIs**

## Connections

- Portfolio visitor → React mount: opens site (evidence: `README.md`)
- React mount → Page composition: mounts React app (evidence: `README.md`)
- Page composition → Navigation: renders (evidence: `README.md`)
- Page composition → Profile hero: renders (evidence: `README.md`)
- Page composition → Project browser: renders (evidence: `README.md`)
- Page composition → Skills browser: renders (evidence: `README.md`)
- Page composition → Achievements: renders (evidence: `README.md`)
- Page composition → Education and about: renders (evidence: `README.md`)
- Page composition → Footer links: renders (evidence: `README.md`)
- Page composition → Contact modal: owns modal state (evidence: `README.md`)
- Profile hero → Portfolio data: reads profile (evidence: `src/components/Hero.tsx`)
- Education and about → Portfolio data: reads profile (evidence: `src/components/About.tsx`)
- Navigation → Portfolio data: reads profile (evidence: `src/components/Navbar.tsx`)
- Footer links → Portfolio data: reads profile (evidence: `src/components/Footer.tsx`)
- Project browser → Portfolio data: reads projects (evidence: `src/components/Projects.tsx`)
- Skills browser → Portfolio data: reads skills (evidence: `src/components/Skills.tsx`)
- Achievements → Portfolio data: reads milestones (evidence: `README.md`)
- Profile hero → Browser APIs: copies email (evidence: `src/components/Hero.tsx`)
- Profile hero → Contact modal: requests contact (evidence: `README.md`)
- Navigation → Contact modal: requests contact (evidence: `README.md`)
- Footer links → Contact modal: requests contact (evidence: `README.md`)
- Profile hero → Resume PDF: links resume (evidence: `src/components/Hero.tsx`)
- Footer links → Resume PDF: links resume (evidence: `src/components/Footer.tsx`)
- Navigation → Resume PDF: links resume (evidence: `src/components/Navbar.tsx`)
- Contact modal → Browser APIs: opens mail client (evidence: `README.md`)