| name | portfolio-site |
| description | Work on the Jenny Tang React+Vite portfolio site: edit content, routes, per-project pages, styles, and mandatory documentation sync. Use when modifying this portfolio repo, adding projects, changing homepage sections, or when the user mentions AGENTS.md, USAGE_GUIDE, or portfolio documentation. |
Portfolio site workflow
Before coding
- Read AGENTS.md
- Read docs/USAGE_GUIDE.md - doc sync table
- Confirm: web React 18 + Vite, not React Native
Mandatory: update docs
After any code change, update docs per the mapping table in USAGE_GUIDE.md.
Tell the user which doc files you updated.
Content source (docs/CONTENT_SOURCE.md)
- Mapping reference only - not imported at runtime
- On content changes: update
CONTENT_SOURCE.md and runtime files (src/data/*, src/projects/*)
- User instructions in chat override
CONTENT_SOURCE.md
Edit homepage copy
| Content | File |
|---|
| Profile, contact | src/data/profile.js |
| Hero + impact numbers | src/data/stats.js |
| About | src/data/about.js |
| Skills | src/data/skills.js, src/data/skillIcons.js |
| Project cards | src/data/projects.js |
→ Update docs/FEATURE_MAP.md for affected features.
Edit one project page (custom design)
- JSX:
src/projects/<Name>Project.jsx
- CSS:
src/styles/projects/<name>.css
- Wrap with
ProjectShell + matching slug prop
- Do not merge into a shared generic template
→ Update docs/FEATURE_MAP.md for that project.
Add new project
src/data/projects.js - { slug, link: '/projects/<slug>', ... }src/projects/NewProject.jsx + src/styles/projects/new-project.csssrc/App.jsx - <Route path="/projects/<slug>" element={<NewProject />} />public/images/projects/<slug>.jpg- Update docs:
FEATURE_MAP.md, ARCHITECTURE_OVERVIEW.md, AI_AGENT_GUIDE.md, FULL_DOCUMENTATION.md, API_FLOW.md, AGENTS.md if routes change
Sync invariants
projects.js slug === App.jsx path segment === ProjectShell slug prop
projects.js link === '/projects/' + slug
getAllProjects() order === prev/next pager order
Commands
npm install && npm run dev
Avoid
motion.div typos (no framer-motion)href="#work" on project pages → use href="/#work" or <Link to="/#work">- Editing only
projects.js for long case study body (content lives in src/projects/*.jsx)
Deep reference
