The Home page is the first thing visitors encounter: a full-screen arcade title screen that sets the retro tone for the entire portfolio. A large pixel-font heading displays with a glitch animation effect, an “INSERT COIN TO CONTINUE” prompt pulses in classic arcade fashion, and a styled start button invites the visitor to dive in. Ghost sprites drift across the background to reinforce the arcade atmosphere before a single interaction has taken place.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 | / |
| Arcade Label | TITLE SCREEN |
| Navigation Icon | None (entry point — no bottom-nav icon) |
| Page Transition | PageTransition blur/scale wrapper, pt-24 pb-32 padding |
Visual Layout
The page is composed of a single full-viewport hero section centered both horizontally and vertically. From top to bottom:- Glitch title — oversized pixel font heading rendered with a CSS glitch keyframe effect.
- Subtitle text — a short descriptor line beneath the main title (e.g. role or tagline).
- INSERT COIN prompt — an animated blinking or pulsing line mimicking classic arcade attract screens.
- Start button — a prominent arcade-styled
<button>that routes the visitor into the portfolio.
HUD overlay sits fixed at the top of the viewport showing player name, score, and a live clock. The CRTOverlay layers scanlines and a vignette over the entire scene. Multiple GhostSprite components float freely across the background.
Key Components
PageTransition
Wraps the entire page content. Applies a blur-and-scale entrance animation and enforces
pt-24 pb-32 padding so content never overlaps the fixed HUD or navigation.HUD
Fixed overlay at the top of every page. Displays the configured player name, a running score counter, and a live clock.
CRTOverlay
Fullscreen fixed layer that renders CSS scanlines and a radial vignette, giving every page a vintage CRT monitor feel.
GhostSprite
Animated sprite components that float across the background. Multiple instances are rendered on the Home page for a busy, lively attract screen.
Interactivity & Special Features
- Glitch animation — the main title cycles through a CSS keyframe glitch effect (horizontal offset, color channel shift) on a timed loop.
- Coin prompt pulse — the “INSERT COIN TO CONTINUE” line uses a blink or fade-pulse animation that mirrors real arcade hardware behavior.
- Start button — clicking navigates the user into the portfolio (typically to
/aboutor/projects). The button uses the shared arcade button style: pixel border, glow on hover, press-down active state. - Ghost sprites — each
GhostSpritefollows an independent floating path; the Home page renders more instances than other pages to maximize the arcade attract-screen energy.
Customization Notes
To update the hero title and subtitle, locate the string values passed directly as props or JSX children inside the Home route component. These are the two most visible pieces of personal branding on the entire site — keep the title short enough to fit on one line at all viewport widths.
The “INSERT COIN TO CONTINUE” text is a fixed string in the component. If you want a different tagline on the attract loop, search for that literal string in the Home page file and replace it.