# abinashrout244/pixelportfolio architecture

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

- Interactive diagram: https://gitdiagram.com/abinashrout244/pixelportfolio
- Repository: https://github.com/abinashrout244/pixelportfolio

## Overview

This is a React portfolio site for presenting a developer’s work, skills, background, and contact links. A visitor enters through the routed app, explores portfolio pages and project listings or details, and can use contact and QR-sharing features. The graph preserves the README’s documented showcase capabilities and the major source-index modules. Some page wiring and component internals were not sampled, so only relationships visible in excerpts or the source index are asserted.

Main entry points: [`src/App.jsx`](https://github.com/abinashrout244/pixelportfolio/blob/main/src/App.jsx) (App routing), [`src/pages/Home.jsx`](https://github.com/abinashrout244/pixelportfolio/blob/main/src/pages/Home.jsx) (Home page), [`src/data/projectsData.js`](https://github.com/abinashrout244/pixelportfolio/blob/main/src/data/projectsData.js) (Project catalog), [`src/pages/ArchiveView.jsx`](https://github.com/abinashrout244/pixelportfolio/blob/main/src/pages/ArchiveView.jsx) (Project archive)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App and navigation"]
  node_app["App routing<br/>[App.jsx]"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
end

subgraph group_showcase["Portfolio showcase"]
  node_home["Home page<br/>[Home.jsx]"]
  node_featured["Featured projects"]
  node_projectdata["Project catalog<br/>[projectsData.js]"]
  node_archive["Project archive<br/>[ArchiveView.jsx]"]
  node_detail["Project detail"]
  node_projecthero["Project hero<br/>[ProjectHero.jsx]"]
  node_achievements["Achievements<br/>[Achievements.jsx]"]
end

subgraph group_profile["Profile and contact"]
  node_about["About page<br/>[Aboutme.jsx]"]
  node_abouthero["About hero<br/>[AboutHero.jsx]"]
  node_beliefs["Beliefs carousel"]
  node_education["Education section"]
  node_skills["Tech ecosystem<br/>[TechEcosystem.jsx]"]
  node_uses["Uses page<br/>[Uses.jsx]"]
  node_links["Links page<br/>[Links.jsx]"]
  node_cta["Contact CTA<br/>[PreFooterCTA.jsx]"]
  node_assistant["Assistant responses<br/>[asterAssistant.js]"]
  node_chatbutton["Assistant button"]
end

subgraph group_sharing["Sharing features"]
  node_qrcontext["QR modal state"]
  node_qrmodal["QR modal"]
  node_qr["QR generation<br/>[qr.js]"]
  node_businesscard["Business card<br/>[BusinessCard.jsx]"]
  node_share["Share page<br/>[Share.jsx]"]
end

node_visitor(("Portfolio visitor"))
node_emailjs["EmailJS service"]

node_visitor -->|"opens"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"routes"| node_home
node_app -->|"routes"| node_archive
node_app -->|"routes"| node_detail
node_app -->|"renders"| node_cta
node_app -.->|"routes"| node_about
node_app -.->|"routes"| node_achievements
node_app -.->|"routes"| node_uses
node_app -.->|"routes"| node_links
node_home -->|"renders"| node_featured
node_home -->|"renders"| node_education
node_home -->|"renders"| node_skills
node_featured -->|"reads"| node_projectdata
node_archive -->|"reads"| node_projectdata
node_archive -->|"opens QR"| node_qrcontext
node_detail -->|"reads"| node_projectdata
node_detail -->|"renders"| node_projecthero
node_about -->|"renders"| node_abouthero
node_about -->|"renders"| node_beliefs
node_cta -->|"sends form"| node_emailjs
node_chatbutton -->|"uses answers"| node_assistant
node_navbar -->|"opens QR"| node_qrcontext
node_qrcontext -->|"renders"| node_qrmodal
node_qrmodal -->|"generates QR"| node_qr
node_businesscard -->|"reads"| node_projectdata

click node_app "https://github.com/abinashrout244/pixelportfolio/blob/main/src/App.jsx"
click node_navbar "https://github.com/abinashrout244/pixelportfolio/blob/main/src/components/Navbar/Navbar.jsx"
click node_home "https://github.com/abinashrout244/pixelportfolio/blob/main/src/pages/Home.jsx"
click node_featured "https://github.com/abinashrout244/pixelportfolio/blob/main/src/components/FeaturedProjects.jsx"
click node_projectdata "https://github.com/abinashrout244/pixelportfolio/blob/main/src/data/projectsData.js"
click node_archive "https://github.com/abinashrout244/pixelportfolio/blob/main/src/pages/ArchiveView.jsx"
click node_detail "https://github.com/abinashrout244/pixelportfolio/blob/main/src/pages/ProjectDetailView.jsx"
click node_projecthero "https://github.com/abinashrout244/pixelportfolio/blob/main/src/pages/ProjectHero.jsx"
click node_achievements "https://github.com/abinashrout244/pixelportfolio/blob/main/src/pages/Achievements.jsx"
click node_about "https://github.com/abinashrout244/pixelportfolio/blob/main/src/pages/Aboutme.jsx"
click node_abouthero "https://github.com/abinashrout244/pixelportfolio/blob/main/src/components/AboutHero.jsx"
click node_beliefs "https://github.com/abinashrout244/pixelportfolio/blob/main/src/components/BeliefsCarousel.jsx"
click node_education "https://github.com/abinashrout244/pixelportfolio/blob/main/src/components/EducationSection.jsx"
click node_skills "https://github.com/abinashrout244/pixelportfolio/blob/main/src/components/TechEcosystem.jsx"
click node_uses "https://github.com/abinashrout244/pixelportfolio/blob/main/src/pages/Uses.jsx"
click node_links "https://github.com/abinashrout244/pixelportfolio/blob/main/src/pages/Links.jsx"
click node_cta "https://github.com/abinashrout244/pixelportfolio/blob/main/src/pages/PreFooterCTA.jsx"
click node_assistant "https://github.com/abinashrout244/pixelportfolio/blob/main/src/data/asterAssistant.js"
click node_chatbutton "https://github.com/abinashrout244/pixelportfolio/blob/main/src/components/HeroChatbotButton.jsx"
click node_qrcontext "https://github.com/abinashrout244/pixelportfolio/blob/main/src/context/PortfolioQRContext.jsx"
click node_qrmodal "https://github.com/abinashrout244/pixelportfolio/blob/main/src/components/PortfolioQRModal.jsx"
click node_qr "https://github.com/abinashrout244/pixelportfolio/blob/main/src/utils/qr.js"
click node_businesscard "https://github.com/abinashrout244/pixelportfolio/blob/main/src/pages/BusinessCard.jsx"
click node_share "https://github.com/abinashrout244/pixelportfolio/blob/main/src/pages/Share.jsx"

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_navbar toneBlue
class node_home,node_featured,node_projectdata,node_archive,node_detail,node_projecthero,node_achievements toneAmber
class node_about,node_abouthero,node_beliefs,node_education,node_skills,node_uses,node_links,node_cta,node_assistant,node_chatbutton toneMint
class node_qrcontext,node_qrmodal,node_qr,node_businesscard,node_share toneRose
class node_visitor,node_emailjs toneIndigo
```

## Components

### App and navigation

- [App routing](https://github.com/abinashrout244/pixelportfolio/blob/main/src/App.jsx): `src/App.jsx`
- [Navigation](https://github.com/abinashrout244/pixelportfolio/blob/main/src/components/Navbar/Navbar.jsx): `src/components/Navbar/Navbar.jsx`

### Portfolio showcase

- [Home page](https://github.com/abinashrout244/pixelportfolio/blob/main/src/pages/Home.jsx): `src/pages/Home.jsx`
- [Featured projects](https://github.com/abinashrout244/pixelportfolio/blob/main/src/components/FeaturedProjects.jsx): `src/components/FeaturedProjects.jsx`
- [Project catalog](https://github.com/abinashrout244/pixelportfolio/blob/main/src/data/projectsData.js): `src/data/projectsData.js`
- [Project archive](https://github.com/abinashrout244/pixelportfolio/blob/main/src/pages/ArchiveView.jsx): `src/pages/ArchiveView.jsx`
- [Project detail](https://github.com/abinashrout244/pixelportfolio/blob/main/src/pages/ProjectDetailView.jsx): `src/pages/ProjectDetailView.jsx`
- [Project hero](https://github.com/abinashrout244/pixelportfolio/blob/main/src/pages/ProjectHero.jsx): `src/pages/ProjectHero.jsx`
- [Achievements](https://github.com/abinashrout244/pixelportfolio/blob/main/src/pages/Achievements.jsx): `src/pages/Achievements.jsx`

### Profile and contact

- [About page](https://github.com/abinashrout244/pixelportfolio/blob/main/src/pages/Aboutme.jsx): `src/pages/Aboutme.jsx`
- [About hero](https://github.com/abinashrout244/pixelportfolio/blob/main/src/components/AboutHero.jsx): `src/components/AboutHero.jsx`
- [Beliefs carousel](https://github.com/abinashrout244/pixelportfolio/blob/main/src/components/BeliefsCarousel.jsx): `src/components/BeliefsCarousel.jsx`
- [Education section](https://github.com/abinashrout244/pixelportfolio/blob/main/src/components/EducationSection.jsx): `src/components/EducationSection.jsx`
- [Tech ecosystem](https://github.com/abinashrout244/pixelportfolio/blob/main/src/components/TechEcosystem.jsx): `src/components/TechEcosystem.jsx`
- [Uses page](https://github.com/abinashrout244/pixelportfolio/blob/main/src/pages/Uses.jsx): `src/pages/Uses.jsx`
- [Links page](https://github.com/abinashrout244/pixelportfolio/blob/main/src/pages/Links.jsx): `src/pages/Links.jsx`
- [Contact CTA](https://github.com/abinashrout244/pixelportfolio/blob/main/src/pages/PreFooterCTA.jsx): `src/pages/PreFooterCTA.jsx`
- [Assistant responses](https://github.com/abinashrout244/pixelportfolio/blob/main/src/data/asterAssistant.js): `src/data/asterAssistant.js`
- [Assistant button](https://github.com/abinashrout244/pixelportfolio/blob/main/src/components/HeroChatbotButton.jsx): `src/components/HeroChatbotButton.jsx`

### Sharing features

- [QR modal state](https://github.com/abinashrout244/pixelportfolio/blob/main/src/context/PortfolioQRContext.jsx): `src/context/PortfolioQRContext.jsx`
- [QR modal](https://github.com/abinashrout244/pixelportfolio/blob/main/src/components/PortfolioQRModal.jsx): `src/components/PortfolioQRModal.jsx`
- [QR generation](https://github.com/abinashrout244/pixelportfolio/blob/main/src/utils/qr.js): `src/utils/qr.js`
- [Business card](https://github.com/abinashrout244/pixelportfolio/blob/main/src/pages/BusinessCard.jsx): `src/pages/BusinessCard.jsx`
- [Share page](https://github.com/abinashrout244/pixelportfolio/blob/main/src/pages/Share.jsx): `src/pages/Share.jsx`

### Other components

- **Portfolio visitor**
- **EmailJS service**

## Connections

- Portfolio visitor → App routing: opens
- App routing → Navigation: renders (evidence: `src/App.jsx`)
- App routing → Home page: routes (evidence: `src/App.jsx`)
- App routing → Project archive: routes (evidence: `src/App.jsx`)
- App routing → Project detail: routes (evidence: `src/App.jsx`)
- App routing → Contact CTA: renders (evidence: `src/App.jsx`)
- App routing → About page: routes (evidence: `src/App.jsx`)
- App routing → Achievements: routes (evidence: `src/App.jsx`)
- App routing → Uses page: routes (evidence: `src/App.jsx`)
- App routing → Links page: routes (evidence: `src/App.jsx`)
- Home page → Featured projects: renders (evidence: `src/pages/Home.jsx`)
- Home page → Education section: renders (evidence: `src/pages/Home.jsx`)
- Home page → Tech ecosystem: renders (evidence: `src/pages/Home.jsx`)
- Featured projects → Project catalog: reads (evidence: `src/components/FeaturedProjects.jsx`)
- Project archive → Project catalog: reads (evidence: `src/pages/ArchiveView.jsx`)
- Project archive → QR modal state: opens QR (evidence: `src/pages/ArchiveView.jsx`)
- Project detail → Project catalog: reads (evidence: `src/pages/ProjectDetailView.jsx`)
- Project detail → Project hero: renders (evidence: `src/pages/ProjectDetailView.jsx`)
- About page → About hero: renders (evidence: `src/pages/Aboutme.jsx`)
- About page → Beliefs carousel: renders (evidence: `src/pages/Aboutme.jsx`)
- Contact CTA → EmailJS service: sends form (evidence: `src/pages/PreFooterCTA.jsx`)
- Assistant button → Assistant responses: uses answers (evidence: `src/components/HeroChatbotButton.jsx`)
- Navigation → QR modal state: opens QR (evidence: `src/components/Navbar/Navbar.jsx`)
- QR modal state → QR modal: renders (evidence: `src/context/PortfolioQRContext.jsx`)
- QR modal → QR generation: generates QR (evidence: `src/components/PortfolioQRModal.jsx`)
- Business card → Project catalog: reads (evidence: `src/pages/BusinessCard.jsx`)