# b4bikramjit/portfolio-website architecture

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

- Interactive diagram: https://gitdiagram.com/b4bikramjit/portfolio-website
- Repository: https://github.com/b4bikramjit/portfolio-website
- Video tour (about a minute): https://gitdiagram.com/b4bikramjit/portfolio-website/video

## Overview

This repository is a data-driven personal portfolio website, with optional development-time visual-editing and health-monitoring features. A visitor loads the portfolio, then the app supplies portfolio data to its content sections and presents contact details and a simulated message confirmation. The graph also preserves the plugin capabilities identified in the source index. Relationships are limited to those shown by the App, component references, plugin configuration, and excerpts; unsampled module internals are not inferred.

Main entry points: [`frontend/src/App.js`](https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/App.js) (App coordinator), [`frontend/src/components/ui/card.jsx`](https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/components/ui/card.jsx) (Card primitives), [`frontend/craco.config.js`](https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/craco.config.js) (Plugin configuration), [`frontend/src/components/Projects.jsx`](https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/components/Projects.jsx) (Projects section)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_portfolio["Portfolio experience"]
  node_app["App coordinator<br/>[App.js]"]
  node_background["Particle backdrop"]
  node_header["Site header<br/>[Header.jsx]"]
end

subgraph group_content["Portfolio content"]
  node_hero["Hero section<br/>[Hero.jsx]"]
  node_about["About section<br/>[About.jsx]"]
  node_skills["Skills section<br/>[Skills.jsx]"]
  node_experience["Experience section<br/>[Experience.jsx]"]
  node_projects["Projects section<br/>[Projects.jsx]"]
  node_storytelling["Storytelling section<br/>[Storytelling.jsx]"]
  node_contact["Contact section<br/>[Contact.jsx]"]
  node_footer["Site footer<br/>[Footer.jsx]"]
  node_portfolio_data["Portfolio data<br/>[portfolioData.js]"]
end

subgraph group_ui["UI primitives"]
  node_cards["Card primitives<br/>[card.jsx]"]
  node_badges["Badge primitive<br/>[badge.jsx]"]
  node_buttons["Button primitive<br/>[button.jsx]"]
  node_toast_hook["Toast state<br/>[use-toast.js]"]
  node_toaster["Toast display<br/>[toaster.jsx]"]
end

