How abgishere/portfolio works
This is a scroll-driven portfolio whose main workflow is a visitor scrolling through one continuous rendered scene: mountain atmosphere, camera descent to a furnished desk, then a house and pool. Visitors can switch day/night and adjust the desk lamp; rendering uses WebGL with a layered DOM fallback. The README documents these product stages and capabilities, while sampled source shows renderer selection, theme state, scroll progress, and house-mesh loading. Some renderer internals and control wiring are unsampled, so uncertain connections are omitted.
Main entry points: MistCanvas.jsx WebGL scene · AtmosphereField.jsx Sky and lamp controls · SmoothScroll.jsx Smooth scroll · descent.js Descent progress
Components 27
Site shell
- Home route
app/page.jsx - Root layout
app/layout.jsx - House explorer route
app/house/page.jsx
Scene experience
- Theme state
components/ThemeProvider.jsx - Theme recipes
components/gradient/themes.js - Smooth scroll
components/SmoothScroll.jsx - Descent progress
components/scroll/descent.js - Scroll stops
components/scroll/stops.js - Scene stage
components/Stage.jsx - Sky and lamp controls
components/AtmosphereField.jsx - Sun toggle
components/SunToggle.jsx - Lamp toggle
components/LampToggle.jsx
Rendering and scene
- Renderer selection
components/AtmosphereField.jsx - WebGL scene
components/gradient/gl/MistCanvas.jsx - Layered DOM scene
components/gradient/layers/LayeredScene.jsx - Atmosphere geometry
components/gradient/gl/mistGeometry.js - Colour maths
components/gradient/colour.js - Sky transition
components/gradient/orbit.js - Mountain camera
components/gradient/camera.js - Desk and house camera
components/gradient/deskCamera.js
House scene
- House explorer controls
components/HouseExplorer.jsx - House mesh worker
components/gradient/gl/houseWorker.js - House renderer
components/gradient/gl/houseShader.js - Room geometry
components/gradient/gl/houseRooms.js - House shape
components/gradient/gl/houseShape.js - Lamp geometry
components/gradient/gl/lampShape.js
Other components
- Visitor
Connections 34
- Visitor → Home route: opens
README.md - Home route → Scene stage: renders
app/page.jsx - Root layout → Sky and lamp controls: mounts
app/layout.jsx - Root layout → Theme state: provides
app/layout.jsx - Visitor → Smooth scroll: scrolls
README.md - Smooth scroll → Scroll stops: uses
components/SmoothScroll.jsx - Smooth scroll → Descent progress: writes progress
components/SmoothScroll.jsx - Descent progress → WebGL scene: progress read
components/scroll/descent.js - Descent progress → Layered DOM scene: progress read
components/scroll/descent.js - Sky and lamp controls → Renderer selection: selects
components/AtmosphereField.jsx - Renderer selection → WebGL scene: loads
components/AtmosphereField.jsx - Renderer selection → Layered DOM scene: fallback
components/AtmosphereField.jsx - Sky and lamp controls → Sun toggle: renders
components/AtmosphereField.jsx - Sky and lamp controls → Lamp toggle: renders
components/AtmosphereField.jsx - Theme state → Theme recipes: reads
components/ThemeProvider.jsx - Visitor → Sun toggle: switches sky
README.md - Visitor → Lamp toggle: adjusts lamp
README.md - WebGL scene → Atmosphere geometry: uses
components/gradient/gl/MistCanvas.jsx - Layered DOM scene → Atmosphere geometry: uses
components/gradient/layers/LayeredScene.jsx - Atmosphere geometry → Colour maths: uses
components/gradient/gl/mistGeometry.js - WebGL scene → Sky transition: uses
components/gradient/gl/MistCanvas.jsx - Layered DOM scene → Sky transition: uses
components/gradient/layers/LayeredScene.jsx - Mountain camera → Atmosphere geometry: uses
components/gradient/camera.js - Desk and house camera → Mountain camera: uses
components/gradient/deskCamera.js - Home route → Smooth scroll: mounts
app/page.jsx - Visitor → House explorer route: opens
app/house/page.jsx - House explorer route → House explorer controls: renders
app/house/page.jsx - House explorer controls → Descent progress: pins progress
components/HouseExplorer.jsx - WebGL scene → House mesh worker: starts worker
components/gradient/gl/MistCanvas.jsx - House mesh worker → House renderer: builds mesh
components/gradient/gl/houseWorker.js - House mesh worker → Room geometry: builds rooms
components/gradient/gl/houseWorker.js - Room geometry → House shape: uses
components/gradient/gl/houseRooms.js - House renderer → Desk and house camera: uses
components/gradient/gl/houseShader.js - Lamp toggle → Lamp geometry: uses
components/LampToggle.jsx