# shawon-lab-debug/shawon-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/shawon-lab-debug/shawon-portfolio
- Repository: https://github.com/shawon-lab-debug/shawon-portfolio

## Overview

This is a React portfolio site presenting the developer’s profile, skills, projects, certifications, and contact route. A visitor enters through the browser, which renders the routed pages inside a shared layout; the home page assembles preview sections and links into fuller portfolio pages. The graph preserves the main presentation branches and the heading animation layer. Routing and selected component relationships are evidenced by excerpts or the source index; unsampled page internals and integrations are not inferred.

Main entry points: [`shawon-portfolio/src/routes/AppRoutes.tsx`](https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/routes/AppRoutes.tsx) (Route dispatcher), [`shawon-portfolio/src/pages/Home.tsx`](https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/pages/Home.tsx) (Home page), [`shawon-portfolio/src/main.tsx`](https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/main.tsx) (React mount), [`shawon-portfolio/src/App.tsx`](https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/App.tsx) (App)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Application and routing"]
  node_mount["React mount<br/>[main.tsx]"]
  node_app["App<br/>[App.tsx]"]
  node_routes["Route dispatcher<br/>[AppRoutes.tsx]"]
end

subgraph group_layout["Shared site layout"]
  node_layout["Main layout<br/>[MainLayout.tsx]"]
  node_navbar["Navigation bar<br/>[Navbar.tsx]"]
end

subgraph group_home["Home page presentation"]
  node_home["Home page<br/>[Home.tsx]"]
  node_hero["Hero and tech marquee<br/>[Hero.tsx]"]
  node_aboutpreview["About preview<br/>[AboutPreview.tsx]"]
  node_featured["Featured projects"]
  node_expertise["Technical expertise"]
  node_certpreview["Certification preview"]
  node_finalcta["Final call to action<br/>[FinalCTA.tsx]"]
  node_sectionheading["Animated section heading<br/>[SectionHeading.tsx]"]
  node_wordreveal["Word reveal<br/>[WordReveal.tsx]"]
end

subgraph group_pages["Portfolio pages"]
  node_about["About page<br/>[About.tsx]"]
  node_projects["Projects page<br/>[Projects.tsx]"]
  node_certifications["Certifications page<br/>[Certifications.tsx]"]
  node_contact["Contact page<br/>[Contact.tsx]"]
  node_notfound["Not found page<br/>[NotFound.tsx]"]
end

node_visitor(("Site visitor"))
node_browser(("Web browser"))

node_visitor -->|"opens site"| node_browser
node_browser -->|"loads app"| node_mount
node_mount -->|"renders"| node_app
node_app -->|"renders"| node_routes
node_routes -->|"wraps routes"| node_layout
node_routes -->|"routes to"| node_home
node_routes -->|"routes to"| node_about
node_routes -->|"routes to"| node_projects
node_routes -->|"routes to"| node_certifications
node_routes -->|"routes to"| node_contact
node_routes -->|"routes to"| node_notfound
node_layout -->|"renders"| node_navbar
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_aboutpreview
node_home -->|"renders"| node_featured
node_home -->|"renders"| node_expertise
node_home -->|"renders"| node_certpreview
node_home -->|"renders"| node_finalcta
node_sectionheading -->|"renders"| node_wordreveal

