This project is a personal portfolio website built to look and feel like a menu screen from the Persona 3 JRPG. Instead of a conventional static page, every section of the portfolio — About Me, Resume, and Socials — is presented as a route inside an animated, game-inspired interface. Keyboard navigation, animated page transitions powered by Framer Motion, and full-screen video backgrounds combine to make the experience feel closer to booting up a JRPG than browsing a developer portfolio.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.
Key Features
Keyboard Navigation
Every page responds to
ArrowUp, ArrowDown, Enter, and Escape — just like a real JRPG menu. No mouse required to move through the portfolio.Animated Page Transitions
Each route has its own bespoke Framer Motion transition overlay. The default, about, resume, and socials variants each use different colored panels, stripes, or cards that sweep across the screen before the new page appears.
Video Backgrounds
Every page renders a full-screen looping
<video> element as its background. The main menu uses Mainn.mp4, while the sub-pages pull from main1.mp4, main2.mp4, and main3.mp4.Anton Typography
The Anton typeface (loaded from Google Fonts) is used site-wide for menu labels, badges, and headings — matching the bold italic aesthetic of the Persona series’ UI design.
Tech Stack
The project is a single-page application with zero backend. All routing is client-side and the build output is a static bundle you can host anywhere.| Library | Version | Role |
|---|---|---|
| React | 19 | UI rendering and component model |
| React Router DOM | 7 | Client-side routing with BrowserRouter |
| Framer Motion | 12 | Page transition overlays and mount animations |
| Vite | 8 | Dev server, HMR, and production bundler |
Portfolio Sections
The portfolio is organized into four routes, each styled as a distinct JRPG screen:- Main Menu (
/) — TheP3Menucomponent renders a vertical list of menu items with skewed polygon clip-paths and per-item glow effects. Items respond to keyboard arrow keys and mouse hover. - About Me (
/about) — TheAboutMecomponent presents personal information through a party-member selection screen with character portraits (char1.png,char2.png,char3.png), stat bars, and a reveal panel triggered by pressingEnterorArrowRight. - Resume (
/resume) — TheResumePagecomponent displays resume categories (Education, Skills, Projects, Experience) as navigable cards with rank numbers, badge overlays, and a detail panel on the right. - Socials (
/socials) — TheSocialscomponent lists social platforms as interactive bars with stat counters and link sub-menus navigated with left/right arrow keys.
Video files (
Mainn.mp4, main1.mp4, main2.mp4, main3.mp4) and several image assets (char1.png, char2.png, char3.png, mainm.jpeg, mainm2.jpeg, mainf.jpeg, and others) are not included in the repository. You must source and add these files to src/assets/ yourself before the dev server will render correctly. See Installation for details.