subgraph group_devtools["Development plugins"]
  node_config["Plugin configuration<br/>[craco.config.js]"]
  node_metadata["JSX metadata"]
  node_edit_server["Visual edit endpoints"]
  node_health_plugin["Webpack health tracker"]
  node_health_endpoints["Health endpoints"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_app
node_app -->|"loads data"| node_portfolio_data
node_app -->|"renders"| node_background
node_app -->|"renders"| node_header
node_app -->|"passes data"| node_hero
node_app -->|"passes data"| node_about
node_app -->|"passes data"| node_skills
node_app -->|"passes data"| node_experience
node_app -->|"passes data"| node_projects
node_app -->|"passes data"| node_storytelling
node_app -->|"passes data"| node_contact
node_app -->|"passes data"| node_footer
node_app -->|"renders"| node_toaster
node_about -->|"uses"| node_cards
node_experience -->|"uses"| node_cards
node_hero -->|"uses"| node_cards
node_skills -->|"uses"| node_cards
node_skills -->|"uses"| node_badges
node_projects -->|"uses"| node_cards
node_projects -->|"uses"| node_badges
node_projects -->|"uses"| node_buttons
node_storytelling -->|"uses"| node_cards
node_storytelling -->|"uses"| node_badges
node_storytelling -->|"uses"| node_buttons
node_contact -->|"uses"| node_cards
node_contact -->|"uses"| node_buttons
node_contact -->|"notifies"| node_toast_hook
node_config -->|"configures"| node_metadata
node_config -->|"configures"| node_edit_server
node_config -->|"registers"| node_health_plugin
node_config -->|"configures"| node_health_endpoints
node_health_endpoints -->|"reads status"| node_health_plugin

click node_app "https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/App.js"
click node_background "https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/components/ParticleBackground.jsx"
click node_header "https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/components/Header.jsx"
click node_hero "https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/components/Hero.jsx"
click node_about "https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/components/About.jsx"
click node_skills "https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/components/Skills.jsx"
click node_experience "https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/components/Experience.jsx"
click node_projects "https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/components/Projects.jsx"
click node_storytelling "https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/components/Storytelling.jsx"
click node_contact "https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/components/Contact.jsx"
click node_footer "https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/components/Footer.jsx"
click node_portfolio_data "https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/data/portfolioData.js"
click node_cards "https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/components/ui/card.jsx"
click node_badges "https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/components/ui/badge.jsx"
click node_buttons "https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/components/ui/button.jsx"
click node_toast_hook "https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/hooks/use-toast.js"
click node_toaster "https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/components/ui/toaster.jsx"
click node_config "https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/craco.config.js"
click node_metadata "https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/plugins/visual-edits/babel-metadata-plugin.js"
click node_edit_server "https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/plugins/visual-edits/dev-server-setup.js"
click node_health_plugin "https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/plugins/health-check/webpack-health-plugin.js"
click node_health_endpoints "https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/plugins/health-check/health-endpoints.js"

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,node_background,node_header toneBlue
class node_hero,node_about,node_skills,node_experience,node_projects,node_storytelling,node_contact,node_footer,node_portfolio_data toneAmber
class node_cards,node_badges,node_buttons,node_toast_hook,node_toaster toneMint
class node_config,node_metadata,node_edit_server,node_health_plugin,node_health_endpoints toneRose
class node_visitor toneIndigo
```

## Components

### Portfolio experience

- [App coordinator](https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/App.js): `frontend/src/App.js`
- [Particle backdrop](https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/components/ParticleBackground.jsx): `frontend/src/components/ParticleBackground.jsx`
- [Site header](https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/components/Header.jsx): `frontend/src/components/Header.jsx`

### Portfolio content

- [Hero section](https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/components/Hero.jsx): `frontend/src/components/Hero.jsx`
- [About section](https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/components/About.jsx): `frontend/src/components/About.jsx`
- [Skills section](https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/components/Skills.jsx): `frontend/src/components/Skills.jsx`
- [Experience section](https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/components/Experience.jsx): `frontend/src/components/Experience.jsx`
- [Projects section](https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/components/Projects.jsx): `frontend/src/components/Projects.jsx`
- [Storytelling section](https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/components/Storytelling.jsx): `frontend/src/components/Storytelling.jsx`
- [Contact section](https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/components/Contact.jsx): `frontend/src/components/Contact.jsx`
- [Site footer](https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/components/Footer.jsx): `frontend/src/components/Footer.jsx`
- [Portfolio data](https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/data/portfolioData.js): `frontend/src/data/portfolioData.js`

### UI primitives

- [Card primitives](https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/components/ui/card.jsx): `frontend/src/components/ui/card.jsx`
- [Badge primitive](https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/components/ui/badge.jsx): `frontend/src/components/ui/badge.jsx`
- [Button primitive](https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/components/ui/button.jsx): `frontend/src/components/ui/button.jsx`
- [Toast state](https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/hooks/use-toast.js): `frontend/src/hooks/use-toast.js`
- [Toast display](https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/src/components/ui/toaster.jsx): `frontend/src/components/ui/toaster.jsx`

### Development plugins

- [Plugin configuration](https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/craco.config.js): `frontend/craco.config.js`
- [JSX metadata](https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/plugins/visual-edits/babel-metadata-plugin.js): `frontend/plugins/visual-edits/babel-metadata-plugin.js`
- [Visual edit endpoints](https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/plugins/visual-edits/dev-server-setup.js): `frontend/plugins/visual-edits/dev-server-setup.js`
- [Webpack health tracker](https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/plugins/health-check/webpack-health-plugin.js): `frontend/plugins/health-check/webpack-health-plugin.js`
- [Health endpoints](https://github.com/b4bikramjit/portfolio-website/blob/main/frontend/plugins/health-check/health-endpoints.js): `frontend/plugins/health-check/health-endpoints.js`

### Other components

- **Visitor**

## Connections

- Visitor → App coordinator: opens
- App coordinator → Portfolio data: loads data (evidence: `frontend/src/App.js`)
- App coordinator → Particle backdrop: renders (evidence: `frontend/src/App.js`)
- App coordinator → Site header: renders (evidence: `frontend/src/App.js`)
- App coordinator → Hero section: passes data (evidence: `frontend/src/App.js`)
- App coordinator → About section: passes data (evidence: `frontend/src/App.js`)
- App coordinator → Skills section: passes data (evidence: `frontend/src/App.js`)
- App coordinator → Experience section: passes data (evidence: `frontend/src/App.js`)
- App coordinator → Projects section: passes data (evidence: `frontend/src/App.js`)
- App coordinator → Storytelling section: passes data (evidence: `frontend/src/App.js`)
- App coordinator → Contact section: passes data (evidence: `frontend/src/App.js`)
- App coordinator → Site footer: passes data (evidence: `frontend/src/App.js`)
- App coordinator → Toast display: renders (evidence: `frontend/src/App.js`)
- About section → Card primitives: uses (evidence: `frontend/src/components/About.jsx`)
- Experience section → Card primitives: uses (evidence: `frontend/src/components/Experience.jsx`)
- Hero section → Card primitives: uses (evidence: `frontend/src/components/Hero.jsx`)
- Skills section → Card primitives: uses (evidence: `frontend/src/components/Skills.jsx`)
- Skills section → Badge primitive: uses (evidence: `frontend/src/components/Skills.jsx`)
- Projects section → Card primitives: uses (evidence: `frontend/src/components/Projects.jsx`)
- Projects section → Badge primitive: uses (evidence: `frontend/src/components/Projects.jsx`)
- Projects section → Button primitive: uses (evidence: `frontend/src/components/Projects.jsx`)
- Storytelling section → Card primitives: uses (evidence: `frontend/src/components/Storytelling.jsx`)
- Storytelling section → Badge primitive: uses (evidence: `frontend/src/components/Storytelling.jsx`)
- Storytelling section → Button primitive: uses (evidence: `frontend/src/components/Storytelling.jsx`)
- Contact section → Card primitives: uses (evidence: `frontend/src/components/Contact.jsx`)
- Contact section → Button primitive: uses (evidence: `frontend/src/components/Contact.jsx`)
- Contact section → Toast state: notifies (evidence: `frontend/src/components/Contact.jsx`)
- Plugin configuration → JSX metadata: configures (evidence: `frontend/craco.config.js`)
- Plugin configuration → Visual edit endpoints: configures (evidence: `frontend/craco.config.js`)
- Plugin configuration → Webpack health tracker: registers (evidence: `frontend/craco.config.js`)
- Plugin configuration → Health endpoints: configures (evidence: `frontend/craco.config.js`)
- Health endpoints → Webpack health tracker: reads status (evidence: `frontend/plugins/health-check/health-endpoints.js`)