# makeshkumar103/ai-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/makeshkumar103/ai-portfolio
- Repository: https://github.com/makeshkumar103/ai-portfolio

## Overview

#### Purpose and Runtime
This repository is a single-page personal portfolio implemented with Next.js and TypeScript. It uses the App Router and is intended to run as a Node.js-served Next.js application, locally via `npm run dev` and deployable to Vercel. No backend, API routes, database, or external service integration is present in the supplied tree.

#### Application Entry and Shell
The App Router entry is `src/app/page.tsx`, which composes the portfolio page. `src/app/layout.tsx` provides the root document/layout boundary, including global metadata and application-wide font or body setup. `src/app/globals.css` defines global styling and is the shared visual foundation.

#### Page Composition
The page is organized as independently rendered section components, likely assembled in display order by `src/app/page.tsx`. The primary content stages are:
- Hero/introduction: `src/components/HeroSection.tsx`
- About and summary metrics: `src/components/AboutSection.tsx`, `src/components/StatsSection.tsx`
- Skills and AI-focused content: `src/components/SkillsSection.tsx`, `src/components/AiSection.tsx`
- Career history and education: `src/components/ExperienceSection.tsx`, `src/components/EducationSection.tsx`
- Portfolio work and contact content: `src/components/ProjectsSection.tsx`, `src/components/ContactSection.tsx`

These components form presentation boundaries rather than independently routed screens.

#### Navigation and Page Controls
`src/components/Navbar.tsx` is the primary in-page navigation boundary, expected to direct users to section anchors within the single document. `src/components/BackToTop.tsx` provides scroll-position-dependent navigation back to the page start. `src/components/Footer.tsx` closes the shared page structure and likely contains secondary links or attribution.

#### Control and Data Flow
The main flow is static composition: Next.js renders `src/app/layout.tsx`, then `src/app/page.tsx`, which supplies the ordered section components. Content appears to be embedded directly in component source rather than fetched from a CMS or API. User interaction is limited to client-side browser behavior such as anchor navigation and scrolling; any components using browser events must cross the Next.js server/client component boundary via client-component directives.

#### Styling and Assets
Global CSS enters through `src/app/globals.css`; section components likely own their markup and class usage. Static images, icons, or downloadable assets belong under `public/`, which Next.js exposes at site-root URLs. Build behavior and framework settings are controlled by `next.config.ts`.

#### Infrastructure Boundaries
The project depends on the Next.js runtime and its React rendering model, with package dependencies defined in `package.json`. The README identifies Vercel as the intended straightforward deployment target. There are no repository-visible persistence, authentication, messaging, analytics, or third-party API boundaries.

