# ladunjexa/reactjs18-3d-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/ladunjexa/reactjs18-3d-portfolio
- Repository: https://github.com/ladunjexa/reactjs18-3d-portfolio

## Overview

This repository is a responsive 3D portfolio website. A visitor opens the React app and browses its profile, experience, skills, project, testimonial, and contact sections; the contact form sends a message through EmailJS. The app also includes interactive 3D canvas components and bundled scene assets. The README documents these capabilities, but only selected source files were sampled, so links between unsampled sections and their data or visual components are omitted where wiring could not be confirmed.

Main entry points: [`src/App.tsx`](https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/App.tsx) (Portfolio App), [`src/components/sections/Contact.tsx`](https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/components/sections/Contact.tsx) (Contact Form), [`src/components/canvas/index.ts`](https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/components/canvas/index.ts) (Canvas Exports), [`src/main.tsx`](https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/main.tsx) (React Entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application"]
  node_main["React Entry<br/>[main.tsx]"]
  node_app_component["Portfolio App<br/>[App.tsx]"]
end

subgraph group_portfolio["Portfolio Sections"]
  node_navbar["Navigation<br/>[Navbar.tsx]"]
  node_hero["Hero Section<br/>[Hero.tsx]"]
  node_about["About Section<br/>[About.tsx]"]
  node_experience["Experience Section<br/>[Experience.tsx]"]
  node_tech["Technology Section<br/>[Tech.tsx]"]
  node_works["Projects Section<br/>[Works.tsx]"]
  node_feedbacks["Testimonials Section<br/>[Feedbacks.tsx]"]
  node_contact["Contact Form<br/>[Contact.tsx]"]
end

subgraph group_visuals["3D Visuals"]
  node_canvas_index["Canvas Exports<br/>[index.ts]"]
  node_computers["Computer Canvas<br/>[Computers.tsx]"]
  node_earth["Earth Canvas<br/>[Earth.tsx]"]
  node_ball["Ball Canvas<br/>[Ball.tsx]"]
  node_stars["Stars Canvas<br/>[Stars.tsx]"]
  node_desktop_model["Desktop Scene<br/>[scene.gltf]"]
  node_planet_model["Planet Scene<br/>[scene.gltf]"]
end

subgraph group_content["Portfolio Content"]
  node_content_data["Portfolio Data<br/>[index.ts]"]
  node_site_config["Site Configuration<br/>[config.ts]"]
  node_header["Section Header<br/>[Header.tsx]"]
  node_motion["Motion Variants<br/>[motion.ts]"]
end

node_visitor(("Visitor"))
node_emailjs{{"EmailJS"}}

node_visitor -->|"opens site"| node_main
node_main -->|"renders"| node_app_component
node_app_component -->|"renders"| node_navbar
node_app_component -->|"renders"| node_hero
node_app_component -->|"renders"| node_about
node_app_component -->|"renders"| node_experience
node_app_component -->|"renders"| node_tech
node_app_component -->|"renders"| node_works
node_app_component -->|"renders"| node_feedbacks
node_app_component -->|"renders"| node_contact
node_app_component -->|"renders"| node_stars
node_contact -->|"renders"| node_earth
node_contact -.->|"sends message"| node_emailjs
node_computers -->|"loads scene"| node_desktop_model
node_navbar -->|"reads links"| node_content_data
node_app_component -->|"reads title"| node_site_config
node_contact -->|"reads settings"| node_site_config
node_contact -->|"renders"| node_header
node_contact -->|"uses variants"| node_motion
node_canvas_index -->|"exports"| node_computers
node_canvas_index -->|"exports"| node_earth
node_canvas_index -->|"exports"| node_ball
node_canvas_index -->|"exports"| node_stars

click node_main "https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/main.tsx"
click node_app_component "https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/App.tsx"
click node_navbar "https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/components/layout/Navbar.tsx"
click node_hero "https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/components/sections/Hero.tsx"
click node_about "https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/components/sections/About.tsx"
click node_experience "https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/components/sections/Experience.tsx"
click node_tech "https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/components/sections/Tech.tsx"
click node_works "https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/components/sections/Works.tsx"
click node_feedbacks "https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/components/sections/Feedbacks.tsx"
click node_contact "https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/components/sections/Contact.tsx"
click node_canvas_index "https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/components/canvas/index.ts"
click node_computers "https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/components/canvas/Computers.tsx"
click node_earth "https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/components/canvas/Earth.tsx"
click node_ball "https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/components/canvas/Ball.tsx"
click node_stars "https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/components/canvas/Stars.tsx"
click node_desktop_model "https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/public/desktop_pc/scene.gltf"
click node_planet_model "https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/public/planet/scene.gltf"
click node_content_data "https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/constants/index.ts"
click node_site_config "https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/constants/config.ts"
click node_header "https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/components/atoms/Header.tsx"
click node_motion "https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/utils/motion.ts"

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_main,node_app_component toneBlue
class node_navbar,node_hero,node_about,node_experience,node_tech,node_works,node_feedbacks,node_contact toneAmber
class node_canvas_index,node_computers,node_earth,node_ball,node_stars,node_desktop_model,node_planet_model toneMint
class node_content_data,node_site_config,node_header,node_motion toneRose
class node_visitor,node_emailjs toneIndigo
```

## Components

### Application

- [React Entry](https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/main.tsx): `src/main.tsx`
- [Portfolio App](https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/App.tsx): `src/App.tsx`

### Portfolio Sections

- [Navigation](https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/components/layout/Navbar.tsx): `src/components/layout/Navbar.tsx`
- [Hero Section](https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/components/sections/Hero.tsx): `src/components/sections/Hero.tsx`
- [About Section](https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/components/sections/About.tsx): `src/components/sections/About.tsx`
- [Experience Section](https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/components/sections/Experience.tsx): `src/components/sections/Experience.tsx`
- [Technology Section](https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/components/sections/Tech.tsx): `src/components/sections/Tech.tsx`
- [Projects Section](https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/components/sections/Works.tsx): `src/components/sections/Works.tsx`
- [Testimonials Section](https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/components/sections/Feedbacks.tsx): `src/components/sections/Feedbacks.tsx`
- [Contact Form](https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/components/sections/Contact.tsx): `src/components/sections/Contact.tsx`

### 3D Visuals

- [Canvas Exports](https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/components/canvas/index.ts): `src/components/canvas/index.ts`
- [Computer Canvas](https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/components/canvas/Computers.tsx): `src/components/canvas/Computers.tsx`
- [Earth Canvas](https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/components/canvas/Earth.tsx): `src/components/canvas/Earth.tsx`
- [Ball Canvas](https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/components/canvas/Ball.tsx): `src/components/canvas/Ball.tsx`
- [Stars Canvas](https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/components/canvas/Stars.tsx): `src/components/canvas/Stars.tsx`
- [Desktop Scene](https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/public/desktop_pc/scene.gltf): `public/desktop_pc/scene.gltf`
- [Planet Scene](https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/public/planet/scene.gltf): `public/planet/scene.gltf`

### Portfolio Content

- [Portfolio Data](https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/constants/index.ts): `src/constants/index.ts`
- [Site Configuration](https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/constants/config.ts): `src/constants/config.ts`
- [Section Header](https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/components/atoms/Header.tsx): `src/components/atoms/Header.tsx`
- [Motion Variants](https://github.com/ladunjexa/reactjs18-3d-portfolio/blob/main/src/utils/motion.ts): `src/utils/motion.ts`

### Other components

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

## Connections

- Visitor → React Entry: opens site
- React Entry → Portfolio App: renders
- Portfolio App → Navigation: renders
- Portfolio App → Hero Section: renders
- Portfolio App → About Section: renders
- Portfolio App → Experience Section: renders
- Portfolio App → Technology Section: renders
- Portfolio App → Projects Section: renders
- Portfolio App → Testimonials Section: renders
- Portfolio App → Contact Form: renders
- Portfolio App → Stars Canvas: renders
- Contact Form → Earth Canvas: renders
- Contact Form → EmailJS: sends message
- Computer Canvas → Desktop Scene: loads scene
- Navigation → Portfolio Data: reads links
- Portfolio App → Site Configuration: reads title
- Contact Form → Site Configuration: reads settings
- Contact Form → Section Header: renders
- Contact Form → Motion Variants: uses variants
- Canvas Exports → Computer Canvas: exports
- Canvas Exports → Earth Canvas: exports
- Canvas Exports → Ball Canvas: exports
- Canvas Exports → Stars Canvas: exports