# samiul821/my-portfolio-project architecture

> Architecture diagram of the GitHub repository samiul821/my-portfolio-project, 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/samiul821/my-portfolio-project
- Repository: https://github.com/samiul821/my-portfolio-project

## Overview

This is a React personal portfolio for visitors to explore the developer’s profile, skills, projects, and contact options. The documented visitor journey is routed through a shared site shell to the portfolio, with section navigation and project browsing; contact submissions and the portfolio assistant provide separate interactive paths. The router, shell, project carousel, contact submission, and chatbot wiring are visible in sampled source. Home-section composition and some listed capabilities are documented or indicated by the tree but their source was not sampled, so those links are not asserted.

Main entry points: [`src/router/router.jsx`](https://github.com/samiul821/my-portfolio-project/blob/main/src/router/router.jsx) (Route setup), [`src/Layout/Rootlayout.jsx`](https://github.com/samiul821/my-portfolio-project/blob/main/src/Layout/Rootlayout.jsx) (Shared layout), [`src/main.jsx`](https://github.com/samiul821/my-portfolio-project/blob/main/src/main.jsx) (React entry), [`src/Pages/Home/MyProjects/MyProjects.jsx`](https://github.com/samiul821/my-portfolio-project/blob/main/src/Pages/Home/MyProjects/MyProjects.jsx) (Project carousel)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Site shell"]
  node_entry["React entry<br/>[main.jsx]"]
  node_router["Route setup<br/>[router.jsx]"]
  node_layout["Shared layout<br/>[Rootlayout.jsx]"]
  node_navbar["Section navigation<br/>[Navbar.jsx]"]
  node_footer["Footer links<br/>[Footer.jsx]"]
  node_error["Error view<br/>[ErrorPage.jsx]"]
  node_loading["Loading view<br/>[LoadingPage.jsx]"]
end

subgraph group_portfolio["Portfolio content"]
  node_home["Portfolio home<br/>[Home.jsx]"]
  node_hero["Intro section<br/>[Hero.jsx]"]
  node_about["About section<br/>[AboutMe.jsx]"]
  node_skills["Skills section<br/>[Skills.jsx]"]
  node_projects["Project carousel<br/>[MyProjects.jsx]"]
  node_projectmodal["Project details<br/>[ProjectsModal.jsx]"]
end

subgraph group_interaction["Visitor interactions"]
  node_cursor["Custom cursor<br/>[CustomCursor.jsx]"]
  node_contact["Contact form<br/>[Contact.jsx]"]
  node_chatbot["Portfolio assistant<br/>[Chatbot.jsx]"]
end

subgraph group_content["Portfolio data"]
  node_skillsdata["Skills data<br/>[skills.json]"]
  node_projectdata["Project catalog<br/>[Projects.json]"]
end

node_visitor(("Portfolio visitor"))
node_emailservice["EmailJS service"]
node_aiendpoint["Assistant API"]

node_visitor -->|"opens site"| node_entry
node_entry -->|"mounts router"| node_router
node_entry -->|"renders"| node_cursor
node_router -->|"routes to"| node_layout
node_router -->|"routes to"| node_home
node_router -->|"fetches skills"| node_skillsdata
node_router -->|"shows fallback"| node_loading
node_router -->|"shows on error"| node_error
node_layout -->|"renders"| node_navbar
node_layout -->|"renders outlet"| node_home
node_layout -->|"renders"| node_footer
node_layout -->|"opens assistant"| node_chatbot
node_projects -->|"reads catalog"| node_projectdata
node_projects -->|"opens details"| node_projectmodal
node_contact -.->|"sends message"| node_emailservice
node_chatbot -.->|"posts conversation"| node_aiendpoint
node_visitor -->|"navigates sections"| node_navbar
node_visitor -->|"submits inquiry"| node_contact
node_visitor -->|"browses projects"| node_projects

click node_entry "https://github.com/samiul821/my-portfolio-project/blob/main/src/main.jsx"
click node_router "https://github.com/samiul821/my-portfolio-project/blob/main/src/router/router.jsx"
click node_layout "https://github.com/samiul821/my-portfolio-project/blob/main/src/Layout/Rootlayout.jsx"
click node_home "https://github.com/samiul821/my-portfolio-project/blob/main/src/Pages/Home/Home/Home.jsx"
click node_navbar "https://github.com/samiul821/my-portfolio-project/blob/main/src/Pages/Navbar/Navbar.jsx"
click node_footer "https://github.com/samiul821/my-portfolio-project/blob/main/src/Pages/Footer/Footer.jsx"
click node_cursor "https://github.com/samiul821/my-portfolio-project/blob/main/src/Pages/Shared/CustomCursor.jsx"
click node_error "https://github.com/samiul821/my-portfolio-project/blob/main/src/Pages/Shared/ErrorPage.jsx"
click node_loading "https://github.com/samiul821/my-portfolio-project/blob/main/src/Pages/Shared/LoadingPage.jsx"
click node_hero "https://github.com/samiul821/my-portfolio-project/blob/main/src/Pages/Home/Hero/Hero.jsx"
click node_about "https://github.com/samiul821/my-portfolio-project/blob/main/src/Pages/Home/AboutMe/AboutMe.jsx"
click node_skills "https://github.com/samiul821/my-portfolio-project/blob/main/src/Pages/Home/Skills/Skills.jsx"
click node_projects "https://github.com/samiul821/my-portfolio-project/blob/main/src/Pages/Home/MyProjects/MyProjects.jsx"
click node_projectmodal "https://github.com/samiul821/my-portfolio-project/blob/main/src/Pages/Home/MyProjects/ProjectsModal.jsx"
click node_contact "https://github.com/samiul821/my-portfolio-project/blob/main/src/Pages/Home/Contact/Contact.jsx"
click node_chatbot "https://github.com/samiul821/my-portfolio-project/blob/main/src/components/Chatbot.jsx"
click node_skillsdata "https://github.com/samiul821/my-portfolio-project/blob/main/public/skills.json"
click node_projectdata "https://github.com/samiul821/my-portfolio-project/blob/main/public/Projects.json"

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_entry,node_router,node_layout,node_navbar,node_footer,node_error,node_loading toneBlue
class node_home,node_hero,node_about,node_skills,node_projects,node_projectmodal toneAmber
class node_cursor,node_contact,node_chatbot,node_aiendpoint toneMint
class node_skillsdata,node_projectdata toneRose
class node_visitor,node_emailservice toneIndigo
```

## Components

### Site shell

- [React entry](https://github.com/samiul821/my-portfolio-project/blob/main/src/main.jsx): `src/main.jsx`
- [Route setup](https://github.com/samiul821/my-portfolio-project/blob/main/src/router/router.jsx): `src/router/router.jsx`
- [Shared layout](https://github.com/samiul821/my-portfolio-project/blob/main/src/Layout/Rootlayout.jsx): `src/Layout/Rootlayout.jsx`
- [Section navigation](https://github.com/samiul821/my-portfolio-project/blob/main/src/Pages/Navbar/Navbar.jsx): `src/Pages/Navbar/Navbar.jsx`
- [Footer links](https://github.com/samiul821/my-portfolio-project/blob/main/src/Pages/Footer/Footer.jsx): `src/Pages/Footer/Footer.jsx`
- [Error view](https://github.com/samiul821/my-portfolio-project/blob/main/src/Pages/Shared/ErrorPage.jsx): `src/Pages/Shared/ErrorPage.jsx`
- [Loading view](https://github.com/samiul821/my-portfolio-project/blob/main/src/Pages/Shared/LoadingPage.jsx): `src/Pages/Shared/LoadingPage.jsx`

### Portfolio content

- [Portfolio home](https://github.com/samiul821/my-portfolio-project/blob/main/src/Pages/Home/Home/Home.jsx): `src/Pages/Home/Home/Home.jsx`
- [Intro section](https://github.com/samiul821/my-portfolio-project/blob/main/src/Pages/Home/Hero/Hero.jsx): `src/Pages/Home/Hero/Hero.jsx`
- [About section](https://github.com/samiul821/my-portfolio-project/blob/main/src/Pages/Home/AboutMe/AboutMe.jsx): `src/Pages/Home/AboutMe/AboutMe.jsx`
- [Skills section](https://github.com/samiul821/my-portfolio-project/blob/main/src/Pages/Home/Skills/Skills.jsx): `src/Pages/Home/Skills/Skills.jsx`
- [Project carousel](https://github.com/samiul821/my-portfolio-project/blob/main/src/Pages/Home/MyProjects/MyProjects.jsx): `src/Pages/Home/MyProjects/MyProjects.jsx`
- [Project details](https://github.com/samiul821/my-portfolio-project/blob/main/src/Pages/Home/MyProjects/ProjectsModal.jsx): `src/Pages/Home/MyProjects/ProjectsModal.jsx`

### Visitor interactions

- [Custom cursor](https://github.com/samiul821/my-portfolio-project/blob/main/src/Pages/Shared/CustomCursor.jsx): `src/Pages/Shared/CustomCursor.jsx`
- [Contact form](https://github.com/samiul821/my-portfolio-project/blob/main/src/Pages/Home/Contact/Contact.jsx): `src/Pages/Home/Contact/Contact.jsx`
- [Portfolio assistant](https://github.com/samiul821/my-portfolio-project/blob/main/src/components/Chatbot.jsx): `src/components/Chatbot.jsx`

### Portfolio data

- [Skills data](https://github.com/samiul821/my-portfolio-project/blob/main/public/skills.json): `public/skills.json`
- [Project catalog](https://github.com/samiul821/my-portfolio-project/blob/main/public/Projects.json): `public/Projects.json`

### Other components

- **Portfolio visitor**
- **EmailJS service**
- **Assistant API**

## Connections

- Portfolio visitor → React entry: opens site
- React entry → Route setup: mounts router
- React entry → Custom cursor: renders
- Route setup → Shared layout: routes to
- Route setup → Portfolio home: routes to
- Route setup → Skills data: fetches skills
- Route setup → Loading view: shows fallback
- Route setup → Error view: shows on error
- Shared layout → Section navigation: renders
- Shared layout → Portfolio home: renders outlet
- Shared layout → Footer links: renders
- Shared layout → Portfolio assistant: opens assistant
- Project carousel → Project catalog: reads catalog
- Project carousel → Project details: opens details
- Contact form → EmailJS service: sends message
- Portfolio assistant → Assistant API: posts conversation
- Portfolio visitor → Section navigation: navigates sections
- Portfolio visitor → Contact form: submits inquiry
- Portfolio visitor → Project carousel: browses projects