Main entry points: [`src/app/page.tsx`](https://github.com/makeshkumar103/ai-portfolio/blob/main/src/app/page.tsx) (Portfolio page), [`src/app/layout.tsx`](https://github.com/makeshkumar103/ai-portfolio/blob/main/src/app/layout.tsx) (Root layout), [`src/components/HeroSection.tsx`](https://github.com/makeshkumar103/ai-portfolio/blob/main/src/components/HeroSection.tsx) (Hero), [`src/components/Navbar.tsx`](https://github.com/makeshkumar103/ai-portfolio/blob/main/src/components/Navbar.tsx) (Navbar)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App Router"]
  node_layout["Root layout<br/>document shell<br/>[layout.tsx]"]
  node_page["Portfolio page<br/>route entry<br/>[page.tsx]"]
  node_globals["Global styles<br/>CSS foundation<br/>[globals.css]"]
end

subgraph group_sections["Portfolio Sections"]
  node_hero["Hero<br/>section component<br/>[HeroSection.tsx]"]
  node_about["About<br/>section component<br/>[AboutSection.tsx]"]
  node_stats["Stats<br/>section component<br/>[StatsSection.tsx]"]
  node_skills["Skills<br/>section component<br/>[SkillsSection.tsx]"]
  node_ai["AI content<br/>section component<br/>[AiSection.tsx]"]
  node_experience["Experience<br/>section component"]
  node_education["Education<br/>section component"]
  node_projects["Projects<br/>section component"]
  node_contact["Contact<br/>section component<br/>[ContactSection.tsx]"]
end

subgraph group_navigation["Page Navigation"]
  node_navbar["Navbar<br/>anchor navigation<br/>[Navbar.tsx]"]
  node_backtotop["Back to top<br/>scroll control<br/>[BackToTop.tsx]"]
  node_footer["Footer<br/>shared page chrome<br/>[Footer.tsx]"]
end

node_next{{"Next.js runtime<br/>framework runtime"}}
node_assets["Static assets<br/>public files"]
node_vercel{{"Vercel<br/>deployment target"}}

node_next -->|"renders"| node_layout
node_layout -->|"hosts"| node_page
node_layout -->|"imports"| node_globals
node_page -->|"includes"| node_navbar
node_page -->|"composes"| node_hero
node_page -->|"composes"| node_about
node_page -->|"composes"| node_stats
node_page -->|"composes"| node_skills
node_page -->|"composes"| node_ai
node_page -->|"composes"| node_experience
node_page -->|"composes"| node_education
node_page -->|"composes"| node_projects
node_page -->|"composes"| node_contact
node_page -->|"includes"| node_backtotop
node_page -->|"includes"| node_footer
node_navbar -.->|"anchor navigation"| node_hero
node_backtotop -.->|"scrolls to top"| node_hero
node_assets -.->|"serves media to"| node_page
node_next -.->|"deploys to"| node_vercel

click node_layout "https://github.com/makeshkumar103/ai-portfolio/blob/main/src/app/layout.tsx"
click node_page "https://github.com/makeshkumar103/ai-portfolio/blob/main/src/app/page.tsx"
click node_globals "https://github.com/makeshkumar103/ai-portfolio/blob/main/src/app/globals.css"
click node_hero "https://github.com/makeshkumar103/ai-portfolio/blob/main/src/components/HeroSection.tsx"
click node_about "https://github.com/makeshkumar103/ai-portfolio/blob/main/src/components/AboutSection.tsx"
click node_stats "https://github.com/makeshkumar103/ai-portfolio/blob/main/src/components/StatsSection.tsx"
click node_skills "https://github.com/makeshkumar103/ai-portfolio/blob/main/src/components/SkillsSection.tsx"
click node_ai "https://github.com/makeshkumar103/ai-portfolio/blob/main/src/components/AiSection.tsx"
click node_experience "https://github.com/makeshkumar103/ai-portfolio/blob/main/src/components/ExperienceSection.tsx"
click node_education "https://github.com/makeshkumar103/ai-portfolio/blob/main/src/components/EducationSection.tsx"
click node_projects "https://github.com/makeshkumar103/ai-portfolio/blob/main/src/components/ProjectsSection.tsx"
click node_contact "https://github.com/makeshkumar103/ai-portfolio/blob/main/src/components/ContactSection.tsx"
click node_navbar "https://github.com/makeshkumar103/ai-portfolio/blob/main/src/components/Navbar.tsx"
click node_backtotop "https://github.com/makeshkumar103/ai-portfolio/blob/main/src/components/BackToTop.tsx"
click node_footer "https://github.com/makeshkumar103/ai-portfolio/blob/main/src/components/Footer.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_layout,node_page,node_globals toneBlue
class node_hero,node_about,node_stats,node_skills,node_ai,node_experience,node_education,node_projects,node_contact toneAmber
class node_navbar,node_backtotop,node_footer toneMint
class node_next,node_assets,node_vercel toneNeutral
```

## Components

### App Router

- [Root layout](https://github.com/makeshkumar103/ai-portfolio/blob/main/src/app/layout.tsx): document shell · Provides metadata and shared body setup. · `src/app/layout.tsx`
- [Portfolio page](https://github.com/makeshkumar103/ai-portfolio/blob/main/src/app/page.tsx): route entry · Composes the single-page portfolio in display order. · `src/app/page.tsx`
- [Global styles](https://github.com/makeshkumar103/ai-portfolio/blob/main/src/app/globals.css): CSS foundation · `src/app/globals.css`

### Portfolio Sections

- [Hero](https://github.com/makeshkumar103/ai-portfolio/blob/main/src/components/HeroSection.tsx): section component · `src/components/HeroSection.tsx`
- [About](https://github.com/makeshkumar103/ai-portfolio/blob/main/src/components/AboutSection.tsx): section component · `src/components/AboutSection.tsx`
- [Stats](https://github.com/makeshkumar103/ai-portfolio/blob/main/src/components/StatsSection.tsx): section component · `src/components/StatsSection.tsx`
- [Skills](https://github.com/makeshkumar103/ai-portfolio/blob/main/src/components/SkillsSection.tsx): section component · `src/components/SkillsSection.tsx`
- [AI content](https://github.com/makeshkumar103/ai-portfolio/blob/main/src/components/AiSection.tsx): section component · `src/components/AiSection.tsx`
- [Experience](https://github.com/makeshkumar103/ai-portfolio/blob/main/src/components/ExperienceSection.tsx): section component · `src/components/ExperienceSection.tsx`
- [Education](https://github.com/makeshkumar103/ai-portfolio/blob/main/src/components/EducationSection.tsx): section component · `src/components/EducationSection.tsx`
- [Projects](https://github.com/makeshkumar103/ai-portfolio/blob/main/src/components/ProjectsSection.tsx): section component · `src/components/ProjectsSection.tsx`
- [Contact](https://github.com/makeshkumar103/ai-portfolio/blob/main/src/components/ContactSection.tsx): section component · `src/components/ContactSection.tsx`

### Page Navigation

- [Navbar](https://github.com/makeshkumar103/ai-portfolio/blob/main/src/components/Navbar.tsx): anchor navigation · Navigates to sections within the document. · `src/components/Navbar.tsx`
- [Back to top](https://github.com/makeshkumar103/ai-portfolio/blob/main/src/components/BackToTop.tsx): scroll control · Browser-driven return-to-page-start control. · `src/components/BackToTop.tsx`
- [Footer](https://github.com/makeshkumar103/ai-portfolio/blob/main/src/components/Footer.tsx): shared page chrome · `src/components/Footer.tsx`

### Other components

- **Next.js runtime**: framework runtime · Node.js-served App Router application.
- **Static assets**: public files · Images and downloads are served at site-root URLs.
- **Vercel**: deployment target

## Connections

- Next.js runtime → Root layout: renders
- Root layout → Portfolio page: hosts
- Root layout → Global styles: imports
- Portfolio page → Navbar: includes
- Portfolio page → Hero: composes
- Portfolio page → About: composes
- Portfolio page → Stats: composes
- Portfolio page → Skills: composes
- Portfolio page → AI content: composes
- Portfolio page → Experience: composes
- Portfolio page → Education: composes
- Portfolio page → Projects: composes
- Portfolio page → Contact: composes
- Portfolio page → Back to top: includes
- Portfolio page → Footer: includes
- Navbar → Hero: anchor navigation
- Back to top → Hero: scrolls to top
- Static assets → Portfolio page: serves media to
- Next.js runtime → Vercel: deploys to