How slocksert/hxh-portfolio works
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: projects/page.js Projects page · index.jsx Navigation · app/page.js Home page · about/page.js About page
Components 29
Portfolio pages
- Home page
src/app/page.js - About page
src/app/(sub pages)/about/page.js - Projects page
src/app/(sub pages)/projects/page.js - Contact page
src/app/(sub pages)/contact/page.js
Portfolio content
- Project data
src/app/data.js - Profile details
src/components/about/index.jsx - Profile tile layout
src/components/about/ItemLayout.jsx - Project listing
src/components/projects/index.jsx - Project card
src/components/projects/ProjectButton.jsx - Project layout
src/components/projects/ProjectLayout.jsx - Project details
src/components/projects/ProjectModal.jsx - Contact form
src/components/contact/Form.jsx
Interactive experience
- 3D scene renderer
src/components/RenderModel.jsx - Blimp model
src/components/models/Blimp.jsx - Computer model
src/components/models/Computer.jsx - Gon model
src/components/models/Gon.jsx - Netero model
src/components/models/Netero.jsx
Shared presentation
- Navigation
src/components/navigation/index.jsx - Navigation button
src/components/navigation/NavButton.jsx - Responsive wrapper
src/components/ResponsiveComponent.jsx - Screen-size hook
src/components/hooks/useScreenSize.jsx - Home button
src/components/HomeBtn.jsx - Music control
src/components/Sound.jsx - Firefly background
src/components/FireFliesBackground.jsx
Other components
- Visitor
- EmailJS service
- Browser
- Background audio
public/audio/hxh.mp3 - GitHub stats service
Connections 35
- Visitor → Home page: opens
README.md - Home page → Navigation: renders
src/app/page.js - Home page → 3D scene renderer: renders
src/app/page.js - Home page → Netero model: loads
src/app/page.js - Visitor → About page: visits
README.md - About page → 3D scene renderer: renders
src/app/(sub pages)/about/page.js - About page → Blimp model: loads
src/app/(sub pages)/about/page.js - About page → Profile details: renders
src/app/(sub pages)/about/page.js - Profile details → Profile tile layout: uses
src/components/about/index.jsx - Profile details → GitHub stats service: requests stats
src/components/about/index.jsx - Visitor → Projects page: visits
README.md - Projects page → Project listing: renders
src/app/(sub pages)/projects/page.js - Projects page → Project data: passes data
src/app/(sub pages)/projects/page.js - Projects page → 3D scene renderer: renders
src/app/(sub pages)/projects/page.js - Projects page → Gon model: loads
src/app/(sub pages)/projects/page.js - Project listing → Project card: uses
src/components/projects/index.jsx - Project card → Project details: opens
src/components/projects/ProjectButton.jsx - Project card → Project layout: renders
src/components/projects/ProjectButton.jsx - Visitor → Contact page: visits
README.md - Contact page → 3D scene renderer: renders
src/app/(sub pages)/contact/page.js - Contact page → Computer model: loads
src/app/(sub pages)/contact/page.js - Contact page → Contact form: renders
src/app/(sub pages)/contact/page.js - Visitor → Contact form: submits
README.md - Contact form → EmailJS service: may send
src/components/contact/Form.jsx - Navigation → Project data: reads links
src/components/navigation/index.jsx - Navigation → Navigation button: renders
src/components/navigation/index.jsx - Navigation → Responsive wrapper: uses
src/components/navigation/index.jsx - Navigation → Screen-size hook: reads size
src/components/navigation/index.jsx - Responsive wrapper → Screen-size hook: reads size
src/components/ResponsiveComponent.jsx - Navigation button → Responsive wrapper: uses
src/components/navigation/NavButton.jsx - Visitor → Music control: controls
- Music control → Background audio: plays
src/components/Sound.jsx - Visitor → Home button: uses
- Browser → Home page: renders
README.md - Browser → Firefly background: renders