# abdulhaseeb-1/abdul_haseeb architecture

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

- Interactive diagram: https://gitdiagram.com/abdulhaseeb-1/abdul_haseeb
- Repository: https://github.com/abdulhaseeb-1/abdul_haseeb

## Overview

This repository is a personal portfolio website. A visitor opens the home page, which presents navigation, an animated introduction, skills, and expandable project cards. The page composes those sections; the hero combines text and imagery, while project cards support an expanded detail view with outside-click dismissal. The README is empty, and source excerpts are partial, so the graph reflects only supported component relationships and does not infer other routes or project-data sources.

Main entry points: [`portfolio/app/page.tsx`](https://github.com/abdulhaseeb-1/abdul_haseeb/blob/main/portfolio/app/page.tsx) (Home Page), [`portfolio/app/components/hero/index.tsx`](https://github.com/abdulhaseeb-1/abdul_haseeb/blob/main/portfolio/app/components/hero/index.tsx) (Hero Section), [`portfolio/app/components/projects/index.tsx`](https://github.com/abdulhaseeb-1/abdul_haseeb/blob/main/portfolio/app/components/projects/index.tsx) (Project Cards), [`portfolio/app/components/navbar/index.tsx`](https://github.com/abdulhaseeb-1/abdul_haseeb/blob/main/portfolio/app/components/navbar/index.tsx) (Navbar)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_composition["Page Composition"]
  node_layout["Root Layout<br/>[layout.tsx]"]
  node_home["Home Page<br/>[page.tsx]"]
end

subgraph group_profile["Profile Sections"]
  node_hero["Hero Section<br/>[index.tsx]"]
  node_hero_text["Hero Text<br/>[hero_text.tsx]"]
  node_hero_image["Hero Image<br/>[hero_image.tsx]"]
  node_skills["Skills Section<br/>[index.tsx]"]
end

subgraph group_showcase["Project Showcase"]
  node_projects["Project Cards<br/>[index.tsx]"]
  node_outside_click["Outside Click Hook"]
end

subgraph group_navigation["Site Navigation"]
  node_navbar["Navbar<br/>[index.tsx]"]
  node_navlinks["Navigation Links<br/>[nav_links.tsx]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_home
node_layout -->|"renders"| node_home
node_home -->|"renders"| node_navbar
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_skills
node_home -->|"renders"| node_projects
node_navbar -->|"renders"| node_navlinks
node_hero -->|"renders"| node_hero_text
node_hero -->|"renders"| node_hero_image
node_projects -->|"calls"| node_outside_click

click node_layout "https://github.com/abdulhaseeb-1/abdul_haseeb/blob/main/portfolio/app/layout.tsx"
click node_home "https://github.com/abdulhaseeb-1/abdul_haseeb/blob/main/portfolio/app/page.tsx"
click node_navbar "https://github.com/abdulhaseeb-1/abdul_haseeb/blob/main/portfolio/app/components/navbar/index.tsx"
click node_navlinks "https://github.com/abdulhaseeb-1/abdul_haseeb/blob/main/portfolio/app/components/navbar/nav_links.tsx"
click node_hero "https://github.com/abdulhaseeb-1/abdul_haseeb/blob/main/portfolio/app/components/hero/index.tsx"
click node_hero_text "https://github.com/abdulhaseeb-1/abdul_haseeb/blob/main/portfolio/app/components/hero/hero_text.tsx"
click node_hero_image "https://github.com/abdulhaseeb-1/abdul_haseeb/blob/main/portfolio/app/components/hero/hero_image.tsx"
click node_skills "https://github.com/abdulhaseeb-1/abdul_haseeb/blob/main/portfolio/app/components/skills/index.tsx"
click node_projects "https://github.com/abdulhaseeb-1/abdul_haseeb/blob/main/portfolio/app/components/projects/index.tsx"
click node_outside_click "https://github.com/abdulhaseeb-1/abdul_haseeb/blob/main/portfolio/hooks/use-outside-click.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_home toneBlue
class node_hero,node_hero_text,node_hero_image,node_skills toneAmber
class node_projects,node_outside_click toneMint
class node_navbar,node_navlinks toneRose
class node_visitor toneIndigo
```

## Components

### Page Composition

- [Root Layout](https://github.com/abdulhaseeb-1/abdul_haseeb/blob/main/portfolio/app/layout.tsx): `portfolio/app/layout.tsx`
- [Home Page](https://github.com/abdulhaseeb-1/abdul_haseeb/blob/main/portfolio/app/page.tsx): `portfolio/app/page.tsx`

### Profile Sections

- [Hero Section](https://github.com/abdulhaseeb-1/abdul_haseeb/blob/main/portfolio/app/components/hero/index.tsx): `portfolio/app/components/hero/index.tsx`
- [Hero Text](https://github.com/abdulhaseeb-1/abdul_haseeb/blob/main/portfolio/app/components/hero/hero_text.tsx): `portfolio/app/components/hero/hero_text.tsx`
- [Hero Image](https://github.com/abdulhaseeb-1/abdul_haseeb/blob/main/portfolio/app/components/hero/hero_image.tsx): `portfolio/app/components/hero/hero_image.tsx`
- [Skills Section](https://github.com/abdulhaseeb-1/abdul_haseeb/blob/main/portfolio/app/components/skills/index.tsx): `portfolio/app/components/skills/index.tsx`

### Project Showcase

- [Project Cards](https://github.com/abdulhaseeb-1/abdul_haseeb/blob/main/portfolio/app/components/projects/index.tsx): `portfolio/app/components/projects/index.tsx`
- [Outside Click Hook](https://github.com/abdulhaseeb-1/abdul_haseeb/blob/main/portfolio/hooks/use-outside-click.tsx): `portfolio/hooks/use-outside-click.tsx`

### Site Navigation

- [Navbar](https://github.com/abdulhaseeb-1/abdul_haseeb/blob/main/portfolio/app/components/navbar/index.tsx): `portfolio/app/components/navbar/index.tsx`
- [Navigation Links](https://github.com/abdulhaseeb-1/abdul_haseeb/blob/main/portfolio/app/components/navbar/nav_links.tsx): `portfolio/app/components/navbar/nav_links.tsx`

### Other components

- **Visitor**

## Connections

- Visitor → Home Page: opens
- Root Layout → Home Page: renders
- Home Page → Navbar: renders
- Home Page → Hero Section: renders
- Home Page → Skills Section: renders
- Home Page → Project Cards: renders
- Navbar → Navigation Links: renders
- Hero Section → Hero Text: renders
- Hero Section → Hero Image: renders
- Project Cards → Outside Click Hook: calls