# fahim-khandakar/fahim-khandakar-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/fahim-khandakar/fahim-khandakar-portfolio
- Repository: https://github.com/fahim-khandakar/fahim-khandakar-portfolio

## Overview

This repository is a single-page personal portfolio. The browser loads the React app, which renders the home, skills, projects, about/education, and contact sections; visitors can navigate between sections, download a résumé, and submit a contact form. Shared layout and title components support several sections. The main entry and component relationships are supported by excerpts and the source index; other listed portfolio capabilities are represented by their component paths, with no assumptions about unsampled internals.

Main entry points: [`src/App.jsx`](https://github.com/fahim-khandakar/fahim-khandakar-portfolio/blob/main/src/App.jsx) (Portfolio App), [`src/Components/Navbar/Navbar.jsx`](https://github.com/fahim-khandakar/fahim-khandakar-portfolio/blob/main/src/Components/Navbar/Navbar.jsx) (Navigation), [`src/Components/Contact/Contact.jsx`](https://github.com/fahim-khandakar/fahim-khandakar-portfolio/blob/main/src/Components/Contact/Contact.jsx) (Contact Form), [`src/Components/About/About.jsx`](https://github.com/fahim-khandakar/fahim-khandakar-portfolio/blob/main/src/Components/About/About.jsx) (About)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application"]
  node_app["Portfolio App<br/>[App.jsx]"]
end

subgraph group_portfolio["Portfolio Sections"]
  node_home["Home Intro<br/>[Home.jsx]"]
  node_skills["Skills<br/>[MySkills.jsx]"]
  node_projects["Projects<br/>[Projects.jsx]"]
  node_about["About<br/>[About.jsx]"]
  node_education["Education<br/>[Education.jsx]"]
end

subgraph group_shared["Shared UI"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
  node_footer["Footer<br/>[Footer.jsx]"]
  node_scrollup["Scroll Up<br/>[ScrollUpBtn.jsx]"]
  node_lottie["Lottie Animation"]
  node_container["Content Container<br/>[Container.jsx]"]
  node_sectiontitle["Section Title<br/>[SectionTitle.jsx]"]
end

subgraph group_contact["Contact"]
  node_contactform["Contact Form<br/>[Contact.jsx]"]
end

node_visitor(("Visitor"))
node_formspree(("Formspree"))
node_resume["Résumé PDF"]

node_visitor -->|"opens"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_home
node_app -->|"renders"| node_skills
node_app -->|"renders"| node_projects
node_app -->|"renders"| node_about
node_app -->|"renders"| node_contactform
node_app -->|"renders"| node_scrollup
node_app -->|"renders"| node_footer
node_about -->|"renders"| node_education
node_contactform -->|"submits form"| node_formspree
node_contactform -->|"renders"| node_lottie
node_home -->|"downloads"| node_resume
node_navbar -->|"scrolls to"| node_home
node_navbar -->|"scrolls to"| node_skills
node_navbar -->|"scrolls to"| node_projects
node_navbar -->|"scrolls to"| node_about
node_navbar -->|"scrolls to"| node_contactform
node_home -->|"uses layout"| node_container
node_skills -->|"uses layout"| node_container
node_skills -->|"uses title"| node_sectiontitle
node_projects -->|"uses layout"| node_container
node_projects -->|"uses title"| node_sectiontitle
node_about -->|"uses layout"| node_container
node_about -->|"uses title"| node_sectiontitle
node_education -->|"uses title"| node_sectiontitle
node_contactform -->|"uses layout"| node_container
node_contactform -->|"uses title"| node_sectiontitle

click node_app "https://github.com/fahim-khandakar/fahim-khandakar-portfolio/blob/main/src/App.jsx"
click node_home "https://github.com/fahim-khandakar/fahim-khandakar-portfolio/blob/main/src/Components/Home/Home.jsx"
click node_skills "https://github.com/fahim-khandakar/fahim-khandakar-portfolio/blob/main/src/Components/MySkills/MySkills.jsx"
click node_projects "https://github.com/fahim-khandakar/fahim-khandakar-portfolio/blob/main/src/Components/Projects/Projects.jsx"
click node_about "https://github.com/fahim-khandakar/fahim-khandakar-portfolio/blob/main/src/Components/About/About.jsx"
click node_education "https://github.com/fahim-khandakar/fahim-khandakar-portfolio/blob/main/src/Components/Education/Education.jsx"
click node_contactform "https://github.com/fahim-khandakar/fahim-khandakar-portfolio/blob/main/src/Components/Contact/Contact.jsx"
click node_navbar "https://github.com/fahim-khandakar/fahim-khandakar-portfolio/blob/main/src/Components/Navbar/Navbar.jsx"
click node_footer "https://github.com/fahim-khandakar/fahim-khandakar-portfolio/blob/main/src/Components/Footer/Footer.jsx"
click node_scrollup "https://github.com/fahim-khandakar/fahim-khandakar-portfolio/blob/main/src/Components/ScrollUpBtn/ScrollUpBtn.jsx"
click node_lottie "https://github.com/fahim-khandakar/fahim-khandakar-portfolio/blob/main/src/Components/LottieAnimation/LottieAnimation.jsx"
click node_container "https://github.com/fahim-khandakar/fahim-khandakar-portfolio/blob/main/src/Hooks/Container.jsx"
click node_sectiontitle "https://github.com/fahim-khandakar/fahim-khandakar-portfolio/blob/main/src/Hooks/SectionTitle/SectionTitle.jsx"
click node_resume "https://github.com/fahim-khandakar/fahim-khandakar-portfolio/blob/main/public/Fahim-Khandakar%20Resume.pdf"

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_app toneBlue
class node_home,node_skills,node_projects,node_about,node_education toneAmber
class node_navbar,node_footer,node_scrollup,node_lottie,node_container,node_sectiontitle toneMint
class node_contactform toneRose
class node_visitor,node_formspree toneIndigo
class node_resume toneTeal
```

## Components

### Application

- [Portfolio App](https://github.com/fahim-khandakar/fahim-khandakar-portfolio/blob/main/src/App.jsx): `src/App.jsx`

### Portfolio Sections

- [Home Intro](https://github.com/fahim-khandakar/fahim-khandakar-portfolio/blob/main/src/Components/Home/Home.jsx): `src/Components/Home/Home.jsx`
- [Skills](https://github.com/fahim-khandakar/fahim-khandakar-portfolio/blob/main/src/Components/MySkills/MySkills.jsx): `src/Components/MySkills/MySkills.jsx`
- [Projects](https://github.com/fahim-khandakar/fahim-khandakar-portfolio/blob/main/src/Components/Projects/Projects.jsx): `src/Components/Projects/Projects.jsx`
- [About](https://github.com/fahim-khandakar/fahim-khandakar-portfolio/blob/main/src/Components/About/About.jsx): `src/Components/About/About.jsx`
- [Education](https://github.com/fahim-khandakar/fahim-khandakar-portfolio/blob/main/src/Components/Education/Education.jsx): `src/Components/Education/Education.jsx`

### Shared UI

- [Navigation](https://github.com/fahim-khandakar/fahim-khandakar-portfolio/blob/main/src/Components/Navbar/Navbar.jsx): `src/Components/Navbar/Navbar.jsx`
- [Footer](https://github.com/fahim-khandakar/fahim-khandakar-portfolio/blob/main/src/Components/Footer/Footer.jsx): `src/Components/Footer/Footer.jsx`
- [Scroll Up](https://github.com/fahim-khandakar/fahim-khandakar-portfolio/blob/main/src/Components/ScrollUpBtn/ScrollUpBtn.jsx): `src/Components/ScrollUpBtn/ScrollUpBtn.jsx`
- [Lottie Animation](https://github.com/fahim-khandakar/fahim-khandakar-portfolio/blob/main/src/Components/LottieAnimation/LottieAnimation.jsx): `src/Components/LottieAnimation/LottieAnimation.jsx`
- [Content Container](https://github.com/fahim-khandakar/fahim-khandakar-portfolio/blob/main/src/Hooks/Container.jsx): `src/Hooks/Container.jsx`
- [Section Title](https://github.com/fahim-khandakar/fahim-khandakar-portfolio/blob/main/src/Hooks/SectionTitle/SectionTitle.jsx): `src/Hooks/SectionTitle/SectionTitle.jsx`

### Contact

- [Contact Form](https://github.com/fahim-khandakar/fahim-khandakar-portfolio/blob/main/src/Components/Contact/Contact.jsx): `src/Components/Contact/Contact.jsx`

### Other components

- **Visitor**
- **Formspree**
- [Résumé PDF](https://github.com/fahim-khandakar/fahim-khandakar-portfolio/blob/main/public/Fahim-Khandakar%20Resume.pdf): `public/Fahim-Khandakar Resume.pdf`

## Connections

- Visitor → Portfolio App: opens
- Portfolio App → Navigation: renders (evidence: `src/App.jsx`)
- Portfolio App → Home Intro: renders (evidence: `src/App.jsx`)
- Portfolio App → Skills: renders (evidence: `src/App.jsx`)
- Portfolio App → Projects: renders (evidence: `src/App.jsx`)
- Portfolio App → About: renders (evidence: `src/App.jsx`)
- Portfolio App → Contact Form: renders (evidence: `src/App.jsx`)
- Portfolio App → Scroll Up: renders (evidence: `src/App.jsx`)
- Portfolio App → Footer: renders (evidence: `src/App.jsx`)
- About → Education: renders (evidence: `src/Components/About/About.jsx`)
- Contact Form → Formspree: submits form (evidence: `src/Components/Contact/Contact.jsx`)
- Contact Form → Lottie Animation: renders (evidence: `src/Components/Contact/Contact.jsx`)
- Home Intro → Résumé PDF: downloads (evidence: `src/Components/Home/Home.jsx`)
- Navigation → Home Intro: scrolls to (evidence: `src/Components/Navbar/Navbar.jsx`)
- Navigation → Skills: scrolls to (evidence: `src/Components/Navbar/Navbar.jsx`)
- Navigation → Projects: scrolls to (evidence: `src/Components/Navbar/Navbar.jsx`)
- Navigation → About: scrolls to (evidence: `src/Components/Navbar/Navbar.jsx`)
- Navigation → Contact Form: scrolls to (evidence: `src/Components/Navbar/Navbar.jsx`)
- Home Intro → Content Container: uses layout (evidence: `src/Components/Home/Home.jsx`)
- Skills → Content Container: uses layout (evidence: `src/Components/MySkills/MySkills.jsx`)
- Skills → Section Title: uses title (evidence: `src/Components/MySkills/MySkills.jsx`)
- Projects → Content Container: uses layout (evidence: `src/Components/Projects/Projects.jsx`)
- Projects → Section Title: uses title (evidence: `src/Components/Projects/Projects.jsx`)
- About → Content Container: uses layout (evidence: `src/Components/About/About.jsx`)
- About → Section Title: uses title (evidence: `src/Components/About/About.jsx`)
- Education → Section Title: uses title (evidence: `src/Components/Education/Education.jsx`)
- Contact Form → Content Container: uses layout (evidence: `src/Components/Contact/Contact.jsx`)
- Contact Form → Section Title: uses title (evidence: `src/Components/Contact/Contact.jsx`)