# theunstopabble/gautam_portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/theunstopabble/gautam_portfolio
- Repository: https://github.com/theunstopabble/gautam_portfolio

## Overview

1. **What this repo is**
   - A mostly static, recruiter-focused personal portfolio built with **Next.js App Router**, **React 19**, **TypeScript**, and **Tailwind/shadcn UI**.
   - The architecture is content-first: pages are composed from reusable section components and file-based data, not from a database or backend service.

2. **Route structure**
   - `src/app/page.tsx` is the main landing page and renders the full portfolio as a single long-form experience.
   - `src/app/projects/[id]/page.tsx` provides per-project detail pages using a dynamic route.
   - `src/app/privacy/page.tsx` is a separate informational route.
   - `src/app/not-found.tsx` handles 404s.

3. **Page composition model**
   - The home page is assembled from section components in `src/components/home/` such as `Hero`, `Experience`, `Projects`, `Skills`, `Education`, `About`, `Contact`, and `Footer`.
   - `src/components/layout/Navbar.tsx` provides top-level navigation and is the main global UI element outside the content sections.
   - This makes the site easy to diagram as “one page shell + modular sections.”

4. **Content/data boundary**
   - Project content lives in `src/data/projects.ts` and is consumed by both the home projects grid and the dynamic project detail route.
   - `src/types.ts` defines the shared shape for portfolio data, keeping the sections and route pages aligned.
   - This is the key data flow in the repo: **typed static data → section components → rendered pages**.

5. **Project showcase subsystem**
   - The projects area is split into a wrapper (`Projects.tsx`), a card component (`ProjectCard.tsx`), and a deeper modal/detail experience (`DeepDiveModal.tsx`).
   - The project route `[id]` likely reuses the same project dataset to render dedicated detail pages.
   - Public screenshots and other assets under `public/projects` support the visual showcase.

6. **Shared UI system**
   - `src/components/ui/` contains reusable shadcn-style primitives such as buttons, cards, dialogs, sheets, tabs, tooltips, avatars, separators, badges, and scroll areas.
   - These components form the design-system layer beneath the portfolio sections.
   - `src/lib/utils.ts` holds shared helper logic used across UI composition.

7. **Styling and visual system**
   - `src/app/globals.css`, `tailwind.config.ts`, and `postcss.config.mjs` define the styling pipeline.
   - The README indicates a “premium dark UI” with glassmorphism, gradients, and motion effects, so the visual layer is a core part of the architecture rather than just decoration.
   - `components.json` suggests shadcn configuration is part of the UI generation/setup.

8. **SEO and discoverability subsystem**
   - `src/app/layout.tsx`, `src/app/robots.ts`, and `src/app/sitemap.ts` handle global metadata and crawler-friendly routing.
   - `src/lib/structured-data.ts` likely generates JSON-LD or similar structured metadata for search engines.
   - This repo is optimized for indexing and sharing, which matters for a portfolio intended to be discovered by recruiters.

9. **IndexNow and search engine notification**
   - `src/app/api/indexnow/route.ts` is the only explicit API route in the tree.
   - It exists to notify search engines when content changes, which fits the site’s SEO-first architecture.
   - This is a lightweight server-side boundary in an otherwise static app.

10. **Assets and static delivery**
   - The `public/` directory stores images, text files, and route-accessible assets used by the pages and SEO-related features.
   - Because the site is largely static and content is file-based, it can be pre-rendered and served efficiently on Vercel.
   - The deployment model in the README reinforces that there is no runtime persistence layer.

11. **External touchpoints**
   - User actions primarily lead to outbound links: GitHub, LinkedIn, email, phone, and live project demos.
   - The “Experience” section also links to verified internship certificates, which act as external proof points.
   - These are presentation-time integrations rather than service-to-service dependencies.

12. **Overall architectural shape**
   - Think of the app as: **Next.js shell + static content model + reusable UI primitives + SEO infrastructure + a single indexing API**.
   - The main diagram boundaries are between:
     - route pages in `src/app/`
     - reusable sections/components in `src/components/`
     - typed content in `src/data/` and `src/types.ts`
     - SEO/infrastructure helpers in `src/lib/` and the `app`-level metadata files.

