How pat-on/portfolio_page works
This is a React portfolio site with an interactive Three.js space scene and an optional arcade-combat mode. A visitor enters through the app, explores the scene or portfolio, and can start combat; game events update reducer state and drive the HUD. The tree also shows dedicated experience, projects, certifications, and about sections. The README only documents Create React App, and sampled excerpts do not show Layout’s composition or Scene’s engine wiring, so those connections are left out where uncertain.
Main entry points: App.js App · ViewGL.js WebGL renderer · gameReducer.js Game reducer · Scene.js Scene component
Components 22
App and state
- App
src/App.js - Game reducer
src/state/gameReducer.js - Explore controls
src/Components/ExploreButton/ExploreButton.js - Mobile overlay
src/Components/MobileExploreOverlay/MobileExploreOverlay.js
Portfolio content
- Portfolio layout
src/HOC/Layout.js - About section
src/Components/About/About.js - Experience section
src/Components/Experience/Experience.js - Projects section
src/Components/MyProjects/MyProjects.js - Certifications section
src/Components/Certifications/Certifications.js
3D scene
- Scene component
src/TreeJSComponents/Scene.js - WebGL renderer
src/TreeJSComponents/ViewGL.js - Scene registry
src/TreeJSComponents/registry.js - Star background
src/TreeJSComponents/stars/stars.js - Scene lighting
src/TreeJSComponents/lights/lights.js - Space texture
src/TreeJSComponents/spaceTexture/spaceTexture.js - Asteroid belt
src/TreeJSComponents/planets/asteroidBelt/asteroidBelt.js - Comet model
src/TreeJSComponents/planets/comet/comet.js
Combat game
- Game system
src/TreeJSComponents/game/GameSystem.js - Game audio
src/TreeJSComponents/game/GameAudio.js - Game HUD
src/Components/GameHUD/GameHUD.js - Game briefing
src/Components/GameBriefing/GameBriefing.js
Other components
- Visitor
Connections 16
- Visitor → App: opens
- App → Scene component: renders
- App → Portfolio layout: renders
- App → Explore controls: renders
- App → Mobile overlay: renders
- App → Game HUD: renders
- App → Game briefing: renders
- App → Game reducer: dispatches actions
- App → Scene component: sends controls
- App → Game reducer: reads state
- WebGL renderer → Scene registry: reads definitions
- WebGL renderer → Scene lighting: uses lighting
- WebGL renderer → Space texture: uses texture
- WebGL renderer → Asteroid belt: builds belt
- WebGL renderer → Comet model: builds comet
- WebGL renderer → Game system: loads game