# masonli1203/persona3-like-web architecture

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

- Interactive diagram: https://gitdiagram.com/masonli1203/persona3-like-web
- Repository: https://github.com/masonli1203/persona3-like-web

## Overview

This is a reusable, editable portfolio template. A visitor moves from the animated homepage into profile, creative-work, or project experiences; creative items open shareable media viewers, while project examples include a case study, transition demo, and interactive 3D configurator. The graph preserves the documented capabilities, but sampled source is incomplete, so some route-to-feature wiring is omitted where it cannot be verified.

Main entry points: [`src/features/navigation/page-transition.tsx`](https://github.com/masonli1203/persona3-like-web/blob/main/src/features/navigation/page-transition.tsx) (Page transitions), [`src/features/home/home-page.tsx`](https://github.com/masonli1203/persona3-like-web/blob/main/src/features/home/home-page.tsx) (Homepage experience), [`src/app/(modules)/creative/page.tsx`](https://github.com/masonli1203/persona3-like-web/blob/main/src/app/(modules)/creative/page.tsx) (Creative index), [`src/features/space-configurator/alcove-scene.ts`](https://github.com/masonli1203/persona3-like-web/blob/main/src/features/space-configurator/alcove-scene.ts) (3D scene)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Site experience"]
  node_root["Root layout<br/>[layout.tsx]"]
  node_home_route["Homepage route<br/>[page.tsx]"]
  node_home["Homepage experience<br/>[home-page.tsx]"]
  node_sections["Homepage sections<br/>[sections.ts]"]
end

subgraph group_creative["Creative portfolio"]
  node_creative_route["Creative routes<br/>[page.tsx]"]
  node_creative_index["Creative index<br/>[page.tsx]"]
  node_creative_catalog["Creative catalog<br/>[catalog.ts]"]
  node_creative_data["Creative content<br/>[creative.ts]"]
  node_gallery["Category gallery"]
  node_viewing["Work viewer"]
  node_video["Video player"]
end

subgraph group_projects["Projects and profile"]
  node_projects_route["Project routes<br/>[page.tsx]"]
  node_project_index["Project browser<br/>[project-index.tsx]"]
  node_project_data["Project content<br/>[projects.ts]"]
  node_case_study["Example case study<br/>[page.tsx]"]
  node_about["Profile page<br/>[page.tsx]"]
  node_profile_data["Profile content<br/>[profile.ts]"]
  node_study["Transition demo"]
end

subgraph group_interaction["Navigation and motion"]
  node_nav["Chapter navigation"]
  node_transition["Page transitions"]
  node_cursor["Ink cursor<br/>[ink-cursor.tsx]"]
end

subgraph group_configurator["Space configurator"]
  node_config_page["Configurator route<br/>[page.tsx]"]
  node_config_ui["Configurator UI"]
  node_config_model["Alcove model<br/>[alcove-config.ts]"]
  node_scene["3D scene<br/>[alcove-scene.ts]"]
  node_materials["Scene materials"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens site"| node_root
node_root -->|"wraps pages"| node_transition
node_visitor -->|"opens homepage"| node_home_route
node_home_route -->|"renders"| node_home
node_home -->|"reads previews"| node_sections
node_home -->|"uses navigation"| node_transition
node_transition -->|"renders"| node_cursor
node_visitor -->|"browses work"| node_creative_index
node_visitor -->|"opens work link"| node_creative_route
node_creative_index -->|"uses catalog"| node_creative_catalog
node_creative_route -->|"resolves work"| node_creative_catalog
node_creative_catalog -->|"reads entries"| node_creative_data
node_creative_index -->|"presents categories"| node_gallery
node_gallery -->|"opens viewer"| node_viewing
node_viewing -.->|"plays video"| node_video
node_visitor -->|"browses projects"| node_projects_route
node_projects_route -->|"renders index"| node_project_index
node_project_index -->|"reads entries"| node_project_data
node_visitor -->|"opens case study"| node_case_study
node_visitor -->|"opens profile"| node_about
node_about -->|"reads profile"| node_profile_data
node_visitor -->|"tries transition"| node_study
node_study -->|"uses motion state"| node_transition
node_visitor -->|"opens configurator"| node_config_page
node_config_page -->|"renders"| node_config_ui
node_config_ui -->|"builds scene"| node_scene
node_scene -->|"builds geometry"| node_config_model
node_scene -->|"creates materials"| node_materials

click node_root "https://github.com/masonli1203/persona3-like-web/blob/main/src/app/layout.tsx"
click node_home_route "https://github.com/masonli1203/persona3-like-web/blob/main/src/app/page.tsx"
click node_home "https://github.com/masonli1203/persona3-like-web/blob/main/src/features/home/home-page.tsx"
click node_sections "https://github.com/masonli1203/persona3-like-web/blob/main/src/data/sections.ts"
click node_nav "https://github.com/masonli1203/persona3-like-web/blob/main/src/features/navigation/chapter-navigation.tsx"
click node_transition "https://github.com/masonli1203/persona3-like-web/blob/main/src/features/navigation/page-transition.tsx"
click node_cursor "https://github.com/masonli1203/persona3-like-web/blob/main/src/features/navigation/ink-cursor.tsx"
click node_creative_route "https://github.com/masonli1203/persona3-like-web/blob/main/src/app/(modules)/creative/%5B...slug%5D/page.tsx"
click node_creative_index "https://github.com/masonli1203/persona3-like-web/blob/main/src/app/(modules)/creative/page.tsx"
click node_creative_catalog "https://github.com/masonli1203/persona3-like-web/blob/main/src/features/creative/catalog.ts"
click node_creative_data "https://github.com/masonli1203/persona3-like-web/blob/main/src/data/creative.ts"
click node_gallery "https://github.com/masonli1203/persona3-like-web/blob/main/src/features/creative/category-gallery.tsx"
click node_viewing "https://github.com/masonli1203/persona3-like-web/blob/main/src/features/creative/viewing-session.tsx"
click node_video "https://github.com/masonli1203/persona3-like-web/blob/main/src/features/creative/mux-video-player.tsx"
click node_projects_route "https://github.com/masonli1203/persona3-like-web/blob/main/src/app/(modules)/projects/page.tsx"
click node_project_index "https://github.com/masonli1203/persona3-like-web/blob/main/src/features/projects/project-index.tsx"
click node_project_data "https://github.com/masonli1203/persona3-like-web/blob/main/src/data/projects.ts"
click node_case_study "https://github.com/masonli1203/persona3-like-web/blob/main/src/app/(modules)/projects/sample-project/page.tsx"
click node_about "https://github.com/masonli1203/persona3-like-web/blob/main/src/app/(modules)/about/page.tsx"
click node_profile_data "https://github.com/masonli1203/persona3-like-web/blob/main/src/data/profile.ts"
click node_study "https://github.com/masonli1203/persona3-like-web/blob/main/src/features/interface-study/interface-study.tsx"
click node_config_page "https://github.com/masonli1203/persona3-like-web/blob/main/src/app/(modules)/projects/space-configurator/page.tsx"
click node_config_ui "https://github.com/masonli1203/persona3-like-web/blob/main/src/features/space-configurator/alcove-configurator.tsx"
click node_config_model "https://github.com/masonli1203/persona3-like-web/blob/main/src/features/space-configurator/alcove-config.ts"
click node_scene "https://github.com/masonli1203/persona3-like-web/blob/main/src/features/space-configurator/alcove-scene.ts"
click node_materials "https://github.com/masonli1203/persona3-like-web/blob/main/src/features/space-configurator/alcove-materials.ts"

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_root,node_home_route,node_home,node_sections toneBlue
class node_creative_route,node_creative_index,node_creative_catalog,node_creative_data,node_gallery,node_viewing,node_video toneAmber
class node_projects_route,node_project_index,node_project_data,node_case_study,node_about,node_profile_data,node_study toneMint
class node_nav,node_transition,node_cursor toneRose
class node_config_page,node_config_ui,node_config_model,node_scene,node_materials,node_visitor toneIndigo
```

## Components

### Site experience

- [Root layout](https://github.com/masonli1203/persona3-like-web/blob/main/src/app/layout.tsx): `src/app/layout.tsx`
- [Homepage route](https://github.com/masonli1203/persona3-like-web/blob/main/src/app/page.tsx): `src/app/page.tsx`
- [Homepage experience](https://github.com/masonli1203/persona3-like-web/blob/main/src/features/home/home-page.tsx): `src/features/home/home-page.tsx`
- [Homepage sections](https://github.com/masonli1203/persona3-like-web/blob/main/src/data/sections.ts): `src/data/sections.ts`

### Creative portfolio

- [Creative routes](https://github.com/masonli1203/persona3-like-web/blob/main/src/app/(modules)/creative/%5B...slug%5D/page.tsx): `src/app/(modules)/creative/[...slug]/page.tsx`
- [Creative index](https://github.com/masonli1203/persona3-like-web/blob/main/src/app/(modules)/creative/page.tsx): `src/app/(modules)/creative/page.tsx`
- [Creative catalog](https://github.com/masonli1203/persona3-like-web/blob/main/src/features/creative/catalog.ts): `src/features/creative/catalog.ts`
- [Creative content](https://github.com/masonli1203/persona3-like-web/blob/main/src/data/creative.ts): `src/data/creative.ts`
- [Category gallery](https://github.com/masonli1203/persona3-like-web/blob/main/src/features/creative/category-gallery.tsx): `src/features/creative/category-gallery.tsx`
- [Work viewer](https://github.com/masonli1203/persona3-like-web/blob/main/src/features/creative/viewing-session.tsx): `src/features/creative/viewing-session.tsx`
- [Video player](https://github.com/masonli1203/persona3-like-web/blob/main/src/features/creative/mux-video-player.tsx): `src/features/creative/mux-video-player.tsx`

### Projects and profile

- [Project routes](https://github.com/masonli1203/persona3-like-web/blob/main/src/app/(modules)/projects/page.tsx): `src/app/(modules)/projects/page.tsx`
- [Project browser](https://github.com/masonli1203/persona3-like-web/blob/main/src/features/projects/project-index.tsx): `src/features/projects/project-index.tsx`
- [Project content](https://github.com/masonli1203/persona3-like-web/blob/main/src/data/projects.ts): `src/data/projects.ts`
- [Example case study](https://github.com/masonli1203/persona3-like-web/blob/main/src/app/(modules)/projects/sample-project/page.tsx): `src/app/(modules)/projects/sample-project/page.tsx`
- [Profile page](https://github.com/masonli1203/persona3-like-web/blob/main/src/app/(modules)/about/page.tsx): `src/app/(modules)/about/page.tsx`
- [Profile content](https://github.com/masonli1203/persona3-like-web/blob/main/src/data/profile.ts): `src/data/profile.ts`
- [Transition demo](https://github.com/masonli1203/persona3-like-web/blob/main/src/features/interface-study/interface-study.tsx): `src/features/interface-study/interface-study.tsx`

### Navigation and motion

- [Chapter navigation](https://github.com/masonli1203/persona3-like-web/blob/main/src/features/navigation/chapter-navigation.tsx): `src/features/navigation/chapter-navigation.tsx`
- [Page transitions](https://github.com/masonli1203/persona3-like-web/blob/main/src/features/navigation/page-transition.tsx): `src/features/navigation/page-transition.tsx`
- [Ink cursor](https://github.com/masonli1203/persona3-like-web/blob/main/src/features/navigation/ink-cursor.tsx): `src/features/navigation/ink-cursor.tsx`

### Space configurator

- [Configurator route](https://github.com/masonli1203/persona3-like-web/blob/main/src/app/(modules)/projects/space-configurator/page.tsx): `src/app/(modules)/projects/space-configurator/page.tsx`
- [Configurator UI](https://github.com/masonli1203/persona3-like-web/blob/main/src/features/space-configurator/alcove-configurator.tsx): `src/features/space-configurator/alcove-configurator.tsx`
- [Alcove model](https://github.com/masonli1203/persona3-like-web/blob/main/src/features/space-configurator/alcove-config.ts): `src/features/space-configurator/alcove-config.ts`
- [3D scene](https://github.com/masonli1203/persona3-like-web/blob/main/src/features/space-configurator/alcove-scene.ts): `src/features/space-configurator/alcove-scene.ts`
- [Scene materials](https://github.com/masonli1203/persona3-like-web/blob/main/src/features/space-configurator/alcove-materials.ts): `src/features/space-configurator/alcove-materials.ts`

### Other components

- **Visitor**

## Connections

- Visitor → Root layout: opens site
- Root layout → Page transitions: wraps pages
- Visitor → Homepage route: opens homepage
- Homepage route → Homepage experience: renders
- Homepage experience → Homepage sections: reads previews
- Homepage experience → Page transitions: uses navigation
- Page transitions → Ink cursor: renders
- Visitor → Creative index: browses work
- Visitor → Creative routes: opens work link
- Creative index → Creative catalog: uses catalog
- Creative routes → Creative catalog: resolves work
- Creative catalog → Creative content: reads entries
- Creative index → Category gallery: presents categories
- Category gallery → Work viewer: opens viewer
- Work viewer → Video player: plays video
- Visitor → Project routes: browses projects
- Project routes → Project browser: renders index
- Project browser → Project content: reads entries
- Visitor → Example case study: opens case study
- Visitor → Profile page: opens profile
- Profile page → Profile content: reads profile
- Visitor → Transition demo: tries transition
- Transition demo → Page transitions: uses motion state
- Visitor → Configurator route: opens configurator
- Configurator route → Configurator UI: renders
- Configurator UI → 3D scene: builds scene
- 3D scene → Alcove model: builds geometry
- 3D scene → Scene materials: creates materials