click node_mount "https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/main.tsx"
click node_app "https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/App.tsx"
click node_routes "https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/routes/AppRoutes.tsx"
click node_layout "https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/layouts/MainLayout.tsx"
click node_navbar "https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/components/layout/Navbar/Navbar.tsx"
click node_home "https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/pages/Home.tsx"
click node_hero "https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/components/sections/Hero/Hero.tsx"
click node_aboutpreview "https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/components/sections/AboutPreview/AboutPreview.tsx"
click node_featured "https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/components/sections/FeaturedProjects/FeaturedProjects.tsx"
click node_expertise "https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/components/sections/TechnicalExpertise/TechnicalExpertise.tsx"
click node_certpreview "https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/components/sections/CertificationPreview/CertificationPreview.tsx"
click node_finalcta "https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/components/sections/FinalCTA/FinalCTA.tsx"
click node_about "https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/pages/About.tsx"
click node_projects "https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/pages/Projects.tsx"
click node_certifications "https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/pages/Certifications.tsx"
click node_contact "https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/pages/Contact.tsx"
click node_notfound "https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/pages/NotFound.tsx"
click node_sectionheading "https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/components/ui/SectionHeading.tsx"
click node_wordreveal "https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/components/animations/WordReveal.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_mount,node_app,node_routes,node_browser toneBlue
class node_layout,node_navbar toneAmber
class node_home,node_hero,node_aboutpreview,node_featured,node_expertise,node_certpreview,node_finalcta,node_sectionheading,node_wordreveal toneMint
class node_about,node_projects,node_certifications,node_contact,node_notfound toneRose
class node_visitor toneIndigo
```

## Components

### Application and routing

- [React mount](https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/main.tsx): `shawon-portfolio/src/main.tsx`
- [App](https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/App.tsx): `shawon-portfolio/src/App.tsx`
- [Route dispatcher](https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/routes/AppRoutes.tsx): `shawon-portfolio/src/routes/AppRoutes.tsx`

### Shared site layout

- [Main layout](https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/layouts/MainLayout.tsx): `shawon-portfolio/src/layouts/MainLayout.tsx`
- [Navigation bar](https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/components/layout/Navbar/Navbar.tsx): `shawon-portfolio/src/components/layout/Navbar/Navbar.tsx`

### Home page presentation

- [Home page](https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/pages/Home.tsx): `shawon-portfolio/src/pages/Home.tsx`
- [Hero and tech marquee](https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/components/sections/Hero/Hero.tsx): `shawon-portfolio/src/components/sections/Hero/Hero.tsx`
- [About preview](https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/components/sections/AboutPreview/AboutPreview.tsx): `shawon-portfolio/src/components/sections/AboutPreview/AboutPreview.tsx`
- [Featured projects](https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/components/sections/FeaturedProjects/FeaturedProjects.tsx): `shawon-portfolio/src/components/sections/FeaturedProjects/FeaturedProjects.tsx`
- [Technical expertise](https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/components/sections/TechnicalExpertise/TechnicalExpertise.tsx): `shawon-portfolio/src/components/sections/TechnicalExpertise/TechnicalExpertise.tsx`
- [Certification preview](https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/components/sections/CertificationPreview/CertificationPreview.tsx): `shawon-portfolio/src/components/sections/CertificationPreview/CertificationPreview.tsx`
- [Final call to action](https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/components/sections/FinalCTA/FinalCTA.tsx): `shawon-portfolio/src/components/sections/FinalCTA/FinalCTA.tsx`
- [Animated section heading](https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/components/ui/SectionHeading.tsx): `shawon-portfolio/src/components/ui/SectionHeading.tsx`
- [Word reveal](https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/components/animations/WordReveal.tsx): `shawon-portfolio/src/components/animations/WordReveal.tsx`

### Portfolio pages

- [About page](https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/pages/About.tsx): `shawon-portfolio/src/pages/About.tsx`
- [Projects page](https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/pages/Projects.tsx): `shawon-portfolio/src/pages/Projects.tsx`
- [Certifications page](https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/pages/Certifications.tsx): `shawon-portfolio/src/pages/Certifications.tsx`
- [Contact page](https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/pages/Contact.tsx): `shawon-portfolio/src/pages/Contact.tsx`
- [Not found page](https://github.com/shawon-lab-debug/shawon-portfolio/blob/main/shawon-portfolio/src/pages/NotFound.tsx): `shawon-portfolio/src/pages/NotFound.tsx`

### Other components

- **Site visitor**
- **Web browser**

## Connections

- Site visitor → Web browser: opens site
- Web browser → React mount: loads app
- React mount → App: renders (evidence: `shawon-portfolio/src/main.tsx`)
- App → Route dispatcher: renders (evidence: `shawon-portfolio/src/App.tsx`)
- Route dispatcher → Main layout: wraps routes (evidence: `shawon-portfolio/src/routes/AppRoutes.tsx`)
- Route dispatcher → Home page: routes to (evidence: `shawon-portfolio/src/routes/AppRoutes.tsx`)
- Route dispatcher → About page: routes to (evidence: `shawon-portfolio/src/routes/AppRoutes.tsx`)
- Route dispatcher → Projects page: routes to (evidence: `shawon-portfolio/src/routes/AppRoutes.tsx`)
- Route dispatcher → Certifications page: routes to (evidence: `shawon-portfolio/src/routes/AppRoutes.tsx`)
- Route dispatcher → Contact page: routes to (evidence: `shawon-portfolio/src/routes/AppRoutes.tsx`)
- Route dispatcher → Not found page: routes to (evidence: `shawon-portfolio/src/routes/AppRoutes.tsx`)
- Main layout → Navigation bar: renders (evidence: `shawon-portfolio/src/layouts/MainLayout.tsx`)
- Home page → Hero and tech marquee: renders (evidence: `shawon-portfolio/src/pages/Home.tsx`)
- Home page → About preview: renders (evidence: `shawon-portfolio/src/pages/Home.tsx`)
- Home page → Featured projects: renders (evidence: `shawon-portfolio/src/pages/Home.tsx`)
- Home page → Technical expertise: renders (evidence: `shawon-portfolio/src/pages/Home.tsx`)
- Home page → Certification preview: renders (evidence: `shawon-portfolio/src/pages/Home.tsx`)
- Home page → Final call to action: renders (evidence: `shawon-portfolio/src/pages/Home.tsx`)
- Animated section heading → Word reveal: renders (evidence: `shawon-portfolio/src/components/ui/SectionHeading.tsx`)