The About page translates a traditional portfolio biography into the language of a role-playing game lore screen. Instead of a plain résumé narrative, the visitor reads the developer’s backstory as if discovering a character’s origin story mid-campaign. Pixel-bordered sections divide the content into digestible lore entries, trophy and achievement badges mark significant life milestones, and terminal-style text blocks give technical background the look of in-game stat readouts. The overall effect is a “CHARACTER SELECT” screen that reveals the person behind the portfolio without abandoning the arcade theme.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/player-one/llms.txt
Use this file to discover all available pages before exploring further.
Route Info
| Property | Value |
|---|---|
| Path | /about |
| Arcade Label | LORE |
| Navigation Icon | Displayed in the fixed bottom-right Navigation panel when the inventory is open |
| Page Transition | PageTransition blur/scale wrapper, pt-24 pb-32 padding |
Visual Layout
The page is structured as a vertical stack of thematic lore sections:- Character header — name, title/role, and a short “class description” rendered in a CHARACTER SELECT card style.
- Origin story — a prose block inside a pixel-bordered panel that covers background, motivations, and journey into development.
- Achievement badges — a row or grid of trophy/badge components representing life and career milestones (education, first job, shipped products, etc.).
- Terminal blocks — monospaced, terminal-styled text sections used for more technical or factual content (e.g., years of experience, current focus areas).
- Stats sidebar or section — optional at-a-glance stats (location, availability, preferred stack) formatted as RPG character attributes.
HUD, CRTOverlay, and GhostSprite components appear on this page as on every other route.
Key Components
PageTransition
Entrance animation wrapper shared across all routes. Ensures the lore content fades and scales in smoothly when navigating from another page.
Pixel-bordered panels
Decorative containers styled with CSS
box-shadow or border-image to mimic the chunky pixel borders of classic 16-bit UI windows.Trophy / Achievement badges
Icon-and-label badge components pinned to milestone events. Each badge typically shows an icon, a short title, and an optional date or descriptor.
Terminal text blocks
Monospaced, dark-background text panels that present technical information in a CLI aesthetic — green or cyan text on near-black backgrounds.
Interactivity & Special Features
- Trophy badges — badges may animate on scroll-into-view (fade up or pop scale) to reward the visitor for reading through the lore.
- Terminal typing effect — terminal blocks can display text with a typewriter animation, simulating a live CLI session being typed out in real time.
- CHARACTER SELECT layout — the character header section mirrors a fighting-game character selection card, giving at-a-glance information before the visitor digs into the full backstory.
- Hover states — pixel-bordered panels may lift or glow on hover to indicate they are thematic “items” in the game world, even when they are purely presentational.
Customization Notes
All biographical text lives in the About page component. Update the origin story prose, character header details (name, role, class description), and terminal block content directly in the JSX or in a co-located data file if the project uses one.
Achievement badges are most effective when tied to genuinely meaningful milestones rather than generic skills. Consider events like graduation, first open-source contribution, first shipped product, or a noteworthy collaboration.