Skip to main content

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.

The project follows a flat, straightforward layout with all application source code living under src/ and static public assets under public/. There is no domain-based folder splitting — each React component is a single file at the root of src/, which keeps imports simple and the codebase easy to scan. Configuration files (vite.config.js, eslint.config.js) sit at the project root alongside index.html, the single HTML entry point.

​
Directory Tree

persona3-website/
├── index.html
├── vite.config.js
├── package.json
├── eslint.config.js
├── public/
│   ├── favicon.svg
│   └── icons.svg
├── scripts/
│   └── watch-build.mjs
└── src/
    ├── main.jsx
    ├── App.jsx
    ├── App.css
    ├── index.css
    ├── P3Menu.jsx
    ├── AboutMe.jsx
    ├── ResumePage.jsx
    ├── Socials.jsx
    ├── VideoPage.jsx
    ├── PageTransition.jsx
    ├── FontPreview.jsx
    └── assets/
        ├── char1.png
        ├── char2.png
        ├── char3.png
        ├── icon1.png
        ├── icon2.png
        ├── icon3.png
        ├── hero.png
        ├── mainm.jpeg
        ├── mainm2.jpeg
        ├── mainf.jpeg
        ├── newsign.png
        ├── card.png
        ├── Mainn.mp4
        ├── main1.mp4
        ├── main2.mp4
        └── main3.mp4

​
Core Source Files

App.jsx

Defines the AnimatedRoutes component, which wraps <Routes> in Framer Motion’s <AnimatePresence mode="wait">. Routes for /about and /socials pass a variant prop to <PageTransition>; the main menu and resume routes use the default transition. Also defines the MenuScreen helper that combines the background <video> with <P3Menu>.

P3Menu.jsx

The main menu overlay rendered at /. Maintains an active index with useState and registers ArrowUp, ArrowDown, and Enter key listeners. Each item in the ITEMS array has its own font size, skew angles, and offset values to produce the staggered, tilted JRPG menu look.

AboutMe.jsx

The About Me page rendered at /about. Implements a three-row party-member screen using character portraits (char1.png, char2.png, char3.png) and a background video (main1.mp4). Pressing Enter or ArrowRight triggers a reveal panel that slides in with a REVEAL_CONTENT block for the active row.

ResumePage.jsx

The Resume page rendered at /resume. Accepts a src prop (passed main2.mp4 from App.jsx) for its background video. Displays four resume category cards (Education, Skills, Projects, Experience) as navigable rows with Roman-numeral badges and a detail panel that appears when the Education card is active.

Socials.jsx

The Socials page rendered at /socials. Uses a two-focus model (left for the platform list, right for per-platform link bars) with ArrowLeft/ArrowRight to switch between them. Each platform bar shows stat tags (FOL, VWR, PST, LKS) and a list of content links navigable by keyboard.

PageTransition.jsx

A wrapper component that renders a TransitionOverlay before fading in its children. Accepts a variant prop ("default", "about", "resume", "socials") to select from four distinct Framer Motion overlay styles — panels, diagonal bars, horizontal stripes, or card sweeps.

​
Entry Point

The application bootstraps in src/main.jsx, which mounts the React tree into the #root div defined in index.html:
src/main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>,
)
BrowserRouter is provided here at the top level so that useLocation, useNavigate, and <Routes> are available throughout the entire component tree.

​
The Assets Directory

All media used by the portfolio lives in src/assets/ and is imported directly into components as ES module URLs, which Vite resolves and fingerprints at build time.
Asset typeFilesWhere imported
Background videosMainn.mp4, main1.mp4, main2.mp4, main3.mp4App.jsx, AboutMe.jsx, ResumePage.jsx, Socials.jsx
Character portraitschar1.png, char2.png, char3.pngAboutMe.jsx, Socials.jsx
Platform iconsicon1.png, icon2.png, icon3.pngAboutMe.jsx, Socials.jsx
About Me portraitsmainm.jpeg, mainm2.jpeg, mainf.jpegAboutMe.jsx
UI graphicsnewsign.png, card.png, hero.pngSocials.jsx
Because Vite processes assets in src/assets/ through its module graph, missing files will cause the dev server to throw a build error at startup. Make sure all required MP4 and image files are present before running npm run dev. See Installation for the full list.

​
Global Styles

The project uses two CSS files to establish the base layout. src/index.css applies resets at the very root of the document:
src/index.css
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body, #root {
  width: 100%;
  height: 100%;
}

body {
  background: #000;
  overflow: hidden;
}
Setting overflow: hidden on body is intentional — it prevents scrollbars from appearing during page transition animations that temporarily render elements outside the viewport. src/App.css contains its own * reset and body baseline, then defines the #menu-screen pattern used by every page component:
src/App.css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #000;
  overflow: hidden;
}

#menu-screen {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#menu-screen video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#main {
  width: 100vw;
  height: 100vh;
}
Every page (P3Menu via MenuScreen in App.jsx, AboutMe, ResumePage, Socials) wraps its content in a <div id="menu-screen"> and renders a <video> as the first child. Because the video is position: absolute with inset: 0, it fills the entire viewport behind all other positioned children while the page’s UI elements layer on top using higher z-index values.
When adding a new page, adopt the same #menu-screen + <video> pattern and start your overlay elements at z-index: 10 or higher. This keeps stacking contexts consistent across all routes.

​
Additional Files

  • scripts/watch-build.mjs — A Node.js script that wraps npm run build and re-runs it (with 180 ms debounce) whenever files in src/, public/, index.html, package.json, or vite.config.js change. Used with the build:watch npm script.
  • VideoPage.jsx — A general-purpose full-screen video page component available for custom routes.
  • FontPreview.jsx — A utility component for previewing the Anton typeface during development.
  • public/favicon.svg and public/icons.svg — Static SVG assets served from the root of the site without Vite processing.

Build docs developers (and LLMs) love

Get started for freeTalk to us