# lingsongc/portfolio architecture

> Architecture diagram of the GitHub repository lingsongc/portfolio, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/lingsongc/portfolio
- Repository: https://github.com/lingsongc/portfolio

## Overview

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: [`src/App.tsx`](https://github.com/lingsongc/portfolio/blob/main/src/App.tsx) (App shell), [`src/pages/ProjectPageLayout.tsx`](https://github.com/lingsongc/portfolio/blob/main/src/pages/ProjectPageLayout.tsx) (Project layout), [`src/data`](https://github.com/lingsongc/portfolio/tree/main/src/data) (Portfolio data), [`src/main.tsx`](https://github.com/lingsongc/portfolio/blob/main/src/main.tsx) (React entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Scene shell"]
  node_entry["React entry<br/>[main.tsx]"]
  node_app["App shell<br/>[App.tsx]"]
  node_grid["Background grid<br/>[BackgroundGrid.tsx]"]
  node_circle["Main circle<br/>[MainCircle.tsx]"]
  node_circle_state["Circle state<br/>[useMainCircle.ts]"]
  node_panel["Scene panel<br/>[ScenePanel.tsx]"]
end

subgraph group_motion["Scene interaction"]
  node_navigation["Navigation<br/>[Navigation.tsx]"]
  node_coordinator["Slideshow coordinator"]
  node_input["Scene input<br/>[useSceneInput.ts]"]
end

subgraph group_content["Portfolio content"]
  node_home["Home scene<br/>[Home.tsx]"]
  node_about["About scene<br/>[About.tsx]"]
  node_experience["Experience scene<br/>[Experience.tsx]"]
  node_experience_orbit["Experience orbit"]
  node_projects_scene["Projects scene<br/>[Projects.tsx]"]
  node_skills["Skills scene<br/>[Skills.tsx]"]
  node_contact["Contact scene<br/>[Contact.tsx]"]
  node_portfolio_data["Portfolio data"]
end

subgraph group_projects["Project details"]
  node_project_route["Project routing<br/>[project-route.tsx]"]
  node_project_layout["Project layout"]
  node_modulo["Modulo page<br/>[ModuloPage.tsx]"]
  node_pneurelief["PneuRelief page<br/>[PneuReliefPage.tsx]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens site"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"coordinates scenes"| node_coordinator
node_app -->|"renders"| node_grid
node_app -->|"renders"| node_navigation
node_navigation -->|"requests scene"| node_app
node_app -->|"owns circle state"| node_circle_state
node_circle_state -->|"supplies geometry"| node_circle
node_app -->|"composes scene"| node_panel
node_panel -->|"hosts"| node_contact
node_app -->|"passes lifecycle"| node_contact
node_app -->|"handles scene input"| node_input
node_input -->|"requests transition"| node_coordinator
node_portfolio_data -->|"provides content"| node_skills
node_portfolio_data -->|"provides content"| node_experience
node_experience -->|"presents entries"| node_experience_orbit
node_project_route -->|"selects layout"| node_project_layout
node_project_layout -->|"renders detail"| node_modulo
node_project_layout -->|"renders detail"| node_pneurelief

click node_entry "https://github.com/lingsongc/portfolio/blob/main/src/main.tsx"
click node_app "https://github.com/lingsongc/portfolio/blob/main/src/App.tsx"
click node_grid "https://github.com/lingsongc/portfolio/blob/main/src/components/background-grid/BackgroundGrid.tsx"
click node_circle "https://github.com/lingsongc/portfolio/blob/main/src/components/main-circle/MainCircle.tsx"
click node_circle_state "https://github.com/lingsongc/portfolio/blob/main/src/components/main-circle/useMainCircle.ts"
click node_panel "https://github.com/lingsongc/portfolio/blob/main/src/components/scene-panel/ScenePanel.tsx"
click node_navigation "https://github.com/lingsongc/portfolio/blob/main/src/components/navigation/Navigation.tsx"
click node_coordinator "https://github.com/lingsongc/portfolio/blob/main/src/motion/useSlideshowCoordinator.ts"
click node_input "https://github.com/lingsongc/portfolio/blob/main/src/motion/useSceneInput.ts"
click node_home "https://github.com/lingsongc/portfolio/blob/main/src/sections/home/Home.tsx"
click node_about "https://github.com/lingsongc/portfolio/blob/main/src/sections/about/About.tsx"
click node_experience "https://github.com/lingsongc/portfolio/blob/main/src/sections/experience/Experience.tsx"
click node_experience_orbit "https://github.com/lingsongc/portfolio/blob/main/src/sections/experience/ExperienceOrbit.tsx"
click node_projects_scene "https://github.com/lingsongc/portfolio/blob/main/src/sections/projects/Projects.tsx"
click node_skills "https://github.com/lingsongc/portfolio/blob/main/src/sections/skills/Skills.tsx"
click node_contact "https://github.com/lingsongc/portfolio/blob/main/src/sections/contact/Contact.tsx"
click node_portfolio_data "https://github.com/lingsongc/portfolio/tree/main/src/data"
click node_project_route "https://github.com/lingsongc/portfolio/blob/main/src/project-route.tsx"
click node_project_layout "https://github.com/lingsongc/portfolio/blob/main/src/pages/ProjectPageLayout.tsx"
click node_modulo "https://github.com/lingsongc/portfolio/blob/main/src/pages/ModuloPage.tsx"
click node_pneurelief "https://github.com/lingsongc/portfolio/blob/main/src/pages/PneuReliefPage.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_entry,node_app,node_grid,node_circle,node_circle_state,node_panel toneBlue
class node_navigation,node_coordinator,node_input toneAmber
class node_home,node_about,node_experience,node_experience_orbit,node_projects_scene,node_skills,node_contact,node_portfolio_data toneMint
class node_project_route,node_project_layout,node_modulo,node_pneurelief toneRose
class node_visitor toneIndigo
```

## Components

### Scene shell

- [React entry](https://github.com/lingsongc/portfolio/blob/main/src/main.tsx): `src/main.tsx`
- [App shell](https://github.com/lingsongc/portfolio/blob/main/src/App.tsx): `src/App.tsx`
- [Background grid](https://github.com/lingsongc/portfolio/blob/main/src/components/background-grid/BackgroundGrid.tsx): `src/components/background-grid/BackgroundGrid.tsx`
- [Main circle](https://github.com/lingsongc/portfolio/blob/main/src/components/main-circle/MainCircle.tsx): `src/components/main-circle/MainCircle.tsx`
- [Circle state](https://github.com/lingsongc/portfolio/blob/main/src/components/main-circle/useMainCircle.ts): `src/components/main-circle/useMainCircle.ts`
- [Scene panel](https://github.com/lingsongc/portfolio/blob/main/src/components/scene-panel/ScenePanel.tsx): `src/components/scene-panel/ScenePanel.tsx`

### Scene interaction

- [Navigation](https://github.com/lingsongc/portfolio/blob/main/src/components/navigation/Navigation.tsx): `src/components/navigation/Navigation.tsx`
- [Slideshow coordinator](https://github.com/lingsongc/portfolio/blob/main/src/motion/useSlideshowCoordinator.ts): `src/motion/useSlideshowCoordinator.ts`
- [Scene input](https://github.com/lingsongc/portfolio/blob/main/src/motion/useSceneInput.ts): `src/motion/useSceneInput.ts`

### Portfolio content

- [Home scene](https://github.com/lingsongc/portfolio/blob/main/src/sections/home/Home.tsx): `src/sections/home/Home.tsx`
- [About scene](https://github.com/lingsongc/portfolio/blob/main/src/sections/about/About.tsx): `src/sections/about/About.tsx`
- [Experience scene](https://github.com/lingsongc/portfolio/blob/main/src/sections/experience/Experience.tsx): `src/sections/experience/Experience.tsx`
- [Experience orbit](https://github.com/lingsongc/portfolio/blob/main/src/sections/experience/ExperienceOrbit.tsx): `src/sections/experience/ExperienceOrbit.tsx`
- [Projects scene](https://github.com/lingsongc/portfolio/blob/main/src/sections/projects/Projects.tsx): `src/sections/projects/Projects.tsx`
- [Skills scene](https://github.com/lingsongc/portfolio/blob/main/src/sections/skills/Skills.tsx): `src/sections/skills/Skills.tsx`
- [Contact scene](https://github.com/lingsongc/portfolio/blob/main/src/sections/contact/Contact.tsx): `src/sections/contact/Contact.tsx`
- [Portfolio data](https://github.com/lingsongc/portfolio/tree/main/src/data): `src/data`

### Project details

- [Project routing](https://github.com/lingsongc/portfolio/blob/main/src/project-route.tsx): `src/project-route.tsx`
- [Project layout](https://github.com/lingsongc/portfolio/blob/main/src/pages/ProjectPageLayout.tsx): `src/pages/ProjectPageLayout.tsx`
- [Modulo page](https://github.com/lingsongc/portfolio/blob/main/src/pages/ModuloPage.tsx): `src/pages/ModuloPage.tsx`
- [PneuRelief page](https://github.com/lingsongc/portfolio/blob/main/src/pages/PneuReliefPage.tsx): `src/pages/PneuReliefPage.tsx`

### Other components

- **Visitor**

## Connections

- 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