How wl3512-lab/lucys-portfolio works
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 Portfolio page · app.jsx Portfolio interactions · project-editor.html Project editor · Spotlight.jsx Spotlight work
Components 21
Portfolio experience
- Portfolio page
index.html - Portfolio interactions
app.jsx - Work section
work.html - Contact section
components/Contact.jsx - Project list
index.html
Project authoring
- Project editor
project-editor.html - Project storage
- Project JSON
Case studies
- Project case studies
eternal-wreckening.html - Persona engine
components/persona-engine.js - Persona content
components/persona-content.js
Interactive UI
- Navigation
components/Nav.jsx - Hero section
components/Hero.jsx - Project rows
components/ProjectRow.jsx - Skills section
components/Skills.jsx - Spotlight work
components/Spotlight.jsx - Laser visual
components/LaserFlow.jsx - Wave visual
components/Waves.jsx - Target cursor
components/TargetCursor.jsx - Scroll animation
reference/original-main.js
Other components
- Site visitor
Connections 20
- 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