# yashmishraaaa/aftab architecture

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

- Interactive diagram: https://gitdiagram.com/yashmishraaaa/aftab
- Repository: https://github.com/yashmishraaaa/aftab

## Overview

This is a single-page portfolio site for video editor Aftab Alam. A visitor enters through the hero, navigates to selected work and biography, previews portfolio clips on hover, then reaches contact options. The contact form currently prevents submission and has no evidenced delivery behavior. The README describes a generic Vite template rather than product capabilities; architecture here follows sampled UI source. Styling and app mounting are included as internal layers.

Main entry points: [`src/App.tsx`](https://github.com/yashmishraaaa/aftab/blob/main/src/App.tsx) (Page Composition), [`src/components/HeroSection.tsx`](https://github.com/yashmishraaaa/aftab/blob/main/src/components/HeroSection.tsx) (Hero Navigation), [`src/main.tsx`](https://github.com/yashmishraaaa/aftab/blob/main/src/main.tsx) (React Mount), [`src/components/PortfolioGrid.tsx`](https://github.com/yashmishraaaa/aftab/blob/main/src/components/PortfolioGrid.tsx) (Project Previews)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["App Entry"]
  node_mount["React Mount<br/>[main.tsx]"]
  node_app["Page Composition<br/>[App.tsx]"]
  node_styles["Global Styles<br/>[index.css]"]
end

subgraph group_portfolio["Portfolio Pages"]
  node_hero["Hero Navigation<br/>[HeroSection.tsx]"]
  node_work["Project Previews<br/>[PortfolioGrid.tsx]"]
  node_about["Editor Profile<br/>[AboutMe.tsx]"]
end

subgraph group_contact["Contact"]
  node_contact["Contact Options<br/>[ContactSection.tsx]"]
end

node_visitor(("Visitor"))
node_video(("Video CDN"))
node_email(("Email Client"))

node_visitor -->|"opens site"| node_mount
node_mount -->|"renders"| node_app
node_mount -->|"loads styles"| node_styles
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_work
node_app -->|"renders"| node_about
node_app -->|"renders"| node_contact
node_hero -->|"links to work"| node_work
node_hero -->|"links to about"| node_about
node_hero -->|"links to contact"| node_contact
node_hero -->|"loads background clip"| node_video
node_work -->|"loads and previews clips"| node_video
node_about -->|"loads profile clip"| node_video
node_contact -->|"opens mail link"| node_email

click node_mount "https://github.com/yashmishraaaa/aftab/blob/main/src/main.tsx"
click node_app "https://github.com/yashmishraaaa/aftab/blob/main/src/App.tsx"
click node_styles "https://github.com/yashmishraaaa/aftab/blob/main/src/index.css"
click node_hero "https://github.com/yashmishraaaa/aftab/blob/main/src/components/HeroSection.tsx"
click node_work "https://github.com/yashmishraaaa/aftab/blob/main/src/components/PortfolioGrid.tsx"
click node_about "https://github.com/yashmishraaaa/aftab/blob/main/src/components/AboutMe.tsx"
click node_contact "https://github.com/yashmishraaaa/aftab/blob/main/src/components/ContactSection.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_mount,node_app,node_styles,node_email toneBlue
class node_hero,node_work,node_about toneAmber
class node_contact toneMint
class node_visitor,node_video toneIndigo
```

## Components

### App Entry

- [React Mount](https://github.com/yashmishraaaa/aftab/blob/main/src/main.tsx): `src/main.tsx`
- [Page Composition](https://github.com/yashmishraaaa/aftab/blob/main/src/App.tsx): `src/App.tsx`
- [Global Styles](https://github.com/yashmishraaaa/aftab/blob/main/src/index.css): `src/index.css`

### Portfolio Pages

- [Hero Navigation](https://github.com/yashmishraaaa/aftab/blob/main/src/components/HeroSection.tsx): `src/components/HeroSection.tsx`
- [Project Previews](https://github.com/yashmishraaaa/aftab/blob/main/src/components/PortfolioGrid.tsx): `src/components/PortfolioGrid.tsx`
- [Editor Profile](https://github.com/yashmishraaaa/aftab/blob/main/src/components/AboutMe.tsx): `src/components/AboutMe.tsx`

### Contact

- [Contact Options](https://github.com/yashmishraaaa/aftab/blob/main/src/components/ContactSection.tsx): `src/components/ContactSection.tsx`

### Other components

- **Visitor**
- **Video CDN**
- **Email Client**

## Connections

- Visitor → React Mount: opens site
- React Mount → Page Composition: renders
- React Mount → Global Styles: loads styles
- Page Composition → Hero Navigation: renders
- Page Composition → Project Previews: renders
- Page Composition → Editor Profile: renders
- Page Composition → Contact Options: renders
- Hero Navigation → Project Previews: links to work
- Hero Navigation → Editor Profile: links to about
- Hero Navigation → Contact Options: links to contact
- Hero Navigation → Video CDN: loads background clip
- Project Previews → Video CDN: loads and previews clips
- Editor Profile → Video CDN: loads profile clip
- Contact Options → Email Client: opens mail link