# heymayur69/3d_portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/heymayur69/3d_portfolio
- Repository: https://github.com/heymayur69/3d_portfolio

## Overview

This repository is a React portfolio site for an embedded-software engineer. A visitor enters the single-page experience, explores profile, skills, career history and projects, then can submit a contact form; the page also presents 3D visual scenes. The graph separates the page’s content stages from its canvas rendering and shared presentation logic. Evidence is limited to the supplied excerpts and SOURCE INDEX references, so uncertain component-to-canvas usage is not connected.

Main entry points: [`src/App.jsx`](https://github.com/heymayur69/3d_portfolio/blob/main/src/App.jsx) (Page Composition), [`src/hoc/SectionWrapper.jsx`](https://github.com/heymayur69/3d_portfolio/blob/main/src/hoc/SectionWrapper.jsx) (Section Wrapper), [`src/components/Contact.jsx`](https://github.com/heymayur69/3d_portfolio/blob/main/src/components/Contact.jsx) (Contact Form), [`src/constants/index.js`](https://github.com/heymayur69/3d_portfolio/blob/main/src/constants/index.js) (Portfolio Content Data)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Portfolio Experience"]
  node_app["Page Composition<br/>[App.jsx]"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
end

subgraph group_content["Portfolio Content"]
  node_hero["Hero Introduction<br/>[Hero.jsx]"]
  node_about["About Profile<br/>[About.jsx]"]
  node_experience_section["Career History<br/>[Experience.jsx]"]
  node_tech["Technology Skills<br/>[Tech.jsx]"]
  node_works["Project Portfolio<br/>[Works.jsx]"]
  node_feedbacks["Testimonials<br/>[Feedbacks.jsx]"]
  node_contact["Contact Form<br/>[Contact.jsx]"]
end

subgraph group_visuals["3D Visuals"]
  node_earth["Earth Canvas<br/>[Earth.jsx]"]
  node_ball["Technology Ball Canvas<br/>[Ball.jsx]"]
  node_computers["Computer Canvas<br/>[Computers.jsx]"]
  node_stars["Stars Canvas<br/>[Stars.jsx]"]
  node_loader["Canvas Loader<br/>[Loader.jsx]"]
end

subgraph group_shared["Shared Presentation"]
  node_responsive["Responsive Hook<br/>[useResponsive.js]"]
  node_section_wrapper["Section Wrapper<br/>[SectionWrapper.jsx]"]
  node_motion["Motion Variants<br/>[motion.js]"]
  node_styles["Style Tokens<br/>[styles.js]"]
  node_constants["Portfolio Content Data<br/>[index.js]"]
end

node_visitor(("Visitor"))
node_email_service["EmailJS Service"]

node_visitor -->|"opens"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_about
node_app -->|"renders"| node_experience_section
node_app -->|"renders"| node_tech
node_app -->|"renders"| node_works
node_app -->|"renders"| node_feedbacks
node_app -->|"renders"| node_contact
node_contact -->|"sends message"| node_email_service
node_computers -->|"uses fallback"| node_loader
node_computers -->|"reads viewport"| node_responsive
node_contact -->|"renders"| node_earth
node_about -->|"reads content"| node_constants
node_experience_section -->|"reads content"| node_constants
node_tech -->|"reads content"| node_constants
node_works -->|"reads content"| node_constants
node_about -->|"wraps section"| node_section_wrapper
node_experience_section -->|"wraps section"| node_section_wrapper
node_contact -->|"wraps section"| node_section_wrapper
node_section_wrapper -->|"uses variants"| node_motion
node_section_wrapper -->|"uses tokens"| node_styles

click node_app "https://github.com/heymayur69/3d_portfolio/blob/main/src/App.jsx"
click node_navbar "https://github.com/heymayur69/3d_portfolio/blob/main/src/components/Navbar.jsx"
click node_hero "https://github.com/heymayur69/3d_portfolio/blob/main/src/components/Hero.jsx"
click node_about "https://github.com/heymayur69/3d_portfolio/blob/main/src/components/About.jsx"
click node_experience_section "https://github.com/heymayur69/3d_portfolio/blob/main/src/components/Experience.jsx"
click node_tech "https://github.com/heymayur69/3d_portfolio/blob/main/src/components/Tech.jsx"
click node_works "https://github.com/heymayur69/3d_portfolio/blob/main/src/components/Works.jsx"
click node_feedbacks "https://github.com/heymayur69/3d_portfolio/blob/main/src/components/Feedbacks.jsx"
click node_contact "https://github.com/heymayur69/3d_portfolio/blob/main/src/components/Contact.jsx"
click node_earth "https://github.com/heymayur69/3d_portfolio/blob/main/src/components/canvas/Earth.jsx"
click node_ball "https://github.com/heymayur69/3d_portfolio/blob/main/src/components/canvas/Ball.jsx"
click node_computers "https://github.com/heymayur69/3d_portfolio/blob/main/src/components/canvas/Computers.jsx"
click node_stars "https://github.com/heymayur69/3d_portfolio/blob/main/src/components/canvas/Stars.jsx"
click node_loader "https://github.com/heymayur69/3d_portfolio/blob/main/src/components/Loader.jsx"
click node_responsive "https://github.com/heymayur69/3d_portfolio/blob/main/src/hooks/useResponsive.js"
click node_section_wrapper "https://github.com/heymayur69/3d_portfolio/blob/main/src/hoc/SectionWrapper.jsx"
click node_motion "https://github.com/heymayur69/3d_portfolio/blob/main/src/utils/motion.js"
click node_styles "https://github.com/heymayur69/3d_portfolio/blob/main/src/styles.js"
click node_constants "https://github.com/heymayur69/3d_portfolio/blob/main/src/constants/index.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_navbar toneBlue
class node_hero,node_about,node_experience_section,node_tech,node_works,node_feedbacks,node_contact toneAmber
class node_earth,node_ball,node_computers,node_stars,node_loader toneMint
class node_responsive,node_section_wrapper,node_motion,node_styles,node_constants toneRose
class node_visitor,node_email_service toneIndigo
```

## Components

### Portfolio Experience

- [Page Composition](https://github.com/heymayur69/3d_portfolio/blob/main/src/App.jsx): `src/App.jsx`
- [Navigation](https://github.com/heymayur69/3d_portfolio/blob/main/src/components/Navbar.jsx): `src/components/Navbar.jsx`

### Portfolio Content

- [Hero Introduction](https://github.com/heymayur69/3d_portfolio/blob/main/src/components/Hero.jsx): `src/components/Hero.jsx`
- [About Profile](https://github.com/heymayur69/3d_portfolio/blob/main/src/components/About.jsx): `src/components/About.jsx`
- [Career History](https://github.com/heymayur69/3d_portfolio/blob/main/src/components/Experience.jsx): `src/components/Experience.jsx`
- [Technology Skills](https://github.com/heymayur69/3d_portfolio/blob/main/src/components/Tech.jsx): `src/components/Tech.jsx`
- [Project Portfolio](https://github.com/heymayur69/3d_portfolio/blob/main/src/components/Works.jsx): `src/components/Works.jsx`
- [Testimonials](https://github.com/heymayur69/3d_portfolio/blob/main/src/components/Feedbacks.jsx): `src/components/Feedbacks.jsx`
- [Contact Form](https://github.com/heymayur69/3d_portfolio/blob/main/src/components/Contact.jsx): `src/components/Contact.jsx`

### 3D Visuals

- [Earth Canvas](https://github.com/heymayur69/3d_portfolio/blob/main/src/components/canvas/Earth.jsx): `src/components/canvas/Earth.jsx`
- [Technology Ball Canvas](https://github.com/heymayur69/3d_portfolio/blob/main/src/components/canvas/Ball.jsx): `src/components/canvas/Ball.jsx`
- [Computer Canvas](https://github.com/heymayur69/3d_portfolio/blob/main/src/components/canvas/Computers.jsx): `src/components/canvas/Computers.jsx`
- [Stars Canvas](https://github.com/heymayur69/3d_portfolio/blob/main/src/components/canvas/Stars.jsx): `src/components/canvas/Stars.jsx`
- [Canvas Loader](https://github.com/heymayur69/3d_portfolio/blob/main/src/components/Loader.jsx): `src/components/Loader.jsx`

### Shared Presentation

- [Responsive Hook](https://github.com/heymayur69/3d_portfolio/blob/main/src/hooks/useResponsive.js): `src/hooks/useResponsive.js`
- [Section Wrapper](https://github.com/heymayur69/3d_portfolio/blob/main/src/hoc/SectionWrapper.jsx): `src/hoc/SectionWrapper.jsx`
- [Motion Variants](https://github.com/heymayur69/3d_portfolio/blob/main/src/utils/motion.js): `src/utils/motion.js`
- [Style Tokens](https://github.com/heymayur69/3d_portfolio/blob/main/src/styles.js): `src/styles.js`
- [Portfolio Content Data](https://github.com/heymayur69/3d_portfolio/blob/main/src/constants/index.js): `src/constants/index.js`

### Other components

- **Visitor**
- **EmailJS Service**

## Connections

- Visitor → Page Composition: opens
- Page Composition → Navigation: renders (evidence: `src/App.jsx`)
- Page Composition → Hero Introduction: renders (evidence: `src/App.jsx`)
- Page Composition → About Profile: renders (evidence: `src/App.jsx`)
- Page Composition → Career History: renders (evidence: `src/App.jsx`)
- Page Composition → Technology Skills: renders (evidence: `src/App.jsx`)
- Page Composition → Project Portfolio: renders (evidence: `src/App.jsx`)
- Page Composition → Testimonials: renders (evidence: `src/App.jsx`)
- Page Composition → Contact Form: renders (evidence: `src/App.jsx`)
- Contact Form → EmailJS Service: sends message (evidence: `src/components/Contact.jsx`)
- Computer Canvas → Canvas Loader: uses fallback (evidence: `src/components/canvas/Computers.jsx`)
- Computer Canvas → Responsive Hook: reads viewport (evidence: `src/components/canvas/Computers.jsx`)
- Contact Form → Earth Canvas: renders (evidence: `src/components/Contact.jsx`)
- About Profile → Portfolio Content Data: reads content (evidence: `src/components/About.jsx`)
- Career History → Portfolio Content Data: reads content (evidence: `src/components/Experience.jsx`)
- Technology Skills → Portfolio Content Data: reads content (evidence: `src/components/Tech.jsx`)
- Project Portfolio → Portfolio Content Data: reads content (evidence: `src/components/Works.jsx`)
- About Profile → Section Wrapper: wraps section (evidence: `src/components/About.jsx`)
- Career History → Section Wrapper: wraps section (evidence: `src/components/Experience.jsx`)
- Contact Form → Section Wrapper: wraps section (evidence: `src/components/Contact.jsx`)
- Section Wrapper → Motion Variants: uses variants (evidence: `src/hoc/SectionWrapper.jsx`)
- Section Wrapper → Style Tokens: uses tokens (evidence: `src/hoc/SectionWrapper.jsx`)