How b4bikramjit/portfolio-website works
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: App.js App coordinator · card.jsx Card primitives · craco.config.js Plugin configuration · Projects.jsx Projects section
Components 23
Portfolio experience
- App coordinator
frontend/src/App.js - Particle backdrop
frontend/src/components/ParticleBackground.jsx - Site header
frontend/src/components/Header.jsx
Portfolio content
- Hero section
frontend/src/components/Hero.jsx - About section
frontend/src/components/About.jsx - Skills section
frontend/src/components/Skills.jsx - Experience section
frontend/src/components/Experience.jsx - Projects section
frontend/src/components/Projects.jsx - Storytelling section
frontend/src/components/Storytelling.jsx - Contact section
frontend/src/components/Contact.jsx - Site footer
frontend/src/components/Footer.jsx - Portfolio data
frontend/src/data/portfolioData.js
UI primitives
- Card primitives
frontend/src/components/ui/card.jsx - Badge primitive
frontend/src/components/ui/badge.jsx - Button primitive
frontend/src/components/ui/button.jsx - Toast state
frontend/src/hooks/use-toast.js - Toast display
frontend/src/components/ui/toaster.jsx
Development plugins
- Plugin configuration
frontend/craco.config.js - JSX metadata
frontend/plugins/visual-edits/babel-metadata-plugin.js - Visual edit endpoints
frontend/plugins/visual-edits/dev-server-setup.js - Webpack health tracker
frontend/plugins/health-check/webpack-health-plugin.js - Health endpoints
frontend/plugins/health-check/health-endpoints.js
Other components
- Visitor
Connections 32
- Visitor → App coordinator: opens
- App coordinator → Portfolio data: loads data
frontend/src/App.js - App coordinator → Particle backdrop: renders
frontend/src/App.js - App coordinator → Site header: renders
frontend/src/App.js - App coordinator → Hero section: passes data
frontend/src/App.js - App coordinator → About section: passes data
frontend/src/App.js - App coordinator → Skills section: passes data
frontend/src/App.js - App coordinator → Experience section: passes data
frontend/src/App.js - App coordinator → Projects section: passes data
frontend/src/App.js - App coordinator → Storytelling section: passes data
frontend/src/App.js - App coordinator → Contact section: passes data
frontend/src/App.js - App coordinator → Site footer: passes data
frontend/src/App.js - App coordinator → Toast display: renders
frontend/src/App.js - About section → Card primitives: uses
frontend/src/components/About.jsx - Experience section → Card primitives: uses
frontend/src/components/Experience.jsx - Hero section → Card primitives: uses
frontend/src/components/Hero.jsx - Skills section → Card primitives: uses
frontend/src/components/Skills.jsx - Skills section → Badge primitive: uses
frontend/src/components/Skills.jsx - Projects section → Card primitives: uses
frontend/src/components/Projects.jsx - Projects section → Badge primitive: uses
frontend/src/components/Projects.jsx - Projects section → Button primitive: uses
frontend/src/components/Projects.jsx - Storytelling section → Card primitives: uses
frontend/src/components/Storytelling.jsx - Storytelling section → Badge primitive: uses
frontend/src/components/Storytelling.jsx - Storytelling section → Button primitive: uses
frontend/src/components/Storytelling.jsx - Contact section → Card primitives: uses
frontend/src/components/Contact.jsx - Contact section → Button primitive: uses
frontend/src/components/Contact.jsx - Contact section → Toast state: notifies
frontend/src/components/Contact.jsx - Plugin configuration → JSX metadata: configures
frontend/craco.config.js - Plugin configuration → Visual edit endpoints: configures
frontend/craco.config.js - Plugin configuration → Webpack health tracker: registers
frontend/craco.config.js - Plugin configuration → Health endpoints: configures
frontend/craco.config.js - Health endpoints → Webpack health tracker: reads status
frontend/plugins/health-check/health-endpoints.js