# adilmunawar/adilportfolio architecture

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

- Interactive diagram: https://gitdiagram.com/adilmunawar/adilportfolio
- Repository: https://github.com/adilmunawar/adilportfolio

## Overview

1. **Repository shape**
   This is a **Next.js App Router portfolio site** written in TypeScript. The architecture is mostly **static/content-driven** rather than database-driven: the homepage is assembled from reusable React sections, while a small server API handles chat.

2. **Application shell**
   The core app lives under `src/app/`. `layout.tsx` provides the global frame, `page.tsx` is the portfolio landing page, and `globals.css` defines shared styling. `robots.ts`, `sitemap.ts`, and `manifest.ts` show that the site is designed for search indexing and PWA-style metadata support.

3. **Homepage composition**
   The landing page is built as a **section-based composition** from `src/components/`. Major content areas include hero, skills, services, projects, case studies, blog, certifications, testimonials, stats, contact, badges, and achievements. This makes the page a modular aggregator rather than a monolithic template.

4. **UI component boundary**
   `src/components/ui/` contains a large set of reusable primitives and compound widgets, likely based on the shadcn/Radix pattern. These are the low-level building blocks used by the higher-level portfolio sections, keeping presentation concerns isolated from content assembly.

5. **Content/data layer**
   `src/lib/` is the main content store for the site. It contains JSON-backed datasets such as `blog-data.json`, `case-studies.json`, `github-contributions.json`, and `leetcode-stats.json`, plus shared helpers in `utils.ts`. Most “dynamic” content is therefore **file-backed and build-time friendly**, not fetched from a database at runtime.

6. **Static asset boundary**
   `public/` holds images, badges, certifications, testimonials, blog graphics, and site files like `robots.txt`, `llm.txt`, and `llms.txt`. This suggests the site serves a mix of portfolio media and crawler/AI consumption metadata directly from static hosting.

7. **Interactive assistant subsystem**
   The `src/components/Zenith/` area and `src/app/api/chat/route.ts` form a separate conversational feature. The UI side likely renders the assistant/orb/chat experience, while the API route is the server boundary for chat requests. This is the only clearly visible backend-style interaction point in the repo.

8. **Stats and external profile integration**
   Dedicated components for GitHub and LeetCode stats (`GitHubStats.tsx`, `LeetCodeStats.tsx`, badges/showcase sections) indicate that the site surfaces external developer-profile data. The data itself is stored locally in JSON, so the runtime UI reads precomputed snapshots rather than querying live services on every page load.

9. **Automation and regeneration pipeline**
   The `scripts/` folder and GitHub Actions workflows under `.github/workflows/` create an update pipeline for contribution stats, LeetCode stats, and year-based content. The flow is: **automation script or workflow → regenerated artifacts/templates → committed JSON/assets → rendered by React components**.

10. **Client-side helpers**
   `src/hooks/use-mobile.tsx` and `src/hooks/use-toast.ts` provide small cross-cutting client behaviors such as responsive detection and toast state. These are utility boundaries rather than core business logic.

11. **Styling and visual system**
   Styling is split between Tailwind configuration, global CSS, and component-scoped CSS files such as `ProfileCard.css` and `LogoLoop.css`. The design system is clearly tuned for a polished portfolio look with animated/interactive sections, but the architectural emphasis remains on reusable composition.

12. **Important diagram takeaway**
   For an architecture diagram, the key distinction is: **static portfolio content + generated profile stats + one chat API endpoint**. There is no visible separate database, queue, or microservice layer; instead, the repo centers on a Next.js frontend that consumes local content files and a lightweight server route for conversational interaction.