Main entry points: [`src/app/page.tsx`](https://github.com/theunstopabble/gautam_portfolio/blob/main/src/app/page.tsx) (Home page), [`src/components/ui/button.tsx`](https://github.com/theunstopabble/gautam_portfolio/blob/main/src/components/ui/button.tsx) (UI primitives), [`src/data/projects.ts`](https://github.com/theunstopabble/gautam_portfolio/blob/main/src/data/projects.ts) (Projects data), [`src/app/layout.tsx`](https://github.com/theunstopabble/gautam_portfolio/blob/main/src/app/layout.tsx) (Root layout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App routes"]
  node_app_layout["Root layout<br/>next layout<br/>[layout.tsx]"]
  node_app_page["Home page<br/>route page<br/>[page.tsx]"]
  node_app_project_page["Project detail<br/>dynamic route<br/>[page.tsx]"]
  node_app_privacy["Privacy page<br/>route page<br/>[page.tsx]"]
  node_app_not_found["404 page<br/>error page<br/>[not-found.tsx]"]
  node_app_robots["Robots<br/>seo route<br/>[robots.ts]"]
  node_app_sitemap["Sitemap<br/>seo route<br/>[sitemap.ts]"]
  node_api_indexnow["IndexNow API<br/>server route<br/>[route.ts]"]
end

subgraph group_components["Components"]
  node_nav["Navbar<br/>global nav<br/>[Navbar.tsx]"]
  node_hero["Hero<br/>section<br/>[Hero.tsx]"]
  node_experience["Experience<br/>section<br/>[Experience.tsx]"]
  node_projects_sec["Projects<br/>section<br/>[Projects.tsx]"]
  node_project_card["Project card<br/>card component<br/>[ProjectCard.tsx]"]
  node_deep_dive["Deep dive<br/>modal<br/>[DeepDiveModal.tsx]"]
  node_skills["Skills<br/>section<br/>[Skills.tsx]"]
  node_education["Education<br/>section<br/>[Education.tsx]"]
  node_about["About<br/>section<br/>[About.tsx]"]
  node_contact["Contact<br/>section<br/>[Contact.tsx]"]
  node_footer["Footer<br/>section<br/>[Footer.tsx]"]
  node_faq["FAQ<br/>section<br/>[FAQ.tsx]"]
  node_ui_primitives["UI primitives<br/>design system<br/>[button.tsx]"]
end

subgraph group_data["Content and helpers"]
  node_projects_data["Projects data<br/>content source<br/>[projects.ts]"]
  node_types["Shared types<br/>type definitions<br/>[types.ts]"]
  node_structured_data["Structured data<br/>seo helper<br/>[structured-data.ts]"]
  node_utils["Utils<br/>helper<br/>[utils.ts]"]
  node_styles["Styling pipeline<br/>theme setup<br/>[globals.css]"]
  node_shadcn_config["shadcn config<br/>ui setup<br/>[components.json]"]
end

subgraph group_assets["Static assets"]
  node_projects_assets[("Project assets<br/>static assets")]
  node_public_text["Public text<br/>static files<br/>[llms.txt]"]
end

node_app_layout -->|"renders"| node_nav
node_app_layout -->|"loads"| node_styles
node_app_layout -.->|"injects"| node_structured_data
node_app_page -->|"composes"| node_hero
node_app_page -->|"composes"| node_experience
node_app_page -->|"composes"| node_projects_sec
node_app_page -->|"composes"| node_skills
node_app_page -->|"composes"| node_education
node_app_page -->|"composes"| node_about
node_app_page -->|"composes"| node_contact
node_app_page -->|"composes"| node_footer
node_app_page -->|"composes"| node_faq
node_app_project_page -->|"reads"| node_projects_data
node_app_project_page -.->|"reuses"| node_project_card
node_projects_sec -->|"renders"| node_project_card
node_projects_sec -->|"opens"| node_deep_dive
node_project_card -->|"maps"| node_projects_data
node_deep_dive -->|"reads"| node_projects_data
node_projects_data -->|"typed by"| node_types
node_contact -.->|"links to"| node_public_text
node_app_robots -.->|"supports"| node_public_text
node_app_sitemap -.->|"enumerates"| node_projects_data
node_app_sitemap -.->|"includes"| node_app_privacy
node_app_robots -.->|"points to"| node_app_sitemap
node_api_indexnow -.->|"signals"| node_projects_data
node_ui_primitives -->|"uses"| node_utils
node_ui_primitives -.->|"configured by"| node_shadcn_config
node_hero -->|"uses"| node_ui_primitives
node_experience -->|"uses"| node_ui_primitives
node_skills -->|"uses"| node_ui_primitives
node_education -->|"uses"| node_ui_primitives
node_about -->|"uses"| node_ui_primitives
node_contact -->|"uses"| node_ui_primitives
node_app_project_page -->|"displays"| node_projects_assets

click node_app_layout "https://github.com/theunstopabble/gautam_portfolio/blob/main/src/app/layout.tsx"
click node_app_page "https://github.com/theunstopabble/gautam_portfolio/blob/main/src/app/page.tsx"
click node_app_project_page "https://github.com/theunstopabble/gautam_portfolio/blob/main/src/app/projects/[id]/page.tsx"
click node_app_privacy "https://github.com/theunstopabble/gautam_portfolio/blob/main/src/app/privacy/page.tsx"
click node_app_not_found "https://github.com/theunstopabble/gautam_portfolio/blob/main/src/app/not-found.tsx"
click node_app_robots "https://github.com/theunstopabble/gautam_portfolio/blob/main/src/app/robots.ts"
click node_app_sitemap "https://github.com/theunstopabble/gautam_portfolio/blob/main/src/app/sitemap.ts"
click node_api_indexnow "https://github.com/theunstopabble/gautam_portfolio/blob/main/src/app/api/indexnow/route.ts"
click node_nav "https://github.com/theunstopabble/gautam_portfolio/blob/main/src/components/layout/Navbar.tsx"
click node_hero "https://github.com/theunstopabble/gautam_portfolio/blob/main/src/components/home/Hero.tsx"
click node_experience "https://github.com/theunstopabble/gautam_portfolio/blob/main/src/components/home/Experience.tsx"
click node_projects_sec "https://github.com/theunstopabble/gautam_portfolio/blob/main/src/components/home/Projects.tsx"
click node_project_card "https://github.com/theunstopabble/gautam_portfolio/blob/main/src/components/home/ProjectCard.tsx"
click node_deep_dive "https://github.com/theunstopabble/gautam_portfolio/blob/main/src/components/home/DeepDiveModal.tsx"
click node_skills "https://github.com/theunstopabble/gautam_portfolio/blob/main/src/components/home/Skills.tsx"
click node_education "https://github.com/theunstopabble/gautam_portfolio/blob/main/src/components/home/Education.tsx"
click node_about "https://github.com/theunstopabble/gautam_portfolio/blob/main/src/components/home/About.tsx"
click node_contact "https://github.com/theunstopabble/gautam_portfolio/blob/main/src/components/home/Contact.tsx"
click node_footer "https://github.com/theunstopabble/gautam_portfolio/blob/main/src/components/home/Footer.tsx"
click node_faq "https://github.com/theunstopabble/gautam_portfolio/blob/main/src/components/home/FAQ.tsx"
click node_ui_primitives "https://github.com/theunstopabble/gautam_portfolio/blob/main/src/components/ui/button.tsx"
click node_projects_data "https://github.com/theunstopabble/gautam_portfolio/blob/main/src/data/projects.ts"
click node_types "https://github.com/theunstopabble/gautam_portfolio/blob/main/src/types.ts"
click node_structured_data "https://github.com/theunstopabble/gautam_portfolio/blob/main/src/lib/structured-data.ts"
click node_utils "https://github.com/theunstopabble/gautam_portfolio/blob/main/src/lib/utils.ts"
click node_styles "https://github.com/theunstopabble/gautam_portfolio/blob/main/src/app/globals.css"
click node_shadcn_config "https://github.com/theunstopabble/gautam_portfolio/blob/main/components.json"
click node_projects_assets "https://github.com/theunstopabble/gautam_portfolio/tree/main/public/projects"
click node_public_text "https://github.com/theunstopabble/gautam_portfolio/blob/main/public/llms.txt"

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_app_layout,node_app_page,node_app_project_page,node_app_privacy,node_app_not_found,node_app_robots,node_app_sitemap,node_api_indexnow toneBlue
class node_nav,node_hero,node_experience,node_projects_sec,node_project_card,node_deep_dive,node_skills,node_education,node_about,node_contact,node_footer,node_faq,node_ui_primitives toneAmber
class node_projects_data,node_types,node_structured_data,node_utils,node_styles,node_shadcn_config toneMint
class node_projects_assets,node_public_text toneRose
```

## Components

### App routes

Next.js route layer, page composition, metadata, and API boundary.

- [Root layout](https://github.com/theunstopabble/gautam_portfolio/blob/main/src/app/layout.tsx): next layout · Defines the global shell, metadata, and site-wide providers. · `src/app/layout.tsx`
- [Home page](https://github.com/theunstopabble/gautam_portfolio/blob/main/src/app/page.tsx): route page · Main long-form portfolio landing page that assembles the full experience. · `src/app/page.tsx`
- [Project detail](https://github.com/theunstopabble/gautam_portfolio/blob/main/src/app/projects/[id]/page.tsx): dynamic route · Per-project page rendered from the project dataset. · `src/app/projects/[id]/page.tsx`
- [Privacy page](https://github.com/theunstopabble/gautam_portfolio/blob/main/src/app/privacy/page.tsx): route page · Standalone informational route. · `src/app/privacy/page.tsx`
- [404 page](https://github.com/theunstopabble/gautam_portfolio/blob/main/src/app/not-found.tsx): error page · Fallback page for unmatched routes. · `src/app/not-found.tsx`
- [Robots](https://github.com/theunstopabble/gautam_portfolio/blob/main/src/app/robots.ts): seo route · Crawler instructions for search engines. · `src/app/robots.ts`
- [Sitemap](https://github.com/theunstopabble/gautam_portfolio/blob/main/src/app/sitemap.ts): seo route · URL index for discoverability and sharing. · `src/app/sitemap.ts`
- [IndexNow API](https://github.com/theunstopabble/gautam_portfolio/blob/main/src/app/api/indexnow/route.ts): server route · Notifies search engines when content changes. · `src/app/api/indexnow/route.ts`

### Components

Reusable portfolio sections and UI primitives.

- [Navbar](https://github.com/theunstopabble/gautam_portfolio/blob/main/src/components/layout/Navbar.tsx): global nav · Top-level navigation used across the portfolio. · `src/components/layout/Navbar.tsx`
- [Hero](https://github.com/theunstopabble/gautam_portfolio/blob/main/src/components/home/Hero.tsx): section · Opening section of the home page. · `src/components/home/Hero.tsx`
- [Experience](https://github.com/theunstopabble/gautam_portfolio/blob/main/src/components/home/Experience.tsx): section · Work history and proof points. · `src/components/home/Experience.tsx`
- [Projects](https://github.com/theunstopabble/gautam_portfolio/blob/main/src/components/home/Projects.tsx): section · Project showcase section on the home page. · `src/components/home/Projects.tsx`
- [Project card](https://github.com/theunstopabble/gautam_portfolio/blob/main/src/components/home/ProjectCard.tsx): card component · Summary card for a single project entry. · `src/components/home/ProjectCard.tsx`
- [Deep dive](https://github.com/theunstopabble/gautam_portfolio/blob/main/src/components/home/DeepDiveModal.tsx): modal · Expanded project detail experience used from the showcase. · `src/components/home/DeepDiveModal.tsx`
- [Skills](https://github.com/theunstopabble/gautam_portfolio/blob/main/src/components/home/Skills.tsx): section · Technology and capability summary. · `src/components/home/Skills.tsx`
- [Education](https://github.com/theunstopabble/gautam_portfolio/blob/main/src/components/home/Education.tsx): section · Academic background section. · `src/components/home/Education.tsx`
- [About](https://github.com/theunstopabble/gautam_portfolio/blob/main/src/components/home/About.tsx): section · Personal summary and profile context. · `src/components/home/About.tsx`
- [Contact](https://github.com/theunstopabble/gautam_portfolio/blob/main/src/components/home/Contact.tsx): section · Outbound contact and profile links. · `src/components/home/Contact.tsx`
- [Footer](https://github.com/theunstopabble/gautam_portfolio/blob/main/src/components/home/Footer.tsx): section · Bottom-of-page site footer. · `src/components/home/Footer.tsx`
- [FAQ](https://github.com/theunstopabble/gautam_portfolio/blob/main/src/components/home/FAQ.tsx): section · Supplementary question-and-answer content. · `src/components/home/FAQ.tsx`
- [UI primitives](https://github.com/theunstopabble/gautam_portfolio/blob/main/src/components/ui/button.tsx): design system · Reusable shadcn-style components for buttons, cards, dialogs, sheets, tabs, tooltips, avatars, separators, badges, and scroll areas. · `src/components/ui/button.tsx`

### Content and helpers

Static data, shared types, and utility/SEO helpers.

- [Projects data](https://github.com/theunstopabble/gautam_portfolio/blob/main/src/data/projects.ts): content source · Typed static project dataset consumed by pages and showcase components. · `src/data/projects.ts`
- [Shared types](https://github.com/theunstopabble/gautam_portfolio/blob/main/src/types.ts): type definitions · Common data shapes for portfolio content. · `src/types.ts`
- [Structured data](https://github.com/theunstopabble/gautam_portfolio/blob/main/src/lib/structured-data.ts): seo helper · Builds JSON-LD or similar metadata for search engines. · `src/lib/structured-data.ts`
- [Utils](https://github.com/theunstopabble/gautam_portfolio/blob/main/src/lib/utils.ts): helper · Shared utility helpers for component composition. · `src/lib/utils.ts`
- [Styling pipeline](https://github.com/theunstopabble/gautam_portfolio/blob/main/src/app/globals.css): theme setup · Global CSS and Tailwind/PostCSS configuration for the visual system. · `src/app/globals.css`
- [shadcn config](https://github.com/theunstopabble/gautam_portfolio/blob/main/components.json): ui setup · Configuration for generated UI primitives and component conventions. · `components.json`

### Static assets

Public files used for screenshots, verification, and crawler-facing content.

- [Project assets](https://github.com/theunstopabble/gautam_portfolio/tree/main/public/projects): static assets · Screenshots and showcase media used in project pages and cards. · `public/projects`
- [Public text](https://github.com/theunstopabble/gautam_portfolio/blob/main/public/llms.txt): static files · Crawler and LLM-facing text assets in the public directory. · `public/llms.txt`

## Connections

- Root layout → Navbar: renders · The global layout includes the top-level navigation.
- Root layout → Styling pipeline: loads · The app shell applies global styling and theme rules.
- Root layout → Structured data: injects · Global metadata can include structured SEO data.
- Home page → Hero: composes · Home page starts with the hero section.
- Home page → Experience: composes · Home page includes the experience section.
- Home page → Projects: composes · Home page includes the project showcase.
- Home page → Skills: composes · Home page includes the skills section.
- Home page → Education: composes · Home page includes the education section.
- Home page → About: composes · Home page includes the about section.
- Home page → Contact: composes · Home page includes the contact section.
- Home page → Footer: composes · Home page ends with the footer.
- Home page → FAQ: composes · Home page includes supplementary FAQ content.
- Project detail → Projects data: reads · Dynamic project pages resolve content from the project dataset.
- Project detail → Project card: reuses · Project detail pages share presentation patterns with cards.
- Projects → Project card: renders · Project grid is built from reusable cards.
- Projects → Deep dive: opens · Showcase section can expand into a deeper modal view.
- Project card → Projects data: maps · Each card is populated from static project records.
- Deep dive → Projects data: reads · The detailed modal uses the same project data source.
- Projects data → Shared types: typed by · Project records follow shared portfolio types.
- Contact → Public text: links to · Contact and discoverability content can reference public text assets.
- Robots → Public text: supports · Crawler-facing text assets complement robots directives.
- Sitemap → Projects data: enumerates · Sitemap can reflect project-driven routes.
- Sitemap → Privacy page: includes · Sitemap includes standalone informational routes.
- Robots → Sitemap: points to · Robots rules complement the sitemap.
- IndexNow API → Projects data: signals · IndexNow notifications are triggered by content changes.
- UI primitives → Utils: uses · UI primitives rely on shared helpers.
- UI primitives → shadcn config: configured by · Primitive generation and conventions follow the shadcn config.
- Hero → UI primitives: uses · Sections are assembled from shared UI building blocks.
- Experience → UI primitives: uses · Section content is styled with common primitives.
- Skills → UI primitives: uses · Section content is styled with common primitives.
- Education → UI primitives: uses · Section content is styled with common primitives.
- About → UI primitives: uses · Section content is styled with common primitives.
- Contact → UI primitives: uses · Section content is styled with common primitives.
- Project detail → Project assets: displays · Project detail pages surface screenshot and showcase assets.