# afzalhabibi/latest-next-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/afzalhabibi/latest-next-portfolio
- Repository: https://github.com/afzalhabibi/latest-next-portfolio

## Overview

This is a Next.js personal portfolio for presenting professional background, projects, skills, and contact information. A visitor enters through the home page, browses portfolio sections or detail pages, and can follow contact and resume actions. The tree and excerpts support these major pages and shared presentation layers; several page implementations are unsampled, so their internal data wiring is not inferred.

Main entry points: [`src/app/page.tsx`](https://github.com/afzalhabibi/latest-next-portfolio/blob/main/src/app/page.tsx) (Home), [`src/app/contact/page.tsx`](https://github.com/afzalhabibi/latest-next-portfolio/blob/main/src/app/contact/page.tsx) (Contact), [`src/app/about/page.tsx`](https://github.com/afzalhabibi/latest-next-portfolio/blob/main/src/app/about/page.tsx) (About), [`src/app/projects/page.tsx`](https://github.com/afzalhabibi/latest-next-portfolio/blob/main/src/app/projects/page.tsx) (Projects)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_pages["Portfolio pages"]
  node_home["Home<br/>[page.tsx]"]
  node_about["About<br/>[page.tsx]"]
  node_projects["Projects<br/>[page.tsx]"]
  node_project_detail["Project detail<br/>[page.tsx]"]
  node_skills["Skills<br/>[page.tsx]"]
  node_skill_detail["Skill detail<br/>[page.tsx]"]
  node_resume["Resume<br/>[page.tsx]"]
  node_contact["Contact<br/>[page.tsx]"]
end

subgraph group_content["Portfolio content"]
  node_portfolio_data["Portfolio data"]
  node_resume_data["Resume data<br/>[resume-data.ts]"]
end

subgraph group_presentation["Shared presentation"]
  node_app_shell["App shell<br/>[AppShell.tsx]"]
  node_layout_parts["Layout components"]
  node_common_components["Common components"]
  node_theme_providers["Theme providers"]
end

subgraph group_behavior["Client behavior"]
  node_hooks["Interaction hooks"]
end

node_visitor(("Visitor"))
node_map["Embedded map"]

node_visitor -->|"opens"| node_home
node_visitor -->|"browses"| node_about
node_visitor -->|"browses"| node_projects
node_visitor -->|"opens"| node_project_detail
node_visitor -->|"browses"| node_skills
node_visitor -->|"opens"| node_skill_detail
node_visitor -->|"opens"| node_resume
node_visitor -->|"opens"| node_contact
node_home -->|"links to"| node_projects
node_home -->|"links to"| node_skills
node_home -->|"links to"| node_contact
node_home -->|"links to"| node_about
node_projects -->|"links to"| node_project_detail
node_skills -->|"links to"| node_skill_detail
node_app_shell -->|"renders"| node_layout_parts
node_app_shell -->|"provides"| node_theme_providers
node_home -.->|"reads"| node_portfolio_data
node_about -->|"reads"| node_portfolio_data
node_contact -->|"reads"| node_portfolio_data
node_resume -.->|"reads"| node_resume_data
node_home -->|"renders"| node_common_components
node_about -->|"renders"| node_common_components
node_projects -->|"renders"| node_common_components
node_contact -->|"renders"| node_common_components
node_home -->|"renders"| node_layout_parts
node_about -->|"renders"| node_layout_parts
node_projects -->|"renders"| node_layout_parts
node_contact -->|"renders"| node_layout_parts
node_contact -->|"embeds"| node_map
node_hooks -.->|"observes viewport and scroll"| node_visitor

click node_home "https://github.com/afzalhabibi/latest-next-portfolio/blob/main/src/app/page.tsx"
click node_about "https://github.com/afzalhabibi/latest-next-portfolio/blob/main/src/app/about/page.tsx"
click node_projects "https://github.com/afzalhabibi/latest-next-portfolio/blob/main/src/app/projects/page.tsx"
click node_project_detail "https://github.com/afzalhabibi/latest-next-portfolio/blob/main/src/app/projects/%5Bslug%5D/page.tsx"
click node_skills "https://github.com/afzalhabibi/latest-next-portfolio/blob/main/src/app/skills/page.tsx"
click node_skill_detail "https://github.com/afzalhabibi/latest-next-portfolio/blob/main/src/app/skills/%5Bslug%5D/page.tsx"
click node_resume "https://github.com/afzalhabibi/latest-next-portfolio/blob/main/src/app/resume/page.tsx"
click node_contact "https://github.com/afzalhabibi/latest-next-portfolio/blob/main/src/app/contact/page.tsx"
click node_app_shell "https://github.com/afzalhabibi/latest-next-portfolio/blob/main/src/components/layout/AppShell.tsx"
click node_layout_parts "https://github.com/afzalhabibi/latest-next-portfolio/tree/main/src/components/layout"
click node_common_components "https://github.com/afzalhabibi/latest-next-portfolio/tree/main/src/components/common"
click node_theme_providers "https://github.com/afzalhabibi/latest-next-portfolio/tree/main/src/components/providers"
click node_portfolio_data "https://github.com/afzalhabibi/latest-next-portfolio/tree/main/src/data"
click node_resume_data "https://github.com/afzalhabibi/latest-next-portfolio/blob/main/src/app/resume/resume-data.ts"
click node_hooks "https://github.com/afzalhabibi/latest-next-portfolio/tree/main/src/hooks"

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_home,node_about,node_projects,node_project_detail,node_skills,node_skill_detail,node_resume,node_contact toneBlue
class node_portfolio_data,node_resume_data toneAmber
class node_app_shell,node_layout_parts,node_common_components,node_theme_providers toneMint
class node_hooks toneRose
class node_visitor,node_map toneIndigo
```

## Components

### Portfolio pages

- [Home](https://github.com/afzalhabibi/latest-next-portfolio/blob/main/src/app/page.tsx): `src/app/page.tsx`
- [About](https://github.com/afzalhabibi/latest-next-portfolio/blob/main/src/app/about/page.tsx): `src/app/about/page.tsx`
- [Projects](https://github.com/afzalhabibi/latest-next-portfolio/blob/main/src/app/projects/page.tsx): `src/app/projects/page.tsx`
- [Project detail](https://github.com/afzalhabibi/latest-next-portfolio/blob/main/src/app/projects/%5Bslug%5D/page.tsx): `src/app/projects/[slug]/page.tsx`
- [Skills](https://github.com/afzalhabibi/latest-next-portfolio/blob/main/src/app/skills/page.tsx): `src/app/skills/page.tsx`
- [Skill detail](https://github.com/afzalhabibi/latest-next-portfolio/blob/main/src/app/skills/%5Bslug%5D/page.tsx): `src/app/skills/[slug]/page.tsx`
- [Resume](https://github.com/afzalhabibi/latest-next-portfolio/blob/main/src/app/resume/page.tsx): `src/app/resume/page.tsx`
- [Contact](https://github.com/afzalhabibi/latest-next-portfolio/blob/main/src/app/contact/page.tsx): `src/app/contact/page.tsx`

### Portfolio content

- [Portfolio data](https://github.com/afzalhabibi/latest-next-portfolio/tree/main/src/data): `src/data`
- [Resume data](https://github.com/afzalhabibi/latest-next-portfolio/blob/main/src/app/resume/resume-data.ts): `src/app/resume/resume-data.ts`

### Shared presentation

- [App shell](https://github.com/afzalhabibi/latest-next-portfolio/blob/main/src/components/layout/AppShell.tsx): `src/components/layout/AppShell.tsx`
- [Layout components](https://github.com/afzalhabibi/latest-next-portfolio/tree/main/src/components/layout): `src/components/layout`
- [Common components](https://github.com/afzalhabibi/latest-next-portfolio/tree/main/src/components/common): `src/components/common`
- [Theme providers](https://github.com/afzalhabibi/latest-next-portfolio/tree/main/src/components/providers): `src/components/providers`

### Client behavior

- [Interaction hooks](https://github.com/afzalhabibi/latest-next-portfolio/tree/main/src/hooks): `src/hooks`

### Other components

- **Visitor**
- **Embedded map**

## Connections

- Visitor → Home: opens
- Visitor → About: browses
- Visitor → Projects: browses
- Visitor → Project detail: opens
- Visitor → Skills: browses
- Visitor → Skill detail: opens
- Visitor → Resume: opens
- Visitor → Contact: opens
- Home → Projects: links to
- Home → Skills: links to
- Home → Contact: links to
- Home → About: links to
- Projects → Project detail: links to
- Skills → Skill detail: links to
- App shell → Layout components: renders
- App shell → Theme providers: provides
- Home → Portfolio data: reads
- About → Portfolio data: reads
- Contact → Portfolio data: reads
- Resume → Resume data: reads
- Home → Common components: renders
- About → Common components: renders
- Projects → Common components: renders
- Contact → Common components: renders
- Home → Layout components: renders
- About → Layout components: renders
- Projects → Layout components: renders
- Contact → Layout components: renders
- Contact → Embedded map: embeds
- Interaction hooks → Visitor: observes viewport and scroll