# wl3512-lab/lucys-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/wl3512-lab/lucys-portfolio
- Repository: https://github.com/wl3512-lab/lucys-portfolio

## Overview

This is Lucy Liu’s portfolio site and reusable UI kit. Visitors browse the portfolio’s introduction and work, open project case studies, and reach the contact section. Case studies can tailor section order and emphasis to a selected reader persona. A separate project editor supports creating and editing entries, saving them in browser storage, and exporting JSON for the portfolio project list. The README documents these capabilities; the sampled source gives additional detail on persona behavior and interactive effects, but not every page’s wiring.

Main entry points: [`index.html`](https://github.com/wl3512-lab/lucys-portfolio/blob/main/index.html) (Portfolio page), [`app.jsx`](https://github.com/wl3512-lab/lucys-portfolio/blob/main/app.jsx) (Portfolio interactions), [`project-editor.html`](https://github.com/wl3512-lab/lucys-portfolio/blob/main/project-editor.html) (Project editor), [`components/Spotlight.jsx`](https://github.com/wl3512-lab/lucys-portfolio/blob/main/components/Spotlight.jsx) (Spotlight work)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_portfolio["Portfolio experience"]
  node_portfolio_page["Portfolio page<br/>[index.html]"]
  node_portfolio_app["Portfolio interactions<br/>[app.jsx]"]
  node_work_page["Work section<br/>[work.html]"]
  node_contact["Contact section<br/>[Contact.jsx]"]
  node_project_list["Project list<br/>[index.html]"]
end

subgraph group_authoring["Project authoring"]
  node_editor["Project editor"]
  node_browser_storage[("Project storage")]
  node_exported_json["Project JSON"]
end

subgraph group_studies["Case studies"]
  node_case_pages["Project case studies"]
  node_persona_engine["Persona engine<br/>[persona-engine.js]"]
  node_persona_content["Persona content<br/>[persona-content.js]"]
end

subgraph group_ui["Interactive UI"]
  node_nav["Navigation<br/>[Nav.jsx]"]
  node_hero["Hero section<br/>[Hero.jsx]"]
  node_project_row["Project rows<br/>[ProjectRow.jsx]"]
  node_skills["Skills section<br/>[Skills.jsx]"]
  node_spotlight["Spotlight work<br/>[Spotlight.jsx]"]
  node_laser_flow["Laser visual<br/>[LaserFlow.jsx]"]
  node_waves["Wave visual<br/>[Waves.jsx]"]
  node_cursor["Target cursor<br/>[TargetCursor.jsx]"]
  node_animation_runtime["Scroll animation<br/>[original-main.js]"]
end

node_visitor(("Site visitor"))

node_visitor -->|"opens"| node_portfolio_page
node_visitor -->|"edits projects"| node_editor
node_portfolio_page -->|"runs interactions"| node_portfolio_app
node_portfolio_page -->|"presents work"| node_work_page
node_portfolio_page -->|"presents contact"| node_contact
node_editor -->|"saves projects"| node_browser_storage
node_editor -->|"exports"| node_exported_json
node_exported_json -->|"pasted into"| node_project_list
node_visitor -->|"opens study"| node_case_pages
node_case_pages -->|"tailors study"| node_persona_engine
node_persona_engine -->|"reads persona data"| node_persona_content
node_portfolio_page -->|"displays navigation"| node_nav
node_portfolio_page -->|"displays introduction"| node_hero
node_work_page -->|"displays projects"| node_project_row
node_portfolio_page -->|"displays skills"| node_skills
node_portfolio_page -->|"features work"| node_spotlight
node_spotlight -->|"renders effect"| node_laser_flow
node_spotlight -->|"renders backdrop"| node_waves
node_portfolio_app -.->|"supports interaction"| node_cursor
node_portfolio_app -.->|"animates sections"| node_animation_runtime

click node_portfolio_page "https://github.com/wl3512-lab/lucys-portfolio/blob/main/index.html"
click node_portfolio_app "https://github.com/wl3512-lab/lucys-portfolio/blob/main/app.jsx"
click node_work_page "https://github.com/wl3512-lab/lucys-portfolio/blob/main/work.html"
click node_contact "https://github.com/wl3512-lab/lucys-portfolio/blob/main/components/Contact.jsx"
click node_editor "https://github.com/wl3512-lab/lucys-portfolio/blob/main/project-editor.html"
click node_project_list "https://github.com/wl3512-lab/lucys-portfolio/blob/main/index.html"
click node_case_pages "https://github.com/wl3512-lab/lucys-portfolio/blob/main/eternal-wreckening.html"
click node_persona_engine "https://github.com/wl3512-lab/lucys-portfolio/blob/main/components/persona-engine.js"
click node_persona_content "https://github.com/wl3512-lab/lucys-portfolio/blob/main/components/persona-content.js"
click node_nav "https://github.com/wl3512-lab/lucys-portfolio/blob/main/components/Nav.jsx"
click node_hero "https://github.com/wl3512-lab/lucys-portfolio/blob/main/components/Hero.jsx"
click node_project_row "https://github.com/wl3512-lab/lucys-portfolio/blob/main/components/ProjectRow.jsx"
click node_skills "https://github.com/wl3512-lab/lucys-portfolio/blob/main/components/Skills.jsx"
click node_spotlight "https://github.com/wl3512-lab/lucys-portfolio/blob/main/components/Spotlight.jsx"
click node_laser_flow "https://github.com/wl3512-lab/lucys-portfolio/blob/main/components/LaserFlow.jsx"
click node_waves "https://github.com/wl3512-lab/lucys-portfolio/blob/main/components/Waves.jsx"
click node_cursor "https://github.com/wl3512-lab/lucys-portfolio/blob/main/components/TargetCursor.jsx"
click node_animation_runtime "https://github.com/wl3512-lab/lucys-portfolio/blob/main/reference/original-main.js"

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_portfolio_page,node_portfolio_app,node_work_page,node_contact,node_project_list toneBlue
class node_editor,node_browser_storage,node_exported_json toneAmber
class node_case_pages,node_persona_engine,node_persona_content toneMint
class node_nav,node_hero,node_project_row,node_skills,node_spotlight,node_laser_flow,node_waves,node_cursor,node_animation_runtime toneRose
class node_visitor toneIndigo
```

## Components

### Portfolio experience

- [Portfolio page](https://github.com/wl3512-lab/lucys-portfolio/blob/main/index.html): `index.html`
- [Portfolio interactions](https://github.com/wl3512-lab/lucys-portfolio/blob/main/app.jsx): `app.jsx`
- [Work section](https://github.com/wl3512-lab/lucys-portfolio/blob/main/work.html): `work.html`
- [Contact section](https://github.com/wl3512-lab/lucys-portfolio/blob/main/components/Contact.jsx): `components/Contact.jsx`
- [Project list](https://github.com/wl3512-lab/lucys-portfolio/blob/main/index.html): `index.html`

### Project authoring

- [Project editor](https://github.com/wl3512-lab/lucys-portfolio/blob/main/project-editor.html): `project-editor.html`
- **Project storage**
- **Project JSON**

### Case studies

- [Project case studies](https://github.com/wl3512-lab/lucys-portfolio/blob/main/eternal-wreckening.html): `eternal-wreckening.html`
- [Persona engine](https://github.com/wl3512-lab/lucys-portfolio/blob/main/components/persona-engine.js): `components/persona-engine.js`
- [Persona content](https://github.com/wl3512-lab/lucys-portfolio/blob/main/components/persona-content.js): `components/persona-content.js`

### Interactive UI

- [Navigation](https://github.com/wl3512-lab/lucys-portfolio/blob/main/components/Nav.jsx): `components/Nav.jsx`
- [Hero section](https://github.com/wl3512-lab/lucys-portfolio/blob/main/components/Hero.jsx): `components/Hero.jsx`
- [Project rows](https://github.com/wl3512-lab/lucys-portfolio/blob/main/components/ProjectRow.jsx): `components/ProjectRow.jsx`
- [Skills section](https://github.com/wl3512-lab/lucys-portfolio/blob/main/components/Skills.jsx): `components/Skills.jsx`
- [Spotlight work](https://github.com/wl3512-lab/lucys-portfolio/blob/main/components/Spotlight.jsx): `components/Spotlight.jsx`
- [Laser visual](https://github.com/wl3512-lab/lucys-portfolio/blob/main/components/LaserFlow.jsx): `components/LaserFlow.jsx`
- [Wave visual](https://github.com/wl3512-lab/lucys-portfolio/blob/main/components/Waves.jsx): `components/Waves.jsx`
- [Target cursor](https://github.com/wl3512-lab/lucys-portfolio/blob/main/components/TargetCursor.jsx): `components/TargetCursor.jsx`
- [Scroll animation](https://github.com/wl3512-lab/lucys-portfolio/blob/main/reference/original-main.js): `reference/original-main.js`

### Other components

- **Site visitor**

## Connections

- Site visitor → Portfolio page: opens
- Site visitor → Project editor: edits projects
- Portfolio page → Portfolio interactions: runs interactions
- Portfolio page → Work section: presents work
- Portfolio page → Contact section: presents contact
- Project editor → Project storage: saves projects
- Project editor → Project JSON: exports
- Project JSON → Project list: pasted into
- Site visitor → Project case studies: opens study
- Project case studies → Persona engine: tailors study
- Persona engine → Persona content: reads persona data
- Portfolio page → Navigation: displays navigation
- Portfolio page → Hero section: displays introduction
- Work section → Project rows: displays projects
- Portfolio page → Skills section: displays skills
- Portfolio page → Spotlight work: features work
- Spotlight work → Laser visual: renders effect
- Spotlight work → Wave visual: renders backdrop
- Portfolio interactions → Target cursor: supports interaction
- Portfolio interactions → Scroll animation: animates sections