# gowthamgongada/personal-website-react architecture

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

- Interactive diagram: https://gitdiagram.com/gowthamgongada/personal-website-react
- Repository: https://github.com/gowthamgongada/personal-website-react

## Overview

This is a personal developer portfolio built with Next.js. Visitors browse the portfolio’s profile, skills, experience, and selected projects, then open a project page for its description, role, imagery, and external links. The sampled source confirms project-list data access and project-detail routing; the home page and several components were not sampled, so their wiring is left unspecified.

Main entry points: [`app/layout.tsx`](https://github.com/gowthamgongada/personal-website-react/blob/main/app/layout.tsx) (Root layout), [`app/projects/[slug]/page.tsx`](https://github.com/gowthamgongada/personal-website-react/blob/main/app/projects/%5Bslug%5D/page.tsx) (Project route), [`lib/data.ts`](https://github.com/gowthamgongada/personal-website-react/blob/main/lib/data.ts) (Portfolio data), [`app/_components/ProjectList.tsx`](https://github.com/gowthamgongada/personal-website-react/blob/main/app/_components/ProjectList.tsx) (Project list)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_content["Portfolio content"]
  node_profile["Profile section<br/>[AboutMe.tsx]"]
  node_banner["Intro banner<br/>[Banner.tsx]"]
  node_experience["Experience section<br/>[Experiences.tsx]"]
  node_skills["Skills section<br/>[Skills.tsx]"]
  node_contentdata["Portfolio data<br/>[data.ts]"]
  node_projecttype["Project model<br/>[index.ts]"]
end

subgraph group_browse["Project browsing"]
  node_home["Home page<br/>[page.tsx]"]
  node_projectlist["Project list<br/>[ProjectList.tsx]"]
  node_projectcard["Project card<br/>[Project.tsx]"]
  node_projectroute["Project route<br/>[page.tsx]"]
  node_projectdetails["Project details<br/>[ProjectDetails.tsx]"]
end

subgraph group_shell["Site presentation"]
  node_layout["Root layout<br/>[layout.tsx]"]
  node_navbar["Navigation<br/>[Navbar.tsx]"]
  node_footer["Footer<br/>[Footer.tsx]"]
  node_cursor["Custom cursor<br/>[CustomCursor.tsx]"]
  node_preloader["Preloader<br/>[Preloader.tsx]"]
  node_scrollprogress["Scroll progress"]
  node_particles["Particle background"]
  node_stickyemail["Sticky email<br/>[StickyEmail.tsx]"]
end

subgraph group_integrations["External services"]
  node_analytics["Google Analytics"]
  node_hotjar["Hotjar"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_home
node_visitor -->|"opens project"| node_projectroute
node_projectlist -->|"reads projects"| node_contentdata
node_projectlist -->|"renders cards"| node_projectcard
node_projectcard -->|"links to"| node_projectroute
node_projectroute -->|"finds project"| node_contentdata
node_projectroute -->|"renders details"| node_projectdetails
node_projectdetails -->|"receives project"| node_contentdata
node_layout -->|"renders"| node_navbar
node_layout -->|"renders"| node_footer
node_layout -->|"renders"| node_cursor
node_layout -->|"renders"| node_preloader
node_layout -->|"renders"| node_scrollprogress
node_layout -->|"renders"| node_particles
node_layout -->|"renders"| node_stickyemail
node_navbar -->|"reads links"| node_contentdata
node_layout -.->|"loads analytics"| node_analytics
node_layout -.->|"loads tracking"| node_hotjar

click node_home "https://github.com/gowthamgongada/personal-website-react/blob/main/app/page.tsx"
click node_profile "https://github.com/gowthamgongada/personal-website-react/blob/main/app/_components/AboutMe.tsx"
click node_banner "https://github.com/gowthamgongada/personal-website-react/blob/main/app/_components/Banner.tsx"
click node_experience "https://github.com/gowthamgongada/personal-website-react/blob/main/app/_components/Experiences.tsx"
click node_skills "https://github.com/gowthamgongada/personal-website-react/blob/main/app/_components/Skills.tsx"
click node_projectlist "https://github.com/gowthamgongada/personal-website-react/blob/main/app/_components/ProjectList.tsx"
click node_projectcard "https://github.com/gowthamgongada/personal-website-react/blob/main/app/_components/Project.tsx"
click node_projectroute "https://github.com/gowthamgongada/personal-website-react/blob/main/app/projects/%5Bslug%5D/page.tsx"
click node_projectdetails "https://github.com/gowthamgongada/personal-website-react/blob/main/app/projects/%5Bslug%5D/_components/ProjectDetails.tsx"
click node_contentdata "https://github.com/gowthamgongada/personal-website-react/blob/main/lib/data.ts"
click node_projecttype "https://github.com/gowthamgongada/personal-website-react/blob/main/types/index.ts"
click node_layout "https://github.com/gowthamgongada/personal-website-react/blob/main/app/layout.tsx"
click node_navbar "https://github.com/gowthamgongada/personal-website-react/blob/main/components/Navbar.tsx"
click node_footer "https://github.com/gowthamgongada/personal-website-react/blob/main/components/Footer.tsx"
click node_cursor "https://github.com/gowthamgongada/personal-website-react/blob/main/components/CustomCursor.tsx"
click node_preloader "https://github.com/gowthamgongada/personal-website-react/blob/main/components/Preloader.tsx"
click node_scrollprogress "https://github.com/gowthamgongada/personal-website-react/blob/main/components/ScrollProgressIndicator.tsx"
click node_particles "https://github.com/gowthamgongada/personal-website-react/blob/main/components/ParticleBackground.tsx"
click node_stickyemail "https://github.com/gowthamgongada/personal-website-react/blob/main/app/_components/StickyEmail.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_profile,node_banner,node_experience,node_skills,node_contentdata,node_projecttype toneBlue
class node_home,node_projectlist,node_projectcard,node_projectroute,node_projectdetails toneAmber
class node_layout,node_navbar,node_footer,node_cursor,node_preloader,node_scrollprogress,node_particles,node_stickyemail toneMint
class node_analytics,node_hotjar toneRose
class node_visitor toneIndigo
```

## Components

### Portfolio content

- [Profile section](https://github.com/gowthamgongada/personal-website-react/blob/main/app/_components/AboutMe.tsx): `app/_components/AboutMe.tsx`
- [Intro banner](https://github.com/gowthamgongada/personal-website-react/blob/main/app/_components/Banner.tsx): `app/_components/Banner.tsx`
- [Experience section](https://github.com/gowthamgongada/personal-website-react/blob/main/app/_components/Experiences.tsx): `app/_components/Experiences.tsx`
- [Skills section](https://github.com/gowthamgongada/personal-website-react/blob/main/app/_components/Skills.tsx): `app/_components/Skills.tsx`
- [Portfolio data](https://github.com/gowthamgongada/personal-website-react/blob/main/lib/data.ts): `lib/data.ts`
- [Project model](https://github.com/gowthamgongada/personal-website-react/blob/main/types/index.ts): `types/index.ts`

### Project browsing

- [Home page](https://github.com/gowthamgongada/personal-website-react/blob/main/app/page.tsx): `app/page.tsx`
- [Project list](https://github.com/gowthamgongada/personal-website-react/blob/main/app/_components/ProjectList.tsx): `app/_components/ProjectList.tsx`
- [Project card](https://github.com/gowthamgongada/personal-website-react/blob/main/app/_components/Project.tsx): `app/_components/Project.tsx`
- [Project route](https://github.com/gowthamgongada/personal-website-react/blob/main/app/projects/%5Bslug%5D/page.tsx): `app/projects/[slug]/page.tsx`
- [Project details](https://github.com/gowthamgongada/personal-website-react/blob/main/app/projects/%5Bslug%5D/_components/ProjectDetails.tsx): `app/projects/[slug]/_components/ProjectDetails.tsx`

### Site presentation

- [Root layout](https://github.com/gowthamgongada/personal-website-react/blob/main/app/layout.tsx): `app/layout.tsx`
- [Navigation](https://github.com/gowthamgongada/personal-website-react/blob/main/components/Navbar.tsx): `components/Navbar.tsx`
- [Footer](https://github.com/gowthamgongada/personal-website-react/blob/main/components/Footer.tsx): `components/Footer.tsx`
- [Custom cursor](https://github.com/gowthamgongada/personal-website-react/blob/main/components/CustomCursor.tsx): `components/CustomCursor.tsx`
- [Preloader](https://github.com/gowthamgongada/personal-website-react/blob/main/components/Preloader.tsx): `components/Preloader.tsx`
- [Scroll progress](https://github.com/gowthamgongada/personal-website-react/blob/main/components/ScrollProgressIndicator.tsx): `components/ScrollProgressIndicator.tsx`
- [Particle background](https://github.com/gowthamgongada/personal-website-react/blob/main/components/ParticleBackground.tsx): `components/ParticleBackground.tsx`
- [Sticky email](https://github.com/gowthamgongada/personal-website-react/blob/main/app/_components/StickyEmail.tsx): `app/_components/StickyEmail.tsx`

### External services

- **Google Analytics**
- **Hotjar**

### Other components

- **Visitor**

## Connections

- Visitor → Home page: opens
- Visitor → Project route: opens project
- Project list → Portfolio data: reads projects
- Project list → Project card: renders cards
- Project card → Project route: links to
- Project route → Portfolio data: finds project
- Project route → Project details: renders details
- Project details → Portfolio data: receives project
- Root layout → Navigation: renders
- Root layout → Footer: renders
- Root layout → Custom cursor: renders
- Root layout → Preloader: renders
- Root layout → Scroll progress: renders
- Root layout → Particle background: renders
- Root layout → Sticky email: renders
- Navigation → Portfolio data: reads links
- Root layout → Google Analytics: loads analytics
- Root layout → Hotjar: loads tracking