# farhan-labib-afk/portfolio-website architecture

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

- Interactive diagram: https://gitdiagram.com/farhan-labib-afk/portfolio-website
- Repository: https://github.com/farhan-labib-afk/portfolio-website

## Overview

This is a React portfolio site presenting its owner’s profile, work history, projects, skills, résumé, and contact details. A visitor enters through the browser-rendered app, browses the composed sections, and can explore project cards and details. Research is documented as a capability and has its own component, but it is not composed in the sampled App.tsx. The graph follows relationships shown in excerpts or the source index; unsampled component behavior and UI integrations are not inferred.

Main entry points: [`src/app/App.tsx`](https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/App.tsx) (Page composition), [`src/app/components/Hero.tsx`](https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/Hero.tsx) (Hero), [`src/app/components/ui/button.tsx`](https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/ui/button.tsx) (Button primitive), [`src/app/components/Projects.tsx`](https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/Projects.tsx) (Projects section)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["App entry"]
  node_main["React mount<br/>[main.tsx]"]
  node_app["Page composition<br/>[App.tsx]"]
end

subgraph group_portfolio["Portfolio sections"]
  node_navigation["Navigation<br/>[Navigation.tsx]"]
  node_hero["Hero<br/>[Hero.tsx]"]
  node_about["About<br/>[About.tsx]"]
  node_experience["Experience<br/>[Experience.tsx]"]
  node_skills["Skills<br/>[Skills.tsx]"]
  node_resume["Résumé<br/>[Resume.tsx]"]
  node_contact["Contact<br/>[Contact.tsx]"]
  node_footer["Footer<br/>[Footer.tsx]"]
  node_research["Research<br/>[Research.tsx]"]
end

subgraph group_projects["Project showcase"]
  node_projects_section["Projects section<br/>[Projects.tsx]"]
  node_project_data["Project catalog<br/>[projects.ts]"]
  node_project_card["Project card<br/>[ProjectCard.tsx]"]
  node_project_modal["Project details<br/>[ProjectModal.tsx]"]
end

subgraph group_ui["UI building blocks"]
  node_button["Button primitive<br/>[button.tsx]"]
  node_dialog["Dialog primitive<br/>[dialog.tsx]"]
  node_sheet["Sheet primitive<br/>[sheet.tsx]"]
  node_tooltip["Tooltip primitive<br/>[tooltip.tsx]"]
  node_classes["Class utilities<br/>[utils.ts]"]
end

node_visitor(("Visitor"))
node_browser(("Browser"))
node_github(("GitHub"))
node_linkedin(("LinkedIn"))
node_email(("Email"))

node_visitor -->|"visits"| node_browser
node_browser -->|"loads"| node_main
node_main -->|"mounts"| node_app
node_app -->|"renders"| node_navigation
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_about
node_app -->|"renders"| node_experience
node_app -->|"renders"| node_projects_section
node_app -->|"renders"| node_skills
node_app -->|"renders"| node_resume
node_app -->|"renders"| node_contact
node_app -->|"renders"| node_footer
node_projects_section -->|"reads"| node_project_data
node_projects_section -->|"renders"| node_project_card
node_projects_section -->|"renders"| node_project_modal
node_project_modal -->|"uses"| node_dialog
node_hero -->|"reads"| node_project_data
node_hero -->|"uses"| node_button
node_navigation -->|"uses"| node_button
node_project_card -->|"uses"| node_button
node_project_modal -->|"uses"| node_button
node_resume -->|"uses"| node_button
node_hero -->|"links to"| node_github
node_hero -->|"links to"| node_linkedin
node_hero -->|"links to"| node_email
node_button -->|"combines classes"| node_classes
node_dialog -->|"combines classes"| node_classes
node_sheet -->|"combines classes"| node_classes
node_tooltip -->|"combines classes"| node_classes

