# whatvivekcreates/vivek-kumar-bhagat architecture

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

- Interactive diagram: https://gitdiagram.com/whatvivekcreates/vivek-kumar-bhagat
- Repository: https://github.com/whatvivekcreates/vivek-kumar-bhagat

## Overview

This is a React personal portfolio presenting the developer’s work and background. The visitor-facing journey is to enter the app, explore portfolio sections—including projects, resume, skills, and gallery—and use the contact section to reach out. The README also documents a functional EmailJS contact form and responsive animated UI. Component wiring was not excerpted, so the graph preserves the documented capabilities but leaves unverified navigation and form-dispatch links dashed. The sampled sidebar shows a reusable responsive UI layer; no data store is evidenced.

Main entry points: [`src/App.tsx`](https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/App.tsx) (App shell), [`src/components/ui/sidebar.tsx`](https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/ui/sidebar.tsx) (Responsive sidebar), [`src/components/GalleryPage.tsx`](https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/GalleryPage.tsx) (Gallery page), [`src/main.tsx`](https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/main.tsx) (React entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_entry["React entry<br/>[main.tsx]"]
  node_app_shell["App shell<br/>[App.tsx]"]
  node_navbar["Navbar<br/>[Navbar.tsx]"]
  node_floating_nav["Floating nav<br/>[FloatingNav.tsx]"]
  node_theme["Theme toggle<br/>[ThemeToggle.tsx]"]
  node_intro_video["Intro video<br/>[IntroVideo.tsx]"]
end

subgraph group_portfolio["Portfolio content"]
  node_home["Home<br/>[Home.tsx]"]
  node_about["About<br/>[About.tsx]"]
  node_projects["Projects<br/>[Projects.jsx]"]
  node_resume["Resume<br/>[Resume.tsx]"]
  node_skills["Skills<br/>[Skills.tsx]"]
  node_certificates["Certificates<br/>[Certificates.jsx]"]
  node_blog["Blog<br/>[Blog.tsx]"]
  node_team["Team<br/>[Team.jsx]"]
end

subgraph group_gallery["Gallery experience"]
  node_gallery["Gallery view<br/>[Gallery.tsx]"]
  node_gallery_page["Gallery page<br/>[GalleryPage.tsx]"]
  node_project_feed["Projects feed<br/>[ProjectsFeed.tsx]"]
  node_achievement_feed["Achievements feed"]
  node_personal_grid["Personal grid<br/>[PersonalGrid.tsx]"]
  node_photo_frames["Photo frames"]
end

subgraph group_contact["Contact"]
  node_contact["Contact form<br/>[Contact.tsx]"]
  node_emailjs["EmailJS"]
end

subgraph group_ui["Reusable UI"]
  node_sidebar["Responsive sidebar<br/>[sidebar.tsx]"]
  node_mobile_hook["Mobile detection<br/>[use-mobile.ts]"]
  node_sheet["Sheet primitives<br/>[sheet.tsx]"]
  node_button["Button primitive<br/>[button.tsx]"]
  node_input["Input primitive<br/>[input.tsx]"]
  node_separator["Separator primitive<br/>[separator.tsx]"]
  node_skeleton["Skeleton primitive<br/>[skeleton.tsx]"]
  node_tooltip["Tooltip primitives<br/>[tooltip.tsx]"]
  node_context_menu["Context menu<br/>[context-menu.tsx]"]
  node_ui_utils["UI utilities<br/>[utils.ts]"]
  node_image_fallback["Image fallback"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens site"| node_entry
node_entry -->|"renders"| node_app_shell
node_app_shell -.->|"shows"| node_home
node_app_shell -.->|"shows"| node_about
node_app_shell -.->|"shows"| node_projects
node_app_shell -.->|"shows"| node_resume
node_app_shell -.->|"shows"| node_skills
node_app_shell -.->|"shows"| node_certificates
node_app_shell -.->|"shows"| node_blog
node_app_shell -.->|"shows"| node_team
node_app_shell -.->|"shows"| node_gallery
node_app_shell -.->|"shows"| node_gallery_page
node_app_shell -.->|"shows"| node_contact
node_app_shell -.->|"shows"| node_navbar
node_app_shell -.->|"shows"| node_floating_nav
node_app_shell -.->|"shows"| node_theme
node_app_shell -.->|"shows"| node_intro_video
node_gallery_page -.->|"uses"| node_project_feed
node_gallery_page -.->|"uses"| node_achievement_feed
node_gallery_page -.->|"uses"| node_personal_grid
node_gallery_page -.->|"uses"| node_photo_frames
node_contact -.->|"sends email"| node_emailjs
node_sidebar -->|"checks viewport"| node_mobile_hook
node_sidebar -->|"renders mobile panel"| node_sheet
node_sidebar -->|"uses"| node_button
node_sidebar -->|"uses"| node_input
node_sidebar -->|"uses"| node_separator
node_sidebar -->|"renders"| node_skeleton
node_sidebar -->|"uses"| node_tooltip
node_context_menu -->|"imports"| node_ui_utils

click node_entry "https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/main.tsx"
click node_app_shell "https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/App.tsx"
click node_home "https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/Home.tsx"
click node_about "https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/About.tsx"
click node_projects "https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/Projects.jsx"
click node_resume "https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/Resume.tsx"
click node_skills "https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/Skills.tsx"
click node_certificates "https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/Certificates.jsx"
click node_blog "https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/Blog.tsx"
click node_team "https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/Team.jsx"
click node_gallery "https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/Gallery.tsx"
click node_gallery_page "https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/GalleryPage.tsx"
click node_project_feed "https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/gallery/ProjectsFeed.tsx"
click node_achievement_feed "https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/gallery/AchievementsFeed.tsx"
click node_personal_grid "https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/gallery/PersonalGrid.tsx"
click node_photo_frames "https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/gallery/PhotographyFrames.tsx"
click node_contact "https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/Contact.tsx"
click node_navbar "https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/Navbar.tsx"
click node_floating_nav "https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/FloatingNav.tsx"
click node_theme "https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/ThemeToggle.tsx"
click node_intro_video "https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/IntroVideo.tsx"
click node_sidebar "https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/ui/sidebar.tsx"
click node_mobile_hook "https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/ui/use-mobile.ts"
click node_sheet "https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/ui/sheet.tsx"
click node_button "https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/ui/button.tsx"
click node_input "https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/ui/input.tsx"
click node_separator "https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/ui/separator.tsx"
click node_skeleton "https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/ui/skeleton.tsx"
click node_tooltip "https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/ui/tooltip.tsx"
click node_context_menu "https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/ui/context-menu.tsx"
click node_ui_utils "https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/ui/utils.ts"
click node_image_fallback "https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/figma/ImageWithFallback.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_entry,node_app_shell,node_navbar,node_floating_nav,node_theme,node_intro_video toneBlue
class node_home,node_about,node_projects,node_resume,node_skills,node_certificates,node_blog,node_team toneAmber
class node_gallery,node_gallery_page,node_project_feed,node_achievement_feed,node_personal_grid,node_photo_frames toneMint
class node_contact,node_emailjs toneRose
class node_sidebar,node_mobile_hook,node_sheet,node_button,node_input,node_separator,node_skeleton,node_tooltip,node_context_menu,node_ui_utils,node_image_fallback,node_visitor toneIndigo
```

## Components

### Application shell

- [React entry](https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/main.tsx): `src/main.tsx`
- [App shell](https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/App.tsx): `src/App.tsx`
- [Navbar](https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/Navbar.tsx): `src/components/Navbar.tsx`
- [Floating nav](https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/FloatingNav.tsx): `src/components/FloatingNav.tsx`
- [Theme toggle](https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/ThemeToggle.tsx): `src/components/ThemeToggle.tsx`
- [Intro video](https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/IntroVideo.tsx): `src/components/IntroVideo.tsx`

### Portfolio content

- [Home](https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/Home.tsx): `src/components/Home.tsx`
- [About](https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/About.tsx): `src/components/About.tsx`
- [Projects](https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/Projects.jsx): `src/components/Projects.jsx`
- [Resume](https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/Resume.tsx): `src/components/Resume.tsx`
- [Skills](https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/Skills.tsx): `src/components/Skills.tsx`
- [Certificates](https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/Certificates.jsx): `src/components/Certificates.jsx`
- [Blog](https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/Blog.tsx): `src/components/Blog.tsx`
- [Team](https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/Team.jsx): `src/components/Team.jsx`

### Gallery experience

- [Gallery view](https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/Gallery.tsx): `src/components/Gallery.tsx`
- [Gallery page](https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/GalleryPage.tsx): `src/components/GalleryPage.tsx`
- [Projects feed](https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/gallery/ProjectsFeed.tsx): `src/components/gallery/ProjectsFeed.tsx`
- [Achievements feed](https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/gallery/AchievementsFeed.tsx): `src/components/gallery/AchievementsFeed.tsx`
- [Personal grid](https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/gallery/PersonalGrid.tsx): `src/components/gallery/PersonalGrid.tsx`
- [Photo frames](https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/gallery/PhotographyFrames.tsx): `src/components/gallery/PhotographyFrames.tsx`

### Contact

- [Contact form](https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/Contact.tsx): `src/components/Contact.tsx`
- **EmailJS**

### Reusable UI

- [Responsive sidebar](https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/ui/sidebar.tsx): `src/components/ui/sidebar.tsx`
- [Mobile detection](https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/ui/use-mobile.ts): `src/components/ui/use-mobile.ts`
- [Sheet primitives](https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/ui/sheet.tsx): `src/components/ui/sheet.tsx`
- [Button primitive](https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/ui/button.tsx): `src/components/ui/button.tsx`
- [Input primitive](https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/ui/input.tsx): `src/components/ui/input.tsx`
- [Separator primitive](https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/ui/separator.tsx): `src/components/ui/separator.tsx`
- [Skeleton primitive](https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/ui/skeleton.tsx): `src/components/ui/skeleton.tsx`
- [Tooltip primitives](https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/ui/tooltip.tsx): `src/components/ui/tooltip.tsx`
- [Context menu](https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/ui/context-menu.tsx): `src/components/ui/context-menu.tsx`
- [UI utilities](https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/ui/utils.ts): `src/components/ui/utils.ts`
- [Image fallback](https://github.com/whatvivekcreates/vivek-kumar-bhagat/blob/main/src/components/figma/ImageWithFallback.tsx): `src/components/figma/ImageWithFallback.tsx`

### Other components

- **Visitor**

## Connections

- Visitor → React entry: opens site (evidence: `src/main.tsx`)
- React entry → App shell: renders (evidence: `src/main.tsx`)
- App shell → Home: shows
- App shell → About: shows
- App shell → Projects: shows
- App shell → Resume: shows
- App shell → Skills: shows
- App shell → Certificates: shows
- App shell → Blog: shows
- App shell → Team: shows
- App shell → Gallery view: shows
- App shell → Gallery page: shows
- App shell → Contact form: shows
- App shell → Navbar: shows
- App shell → Floating nav: shows
- App shell → Theme toggle: shows
- App shell → Intro video: shows
- Gallery page → Projects feed: uses
- Gallery page → Achievements feed: uses
- Gallery page → Personal grid: uses
- Gallery page → Photo frames: uses
- Contact form → EmailJS: sends email
- Responsive sidebar → Mobile detection: checks viewport (evidence: `src/components/ui/sidebar.tsx`)
- Responsive sidebar → Sheet primitives: renders mobile panel (evidence: `src/components/ui/sidebar.tsx`)
- Responsive sidebar → Button primitive: uses (evidence: `src/components/ui/sidebar.tsx`)
- Responsive sidebar → Input primitive: uses (evidence: `src/components/ui/sidebar.tsx`)
- Responsive sidebar → Separator primitive: uses (evidence: `src/components/ui/sidebar.tsx`)
- Responsive sidebar → Skeleton primitive: renders (evidence: `src/components/ui/sidebar.tsx`)
- Responsive sidebar → Tooltip primitives: uses (evidence: `src/components/ui/sidebar.tsx`)
- Context menu → UI utilities: imports (evidence: `src/components/ui/context-menu.tsx`)