Managing Video and Image Assets

The Persona 3 portfolio is asset-heavy by design — every page renders a full-viewport looping video background, and multiple image assets populate the character bars, portrait reveals, and UI badges. All assets live in src/assets/ and are imported as ES module references at the top of the components that use them. Understanding which file maps to which screen makes replacement straightforward.

Large, uncompressed video files will significantly hurt page load performance. A 1080p video exported at full bitrate can easily exceed 100 MB — enough to cause multi-second stalls on average connections. Always compress videos before adding them to src/assets/. See the optimization tip below for recommended settings.

Required Video Assets

The four video files below are imported in src/App.jsx and passed as props to the relevant page components. All must be present in src/assets/ for the application to build without errors.

Filename	Variable	Used As
`Mainn.mp4`	`menuVideo`	Full-screen background on the main menu screen
`main1.mp4`	`main1`	Full-screen background on the About Me page
`main2.mp4`	`main2`	Full-screen background on the Resume page
`main3.mp4`	`main3`	Full-screen background on the Socials page (also used by the `VideoPage` route)

// src/App.jsx — video imports
import menuVideo from './assets/Mainn.mp4'
import main1     from './assets/main1.mp4'
import main2     from './assets/main2.mp4'
import main3     from './assets/main3.mp4'

Required Image Assets

The following image files are referenced in AboutMe.jsx, Socials.jsx, and other components. Missing files will cause broken image slots or runtime import errors.

Filename	Used As
`char1.png`	Character portrait thumbnail — first entry in the About Me / Socials bar
`char2.png`	Character portrait thumbnail — second entry
`char3.png`	Character portrait thumbnail — third entry
`icon1.png`	Small platform / link icon displayed inside bar content
`icon2.png`	Small platform / link icon — second slot
`icon3.png`	Small platform / link icon — third slot
`mainm.jpeg`	Full-height portrait image revealed in the About Me panel (male variant 1)
`mainm2.jpeg`	Full-height portrait image — male variant 2
`mainf.jpeg`	Full-height portrait image — female variant
`newsign.png`	”NEW” badge overlay shown on unread / highlighted info bars in Socials
`card.png`	Decorative card graphic (present in assets folder)
`hero.png`	Hero image (present in assets folder)

Getting the Official Assets

The official asset pack (all videos and images used in the default build) is available via the link in the project README:

“you will need the assets from this folder: Google Drive”

Download the entire folder and place its contents directly into src/assets/. The filenames must match exactly (case-sensitive on Linux/macOS) for the existing imports to resolve correctly.

Using Custom Assets

Add your file to src/assets/

Copy or move your video or image file into the src/assets/ directory. Vite will automatically include it in the build bundle and generate a content-hashed output filename.

cp ~/Downloads/my-background.mp4 src/assets/my-background.mp4

Import the file in the relevant component

At the top of the component file that will use the asset, add an ES module import. Vite resolves these at build time and returns the final hashed public URL.

import myBackground from './assets/my-background.mp4';
import myPortrait   from './assets/my-portrait.png';

Pass as a prop or use directly in JSX

Use the imported variable as the src attribute of a <video> or <img> element, or pass it to a child component as a prop.

{/* Directly in JSX */}
<video src={myBackground} autoPlay loop muted playsInline />
<img src={myPortrait} alt="Portrait" />

{/* Or passed as a prop */}
<VideoPage src={myBackground} />

For videos, use H.264 MP4 for broadest browser compatibility

Encode your video as H.264 in an MP4 container. This format is supported by all modern browsers without any codec negotiation. Avoid VP9-only .webm files unless you also provide an MP4 fallback.

<!-- If you want to offer both formats, use <source> elements -->
<video autoPlay loop muted playsInline>
  <source src={myBackgroundWebm} type="video/webm" />
  <source src={myBackgroundMp4}  type="video/mp4"  />
</video>

For web-optimized video, target 720p resolution (1280×720) and aim for a file size under 10 MB per clip. A tool like HandBrake (free, cross-platform) can compress a 1080p source to 720p H.264 with a Constant Quality (RF) value of 28–32 while keeping motion smooth. This typically reduces file sizes by 70–85% with no perceptible quality loss at full-screen viewport sizes.

Swapping a Background Video

To replace, say, the main menu background with your own footage, update the import in App.jsx:

// src/App.jsx

// Before:
import menuVideo from './assets/Mainn.mp4'

// After — point to your new file:
import menuVideo from './assets/my-menu-bg.mp4'

The variable name menuVideo stays the same, so no other code needs to change. The same pattern applies to any of the four video imports — swap the filename, keep the variable.

VideoPage Component

VideoPage is a reusable full-screen video-player route included in the project. It accepts a single src prop and handles looping playback and keyboard back-navigation automatically.

// VideoPage renders:
// - a full-viewport <video> that autoplays, loops, and is muted
// - ArrowLeft key → navigate(-1) to return to the previous route

export default function VideoPage({ src }) {
  // renders <video src={src} autoPlay loop muted playsInline />
  // ArrowLeft key: navigate(-1)
}

In App.jsx, main3 is passed to the VideoPage route:

import VideoPage from './VideoPage';
import main3 from './assets/main3.mp4';

// Inside <Routes>:
<Route path="/video" element={<VideoPage src={main3} />} />

To create additional video-only routes (e.g., for a project demo reel), import an additional video asset and add another <Route> pointing to <VideoPage src={yourVideo} />. No changes to VideoPage.jsx itself are needed.

Navigation

Pages

Customization

Required Video Assets

Required Image Assets

Getting the Official Assets

Using Custom Assets

Swapping a Background Video

VideoPage Component

Build docs developers (and LLMs) love

Navigation

Pages

Customization

Documentation Index

​Required Video Assets

​Required Image Assets

​Getting the Official Assets

​Using Custom Assets

​Swapping a Background Video

​VideoPage Component

Build docs developers (and LLMs) love

Required Video Assets

Required Image Assets

Getting the Official Assets

Using Custom Assets

Swapping a Background Video

VideoPage Component