# harshiit112/harshit_portfolio_3d architecture

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

- Interactive diagram: https://gitdiagram.com/harshiit112/harshit_portfolio_3d
- Repository: https://github.com/harshiit112/harshit_portfolio_3d

## Overview

This is a React developer-portfolio site: visitors navigate an introduction, profile, project showcase, and contact form. The main runtime assembles these sections; the contact section submits messages through EmailJS, while the About section uses interactive visual components. Project, experience, and testimonial content is represented in shared constants, though some sections are not currently rendered. The README describes 3D visuals and animation; sampled source confirms a standalone astronaut model component, but does not establish how it is connected to the hero. Connections to unsampled section internals are therefore limited.

Main entry points: [`src/App.jsx`](https://github.com/harshiit112/harshit_portfolio_3d/blob/main/src/App.jsx) (Portfolio app), [`src/section/Contact.jsx`](https://github.com/harshiit112/harshit_portfolio_3d/blob/main/src/section/Contact.jsx) (Contact form), [`src/section/About.jsx`](https://github.com/harshiit112/harshit_portfolio_3d/blob/main/src/section/About.jsx) (About section), [`src/constants/index.js`](https://github.com/harshiit112/harshit_portfolio_3d/blob/main/src/constants/index.js) (Portfolio content data)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application"]
  node_app["Portfolio app<br/>[App.jsx]"]
  node_nav["Navigation<br/>[Navbar.jsx]"]
end

subgraph group_portfolio["Portfolio content"]
  node_hero["Hero section<br/>[Hero.jsx]"]
  node_about["About section<br/>[About.jsx]"]
  node_projects["Project showcase<br/>[Projects.jsx]"]
  node_experience["Experience section<br/>[Experiences.jsx]"]
  node_testimonials["Testimonials<br/>[Testimonial.jsx]"]
  node_content["Portfolio content data<br/>[index.js]"]
  node_footer["Footer<br/>[Footer.jsx]"]
end

subgraph group_visuals["Interactive visuals"]
  node_globe["Interactive globe<br/>[Globe.jsx]"]
  node_frameworks["Framework display<br/>[Frameworks.jsx]"]
  node_astronaut["Astronaut model<br/>[Astronaut.jsx]"]
  node_model["Astronaut asset"]
  node_particles["Particle backdrop<br/>[Particles.jsx]"]
end

subgraph group_contact["Contact"]
  node_contact["Contact form<br/>[Contact.jsx]"]
  node_emailjs["EmailJS service"]
  node_alert["Submission alert<br/>[Alert.jsx]"]
end

node_visitor(("Visitor"))

node_visitor -->|"uses navigation"| node_nav
node_visitor -->|"enters message"| node_contact
node_app -->|"renders"| node_nav
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_about
node_app -->|"renders"| node_projects
node_app -->|"renders"| node_contact
node_app -->|"renders"| node_footer
node_about -->|"renders"| node_globe
node_about -->|"renders"| node_frameworks
node_astronaut -->|"loads model"| node_model
node_contact -->|"sends message"| node_emailjs
node_contact -->|"shows status"| node_alert
node_contact -->|"renders backdrop"| node_particles
node_projects -.->|"reads project data"| node_content
node_experience -.->|"reads experience data"| node_content
node_testimonials -.->|"reads testimonial data"| node_content

click node_app "https://github.com/harshiit112/harshit_portfolio_3d/blob/main/src/App.jsx"
click node_nav "https://github.com/harshiit112/harshit_portfolio_3d/blob/main/src/section/Navbar.jsx"
click node_hero "https://github.com/harshiit112/harshit_portfolio_3d/blob/main/src/section/Hero.jsx"
click node_about "https://github.com/harshiit112/harshit_portfolio_3d/blob/main/src/section/About.jsx"
click node_projects "https://github.com/harshiit112/harshit_portfolio_3d/blob/main/src/section/Projects.jsx"
click node_experience "https://github.com/harshiit112/harshit_portfolio_3d/blob/main/src/section/Experiences.jsx"
click node_testimonials "https://github.com/harshiit112/harshit_portfolio_3d/blob/main/src/section/Testimonial.jsx"
click node_content "https://github.com/harshiit112/harshit_portfolio_3d/blob/main/src/constants/index.js"
click node_footer "https://github.com/harshiit112/harshit_portfolio_3d/blob/main/src/section/Footer.jsx"
click node_globe "https://github.com/harshiit112/harshit_portfolio_3d/blob/main/src/components/Globe.jsx"
click node_frameworks "https://github.com/harshiit112/harshit_portfolio_3d/blob/main/src/components/Frameworks.jsx"
click node_astronaut "https://github.com/harshiit112/harshit_portfolio_3d/blob/main/src/components/Astronaut.jsx"
click node_model "https://github.com/harshiit112/harshit_portfolio_3d/blob/main/public/models/tenhun_falling_spaceman_fanart.glb"
click node_contact "https://github.com/harshiit112/harshit_portfolio_3d/blob/main/src/section/Contact.jsx"
click node_alert "https://github.com/harshiit112/harshit_portfolio_3d/blob/main/src/components/Alert.jsx"
click node_particles "https://github.com/harshiit112/harshit_portfolio_3d/blob/main/src/components/Particles.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_nav toneBlue
class node_hero,node_about,node_projects,node_experience,node_testimonials,node_content,node_footer toneAmber
class node_globe,node_frameworks,node_astronaut,node_model,node_particles toneMint
class node_contact,node_emailjs,node_alert toneRose
class node_visitor toneIndigo
```

## Components

### Application

- [Portfolio app](https://github.com/harshiit112/harshit_portfolio_3d/blob/main/src/App.jsx): `src/App.jsx`
- [Navigation](https://github.com/harshiit112/harshit_portfolio_3d/blob/main/src/section/Navbar.jsx): `src/section/Navbar.jsx`

### Portfolio content

- [Hero section](https://github.com/harshiit112/harshit_portfolio_3d/blob/main/src/section/Hero.jsx): `src/section/Hero.jsx`
- [About section](https://github.com/harshiit112/harshit_portfolio_3d/blob/main/src/section/About.jsx): `src/section/About.jsx`
- [Project showcase](https://github.com/harshiit112/harshit_portfolio_3d/blob/main/src/section/Projects.jsx): `src/section/Projects.jsx`
- [Experience section](https://github.com/harshiit112/harshit_portfolio_3d/blob/main/src/section/Experiences.jsx): `src/section/Experiences.jsx`
- [Testimonials](https://github.com/harshiit112/harshit_portfolio_3d/blob/main/src/section/Testimonial.jsx): `src/section/Testimonial.jsx`
- [Portfolio content data](https://github.com/harshiit112/harshit_portfolio_3d/blob/main/src/constants/index.js): `src/constants/index.js`
- [Footer](https://github.com/harshiit112/harshit_portfolio_3d/blob/main/src/section/Footer.jsx): `src/section/Footer.jsx`

### Interactive visuals

- [Interactive globe](https://github.com/harshiit112/harshit_portfolio_3d/blob/main/src/components/Globe.jsx): `src/components/Globe.jsx`
- [Framework display](https://github.com/harshiit112/harshit_portfolio_3d/blob/main/src/components/Frameworks.jsx): `src/components/Frameworks.jsx`
- [Astronaut model](https://github.com/harshiit112/harshit_portfolio_3d/blob/main/src/components/Astronaut.jsx): `src/components/Astronaut.jsx`
- [Astronaut asset](https://github.com/harshiit112/harshit_portfolio_3d/blob/main/public/models/tenhun_falling_spaceman_fanart.glb): `public/models/tenhun_falling_spaceman_fanart.glb`
- [Particle backdrop](https://github.com/harshiit112/harshit_portfolio_3d/blob/main/src/components/Particles.jsx): `src/components/Particles.jsx`

### Contact

- [Contact form](https://github.com/harshiit112/harshit_portfolio_3d/blob/main/src/section/Contact.jsx): `src/section/Contact.jsx`
- **EmailJS service**
- [Submission alert](https://github.com/harshiit112/harshit_portfolio_3d/blob/main/src/components/Alert.jsx): `src/components/Alert.jsx`

### Other components

- **Visitor**

## Connections

- Visitor → Navigation: uses navigation
- Visitor → Contact form: enters message
- Portfolio app → Navigation: renders
- Portfolio app → Hero section: renders
- Portfolio app → About section: renders
- Portfolio app → Project showcase: renders
- Portfolio app → Contact form: renders
- Portfolio app → Footer: renders
- About section → Interactive globe: renders
- About section → Framework display: renders
- Astronaut model → Astronaut asset: loads model
- Contact form → EmailJS service: sends message
- Contact form → Submission alert: shows status
- Contact form → Particle backdrop: renders backdrop
- Project showcase → Portfolio content data: reads project data
- Experience section → Portfolio content data: reads experience data
- Testimonials → Portfolio content data: reads testimonial data