How ezykl/portfolio works
This is a personal portfolio site whose main visitor journey is to enter through a gated, image-preloaded hero, explore interactive scene content and portfolio sections, and optionally send a contact message. The hero also hosts a find-the-object minigame using layered outside and room scenes. Internally, a reusable scene engine renders interactive layers and coordinates per-scene refs and glow state. The README is empty and several files are unsampled, so section wiring beyond the shown imports and explicitly documented behavior is not expanded.
Main entry points: App.tsx App Shell · SceneEngine.tsx Scene Engine · Hero.tsx Hero · ScrollSections.tsx Portfolio Sections
Components 26
Site Shell
- App Shell
src/App.tsx - Initial Load
src/hook/useInitialLoad.ts - Loading Screen
src/components/LoadingScreen/LoadingScreen.tsx - Navigation
src/components/NavBar/NavBar.tsx - Music Host
src/components/MusicHost/MusicHost.tsx
Portfolio Content
- Home Page
src/pages/HomePage.tsx - Hero
src/components/Hero/Hero.tsx - Portfolio Sections
src/components/sections/ScrollSections.tsx - Projects
src/components/sections/ProjectsSection.tsx - Gallery
src/components/sections/GallerySection.tsx - School Flipbook
src/components/sections/SchoolPaperFlipbook.tsx - Project Preview
src/components/sections/ImageProjectPreview.tsx
Interactive Experiences
- Hero Scene
src/components/ZykCoding/ZykCoding.tsx - Popup Host
src/components/Popup/PopupHost.tsx - Find Object Game
src/components/Minigame/MinigameHost.tsx - Outside Scene
src/components/OutsideScene/OutsideScene.tsx - Room Scene
src/components/RoomScene/RoomScene.tsx
Scene Engine
- Scene Engine
src/engine/SceneEngine.tsx - Scene Renderer
src/engine/SceneRenderer.tsx - Layer Renderer
src/engine/LayerRenderer.tsx - Interactive Layer
src/engine/InteractiveLayer.tsx - Scene Refs
src/engine/SceneRefsContext.tsx - Scene Glow
src/engine/SceneGlowContext.tsx
Contact
- Contact Form
src/components/Contact/ContactForm.tsx - EmailJS
Other components
- Visitor
Connections 27
- Visitor → App Shell: opens site
- App Shell → Initial Load: checks assets
- App Shell → Loading Screen: shows while loading
- App Shell → Home Page: renders
- App Shell → Navigation: shows after reveal
- App Shell → Music Host: renders
- Initial Load → Loading Screen: supplies progress
- Home Page → Hero: presents
- Home Page → Portfolio Sections: presents
- Portfolio Sections → Projects: renders
- Portfolio Sections → Gallery: renders
- Portfolio Sections → School Flipbook: renders
- Projects → Project Preview: opens preview
- Hero → Hero Scene: renders
- Hero → Popup Host: hosts
- Hero → Find Object Game: hosts
- Hero Scene → Scene Engine: uses
- Find Object Game → Outside Scene: renders
- Find Object Game → Room Scene: renders
- Find Object Game → Scene Engine: listens for layer clicks
- Scene Engine → Scene Renderer: renders scene
- Scene Renderer → Layer Renderer: renders layers
- Layer Renderer → Interactive Layer: renders interactive layer
- Scene Engine → Scene Refs: provides refs
- Scene Engine → Scene Glow: provides glow state
- Visitor → Contact Form: submits message
- Contact Form → EmailJS: sends emails