How lingsongc/portfolio works
This is an interactive personal portfolio site. A visitor enters the React app, navigates animated portfolio scenes, explores profile, experience, project, and skills content, and can open dedicated project pages or contact links. The sampled code confirms the app shell, scene coordinator, persistent circle, grid, navigation, and contact rendering; other section and route wiring is represented conservatively from the repository structure.
Main entry points: App.tsx App shell · ProjectPageLayout.tsx Project layout · data Portfolio data · main.tsx React entry
Components 22
Scene shell
- React entry
src/main.tsx - App shell
src/App.tsx - Background grid
src/components/background-grid/BackgroundGrid.tsx - Main circle
src/components/main-circle/MainCircle.tsx - Circle state
src/components/main-circle/useMainCircle.ts - Scene panel
src/components/scene-panel/ScenePanel.tsx
Scene interaction
- Navigation
src/components/navigation/Navigation.tsx - Slideshow coordinator
src/motion/useSlideshowCoordinator.ts - Scene input
src/motion/useSceneInput.ts
Portfolio content
- Home scene
src/sections/home/Home.tsx - About scene
src/sections/about/About.tsx - Experience scene
src/sections/experience/Experience.tsx - Experience orbit
src/sections/experience/ExperienceOrbit.tsx - Projects scene
src/sections/projects/Projects.tsx - Skills scene
src/sections/skills/Skills.tsx - Contact scene
src/sections/contact/Contact.tsx - Portfolio data
src/data
Project details
- Project routing
src/project-route.tsx - Project layout
src/pages/ProjectPageLayout.tsx - Modulo page
src/pages/ModuloPage.tsx - PneuRelief page
src/pages/PneuReliefPage.tsx
Other components
- Visitor
Connections 19
- Visitor → React entry: opens site
- React entry → App shell: renders
- App shell → Slideshow coordinator: coordinates scenes
- App shell → Background grid: renders
- App shell → Navigation: renders
- Navigation → App shell: requests scene
- App shell → Circle state: owns circle state
- Circle state → Main circle: supplies geometry
- App shell → Scene panel: composes scene
- Scene panel → Contact scene: hosts
- App shell → Contact scene: passes lifecycle
- App shell → Scene input: handles scene input
- Scene input → Slideshow coordinator: requests transition
- Portfolio data → Skills scene: provides content
- Portfolio data → Experience scene: provides content
- Experience scene → Experience orbit: presents entries
- Project routing → Project layout: selects layout
- Project layout → Modulo page: renders detail
- Project layout → PneuRelief page: renders detail