AboutMe: Interactive Character Profile Screen

The AboutMe component is a full-screen, keyboard-driven character profile page inspired by the Persona 3 status screen. It renders three animated parallelogram bars on the left — each representing a personal fact category — and an overlay reveal panel that slides in when the user presses Enter or →, displaying character art alongside structured bio content.

Props

AboutMe is a standalone route component. It takes no props and manages all navigation internally via React Router’s useNavigate hook.

Screen Layout

The screen is split into two interactive layers that exist simultaneously in the DOM: Layer 1 — Bar List (always visible) Three .sc-bar-outer rows stack on the left side of the screen. The active bar expands to 90 px height, reveals a red underlay (.sc-bar-red), and pushes a white fill section in from the right edge. Inactive bars sit at 64 px with a dark #111 background. A .sc-right-nav overlay in the top-right corner shows LB / RB navigation hints at all times. Layer 2 — Reveal Panel (shown on Enter / →) Pressing Enter or → sets revealed: true, which fades in a dimmed overlay, animates a white rotated panel (.sc-reveal-panel) in from the left at −20 deg starting at top: 44vh, and slides a character portrait (.sc-main-portrait-shell) in from the right with a blur effect. The panel displays the text content from REVEAL_CONTENT (upper lines and a lower caption) — it does not show info bars. Pressing ← dismisses the panel without leaving the route.

The ITEMS Array

Each entry in ITEMS defines one bar row and all of its associated reveal data.

const ITEMS = [
  {
    id: "twitch",
    label: "ABOUT ME",               // heading shown in the bar
    handle: "@yourname",             // sub-handle text in the bar
    href: "https://twitch.tv/yourname", // external link (unused in nav, stored for reference)
    icon: "🎮",                      // emoji icon rendered in the bar
    barIcon: icon1,                  // imported image asset for the bar icon slot
    bars: 1,                         // total number of info bar rows in the reveal panel
    newBars: [0],                    // indices that show the "NEW" badge
    counts: ["56"],                  // view/count strings, one per bar
    links: ["twitch.tv/videos/..."], // URLs for each info bar row
    stats: [
      { tag: "FOL", value: "1.2K", color: "#9147ff" },
      { tag: "VWR", value: "042",  color: "#bf94ff" },
    ],
  },
  {
    id: "instagram",
    label: "FUN FACT ABOUT ME",
    handle: "@yourhandle",
    href: "...",
    icon: "📷",
    barIcon: icon2,
    bars: 5,
    newBars: [1, 2],
    counts: ["3.4M", /* ... */],
    stats: [
      { tag: "FOL", value: "3.4K", color: "#e1306c" },
      { tag: "PST", value: "128",  color: "#f77737" },
    ],
  },
  {
    id: "tiktok",
    label: "WIRED FACT ABOUT ME",
    handle: "@yourhandle",
    href: "...",
    icon: "🎵",
    barIcon: icon3,
    bars: 7,
    newBars: [0, 3, 5, 6],
    counts: ["5.1M", /* ... */],
    stats: [
      { tag: "FOL", value: "8.9K", color: "#00f2ea" },
      { tag: "LKS", value: "52K",  color: "#ff0050" },
    ],
  },
];

Field	Type	Purpose
`id`	`string`	Unique key for React rendering
`label`	`string`	Bold heading text inside the bar
`handle`	`string`	Secondary handle / subtitle text
`href`	`string`	External URL for reference
`icon`	`string`	Emoji displayed left of the label
`barIcon`	`image`	Imported PNG/SVG asset for the icon slot
`bars`	`number`	How many info bar rows are associated with this item
`newBars`	`number[]`	Zero-based indices of bars that display a “NEW” badge
`counts`	`string[]`	View / engagement count per info bar row
`links`	`string[]`	Destination URL per info bar row
`stats`	`object[]`	Two stat chips shown in the bar (see Stats Object below)

To add a fourth category, append a new object to ITEMS and add a matching entry to REVEAL_CONTENT. The ROLES array must also be extended so every item has a role entry.

The REVEAL_CONTENT Array

REVEAL_CONTENT is indexed in parallel with ITEMS. The entry at index i is displayed when item i is active and the reveal panel is open.

const REVEAL_CONTENT = [
  {
    upper: ["name moneybagg", "age:23"],          // lines shown in the upper text block
    lower: "major: computer science",             // single line shown below the divider
  },
  {
    upper: [
      "Cleopatra lived closer...",
      "Vikings kept cats...",
      "In medieval Europe...",
    ],
    lower: "above is some history fun fact",
  },
  {
    upper: [
      "Oxford University...",
      "The shortest war...",
      "Humans have been writing...",
    ],
    lower: "yes it's a place holder",
  },
];

Field	Type	Purpose
`upper`	`string[]`	One or more lines rendered in the upper section of the reveal panel
`lower`	`string`	A single caption line rendered below the horizontal rule

