# adrianhajdin/project_3d_developer_portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/adrianhajdin/project_3d_developer_portfolio
- Repository: https://github.com/adrianhajdin/project_3d_developer_portfolio

## Overview

This is a React 3D developer portfolio. A visitor navigates an animated, responsive single-page presentation of the developer’s profile, experience, skills, projects, and testimonials, then can submit a contact message. The main page composes those sections; 3D canvas components provide portfolio visuals, and the contact form sends through EmailJS. README-described section capabilities are included, but their internal wiring is not assumed where source excerpts were unavailable.

Main entry points: [`src/App.jsx`](https://github.com/adrianhajdin/project_3d_developer_portfolio/blob/main/src/App.jsx) (Page composition), [`src/hoc/SectionWrapper.jsx`](https://github.com/adrianhajdin/project_3d_developer_portfolio/blob/main/src/hoc/SectionWrapper.jsx) (Section animation), [`src/components/Contact.jsx`](https://github.com/adrianhajdin/project_3d_developer_portfolio/blob/main/src/components/Contact.jsx) (Contact form), [`src/components/Tech.jsx`](https://github.com/adrianhajdin/project_3d_developer_portfolio/blob/main/src/components/Tech.jsx) (Skills showcase)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_presentation["Portfolio sections"]
  node_app["Page composition<br/>[App.jsx]"]
  node_navbar["Section navigation<br/>[Navbar.jsx]"]
  node_hero["3D hero<br/>[Hero.jsx]"]
  node_about["About profile<br/>[About.jsx]"]
  node_experience["Work history<br/>[Experience.jsx]"]
  node_tech["Skills showcase<br/>[Tech.jsx]"]
  node_works["Project showcase<br/>[Works.jsx]"]
  node_feedbacks["Testimonials<br/>[Feedbacks.jsx]"]
end

subgraph group_visuals["3D visuals"]
  node_computers["Desktop canvas<br/>[Computers.jsx]"]
  node_ball["Skill ball canvas<br/>[Ball.jsx]"]
  node_earth["Earth canvas"]
  node_stars["Stars background"]
  node_desktopmodel["Desktop model<br/>[scene.gltf]"]
end

subgraph group_shared["Shared presentation"]
  node_sectionwrapper["Section animation<br/>[SectionWrapper.jsx]"]
  node_motion["Motion presets<br/>[motion.js]"]
end

subgraph group_contact["Contact delivery"]
  node_contact["Contact form<br/>[Contact.jsx]"]
  node_emailjs{{"EmailJS service"}}
end

node_visitor(("Visitor"))

node_visitor -->|"opens portfolio"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_about
node_app -->|"renders"| node_experience
node_app -->|"renders"| node_tech
node_app -->|"renders"| node_works
node_app -->|"renders"| node_feedbacks
node_app -->|"renders"| node_contact
node_app -->|"renders"| node_stars
node_hero -->|"shows 3D model"| node_computers
node_computers -->|"loads model"| node_desktopmodel
node_tech -->|"shows 3D skills"| node_ball
node_contact -->|"shows globe"| node_earth
node_contact -->|"sends message"| node_emailjs
node_about -->|"wrapped by"| node_sectionwrapper
node_experience -->|"wrapped by"| node_sectionwrapper
node_tech -->|"wrapped by"| node_sectionwrapper
node_works -->|"wrapped by"| node_sectionwrapper
node_feedbacks -->|"wrapped by"| node_sectionwrapper
node_contact -->|"wrapped by"| node_sectionwrapper
node_sectionwrapper -->|"uses presets"| node_motion

click node_app "https://github.com/adrianhajdin/project_3d_developer_portfolio/blob/main/src/App.jsx"
click node_navbar "https://github.com/adrianhajdin/project_3d_developer_portfolio/blob/main/src/components/Navbar.jsx"
click node_hero "https://github.com/adrianhajdin/project_3d_developer_portfolio/blob/main/src/components/Hero.jsx"
click node_about "https://github.com/adrianhajdin/project_3d_developer_portfolio/blob/main/src/components/About.jsx"
click node_experience "https://github.com/adrianhajdin/project_3d_developer_portfolio/blob/main/src/components/Experience.jsx"
click node_tech "https://github.com/adrianhajdin/project_3d_developer_portfolio/blob/main/src/components/Tech.jsx"
click node_works "https://github.com/adrianhajdin/project_3d_developer_portfolio/blob/main/src/components/Works.jsx"
click node_feedbacks "https://github.com/adrianhajdin/project_3d_developer_portfolio/blob/main/src/components/Feedbacks.jsx"
click node_contact "https://github.com/adrianhajdin/project_3d_developer_portfolio/blob/main/src/components/Contact.jsx"
click node_computers "https://github.com/adrianhajdin/project_3d_developer_portfolio/blob/main/src/components/canvas/Computers.jsx"
click node_ball "https://github.com/adrianhajdin/project_3d_developer_portfolio/blob/main/src/components/canvas/Ball.jsx"
click node_earth "https://github.com/adrianhajdin/project_3d_developer_portfolio/tree/main/src/components/canvas"
click node_stars "https://github.com/adrianhajdin/project_3d_developer_portfolio/tree/main/src/components/canvas"
click node_desktopmodel "https://github.com/adrianhajdin/project_3d_developer_portfolio/blob/main/public/desktop_pc/scene.gltf"
click node_sectionwrapper "https://github.com/adrianhajdin/project_3d_developer_portfolio/blob/main/src/hoc/SectionWrapper.jsx"
click node_motion "https://github.com/adrianhajdin/project_3d_developer_portfolio/blob/main/src/utils/motion.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,node_hero,node_about,node_experience,node_tech,node_works,node_feedbacks toneBlue
class node_computers,node_ball,node_earth,node_stars,node_desktopmodel toneAmber
class node_sectionwrapper,node_motion toneMint
class node_contact,node_emailjs toneRose
class node_visitor toneIndigo
```

## Components

### Portfolio sections

- [Page composition](https://github.com/adrianhajdin/project_3d_developer_portfolio/blob/main/src/App.jsx): `src/App.jsx`
- [Section navigation](https://github.com/adrianhajdin/project_3d_developer_portfolio/blob/main/src/components/Navbar.jsx): `src/components/Navbar.jsx`
- [3D hero](https://github.com/adrianhajdin/project_3d_developer_portfolio/blob/main/src/components/Hero.jsx): `src/components/Hero.jsx`
- [About profile](https://github.com/adrianhajdin/project_3d_developer_portfolio/blob/main/src/components/About.jsx): `src/components/About.jsx`
- [Work history](https://github.com/adrianhajdin/project_3d_developer_portfolio/blob/main/src/components/Experience.jsx): `src/components/Experience.jsx`
- [Skills showcase](https://github.com/adrianhajdin/project_3d_developer_portfolio/blob/main/src/components/Tech.jsx): `src/components/Tech.jsx`
- [Project showcase](https://github.com/adrianhajdin/project_3d_developer_portfolio/blob/main/src/components/Works.jsx): `src/components/Works.jsx`
- [Testimonials](https://github.com/adrianhajdin/project_3d_developer_portfolio/blob/main/src/components/Feedbacks.jsx): `src/components/Feedbacks.jsx`

### 3D visuals

- [Desktop canvas](https://github.com/adrianhajdin/project_3d_developer_portfolio/blob/main/src/components/canvas/Computers.jsx): `src/components/canvas/Computers.jsx`
- [Skill ball canvas](https://github.com/adrianhajdin/project_3d_developer_portfolio/blob/main/src/components/canvas/Ball.jsx): `src/components/canvas/Ball.jsx`
- [Earth canvas](https://github.com/adrianhajdin/project_3d_developer_portfolio/tree/main/src/components/canvas): `src/components/canvas`
- [Stars background](https://github.com/adrianhajdin/project_3d_developer_portfolio/tree/main/src/components/canvas): `src/components/canvas`
- [Desktop model](https://github.com/adrianhajdin/project_3d_developer_portfolio/blob/main/public/desktop_pc/scene.gltf): `public/desktop_pc/scene.gltf`

### Shared presentation

- [Section animation](https://github.com/adrianhajdin/project_3d_developer_portfolio/blob/main/src/hoc/SectionWrapper.jsx): `src/hoc/SectionWrapper.jsx`
- [Motion presets](https://github.com/adrianhajdin/project_3d_developer_portfolio/blob/main/src/utils/motion.js): `src/utils/motion.js`

### Contact delivery

- [Contact form](https://github.com/adrianhajdin/project_3d_developer_portfolio/blob/main/src/components/Contact.jsx): `src/components/Contact.jsx`
- **EmailJS service**

### Other components

- **Visitor**

## Connections

- Visitor → Page composition: opens portfolio
- Page composition → Section navigation: renders
- Page composition → 3D hero: renders
- Page composition → About profile: renders
- Page composition → Work history: renders
- Page composition → Skills showcase: renders
- Page composition → Project showcase: renders
- Page composition → Testimonials: renders
- Page composition → Contact form: renders
- Page composition → Stars background: renders
- 3D hero → Desktop canvas: shows 3D model
- Desktop canvas → Desktop model: loads model
- Skills showcase → Skill ball canvas: shows 3D skills
- Contact form → Earth canvas: shows globe
- Contact form → EmailJS service: sends message
- About profile → Section animation: wrapped by
- Work history → Section animation: wrapped by
- Skills showcase → Section animation: wrapped by
- Project showcase → Section animation: wrapped by
- Testimonials → Section animation: wrapped by
- Contact form → Section animation: wrapped by
- Section animation → Motion presets: uses presets