How lhosk/portfolio works
This React portfolio serves a visitor-facing route flow: visitors navigate the site, browse project and paper catalogs or photo collections, and open detailed write-ups and interactive demos. Its main domain branches are biographical pages, project/paper content, photo discovery, and standalone WebGL demonstrations. The photo workflow also has an offline indexing stage that prepares image variants and metadata. The graph reflects documented routes and sampled component usage; some detail-page wiring and photo-index implementation are documented but not sampled.
Main entry points: App.js Router and layout · Photos.js Photo gallery · DetailPage.js Shared page UI · Projects.js Project catalog
Components 30
Site shell
- Router and layout
src/App.js - Home page
src/pages/HomePage.js - Career page
src/pages/Career.js - About page
src/pages/About.js - Site links and contact
src/data/site.js - Shared page UI
src/components/DetailPage.js - Shared styles
src/components/styles.js - Navigation
src/components/NavBar.js - Footer
src/components/Footer.js
Projects and papers
- Project catalog
src/pages/Projects.js - Paper catalog
src/pages/Papers.js - Catalog filters
src/components/FilterGrid.js - Project and paper data
src/data/projects.js - Project write-ups
src/pages/projects - Thorium study
src/pages/projects/thorium.js - Paper write-ups
src/pages/papers - Phonon article
src/pages/papers/phononintro.js - Phonon animations
src/pages/papers/phanimations
Photo gallery
- Photo gallery
src/pages/Photos.js - Photo index
src/data/photoIndex.json - Gallery filters
src/pages/photos/FilterBar.js - Time range control
src/pages/photos/TimeSlider.js - Photo formatting
src/pages/photos/format.js - Photo viewer
src/pages/photos/PhotoModal.js - Photo index builder
scripts/buildPhotoIndex.js - Original photos
WebGL demos
- WebGL project pages
src/pages/projects/gl - Demo page layout
src/pages/projects/gl/GlDemo.js - Standalone demos
public/files
Other components
- Visitor
Connections 35
- Visitor → Router and layout: opens
README.md - Router and layout → Home page: routes to
src/App.js - Router and layout → Career page: routes to
src/App.js - Router and layout → About page: routes to
src/App.js - Router and layout → Project catalog: routes to
src/App.js - Router and layout → Paper catalog: routes to
src/App.js - Router and layout → Photo gallery: routes to
src/App.js - Router and layout → Project write-ups: routes to
src/App.js - Router and layout → Paper write-ups: routes to
src/App.js - Router and layout → Navigation: renders
src/App.js - Router and layout → Footer: renders
src/App.js - Navigation → Site links and contact: reads links
src/components/NavBar.js - Footer → Site links and contact: reads contact
src/components/Footer.js - Project catalog → Catalog filters: renders
src/pages/Projects.js - Paper catalog → Catalog filters: renders
src/pages/Papers.js - Project catalog → Project and paper data: reads entries
src/pages/Projects.js - Paper catalog → Project and paper data: reads entries
src/pages/Papers.js - Project write-ups → Shared page UI: uses layout
README.md - Paper write-ups → Shared page UI: uses layout
README.md - Shared page UI → Project and paper data: looks up page entry
src/components/DetailPage.js - Phonon article → Phonon animations: renders animations
src/pages/papers/phononintro.js - Thorium study → Shared page UI: renders layout
src/pages/projects/thorium.js - Photo gallery → Photo index: reads metadata
src/pages/Photos.js - Photo gallery → Gallery filters: renders filters
src/pages/Photos.js - Photo gallery → Photo viewer: opens viewer
src/pages/Photos.js - Photo gallery → Photo formatting: formats thumbnails
src/pages/Photos.js - Gallery filters → Time range control: renders control
src/pages/photos/FilterBar.js - Gallery filters → Photo formatting: uses month names
src/pages/photos/FilterBar.js - Photo viewer → Photo formatting: formats details
src/pages/photos/PhotoModal.js - Original photos → Photo index builder: provides originals
README.md - Photo index builder → Photo index: writes index
README.md - Photo index builder → Original photos: reads images
README.md - WebGL project pages → Demo page layout: uses shared layout
src/pages/projects/gl/perspective.js - Demo page layout → Standalone demos: embeds demo
src/pages/projects/gl/GlDemo.js - Demo page layout → Shared page UI: renders detail layout
src/pages/projects/gl/GlDemo.js