The Persona 3 Portfolio Website is a fully animated single-page application that presents a personal portfolio through the lens of the Persona 3 JRPG game UI. Built with React 19, Vite, and Framer Motion, it delivers keyboard-navigable menus, per-route cinematic transitions, and sections for About Me, Resume, and Socials — all wrapped in a dark, geometric, video-backed design.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/blairxu13/persona3-website/llms.txt
Use this file to discover all available pages before exploring further.
Installation
Clone the repo, install dependencies, and launch the dev server in minutes.
Project Structure
Understand how source files, assets, and pages are organized.
P3Menu Component
The animated main menu with keyboard navigation and clip-path highlights.
Page Transitions
Framer Motion transition overlays — one unique variant per route.
Customization
Swap colors, fonts, video assets, and menu items to make the site yours.
Core Concepts
Learn how React Router, AnimatePresence, and keyboard handlers wire together.
How it works
Clone and install
Fork the repository and run
npm install to pull in React, Framer Motion, React Router, and Vite.Add your video assets
Drop your background MP4 files into
src/assets/ and update the import paths in App.jsx and each page component.Edit your content
Update the
ITEMS array in P3Menu.jsx, the REVEAL_CONTENT array in AboutMe.jsx, and the section list in ResumePage.jsx with your own information.Key features
Keyboard-first navigation
Every page responds to ↑↓ arrow keys, Enter to confirm, and Escape/Backspace to go back — just like the game.
Cinematic page transitions
Four distinct Framer Motion overlay animations fire between routes: default, about, resume, and socials.
Video backgrounds
Looping MP4 files play fullscreen behind every page, with CSS overlays for readability.
Game-style typography
Anton and Bebas Neue display fonts, skewed labels, and geometric clip-paths recreate the Persona HUD look.