# hamzacodebase/portfolio-website architecture

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

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

## Overview

This is a personal developer portfolio implemented as a React single-page site. A visitor enters through the app shell, browses profile, skills, selected projects, career and education, and can reach the contact section or follow social links. The project list opens case-study details in a modal; the contact section provides a validated form and email-copy interaction. The sampled source confirms the shell, several section-to-data relationships, and analytics mounting; unsampled section internals and the GitHub stats integration are represented without speculative wiring.

Main entry points: [`src/App.tsx`](https://github.com/hamzacodebase/portfolio-website/blob/main/src/App.tsx) (Page shell), [`src/lib/data.ts`](https://github.com/hamzacodebase/portfolio-website/blob/main/src/lib/data.ts) (Portfolio content), [`src/main.tsx`](https://github.com/hamzacodebase/portfolio-website/blob/main/src/main.tsx) (React entry), [`src/components/projects.tsx`](https://github.com/hamzacodebase/portfolio-website/blob/main/src/components/projects.tsx) (Project portfolio)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Site runtime"]
  node_main["React entry<br/>[main.tsx]"]
  node_app["Page shell<br/>[App.tsx]"]
  node_navbar["Navigation<br/>[navbar.tsx]"]
  node_progress["Reading progress"]
  node_reveal["Section reveals<br/>[reveal.tsx]"]
  node_data["Portfolio content<br/>[data.ts]"]
end

subgraph group_profile["Profile and credentials"]
  node_hero["Hero<br/>[hero.tsx]"]
  node_about["About<br/>[about.tsx]"]
  node_education["Education<br/>[education.tsx]"]
end

subgraph group_work["Work and skills"]
  node_skills["Skills<br/>[skills.tsx]"]
  node_projects["Project portfolio<br/>[projects.tsx]"]
  node_modal["Case study modal<br/>[modal.tsx]"]
  node_experience["Experience<br/>[experience.tsx]"]
  node_github["GitHub activity<br/>[github-stats.tsx]"]
end

subgraph group_engagement["Visitor engagement"]
  node_contact["Contact<br/>[contact.tsx]"]
  node_footer["Footer<br/>[footer.tsx]"]
  node_konami["Konami easter egg<br/>[konami-egg.tsx]"]
end

node_visitor(("Visitor"))
node_analytics["Vercel Analytics"]

node_visitor -->|"opens site"| node_main
node_main -->|"mounts"| node_app
node_main -.->|"renders in production"| node_analytics
node_main -->|"greeting reads"| node_data
node_app -->|"renders"| node_progress
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_about
node_app -->|"renders"| node_skills
node_app -->|"renders"| node_projects
node_app -->|"renders"| node_experience
node_app -->|"renders"| node_education
node_app -->|"renders"| node_github
node_app -->|"renders"| node_contact
node_app -->|"renders"| node_footer
node_app -->|"renders"| node_konami
node_app -->|"wraps sections"| node_reveal
node_hero -->|"reads profile and stats"| node_data
node_navbar -->|"reads links"| node_data
node_projects -->|"reads projects"| node_data
node_projects -->|"opens details"| node_modal
node_experience -->|"reads roles"| node_data
node_contact -->|"reads social links"| node_data

click node_main "https://github.com/hamzacodebase/portfolio-website/blob/main/src/main.tsx"
click node_app "https://github.com/hamzacodebase/portfolio-website/blob/main/src/App.tsx"
click node_navbar "https://github.com/hamzacodebase/portfolio-website/blob/main/src/components/navbar.tsx"
click node_progress "https://github.com/hamzacodebase/portfolio-website/blob/main/src/components/reading-progress.tsx"
click node_reveal "https://github.com/hamzacodebase/portfolio-website/blob/main/src/components/reveal.tsx"
click node_hero "https://github.com/hamzacodebase/portfolio-website/blob/main/src/components/hero.tsx"
click node_about "https://github.com/hamzacodebase/portfolio-website/blob/main/src/components/about.tsx"
click node_education "https://github.com/hamzacodebase/portfolio-website/blob/main/src/components/education.tsx"
click node_skills "https://github.com/hamzacodebase/portfolio-website/blob/main/src/components/skills.tsx"
click node_projects "https://github.com/hamzacodebase/portfolio-website/blob/main/src/components/projects.tsx"
click node_modal "https://github.com/hamzacodebase/portfolio-website/blob/main/src/components/modal.tsx"
click node_experience "https://github.com/hamzacodebase/portfolio-website/blob/main/src/components/experience.tsx"
click node_github "https://github.com/hamzacodebase/portfolio-website/blob/main/src/components/github-stats.tsx"
click node_contact "https://github.com/hamzacodebase/portfolio-website/blob/main/src/components/contact.tsx"
click node_footer "https://github.com/hamzacodebase/portfolio-website/blob/main/src/components/footer.tsx"
click node_konami "https://github.com/hamzacodebase/portfolio-website/blob/main/src/components/konami-egg.tsx"
click node_data "https://github.com/hamzacodebase/portfolio-website/blob/main/src/lib/data.ts"

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_main,node_app,node_navbar,node_progress,node_reveal,node_data toneBlue
class node_hero,node_about,node_education toneAmber
class node_skills,node_projects,node_modal,node_experience,node_github toneMint
class node_contact,node_footer,node_konami toneRose
class node_visitor,node_analytics toneIndigo
```

## Components

### Site runtime

- [React entry](https://github.com/hamzacodebase/portfolio-website/blob/main/src/main.tsx): `src/main.tsx`
- [Page shell](https://github.com/hamzacodebase/portfolio-website/blob/main/src/App.tsx): `src/App.tsx`
- [Navigation](https://github.com/hamzacodebase/portfolio-website/blob/main/src/components/navbar.tsx): `src/components/navbar.tsx`
- [Reading progress](https://github.com/hamzacodebase/portfolio-website/blob/main/src/components/reading-progress.tsx): `src/components/reading-progress.tsx`
- [Section reveals](https://github.com/hamzacodebase/portfolio-website/blob/main/src/components/reveal.tsx): `src/components/reveal.tsx`
- [Portfolio content](https://github.com/hamzacodebase/portfolio-website/blob/main/src/lib/data.ts): `src/lib/data.ts`

### Profile and credentials

- [Hero](https://github.com/hamzacodebase/portfolio-website/blob/main/src/components/hero.tsx): `src/components/hero.tsx`
- [About](https://github.com/hamzacodebase/portfolio-website/blob/main/src/components/about.tsx): `src/components/about.tsx`
- [Education](https://github.com/hamzacodebase/portfolio-website/blob/main/src/components/education.tsx): `src/components/education.tsx`

### Work and skills

- [Skills](https://github.com/hamzacodebase/portfolio-website/blob/main/src/components/skills.tsx): `src/components/skills.tsx`
- [Project portfolio](https://github.com/hamzacodebase/portfolio-website/blob/main/src/components/projects.tsx): `src/components/projects.tsx`
- [Case study modal](https://github.com/hamzacodebase/portfolio-website/blob/main/src/components/modal.tsx): `src/components/modal.tsx`
- [Experience](https://github.com/hamzacodebase/portfolio-website/blob/main/src/components/experience.tsx): `src/components/experience.tsx`
- [GitHub activity](https://github.com/hamzacodebase/portfolio-website/blob/main/src/components/github-stats.tsx): `src/components/github-stats.tsx`

### Visitor engagement

- [Contact](https://github.com/hamzacodebase/portfolio-website/blob/main/src/components/contact.tsx): `src/components/contact.tsx`
- [Footer](https://github.com/hamzacodebase/portfolio-website/blob/main/src/components/footer.tsx): `src/components/footer.tsx`
- [Konami easter egg](https://github.com/hamzacodebase/portfolio-website/blob/main/src/components/konami-egg.tsx): `src/components/konami-egg.tsx`

### Other components

- **Visitor**
- **Vercel Analytics**

## Connections

- Visitor → React entry: opens site
- React entry → Page shell: mounts
- React entry → Vercel Analytics: renders in production
- React entry → Portfolio content: greeting reads
- Page shell → Reading progress: renders
- Page shell → Navigation: renders
- Page shell → Hero: renders
- Page shell → About: renders
- Page shell → Skills: renders
- Page shell → Project portfolio: renders
- Page shell → Experience: renders
- Page shell → Education: renders
- Page shell → GitHub activity: renders
- Page shell → Contact: renders
- Page shell → Footer: renders
- Page shell → Konami easter egg: renders
- Page shell → Section reveals: wraps sections
- Hero → Portfolio content: reads profile and stats
- Navigation → Portfolio content: reads links
- Project portfolio → Portfolio content: reads projects
- Project portfolio → Case study modal: opens details
- Experience → Portfolio content: reads roles
- Contact → Portfolio content: reads social links