# slocksert/hxh-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/slocksert/hxh-portfolio
- Repository: https://github.com/slocksert/hxh-portfolio

## Overview

This is a Hunter x Hunter-themed personal portfolio. Visitors enter through the home page, navigate to About, Projects, or Contact, then view profile/project content or submit a contact form. Page-specific 3D scenes share a rendering layer, while navigation and background audio provide site-wide interactions. The README also describes responsive layouts and interactive models. The graph reflects documented imports and sampled source; unsampled project-card and model details are represented only where their wiring is indexed.

Main entry points: [`src/app/(sub pages)/projects/page.js`](https://github.com/slocksert/hxh-portfolio/blob/main/src/app/(sub%20pages)/projects/page.js) (Projects page), [`src/components/navigation/index.jsx`](https://github.com/slocksert/hxh-portfolio/blob/main/src/components/navigation/index.jsx) (Navigation), [`src/app/page.js`](https://github.com/slocksert/hxh-portfolio/blob/main/src/app/page.js) (Home page), [`src/app/(sub pages)/about/page.js`](https://github.com/slocksert/hxh-portfolio/blob/main/src/app/(sub%20pages)/about/page.js) (About page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_pages["Portfolio pages"]
  node_home["Home page<br/>[page.js]"]
  node_aboutpage["About page<br/>[page.js]"]
  node_projectspage["Projects page<br/>[page.js]"]
  node_contactpage["Contact page<br/>[page.js]"]
end

subgraph group_content["Portfolio content"]
  node_projectdata["Project data<br/>[data.js]"]
  node_aboutdetails["Profile details<br/>[index.jsx]"]
  node_itemlayout["Profile tile layout<br/>[ItemLayout.jsx]"]
  node_projectlist["Project listing<br/>[index.jsx]"]
  node_projectbutton["Project card<br/>[ProjectButton.jsx]"]
  node_projectlayout["Project layout<br/>[ProjectLayout.jsx]"]
  node_projectmodal["Project details<br/>[ProjectModal.jsx]"]
  node_contactform["Contact form<br/>[Form.jsx]"]
end

subgraph group_interactive["Interactive experience"]
  node_renderer["3D scene renderer<br/>[RenderModel.jsx]"]
  node_blimp["Blimp model<br/>[Blimp.jsx]"]
  node_computer["Computer model<br/>[Computer.jsx]"]
  node_gon["Gon model<br/>[Gon.jsx]"]
  node_netero["Netero model<br/>[Netero.jsx]"]
end

subgraph group_presentation["Shared presentation"]
  node_navigation["Navigation<br/>[index.jsx]"]
  node_navbutton["Navigation button<br/>[NavButton.jsx]"]
  node_responsive["Responsive wrapper"]
  node_screensize["Screen-size hook<br/>[useScreenSize.jsx]"]
  node_homebutton["Home button<br/>[HomeBtn.jsx]"]
  node_sound["Music control<br/>[Sound.jsx]"]
  node_fireflies["Firefly background"]
end

node_visitor(("Visitor"))
node_emailservice["EmailJS service"]
node_browser(("Browser"))
node_audiotrack["Background audio<br/>[hxh.mp3]"]
node_githubstats["GitHub stats service"]

node_visitor -->|"opens"| node_home
node_home -->|"renders"| node_navigation
node_home -->|"renders"| node_renderer
node_home -->|"loads"| node_netero
node_visitor -->|"visits"| node_aboutpage
node_aboutpage -->|"renders"| node_renderer
node_aboutpage -->|"loads"| node_blimp
node_aboutpage -->|"renders"| node_aboutdetails
node_aboutdetails -->|"uses"| node_itemlayout
node_aboutdetails -.->|"requests stats"| node_githubstats
node_visitor -->|"visits"| node_projectspage
node_projectspage -->|"renders"| node_projectlist
node_projectspage -->|"passes data"| node_projectdata
node_projectspage -->|"renders"| node_renderer
node_projectspage -->|"loads"| node_gon
node_projectlist -->|"uses"| node_projectbutton
node_projectbutton -->|"opens"| node_projectmodal
node_projectbutton -.->|"renders"| node_projectlayout
node_visitor -->|"visits"| node_contactpage
node_contactpage -->|"renders"| node_renderer
node_contactpage -->|"loads"| node_computer
node_contactpage -->|"renders"| node_contactform
node_visitor -->|"submits"| node_contactform
node_contactform -.->|"may send"| node_emailservice
node_navigation -->|"reads links"| node_projectdata
node_navigation -->|"renders"| node_navbutton
node_navigation -->|"uses"| node_responsive
node_navigation -->|"reads size"| node_screensize
node_responsive -->|"reads size"| node_screensize
node_navbutton -->|"uses"| node_responsive
node_visitor -->|"controls"| node_sound
node_sound -->|"plays"| node_audiotrack
node_visitor -->|"uses"| node_homebutton
node_browser -->|"renders"| node_home
node_browser -->|"renders"| node_fireflies

click node_home "https://github.com/slocksert/hxh-portfolio/blob/main/src/app/page.js"
click node_aboutpage "https://github.com/slocksert/hxh-portfolio/blob/main/src/app/(sub%20pages)/about/page.js"
click node_projectspage "https://github.com/slocksert/hxh-portfolio/blob/main/src/app/(sub%20pages)/projects/page.js"
click node_contactpage "https://github.com/slocksert/hxh-portfolio/blob/main/src/app/(sub%20pages)/contact/page.js"
click node_projectdata "https://github.com/slocksert/hxh-portfolio/blob/main/src/app/data.js"
click node_aboutdetails "https://github.com/slocksert/hxh-portfolio/blob/main/src/components/about/index.jsx"
click node_itemlayout "https://github.com/slocksert/hxh-portfolio/blob/main/src/components/about/ItemLayout.jsx"
click node_projectlist "https://github.com/slocksert/hxh-portfolio/blob/main/src/components/projects/index.jsx"
click node_projectbutton "https://github.com/slocksert/hxh-portfolio/blob/main/src/components/projects/ProjectButton.jsx"
click node_projectlayout "https://github.com/slocksert/hxh-portfolio/blob/main/src/components/projects/ProjectLayout.jsx"
click node_projectmodal "https://github.com/slocksert/hxh-portfolio/blob/main/src/components/projects/ProjectModal.jsx"
click node_contactform "https://github.com/slocksert/hxh-portfolio/blob/main/src/components/contact/Form.jsx"
click node_renderer "https://github.com/slocksert/hxh-portfolio/blob/main/src/components/RenderModel.jsx"
click node_blimp "https://github.com/slocksert/hxh-portfolio/blob/main/src/components/models/Blimp.jsx"
click node_computer "https://github.com/slocksert/hxh-portfolio/blob/main/src/components/models/Computer.jsx"
click node_gon "https://github.com/slocksert/hxh-portfolio/blob/main/src/components/models/Gon.jsx"
click node_netero "https://github.com/slocksert/hxh-portfolio/blob/main/src/components/models/Netero.jsx"
click node_navigation "https://github.com/slocksert/hxh-portfolio/blob/main/src/components/navigation/index.jsx"
click node_navbutton "https://github.com/slocksert/hxh-portfolio/blob/main/src/components/navigation/NavButton.jsx"
click node_responsive "https://github.com/slocksert/hxh-portfolio/blob/main/src/components/ResponsiveComponent.jsx"
click node_screensize "https://github.com/slocksert/hxh-portfolio/blob/main/src/components/hooks/useScreenSize.jsx"
click node_homebutton "https://github.com/slocksert/hxh-portfolio/blob/main/src/components/HomeBtn.jsx"
click node_sound "https://github.com/slocksert/hxh-portfolio/blob/main/src/components/Sound.jsx"
click node_fireflies "https://github.com/slocksert/hxh-portfolio/blob/main/src/components/FireFliesBackground.jsx"
click node_audiotrack "https://github.com/slocksert/hxh-portfolio/blob/main/public/audio/hxh.mp3"

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_home,node_aboutpage,node_projectspage,node_contactpage,node_browser toneBlue
class node_projectdata,node_aboutdetails,node_itemlayout,node_projectlist,node_projectbutton,node_projectlayout,node_projectmodal,node_contactform toneAmber
class node_renderer,node_blimp,node_computer,node_gon,node_netero toneMint
class node_navigation,node_navbutton,node_responsive,node_screensize,node_homebutton,node_sound,node_fireflies,node_audiotrack toneRose
class node_visitor,node_emailservice,node_githubstats toneIndigo
```

## Components

### Portfolio pages

- [Home page](https://github.com/slocksert/hxh-portfolio/blob/main/src/app/page.js): `src/app/page.js`
- [About page](https://github.com/slocksert/hxh-portfolio/blob/main/src/app/(sub%20pages)/about/page.js): `src/app/(sub pages)/about/page.js`
- [Projects page](https://github.com/slocksert/hxh-portfolio/blob/main/src/app/(sub%20pages)/projects/page.js): `src/app/(sub pages)/projects/page.js`
- [Contact page](https://github.com/slocksert/hxh-portfolio/blob/main/src/app/(sub%20pages)/contact/page.js): `src/app/(sub pages)/contact/page.js`

### Portfolio content

- [Project data](https://github.com/slocksert/hxh-portfolio/blob/main/src/app/data.js): `src/app/data.js`
- [Profile details](https://github.com/slocksert/hxh-portfolio/blob/main/src/components/about/index.jsx): `src/components/about/index.jsx`
- [Profile tile layout](https://github.com/slocksert/hxh-portfolio/blob/main/src/components/about/ItemLayout.jsx): `src/components/about/ItemLayout.jsx`
- [Project listing](https://github.com/slocksert/hxh-portfolio/blob/main/src/components/projects/index.jsx): `src/components/projects/index.jsx`
- [Project card](https://github.com/slocksert/hxh-portfolio/blob/main/src/components/projects/ProjectButton.jsx): `src/components/projects/ProjectButton.jsx`
- [Project layout](https://github.com/slocksert/hxh-portfolio/blob/main/src/components/projects/ProjectLayout.jsx): `src/components/projects/ProjectLayout.jsx`
- [Project details](https://github.com/slocksert/hxh-portfolio/blob/main/src/components/projects/ProjectModal.jsx): `src/components/projects/ProjectModal.jsx`
- [Contact form](https://github.com/slocksert/hxh-portfolio/blob/main/src/components/contact/Form.jsx): `src/components/contact/Form.jsx`

### Interactive experience

- [3D scene renderer](https://github.com/slocksert/hxh-portfolio/blob/main/src/components/RenderModel.jsx): `src/components/RenderModel.jsx`
- [Blimp model](https://github.com/slocksert/hxh-portfolio/blob/main/src/components/models/Blimp.jsx): `src/components/models/Blimp.jsx`
- [Computer model](https://github.com/slocksert/hxh-portfolio/blob/main/src/components/models/Computer.jsx): `src/components/models/Computer.jsx`
- [Gon model](https://github.com/slocksert/hxh-portfolio/blob/main/src/components/models/Gon.jsx): `src/components/models/Gon.jsx`
- [Netero model](https://github.com/slocksert/hxh-portfolio/blob/main/src/components/models/Netero.jsx): `src/components/models/Netero.jsx`

### Shared presentation

- [Navigation](https://github.com/slocksert/hxh-portfolio/blob/main/src/components/navigation/index.jsx): `src/components/navigation/index.jsx`
- [Navigation button](https://github.com/slocksert/hxh-portfolio/blob/main/src/components/navigation/NavButton.jsx): `src/components/navigation/NavButton.jsx`
- [Responsive wrapper](https://github.com/slocksert/hxh-portfolio/blob/main/src/components/ResponsiveComponent.jsx): `src/components/ResponsiveComponent.jsx`
- [Screen-size hook](https://github.com/slocksert/hxh-portfolio/blob/main/src/components/hooks/useScreenSize.jsx): `src/components/hooks/useScreenSize.jsx`
- [Home button](https://github.com/slocksert/hxh-portfolio/blob/main/src/components/HomeBtn.jsx): `src/components/HomeBtn.jsx`
- [Music control](https://github.com/slocksert/hxh-portfolio/blob/main/src/components/Sound.jsx): `src/components/Sound.jsx`
- [Firefly background](https://github.com/slocksert/hxh-portfolio/blob/main/src/components/FireFliesBackground.jsx): `src/components/FireFliesBackground.jsx`

### Other components

- **Visitor**
- **EmailJS service**
- **Browser**
- [Background audio](https://github.com/slocksert/hxh-portfolio/blob/main/public/audio/hxh.mp3): `public/audio/hxh.mp3`
- **GitHub stats service**

## Connections

- Visitor → Home page: opens (evidence: `README.md`)
- Home page → Navigation: renders (evidence: `src/app/page.js`)
- Home page → 3D scene renderer: renders (evidence: `src/app/page.js`)
- Home page → Netero model: loads (evidence: `src/app/page.js`)
- Visitor → About page: visits (evidence: `README.md`)
- About page → 3D scene renderer: renders (evidence: `src/app/(sub pages)/about/page.js`)
- About page → Blimp model: loads (evidence: `src/app/(sub pages)/about/page.js`)
- About page → Profile details: renders (evidence: `src/app/(sub pages)/about/page.js`)
- Profile details → Profile tile layout: uses (evidence: `src/components/about/index.jsx`)
- Profile details → GitHub stats service: requests stats (evidence: `src/components/about/index.jsx`)
- Visitor → Projects page: visits (evidence: `README.md`)
- Projects page → Project listing: renders (evidence: `src/app/(sub pages)/projects/page.js`)
- Projects page → Project data: passes data (evidence: `src/app/(sub pages)/projects/page.js`)
- Projects page → 3D scene renderer: renders (evidence: `src/app/(sub pages)/projects/page.js`)
- Projects page → Gon model: loads (evidence: `src/app/(sub pages)/projects/page.js`)
- Project listing → Project card: uses (evidence: `src/components/projects/index.jsx`)
- Project card → Project details: opens (evidence: `src/components/projects/ProjectButton.jsx`)
- Project card → Project layout: renders (evidence: `src/components/projects/ProjectButton.jsx`)
- Visitor → Contact page: visits (evidence: `README.md`)
- Contact page → 3D scene renderer: renders (evidence: `src/app/(sub pages)/contact/page.js`)
- Contact page → Computer model: loads (evidence: `src/app/(sub pages)/contact/page.js`)
- Contact page → Contact form: renders (evidence: `src/app/(sub pages)/contact/page.js`)
- Visitor → Contact form: submits (evidence: `README.md`)
- Contact form → EmailJS service: may send (evidence: `src/components/contact/Form.jsx`)
- Navigation → Project data: reads links (evidence: `src/components/navigation/index.jsx`)
- Navigation → Navigation button: renders (evidence: `src/components/navigation/index.jsx`)
- Navigation → Responsive wrapper: uses (evidence: `src/components/navigation/index.jsx`)
- Navigation → Screen-size hook: reads size (evidence: `src/components/navigation/index.jsx`)
- Responsive wrapper → Screen-size hook: reads size (evidence: `src/components/ResponsiveComponent.jsx`)
- Navigation button → Responsive wrapper: uses (evidence: `src/components/navigation/NavButton.jsx`)
- Visitor → Music control: controls
- Music control → Background audio: plays (evidence: `src/components/Sound.jsx`)
- Visitor → Home button: uses
- Browser → Home page: renders (evidence: `README.md`)
- Browser → Firefly background: renders