click node_main "https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/main.tsx"
click node_app "https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/App.tsx"
click node_navigation "https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/Navigation.tsx"
click node_hero "https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/Hero.tsx"
click node_about "https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/About.tsx"
click node_experience "https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/Experience.tsx"
click node_skills "https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/Skills.tsx"
click node_resume "https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/Resume.tsx"
click node_contact "https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/Contact.tsx"
click node_footer "https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/Footer.tsx"
click node_research "https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/Research.tsx"
click node_projects_section "https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/Projects.tsx"
click node_project_data "https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/data/projects.ts"
click node_project_card "https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/ProjectCard.tsx"
click node_project_modal "https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/ProjectModal.tsx"
click node_button "https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/ui/button.tsx"
click node_dialog "https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/ui/dialog.tsx"
click node_sheet "https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/ui/sheet.tsx"
click node_tooltip "https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/ui/tooltip.tsx"
click node_classes "https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/ui/utils.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_browser toneBlue
class node_navigation,node_hero,node_about,node_experience,node_skills,node_resume,node_contact,node_footer,node_research toneAmber
class node_projects_section,node_project_data,node_project_card,node_project_modal toneMint
class node_button,node_dialog,node_sheet,node_tooltip,node_classes toneRose
class node_visitor,node_github,node_linkedin,node_email toneIndigo
```

## Components

### App entry

- [React mount](https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/main.tsx): `src/main.tsx`
- [Page composition](https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/App.tsx): `src/app/App.tsx`

### Portfolio sections

- [Navigation](https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/Navigation.tsx): `src/app/components/Navigation.tsx`
- [Hero](https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/Hero.tsx): `src/app/components/Hero.tsx`
- [About](https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/About.tsx): `src/app/components/About.tsx`
- [Experience](https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/Experience.tsx): `src/app/components/Experience.tsx`
- [Skills](https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/Skills.tsx): `src/app/components/Skills.tsx`
- [Résumé](https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/Resume.tsx): `src/app/components/Resume.tsx`
- [Contact](https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/Contact.tsx): `src/app/components/Contact.tsx`
- [Footer](https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/Footer.tsx): `src/app/components/Footer.tsx`
- [Research](https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/Research.tsx): `src/app/components/Research.tsx`

### Project showcase

- [Projects section](https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/Projects.tsx): `src/app/components/Projects.tsx`
- [Project catalog](https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/data/projects.ts): `src/data/projects.ts`
- [Project card](https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/ProjectCard.tsx): `src/app/components/ProjectCard.tsx`
- [Project details](https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/ProjectModal.tsx): `src/app/components/ProjectModal.tsx`

### UI building blocks

- [Button primitive](https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/ui/button.tsx): `src/app/components/ui/button.tsx`
- [Dialog primitive](https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/ui/dialog.tsx): `src/app/components/ui/dialog.tsx`
- [Sheet primitive](https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/ui/sheet.tsx): `src/app/components/ui/sheet.tsx`
- [Tooltip primitive](https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/ui/tooltip.tsx): `src/app/components/ui/tooltip.tsx`
- [Class utilities](https://github.com/farhan-labib-afk/portfolio-website/blob/main/src/app/components/ui/utils.ts): `src/app/components/ui/utils.ts`

### Other components

- **Visitor**
- **Browser**
- **GitHub**
- **LinkedIn**
- **Email**

## Connections

- Visitor → Browser: visits
- Browser → React mount: loads (evidence: `src/main.tsx`)
- React mount → Page composition: mounts (evidence: `src/main.tsx`)
- Page composition → Navigation: renders (evidence: `src/app/App.tsx`)
- Page composition → Hero: renders (evidence: `src/app/App.tsx`)
- Page composition → About: renders (evidence: `src/app/App.tsx`)
- Page composition → Experience: renders (evidence: `src/app/App.tsx`)
- Page composition → Projects section: renders (evidence: `src/app/App.tsx`)
- Page composition → Skills: renders (evidence: `src/app/App.tsx`)
- Page composition → Résumé: renders (evidence: `src/app/App.tsx`)
- Page composition → Contact: renders (evidence: `src/app/App.tsx`)
- Page composition → Footer: renders (evidence: `src/app/App.tsx`)
- Projects section → Project catalog: reads (evidence: `src/app/components/Projects.tsx`)
- Projects section → Project card: renders (evidence: `src/app/components/Projects.tsx`)
- Projects section → Project details: renders (evidence: `src/app/components/Projects.tsx`)
- Project details → Dialog primitive: uses (evidence: `src/app/components/ProjectModal.tsx`)
- Hero → Project catalog: reads (evidence: `src/app/components/Hero.tsx`)
- Hero → Button primitive: uses (evidence: `src/app/components/Hero.tsx`)
- Navigation → Button primitive: uses (evidence: `src/app/components/Navigation.tsx`)
- Project card → Button primitive: uses (evidence: `src/app/components/ProjectCard.tsx`)
- Project details → Button primitive: uses (evidence: `src/app/components/ProjectModal.tsx`)
- Résumé → Button primitive: uses (evidence: `src/app/components/Resume.tsx`)
- Hero → GitHub: links to (evidence: `src/app/components/Hero.tsx`)
- Hero → LinkedIn: links to (evidence: `src/app/components/Hero.tsx`)
- Hero → Email: links to (evidence: `src/app/components/Hero.tsx`)
- Button primitive → Class utilities: combines classes (evidence: `src/app/components/ui/button.tsx`)
- Dialog primitive → Class utilities: combines classes (evidence: `src/app/components/ui/dialog.tsx`)
- Sheet primitive → Class utilities: combines classes (evidence: `src/app/components/ui/sheet.tsx`)
- Tooltip primitive → Class utilities: combines classes (evidence: `src/app/components/ui/tooltip.tsx`)