# kab5der4/portfolio-website architecture

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

- Interactive diagram: https://gitdiagram.com/kab5der4/portfolio-website
- Repository: https://github.com/kab5der4/portfolio-website

## Overview

#### Purpose and runtime
A single-page personal portfolio built with Next.js, React, and TypeScript. It presents professional profile content, skills, experience, projects, contact details, and a downloadable resume. It runs as a Next.js application locally and is deployed to Vercel per the README.

Primary application entry points:
- `src/app/layout.tsx` defines the shared document/application shell.
- `src/app/page.tsx` assembles the portfolio page.
- `src/app/globals.css` provides global visual styling.

#### App composition and navigation
The root page is a vertically composed landing page rather than a multi-route product application. `src/app/page.tsx` coordinates the major content sections and shared chrome:
- `src/components/layout/Navbar.tsx` provides top-level in-page navigation.
- `src/components/layout/Footer.tsx` closes the page and likely contains secondary links/contact information.
- Section anchors and navigation create the primary control flow: visitor selects a navbar link, then moves within the same document.

#### Content sections
Portfolio content is separated into independently maintainable React section components:
- `src/components/sections/HeroSection.tsx`
- `src/components/sections/AboutSection.tsx`
- `src/components/sections/ExperienceSection.tsx`
- `src/components/sections/ProjectsSection.tsx`
- `src/components/sections/SkillsSection.tsx`
- `src/components/sections/ContactSection.tsx`

These components are the core presentation boundary: portfolio data and markup remain localized by page domain while `page.tsx` controls section ordering.

#### Design-system primitives
Reusable UI components centralize the glassmorphism visual language and decorative elements:
- `src/components/ui/GlassCard.tsx` is the likely shared frosted-glass content container.
- `src/components/ui/GeometricSeparator.tsx` supplies repeated visual separation between page areas.
- `src/components/ui/Grainient.tsx` and `src/components/ui/Grainient.css` implement the textured/gradient background effect.

This boundary prevents repeated styling structures across content sections and supports consistent responsive rendering.

#### Animation flow
Framer Motion is the declared animation runtime. Reveal and micro-interaction behavior is encapsulated rather than embedded across every section:
- `src/components/ui/ScrollReveal.tsx` provides viewport/scroll-triggered entrance behavior.
- `src/components/ui/Grainient.tsx` likely owns animated background rendering.
- Section components under `src/components/sections/` consume these presentational capabilities.

The main performance-sensitive boundary is client-side animation and viewport interaction versus static portfolio content rendered through Next.js.

#### Assets and external boundaries
The only explicit downloadable asset is:
- `public/resume.pdf`

Next.js serves this file directly from the public asset path for the “Download Resume” action. No backend, database, authentication system, API integration, or third-party business service is represented in the repository tree. Deployment infrastructure is Vercel, while local development uses the Node.js/npm and Next.js toolchain defined by `package.json`.

