# abir-0173/abir-3d-web architecture

> Architecture diagram of the GitHub repository abir-0173/abir-3d-web, 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/abir-0173/abir-3d-web
- Repository: https://github.com/abir-0173/abir-3d-web

## Overview

This is a single-page personal portfolio for a full-stack developer. Visitors browse the introduction, biography, skills, project showcase, and contact options; the contact form opens a prefilled email in the visitor’s email client rather than sending through a backend. The page composes the sections, while the hero loads a client-only 3D galaxy background. Source excerpts support these links; other deployment and runtime details are not mapped.

Main entry points: [`src/app/page.tsx`](https://github.com/abir-0173/abir-3d-web/blob/main/src/app/page.tsx) (Home page), [`src/components/NavBar.tsx`](https://github.com/abir-0173/abir-3d-web/blob/main/src/components/NavBar.tsx) (Navigation), [`src/components/HeroSection.tsx`](https://github.com/abir-0173/abir-3d-web/blob/main/src/components/HeroSection.tsx) (Hero), [`src/components/ContactSection.tsx`](https://github.com/abir-0173/abir-3d-web/blob/main/src/components/ContactSection.tsx) (Contact)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Page composition"]
  node_home["Home page<br/>[page.tsx]"]
  node_layout["Root layout<br/>[layout.tsx]"]
end

subgraph group_content["Portfolio sections"]
  node_nav["Navigation<br/>[NavBar.tsx]"]
  node_hero["Hero<br/>[HeroSection.tsx]"]
  node_about["About<br/>[AboutSection.tsx]"]
  node_skills["Skills<br/>[SkillsSection.tsx]"]
  node_projects["Projects"]
  node_contact["Contact<br/>[ContactSection.tsx]"]
  node_footer["Footer<br/>[Footer.tsx]"]
end

subgraph group_visuals["Visual experience"]
  node_galaxy["Galaxy canvas<br/>[GalaxyCanvas.tsx]"]
end

node_visitor(("Visitor"))
node_email["Email client"]

node_visitor -->|"requests page"| node_home
node_layout -->|"wraps page"| node_home
node_home -->|"renders"| node_nav
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_about
node_home -->|"renders"| node_skills
node_home -->|"renders"| node_projects
node_home -->|"renders"| node_contact
node_home -->|"renders"| node_footer
node_hero -->|"loads dynamically"| node_galaxy
node_nav -->|"links to section"| node_about
node_nav -->|"links to section"| node_skills
node_nav -->|"links to section"| node_projects
node_nav -->|"links to section"| node_contact
node_hero -->|"links to section"| node_projects
node_hero -->|"links to section"| node_contact
node_contact -->|"opens prefilled email"| node_email

click node_home "https://github.com/abir-0173/abir-3d-web/blob/main/src/app/page.tsx"
click node_layout "https://github.com/abir-0173/abir-3d-web/blob/main/src/app/layout.tsx"
click node_nav "https://github.com/abir-0173/abir-3d-web/blob/main/src/components/NavBar.tsx"
click node_hero "https://github.com/abir-0173/abir-3d-web/blob/main/src/components/HeroSection.tsx"
click node_about "https://github.com/abir-0173/abir-3d-web/blob/main/src/components/AboutSection.tsx"
click node_skills "https://github.com/abir-0173/abir-3d-web/blob/main/src/components/SkillsSection.tsx"
click node_projects "https://github.com/abir-0173/abir-3d-web/blob/main/src/components/ProjectsSection.tsx"
click node_contact "https://github.com/abir-0173/abir-3d-web/blob/main/src/components/ContactSection.tsx"
click node_footer "https://github.com/abir-0173/abir-3d-web/blob/main/src/components/Footer.tsx"
click node_galaxy "https://github.com/abir-0173/abir-3d-web/blob/main/src/components/GalaxyCanvas.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_home,node_layout,node_email toneBlue
class node_nav,node_hero,node_about,node_skills,node_projects,node_contact,node_footer toneAmber
class node_galaxy toneMint
class node_visitor toneIndigo
```

## Components

### Page composition

- [Home page](https://github.com/abir-0173/abir-3d-web/blob/main/src/app/page.tsx): `src/app/page.tsx`
- [Root layout](https://github.com/abir-0173/abir-3d-web/blob/main/src/app/layout.tsx): `src/app/layout.tsx`

### Portfolio sections

- [Navigation](https://github.com/abir-0173/abir-3d-web/blob/main/src/components/NavBar.tsx): `src/components/NavBar.tsx`
- [Hero](https://github.com/abir-0173/abir-3d-web/blob/main/src/components/HeroSection.tsx): `src/components/HeroSection.tsx`
- [About](https://github.com/abir-0173/abir-3d-web/blob/main/src/components/AboutSection.tsx): `src/components/AboutSection.tsx`
- [Skills](https://github.com/abir-0173/abir-3d-web/blob/main/src/components/SkillsSection.tsx): `src/components/SkillsSection.tsx`
- [Projects](https://github.com/abir-0173/abir-3d-web/blob/main/src/components/ProjectsSection.tsx): `src/components/ProjectsSection.tsx`
- [Contact](https://github.com/abir-0173/abir-3d-web/blob/main/src/components/ContactSection.tsx): `src/components/ContactSection.tsx`
- [Footer](https://github.com/abir-0173/abir-3d-web/blob/main/src/components/Footer.tsx): `src/components/Footer.tsx`

### Visual experience

- [Galaxy canvas](https://github.com/abir-0173/abir-3d-web/blob/main/src/components/GalaxyCanvas.tsx): `src/components/GalaxyCanvas.tsx`

### Other components

- **Visitor**
- **Email client**

## Connections

- Visitor → Home page: requests page
- Root layout → Home page: wraps page
- Home page → Navigation: renders
- Home page → Hero: renders
- Home page → About: renders
- Home page → Skills: renders
- Home page → Projects: renders
- Home page → Contact: renders
- Home page → Footer: renders
- Hero → Galaxy canvas: loads dynamically
- Navigation → About: links to section
- Navigation → Skills: links to section
- Navigation → Projects: links to section
- Navigation → Contact: links to section
- Hero → Projects: links to section
- Hero → Contact: links to section
- Contact → Email client: opens prefilled email