ResumePage: Game-Style Portfolio Section Viewer

The ResumePage component transforms a traditional résumé into a Persona 3-style section viewer. A stack of parallelogram cards on the left represents portfolio categories — Education, Skills, Projects, and Experience — while the right side displays a detailed breakdown panel for whichever card is active. A looping background video plays behind the UI, and all navigation is keyboard-driven.

Props

src

string

required

The URL or path to the background video asset. This is passed directly to an HTML <video> element’s src attribute and loops silently behind the card UI, and is also used as the source for the entry reveal overlay video. Use a relative asset path (e.g. "/assets/bg.mp4") or an absolute URL.

Screen Layout

The screen is divided into two columns: Left Column — Card Stack (.resume-stack) Four .resume-card parallelogram tiles stack vertically, positioned at top: 9vh and left: 2.8vw. Each card shows a Roman numeral badge (.resume-badge) on the left, a section title, and a subtitle. The active card transforms from its dark #10185f background to white with black text. Right Column — Detail Panel (.resume-detail-panel) A dark-blue clip-path panel on the right side fills with the section’s detailed rows when that card is active. Currently the Education section (index 0) has a fully built-out detail panel. Other sections display the panel chrome but have placeholder or empty content.

The ITEMS Array

Each entry in ITEMS corresponds to one card in the left stack:

const ITEMS = [
  { id: "i",   badge: "I",   title: "EDUCATION",  subtitle: "University / Coursework", rank: 3 },
  { id: "ii",  badge: "II",  title: "SKILLS",     subtitle: "Frontend / Design / UI",  rank: 4 },
  { id: "iii", badge: "III", title: "PROJECTS",   subtitle: "Featured Work",           rank: 5 },
  { id: "iv",  badge: "IV",  title: "EXPERIENCE", subtitle: "Internships / Roles",     rank: 2 },
];

Field	Type	Purpose
`id`	`string`	Unique React key for the card
`badge`	`string`	Roman numeral displayed in the rotated `.resume-badge` chip
`title`	`string`	Bold uppercase section title on the card
`subtitle`	`string`	Smaller descriptive line beneath the title
`rank`	`number`	Reserved field — can be used to drive sort order or display priority

To rename a section, update title and subtitle directly. To reorder cards, change the array order — the active index is tracked positionally, so EDUCATION_ROWS always corresponds to ITEMS[0].

The EDUCATION_ROWS Array

EDUCATION_ROWS populates the detail panel when the Education card (index 0) is active:

const EDUCATION_ROWS = [
  { index: "01", title: "General Education",     status: "Complete"    },
  { index: "02", title: "Computer Science Core", status: "In Progress" },
  { index: "03", title: "Elective Track",        status: "Queued"      },
  { index: "04", title: "Capstone Prep",         status: "Pending"     },
];

Field	Type	Purpose
`index`	`string`	Two-digit row number displayed on the left of each row
`title`	`string`	Name of the coursework, module, or credential
`status`	`string`	Completion status label rendered on the right (e.g. `"Complete"`, `"In Progress"`)

Add, remove, or rename rows freely. Each row in the array renders as one line in the detail panel.

Only the Education detail panel (index 0) is fully implemented. The Skills, Projects, and Experience cards display the right-side panel chrome but do not yet have dedicated row arrays or populated content. See Customizing Sections below for how to build them out.

Entry Animation

When the route mounts, a full-screen .resume-entry-mask overlay div plays the resume-entry-reveal animation. This div sits above the entire UI at z-index: 9 and contains its own copy of the background video. The animation uses a circular clip-path that expands outward from the center of the screen, revealing the video overlay as it grows:

@keyframes resume-entry-reveal {
  from { clip-path: circle(0 at 50% 50%); }
  to   { clip-path: circle(150vmax at 50% 50%); }
}

The .resume-entry-mask plays this animation once (forwards) over 1.2 s. Because the mask covers the whole viewport, the effect looks like the resume screen “loading in” with a circular wipe — matching the Persona 3 menu reveal style.

Keyboard Controls

All navigation is keyboard-driven. There is no mouse interaction in the default implementation.

Key	Effect
`ArrowUp`	Move selection to the previous card
`ArrowDown`	Move selection to the next card
`ArrowLeft`	Navigate back to the previous route (`navigate(-1)`)
`Escape`	Navigate back to the previous route (`navigate(-1)`)
`Backspace`	Navigate back to the previous route (`navigate(-1)`)

Customizing Sections

To add a detail panel for Skills, Projects, or Experience, follow the same pattern used for Education:

Create a rows array

Define a new constant array for your section’s rows. Mirror the EDUCATION_ROWS shape:

const SKILLS_ROWS = [
  { index: "01", title: "React & TypeScript", status: "Proficient"  },
  { index: "02", title: "Framer Motion",      status: "Proficient"  },
  { index: "03", title: "Node.js / Express",  status: "Familiar"    },
  { index: "04", title: "Figma / UI Design",  status: "In Progress" },
];

Add a conditional render

In the detail panel JSX, add a condition that checks active === 1 (for Skills) and maps over SKILLS_ROWS:

{active === 1 && SKILLS_ROWS.map((row) => (
  <div className="resume-detail-row" key={row.index}>
    <span className="resume-detail-index">{row.index}</span>
    <span className="resume-detail-title">{row.title}</span>
    <span className="resume-detail-status">{row.status}</span>
  </div>
))}

Repeat for Projects and Experience

Add PROJECTS_ROWS (checked at active === 2) and EXPERIENCE_ROWS (checked at active === 3) using the same pattern.

CSS Classes Reference

Class	Description
`.resume-stack`	Left column container — `top: 9vh`, `left: 2.8vw`, stacks cards vertically
`.resume-card`	Individual parallelogram card — `#10185f` background by default
`.resume-card.active`	Active state — background becomes white, text becomes black
`.resume-badge`	Rotated Roman numeral chip with cyan border, positioned left of the card title
`.resume-detail-panel`	Right-side detail panel — dark blue, clip-path shaped, holds row content
`.resume-entry-mask`	Full-screen overlay div that plays `resume-entry-reveal` once on mount, containing its own background video
`resume-entry-reveal`	Keyframe — circle clip-path expands from `circle(0 at 50% 50%)` to `circle(150vmax at 50% 50%)`

Navigation

Pages

Customization

ResumePage: Game-Style Portfolio Section Viewer

Props

Screen Layout

The ITEMS Array

The EDUCATION_ROWS Array

Entry Animation

Keyboard Controls

Customizing Sections

CSS Classes Reference

Build docs developers (and LLMs) love

Navigation

Pages

Customization

Documentation Index

​Props

​Screen Layout

​The ITEMS Array

​The EDUCATION_ROWS Array

​Entry Animation

​Keyboard Controls

​Customizing Sections

​CSS Classes Reference

Build docs developers (and LLMs) love

Props

Screen Layout

The ITEMS Array

The EDUCATION_ROWS Array

Entry Animation

Keyboard Controls

Customizing Sections

CSS Classes Reference