Main entry points: [`src/app/page.tsx`](https://github.com/adilmunawar/adilportfolio/blob/main/src/app/page.tsx) (Home page), [`src/components/ui/button.tsx`](https://github.com/adilmunawar/adilportfolio/blob/main/src/components/ui/button.tsx) (UI kit), [`src/lib/blog-data.json`](https://github.com/adilmunawar/adilportfolio/blob/main/src/lib/blog-data.json) (Content data), [`public/llms.txt`](https://github.com/adilmunawar/adilportfolio/blob/main/public/llms.txt) (Public assets)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_group_app["App shell"]
  node_node_layout["Layout<br/>app shell<br/>[layout.tsx]"]
  node_node_page["Home page<br/>app route<br/>[page.tsx]"]
  node_node_globals["Global CSS<br/>styles<br/>[globals.css]"]
  node_node_meta["SEO meta<br/>app metadata<br/>[robots.ts]"]
end

subgraph group_group_sections["Homepage sections"]
  node_node_hero["Hero<br/>section<br/>[HeroSection.tsx]"]
  node_node_skills["Skills<br/>section<br/>[SkillsSection.tsx]"]
  node_node_services["Services<br/>section"]
  node_node_projects["Projects<br/>section"]
  node_node_cases["Case studies<br/>section"]
  node_node_blog["Blog<br/>section<br/>[BlogSection.tsx]"]
  node_node_social["Proof<br/>section"]
end

subgraph group_group_ui["UI primitives"]
  node_node_ui["UI kit<br/>primitives<br/>[button.tsx]"]
  node_node_nav["Nav<br/>[Navigation.tsx]"]
  node_node_card["Cards<br/>visual components<br/>[ProfileCard.tsx]"]
end

subgraph group_group_content["Content store"]
  node_node_content[("Content data<br/>json store<br/>[blog-data.json]")]
  node_node_utils["Utils<br/>helpers<br/>[utils.ts]"]
end

subgraph group_group_assistant["Assistant"]
  node_node_assistant_ui["Assistant UI<br/>chat ui"]
  node_node_chat_api["Chat API<br/>server route<br/>[route.ts]"]
end

subgraph group_group_automation["Automation"]
  node_node_scripts["Scripts"]
  node_node_workflows["Workflows<br/>ci automation"]
end

subgraph group_group_static["Static assets"]
  node_node_public["Public assets<br/>static media<br/>[llms.txt]"]
end

node_node_layout -->|"loads"| node_node_globals
node_node_layout -->|"frames"| node_node_page
node_node_page -->|"composes"| node_node_hero
node_node_page -->|"composes"| node_node_skills
node_node_page -->|"composes"| node_node_services
node_node_page -->|"composes"| node_node_projects
node_node_page -->|"composes"| node_node_cases
node_node_page -->|"composes"| node_node_blog
node_node_page -->|"composes"| node_node_social
node_node_page -->|"uses"| node_node_nav
node_node_hero -->|"renders with"| node_node_ui
node_node_skills -->|"renders with"| node_node_ui
node_node_services -->|"renders with"| node_node_ui
node_node_projects -->|"renders with"| node_node_ui
node_node_cases -->|"reads"| node_node_content
node_node_blog -->|"reads"| node_node_content
node_node_social -->|"reads"| node_node_content
node_node_social -->|"shows"| node_node_public
node_node_card -->|"uses"| node_node_public
node_node_ui -->|"depends on"| node_node_utils
node_node_assistant_ui -->|"calls"| node_node_chat_api
node_node_chat_api -.->|"may read"| node_node_content
node_node_scripts -->|"regenerates"| node_node_content
node_node_workflows -->|"runs"| node_node_scripts
node_node_workflows -->|"publishes"| node_node_public
node_node_meta -->|"references"| node_node_public

click node_node_layout "https://github.com/adilmunawar/adilportfolio/blob/main/src/app/layout.tsx"
click node_node_page "https://github.com/adilmunawar/adilportfolio/blob/main/src/app/page.tsx"
click node_node_globals "https://github.com/adilmunawar/adilportfolio/blob/main/src/app/globals.css"
click node_node_meta "https://github.com/adilmunawar/adilportfolio/blob/main/src/app/robots.ts"
click node_node_hero "https://github.com/adilmunawar/adilportfolio/blob/main/src/components/HeroSection.tsx"
click node_node_skills "https://github.com/adilmunawar/adilportfolio/blob/main/src/components/SkillsSection.tsx"
click node_node_services "https://github.com/adilmunawar/adilportfolio/blob/main/src/components/ServicesSection.tsx"
click node_node_projects "https://github.com/adilmunawar/adilportfolio/blob/main/src/components/ProjectsSection.tsx"
click node_node_cases "https://github.com/adilmunawar/adilportfolio/blob/main/src/components/CaseStudiesSection.tsx"
click node_node_blog "https://github.com/adilmunawar/adilportfolio/blob/main/src/components/BlogSection.tsx"
click node_node_social "https://github.com/adilmunawar/adilportfolio/blob/main/src/components/CertificationsSection.tsx"
click node_node_ui "https://github.com/adilmunawar/adilportfolio/blob/main/src/components/ui/button.tsx"
click node_node_nav "https://github.com/adilmunawar/adilportfolio/blob/main/src/components/Navigation.tsx"
click node_node_card "https://github.com/adilmunawar/adilportfolio/blob/main/src/components/ProfileCard.tsx"
click node_node_content "https://github.com/adilmunawar/adilportfolio/blob/main/src/lib/blog-data.json"
click node_node_utils "https://github.com/adilmunawar/adilportfolio/blob/main/src/lib/utils.ts"
click node_node_assistant_ui "https://github.com/adilmunawar/adilportfolio/blob/main/src/components/Zenith/ZenithAssistant.tsx"
click node_node_chat_api "https://github.com/adilmunawar/adilportfolio/blob/main/src/app/api/chat/route.ts"
click node_node_scripts "https://github.com/adilmunawar/adilportfolio/blob/main/scripts/update-github-stats.mjs"
click node_node_workflows "https://github.com/adilmunawar/adilportfolio/blob/main/.github/workflows/update-contributions.yml"
click node_node_public "https://github.com/adilmunawar/adilportfolio/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_node_layout,node_node_page,node_node_globals,node_node_meta,node_node_public toneBlue
class node_node_hero,node_node_skills,node_node_services,node_node_projects,node_node_cases,node_node_blog,node_node_social toneAmber
class node_node_ui,node_node_nav,node_node_card toneMint
class node_node_content,node_node_utils toneRose
class node_node_assistant_ui,node_node_chat_api toneIndigo
class node_node_scripts,node_node_workflows toneTeal
```

## Components

### App shell

Next.js App Router entrypoints and metadata

- [Layout](https://github.com/adilmunawar/adilportfolio/blob/main/src/app/layout.tsx): app shell · Global frame and providers for the site · `src/app/layout.tsx`
- [Home page](https://github.com/adilmunawar/adilportfolio/blob/main/src/app/page.tsx): app route · Portfolio landing page assembly · `src/app/page.tsx`
- [Global CSS](https://github.com/adilmunawar/adilportfolio/blob/main/src/app/globals.css): styles · Shared app-wide styling · `src/app/globals.css`
- [SEO meta](https://github.com/adilmunawar/adilportfolio/blob/main/src/app/robots.ts): app metadata · Robots, sitemap, and manifest outputs · `src/app/robots.ts`

### Homepage sections

Composable landing-page content blocks

- [Hero](https://github.com/adilmunawar/adilportfolio/blob/main/src/components/HeroSection.tsx): section · Top-of-page introduction and positioning · `src/components/HeroSection.tsx`
- [Skills](https://github.com/adilmunawar/adilportfolio/blob/main/src/components/SkillsSection.tsx): section · Capabilities and technologies section · `src/components/SkillsSection.tsx`
- [Services](https://github.com/adilmunawar/adilportfolio/blob/main/src/components/ServicesSection.tsx): section · Offerings and engagement options · `src/components/ServicesSection.tsx`
- [Projects](https://github.com/adilmunawar/adilportfolio/blob/main/src/components/ProjectsSection.tsx): section · Project showcase section · `src/components/ProjectsSection.tsx`
- [Case studies](https://github.com/adilmunawar/adilportfolio/blob/main/src/components/CaseStudiesSection.tsx): section · Narrative case study section · `src/components/CaseStudiesSection.tsx`
- [Blog](https://github.com/adilmunawar/adilportfolio/blob/main/src/components/BlogSection.tsx): section · Article and writing highlights · `src/components/BlogSection.tsx`
- [Proof](https://github.com/adilmunawar/adilportfolio/blob/main/src/components/CertificationsSection.tsx): section · Certifications, testimonials, stats, badges, and achievements · `src/components/CertificationsSection.tsx`

### UI primitives

Reusable low-level widgets and shared visual helpers

- [UI kit](https://github.com/adilmunawar/adilportfolio/blob/main/src/components/ui/button.tsx): primitives · Reusable component library for the portfolio sections · `src/components/ui/button.tsx`
- [Nav](https://github.com/adilmunawar/adilportfolio/blob/main/src/components/Navigation.tsx): navigation · Site navigation and section linking · `src/components/Navigation.tsx`
- [Cards](https://github.com/adilmunawar/adilportfolio/blob/main/src/components/ProfileCard.tsx): visual components · Profile and looping visual presentation pieces · `src/components/ProfileCard.tsx`

### Content store

File-backed data and utilities used by the site

- [Content data](https://github.com/adilmunawar/adilportfolio/blob/main/src/lib/blog-data.json): json store · Blog, case study, GitHub, and LeetCode snapshots · `src/lib/blog-data.json`
- [Utils](https://github.com/adilmunawar/adilportfolio/blob/main/src/lib/utils.ts): helpers · Shared library helpers used across components · `src/lib/utils.ts`

### Assistant

Conversational UI and chat API boundary

- [Assistant UI](https://github.com/adilmunawar/adilportfolio/blob/main/src/components/Zenith/ZenithAssistant.tsx): chat ui · Zenith assistant, chat, and orb experience · `src/components/Zenith/ZenithAssistant.tsx`
- [Chat API](https://github.com/adilmunawar/adilportfolio/blob/main/src/app/api/chat/route.ts): server route · Backend boundary for assistant requests · `src/app/api/chat/route.ts`

### Automation

Scripts and workflows that regenerate content snapshots

- [Scripts](https://github.com/adilmunawar/adilportfolio/blob/main/scripts/update-github-stats.mjs): regen scripts · Generators for profile stats and scaffolded assets · `scripts/update-github-stats.mjs`
- [Workflows](https://github.com/adilmunawar/adilportfolio/blob/main/.github/workflows/update-contributions.yml): ci automation · GitHub Actions that refresh generated portfolio data · `.github/workflows/update-contributions.yml`

### Static assets

Public media and crawler-facing site files

- [Public assets](https://github.com/adilmunawar/adilportfolio/blob/main/public/llms.txt): static media · Images, badges, test files, and crawler metadata · `public/llms.txt`

## Connections

- Layout → Global CSS: loads · Applies shared global styles to the app shell
- Layout → Home page: frames · Provides the root shell around the home route
- Home page → Hero: composes · Builds the landing page from section components
- Home page → Skills: composes · Builds the landing page from section components
- Home page → Services: composes · Builds the landing page from section components
- Home page → Projects: composes · Builds the landing page from section components
- Home page → Case studies: composes · Builds the landing page from section components
- Home page → Blog: composes · Builds the landing page from section components
- Home page → Proof: composes · Builds the landing page from proof sections
- Home page → Nav: uses · Wires navigation into the page experience
- Hero → UI kit: renders with · Uses reusable primitives for presentation
- Skills → UI kit: renders with · Uses reusable primitives for presentation
- Services → UI kit: renders with · Uses reusable primitives for presentation
- Projects → UI kit: renders with · Uses reusable primitives for presentation
- Case studies → Content data: reads · Consumes local case study content snapshots
- Blog → Content data: reads · Consumes local blog content snapshots
- Proof → Content data: reads · Consumes local stats and proof data
- Proof → Public assets: shows · Displays static badges, certifications, and media
- Cards → Public assets: uses · Displays site imagery and visual assets
- UI kit → Utils: depends on · Shares common helper functions and class utilities
- Assistant UI → Chat API: calls · Sends chat messages to the server route
- Chat API → Content data: may read · Can leverage local content when responding
- Scripts → Content data: regenerates · Updates JSON snapshots and derived portfolio data
- Workflows → Scripts: runs · Automates regeneration in CI
- Workflows → Public assets: publishes · Updates static artifacts committed to the site
- SEO meta → Public assets: references · Exposes crawler-facing site files and metadata