Replace each string with your own bio content, fun facts, or any text that fits the active bar’s theme.

Character & Portrait Images

Character Sprites (`CHARS`)

Three small character sprite images appear as decorative elements in the bar rows:

import char1 from "../assets/char1.png";
import char2 from "../assets/char2.png";
import char3 from "../assets/char3.png";

const CHARS = [char1, char2, char3];

Each CHARS[i] image is rendered alongside the corresponding ITEMS[i] bar. Swap these files in src/assets/ to use your own sprite art.

Portrait Images (`MAIN_IMAGES`)

When the reveal panel opens, a full-height portrait image is shown on the right side. The active item index selects the portrait:

import mainm  from "../assets/mainm.jpeg";
import mainm2 from "../assets/mainm2.jpeg";
import mainf  from "../assets/mainf.jpeg";

const MAIN_IMAGES = [mainm, mainm2, mainf];

Replace mainm.jpeg, mainm2.jpeg, and mainf.jpeg in src/assets/ with portrait photos or illustrations. Images are rendered inside .sc-main-portrait-shell with a skewX(-8deg) transform for the stylised Persona look.

ROLES Array

Each item has a role badge rendered inside the bar. Each entry carries the display text, the text color, a translucent background, and a border color:

const ROLES = [
  { text: "LEADER", color: "#e8c100", bg: "rgba(232,193,0,0.12)",    border: "rgba(232,193,0,0.5)"    },
  { text: "PARTY",  color: "#4a8fff", bg: "rgba(74,143,255,0.12)",   border: "rgba(74,143,255,0.5)"   },
  { text: "PARTY",  color: "#4a8fff", bg: "rgba(74,143,255,0.12)",   border: "rgba(74,143,255,0.5)"   },
];

Change text, color, bg, and border to reflect the role you want displayed next to each bar’s character sprite.

Keyboard Controls

All interaction is keyboard-driven. Mouse clicks are not wired in the default implementation.

Key	Revealed = false	Revealed = true
`ArrowUp`	Move selection up in ITEMS	Move selection up in ITEMS
`ArrowDown`	Move selection down in ITEMS	Move selection down in ITEMS
`Enter`	Open reveal panel (`revealed → true`)	No effect (already revealed)
`ArrowRight`	Open reveal panel (`revealed → true`)	No effect (already revealed)
`ArrowLeft`	Navigate back (`navigate(-1)`)	Close reveal panel (`revealed → false`)
`Escape` or `Backspace`	Navigate back (`navigate(-1)`)	Navigate back (`navigate(-1)`)

CSS Classes Reference

Class	Description
`.sc-bar`	Core bar shape — `45vw` wide, `64px` tall, `#111` background, clip-path parallelogram
`.sc-bar-outer.active`	Expands bar to `90px`, makes `.sc-bar-red` (#c4001a) visible as an underlay
`.sc-bar-fill`	White section inside the bar that grows from the right edge when the bar is active
`.sc-bar-red`	Red parallelogram underlay exposed when the bar is active
`.sc-reveal-panel`	White rotated panel at `−20deg`, positioned at `top: 44vh`, that animates in from the left via `sc-reveal-bar-in`
`.sc-main-portrait-shell`	Full-height portrait container, `skewX(-8deg)`, animates in via `sc-portrait-in`
`.sc-right-nav`	Fixed top-right overlay showing LB / RB button hints at `100px` font size

Key Animations

@keyframes sc-reveal-bar-in — Panel slides in from the left with rotation, giving the impression it’s being drawn from off-screen.
@keyframes sc-portrait-in — Portrait fades in from the right with a blur, matching the Persona 3 character reveal style.

All placeholder strings ("name moneybagg", "age:23", "@yourname") are located in the ITEMS and REVEAL_CONTENT arrays at the top of AboutMe.jsx. Update those arrays first — you do not need to touch any JSX markup to personalise the screen.

Navigation

Pages

Customization

AboutMe: Interactive Character Profile Screen

Props

Screen Layout

The ITEMS Array

The REVEAL_CONTENT Array

Character & Portrait Images

Character Sprites (`CHARS`)

Portrait Images (`MAIN_IMAGES`)

ROLES Array

Keyboard Controls

CSS Classes Reference

Key Animations

Build docs developers (and LLMs) love

Navigation

Pages

Customization

Documentation Index

​Props

​Screen Layout

​The ITEMS Array

​The REVEAL_CONTENT Array

​Character & Portrait Images

​Character Sprites (CHARS)

​Portrait Images (MAIN_IMAGES)

​ROLES Array

​Keyboard Controls

​CSS Classes Reference

​Key Animations

Build docs developers (and LLMs) love

Props

Screen Layout

The ITEMS Array

The REVEAL_CONTENT Array

Character & Portrait Images

Character Sprites (`CHARS`)

Portrait Images (`MAIN_IMAGES`)

ROLES Array

Keyboard Controls

CSS Classes Reference

Key Animations