How masonli1203/persona3-like-web works
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: page-transition.tsx Page transitions · home-page.tsx Homepage experience · page.tsx Creative index · alcove-scene.ts 3D scene
Components 27
Site experience
- Root layout
src/app/layout.tsx - Homepage route
src/app/page.tsx - Homepage experience
src/features/home/home-page.tsx - Homepage sections
src/data/sections.ts
Creative portfolio
- Creative routes
src/app/(modules)/creative/[...slug]/page.tsx - Creative index
src/app/(modules)/creative/page.tsx - Creative catalog
src/features/creative/catalog.ts - Creative content
src/data/creative.ts - Category gallery
src/features/creative/category-gallery.tsx - Work viewer
src/features/creative/viewing-session.tsx - Video player
src/features/creative/mux-video-player.tsx
Projects and profile
- Project routes
src/app/(modules)/projects/page.tsx - Project browser
src/features/projects/project-index.tsx - Project content
src/data/projects.ts - Example case study
src/app/(modules)/projects/sample-project/page.tsx - Profile page
src/app/(modules)/about/page.tsx - Profile content
src/data/profile.ts - Transition demo
src/features/interface-study/interface-study.tsx
Navigation and motion
- Chapter navigation
src/features/navigation/chapter-navigation.tsx - Page transitions
src/features/navigation/page-transition.tsx - Ink cursor
src/features/navigation/ink-cursor.tsx
Space configurator
- Configurator route
src/app/(modules)/projects/space-configurator/page.tsx - Configurator UI
src/features/space-configurator/alcove-configurator.tsx - Alcove model
src/features/space-configurator/alcove-config.ts - 3D scene
src/features/space-configurator/alcove-scene.ts - Scene materials
src/features/space-configurator/alcove-materials.ts
Other components
- Visitor
Connections 28
- 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