Main entry points: [`src/app/page.tsx`](https://github.com/kab5der4/portfolio-website/blob/main/src/app/page.tsx) (Portfolio page), [`src/components/layout/Navbar.tsx`](https://github.com/kab5der4/portfolio-website/blob/main/src/components/layout/Navbar.tsx) (In-page navigation), [`src/components/sections/HeroSection.tsx`](https://github.com/kab5der4/portfolio-website/blob/main/src/components/sections/HeroSection.tsx) (Hero), [`src/components/sections/ProjectsSection.tsx`](https://github.com/kab5der4/portfolio-website/blob/main/src/components/sections/ProjectsSection.tsx) (Projects)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Next.js app"]
  node_next["Next.js runtime<br/>application runtime<br/>[package.json]"]
  node_layout["Application shell<br/>React layout<br/>[layout.tsx]"]
  node_page["Portfolio page<br/>React page<br/>[page.tsx]"]
  node_styles["Global styles<br/>CSS<br/>[globals.css]"]
  node_navbar["In-page navigation<br/>React component<br/>[Navbar.tsx]"]
  node_footer["Page footer<br/>React component<br/>[Footer.tsx]"]
end

subgraph group_sections["Portfolio sections"]
  node_hero["Hero<br/>React section<br/>[HeroSection.tsx]"]
  node_about["About<br/>React section<br/>[AboutSection.tsx]"]
  node_experience["Experience<br/>React section"]
  node_projects["Projects<br/>React section"]
  node_skills["Skills<br/>React section<br/>[SkillsSection.tsx]"]
  node_contact["Contact<br/>React section<br/>[ContactSection.tsx]"]
end

subgraph group_ui["Visual primitives"]
  node_glass["Glass card<br/>UI primitive<br/>[GlassCard.tsx]"]
  node_separator["Geometric separator<br/>UI primitive"]
  node_scroll_reveal["Scroll reveal<br/>animation primitive<br/>[ScrollReveal.tsx]"]
  node_grainient["Animated background<br/>visual effect<br/>[Grainient.tsx]"]
  node_grainient_css["Background effect styles<br/>CSS<br/>[Grainient.css]"]
end

node_visitor(("Portfolio visitor<br/>user"))
node_vercel{{"Vercel<br/>hosting"}}
node_resume["Downloadable resume<br/>static asset<br/>[resume.pdf]"]

node_visitor -->|"visits"| node_vercel
node_vercel -->|"hosts"| node_next
node_next -->|"renders"| node_layout
node_layout -->|"loads"| node_styles
node_layout -->|"wraps"| node_page
node_page -->|"composes"| node_navbar
node_page -->|"composes"| node_footer
node_page -->|"orders"| node_hero
node_page -->|"orders"| node_about
node_page -->|"orders"| node_experience
node_page -->|"orders"| node_projects
node_page -->|"orders"| node_skills
node_page -->|"orders"| node_contact
node_navbar -.->|"anchor navigation"| node_hero
node_navbar -.->|"anchor navigation"| node_about
node_navbar -.->|"anchor navigation"| node_experience
node_navbar -.->|"anchor navigation"| node_projects
node_navbar -.->|"anchor navigation"| node_skills
node_navbar -.->|"anchor navigation"| node_contact
node_hero -->|"downloads"| node_resume
node_experience -.->|"uses"| node_glass
node_projects -.->|"uses"| node_glass
node_hero -.->|"reveals with"| node_scroll_reveal
node_projects -.->|"reveals with"| node_scroll_reveal
node_page -->|"renders background"| node_grainient
node_grainient -->|"styles"| node_grainient_css
node_page -.->|"separates areas"| node_separator

click node_next "https://github.com/kab5der4/portfolio-website/blob/main/package.json"
click node_layout "https://github.com/kab5der4/portfolio-website/blob/main/src/app/layout.tsx"
click node_page "https://github.com/kab5der4/portfolio-website/blob/main/src/app/page.tsx"
click node_styles "https://github.com/kab5der4/portfolio-website/blob/main/src/app/globals.css"
click node_navbar "https://github.com/kab5der4/portfolio-website/blob/main/src/components/layout/Navbar.tsx"
click node_footer "https://github.com/kab5der4/portfolio-website/blob/main/src/components/layout/Footer.tsx"
click node_hero "https://github.com/kab5der4/portfolio-website/blob/main/src/components/sections/HeroSection.tsx"
click node_about "https://github.com/kab5der4/portfolio-website/blob/main/src/components/sections/AboutSection.tsx"
click node_experience "https://github.com/kab5der4/portfolio-website/blob/main/src/components/sections/ExperienceSection.tsx"
click node_projects "https://github.com/kab5der4/portfolio-website/blob/main/src/components/sections/ProjectsSection.tsx"
click node_skills "https://github.com/kab5der4/portfolio-website/blob/main/src/components/sections/SkillsSection.tsx"
click node_contact "https://github.com/kab5der4/portfolio-website/blob/main/src/components/sections/ContactSection.tsx"
click node_glass "https://github.com/kab5der4/portfolio-website/blob/main/src/components/ui/GlassCard.tsx"
click node_separator "https://github.com/kab5der4/portfolio-website/blob/main/src/components/ui/GeometricSeparator.tsx"
click node_scroll_reveal "https://github.com/kab5der4/portfolio-website/blob/main/src/components/ui/ScrollReveal.tsx"
click node_grainient "https://github.com/kab5der4/portfolio-website/blob/main/src/components/ui/Grainient.tsx"
click node_grainient_css "https://github.com/kab5der4/portfolio-website/blob/main/src/components/ui/Grainient.css"
click node_resume "https://github.com/kab5der4/portfolio-website/blob/main/public/resume.pdf"

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_next,node_layout,node_page,node_styles,node_navbar,node_footer toneBlue
class node_hero,node_about,node_experience,node_projects,node_skills,node_contact toneAmber
class node_glass,node_separator,node_scroll_reveal,node_grainient,node_grainient_css toneMint
class node_visitor,node_vercel,node_resume toneNeutral
```

## Components

### Next.js app

- [Next.js runtime](https://github.com/kab5der4/portfolio-website/blob/main/package.json): application runtime · Serves the single-page portfolio. · `package.json`
- [Application shell](https://github.com/kab5der4/portfolio-website/blob/main/src/app/layout.tsx): React layout · `src/app/layout.tsx`
- [Portfolio page](https://github.com/kab5der4/portfolio-website/blob/main/src/app/page.tsx): React page · Controls shared chrome and section order. · `src/app/page.tsx`
- [Global styles](https://github.com/kab5der4/portfolio-website/blob/main/src/app/globals.css): CSS · `src/app/globals.css`
- [In-page navigation](https://github.com/kab5der4/portfolio-website/blob/main/src/components/layout/Navbar.tsx): React component · Navigates to section anchors in the same document. · `src/components/layout/Navbar.tsx`
- [Page footer](https://github.com/kab5der4/portfolio-website/blob/main/src/components/layout/Footer.tsx): React component · `src/components/layout/Footer.tsx`

### Portfolio sections

- [Hero](https://github.com/kab5der4/portfolio-website/blob/main/src/components/sections/HeroSection.tsx): React section · `src/components/sections/HeroSection.tsx`
- [About](https://github.com/kab5der4/portfolio-website/blob/main/src/components/sections/AboutSection.tsx): React section · `src/components/sections/AboutSection.tsx`
- [Experience](https://github.com/kab5der4/portfolio-website/blob/main/src/components/sections/ExperienceSection.tsx): React section · `src/components/sections/ExperienceSection.tsx`
- [Projects](https://github.com/kab5der4/portfolio-website/blob/main/src/components/sections/ProjectsSection.tsx): React section · `src/components/sections/ProjectsSection.tsx`
- [Skills](https://github.com/kab5der4/portfolio-website/blob/main/src/components/sections/SkillsSection.tsx): React section · `src/components/sections/SkillsSection.tsx`
- [Contact](https://github.com/kab5der4/portfolio-website/blob/main/src/components/sections/ContactSection.tsx): React section · `src/components/sections/ContactSection.tsx`

### Visual primitives

- [Glass card](https://github.com/kab5der4/portfolio-website/blob/main/src/components/ui/GlassCard.tsx): UI primitive · Shared frosted-glass content container. · `src/components/ui/GlassCard.tsx`
- [Geometric separator](https://github.com/kab5der4/portfolio-website/blob/main/src/components/ui/GeometricSeparator.tsx): UI primitive · `src/components/ui/GeometricSeparator.tsx`
- [Scroll reveal](https://github.com/kab5der4/portfolio-website/blob/main/src/components/ui/ScrollReveal.tsx): animation primitive · Encapsulates viewport-triggered entrance effects. · `src/components/ui/ScrollReveal.tsx`
- [Animated background](https://github.com/kab5der4/portfolio-website/blob/main/src/components/ui/Grainient.tsx): visual effect · Textured gradient background rendering. · `src/components/ui/Grainient.tsx`
- [Background effect styles](https://github.com/kab5der4/portfolio-website/blob/main/src/components/ui/Grainient.css): CSS · `src/components/ui/Grainient.css`

### Other components

- **Portfolio visitor**: user
- **Vercel**: hosting · Deploys the Next.js application.
- [Downloadable resume](https://github.com/kab5der4/portfolio-website/blob/main/public/resume.pdf): static asset · Served directly by Next.js from the public path. · `public/resume.pdf`

## Connections

- Portfolio visitor → Vercel: visits
- Vercel → Next.js runtime: hosts
- Next.js runtime → Application shell: renders
- Application shell → Global styles: loads
- Application shell → Portfolio page: wraps
- Portfolio page → In-page navigation: composes
- Portfolio page → Page footer: composes
- Portfolio page → Hero: orders
- Portfolio page → About: orders
- Portfolio page → Experience: orders
- Portfolio page → Projects: orders
- Portfolio page → Skills: orders
- Portfolio page → Contact: orders
- In-page navigation → Hero: anchor navigation
- In-page navigation → About: anchor navigation
- In-page navigation → Experience: anchor navigation
- In-page navigation → Projects: anchor navigation
- In-page navigation → Skills: anchor navigation
- In-page navigation → Contact: anchor navigation
- Hero → Downloadable resume: downloads
- Experience → Glass card: uses
- Projects → Glass card: uses
- Hero → Scroll reveal: reveals with
- Projects → Scroll reveal: reveals with
- Portfolio page → Animated background: renders background
- Animated background → Background effect styles: styles
- Portfolio page → Geometric separator: separates areas