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.

Before you begin, make sure you have Node.js 18 or later and npm installed on your machine. The project uses Vite 8 as its build tool, which requires a modern Node runtime. No other global tools are needed — everything else is installed as a local dependency.
1

Clone the repository

Clone the project from GitHub to your local machine:
git clone https://github.com/blairxu13/persona3-website
cd persona3-website
2

Install dependencies

Install all npm packages declared in package.json:
npm install
This installs React 19, React Router DOM 7, Framer Motion 12, and all dev dependencies including Vite 8 and @vitejs/plugin-react.
3

Add video and image assets

The repository does not include media files. Before the app can render correctly, you must place the following files inside src/assets/:Video files (imported directly in App.jsx):
FileUsed by
Mainn.mp4Main menu background (/)
main1.mp4About Me background (/about)
main2.mp4Resume background (/resume)
main3.mp4Socials background (/socials)
Image files:
FileUsed by
char1.pngCharacter portrait — bar row 1
char2.pngCharacter portrait — bar row 2
char3.pngCharacter portrait — bar row 3
mainm.jpegAbout Me reveal portrait 1
mainm2.jpegAbout Me reveal portrait 2
mainf.jpegAbout Me reveal portrait 3
hero.pngHero image
icon1.pngStat bar icon — platform 1
icon2.pngStat bar icon — platform 2
icon3.pngStat bar icon — platform 3
newsign.png”New” badge overlay on Socials bars
card.pngCard asset
The original assets are shared via Google Drive. If you are customizing this for your own portfolio, you can substitute any MP4 videos and PNG/JPEG images of your choice as long as the filenames match those listed above, or update the import paths in the relevant component files.
4

Start the development server

Run the Vite dev server with HMR:
npm run dev
Vite will print a local URL (typically http://localhost:5173). Open it in your browser to see the portfolio running.

​
Available Scripts

All scripts are defined in package.json and run through npm:
ScriptCommandDescription
devviteStarts the Vite dev server with hot module replacement
buildvite buildProduces a production-optimised static bundle in dist/
build:watchnode scripts/watch-build.mjsRuns a production build and re-builds automatically whenever source files change
previewvite previewServes the dist/ build locally to preview the production output
linteslint .Runs ESLint across the entire project
Use npm run build:watch during deployment workflows where you want a live-rebuilt dist/ folder without running the full dev server. The custom scripts/watch-build.mjs script watches src/, public/, index.html, package.json, and vite.config.js for changes and debounces rebuilds to avoid redundant runs.

​
Vite Configuration

The project uses a minimal Vite config that enables the React plugin for JSX and fast refresh:
vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
})
No custom aliases, proxy settings, or build targets are needed out of the box.

Build docs developers (and LLMs) love

Get started for freeTalk to us