Skip to main content

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.

Player One is a single-page portfolio website built around the aesthetic of a classic 1980s arcade cabinet. Every section of the site maps to a familiar video-game metaphor — the home screen is a “TITLE SCREEN”, the bio page is “LORE”, and the contact form is “SAVE GAME” — creating a cohesive retro gaming experience from the moment a visitor lands. The site combines modern React tooling with pixel-perfect nostalgia: CRT scanlines flicker across the viewport, ghost sprites drift across the background, and every navigation transition is animated with Framer Motion fade-and-scale effects, all served as a fully static bundle with zero backend dependencies.

​
Tech Stack

Player One is assembled from the following libraries and tools:
  • React 18 — UI component model and hooks (useState, useEffect) power all interactive elements.
  • React Router (HashRouter) — Client-side routing via hash-based URLs (e.g. #/about) so the site deploys on any static host without server-side redirect rules.
  • Framer Motion — Handles page entrance and exit animations; also drives the looping ghost sprite trajectories.
  • Tailwind CSS — Utility-first styling with custom arcade color tokens (arcade-lime, arcade-cyan, arcade-magenta, arcade-orange) defined in the compiled CSS bundle.
  • Lucide React — Provides the icon set used throughout the HUD and component buttons (Terminal, Coins, Play, GitHub, FileText, and more).
  • Vite — Static site bundler that compiles the React app into pre-built JS/CSS chunks and generates one HTML file per route.
  • Press Start 2P (Google Fonts) — The primary pixel font used for headings, labels, and the HUD overlay.
  • VT323 (Google Fonts) — A softer monospace pixel font used for body copy and secondary text.

​
Routes

All seven sections of the portfolio are exposed as hash-based routes. The table below maps each URL path to its in-game arcade label and the content it displays:
PathArcade LabelPurpose
/TITLE SCREENLanding / home screen with animated intro
/aboutLOREBiography and background information
/projectsLEVEL SELECTShowcase of work as arcade cabinet cards
/skillsHIGH SCORESSkills and proficiency breakdown
/writingCODEXBlog posts and written articles
/case-studiesBOSS BATTLESIn-depth project case studies
/contactSAVE GAMEContact form to reach out
Player One uses React Router’s HashRouter, which means all URLs include a # prefix (e.g. https://yoursite.com/#/about). This is intentional — hash-based routing works on any static file host (GitHub Pages, Netlify, S3, etc.) without configuring redirect or rewrite rules. The browser never sends the hash fragment to the server, so every request simply loads index.html and React Router takes over from there.

​
Key Features

  • CRT scanline + vignette overlay — A pair of absolutely-positioned div layers (crt-overlay, crt-vignette) sit above the entire viewport, simulating the phosphor-glow and screen curvature of a real CRT monitor.
  • Glitch text animations — Headings on several pages use CSS keyframe animations to produce horizontal pixel-shift glitch effects.
  • Animated ghost sprites — GhostSprite.js renders a pixel-art SVG ghost that travels across the screen using Framer Motion’s looping x/y animations with randomised delays and durations.
  • Arcade cabinet project cards — ArcadeCabinet.js wraps each project in a three-part layout (marquee header, screen body, control-panel footer) that visually mimics the silhouette of a standing arcade cabinet.
  • HUD overlay with live clock — HUD.js renders a fixed overlay showing PLAYER_1, a static score of 999999, an “INSERT COIN” blinker, a CREDITS: 0 counter, and a live clock that updates every second via setInterval.
  • Framer Motion page transitions — PageTransition.js wraps each route’s content in an opacity/scale/blur entrance and exit animation with a 400 ms ease-out curve.
  • Pixel fonts — Press Start 2P is applied to all headings and HUD labels; VT323 is used as the default body font, giving the entire site a consistent retro terminal feel.

​
Sections

Getting Started

Understand the repository layout, how the static build is structured, and how to run or deploy the site.

Components

Deep-dives into Navigation, HUD, CRTOverlay, GhostSprite, PageTransition, and ArcadeCabinet.

Design System

Explore the arcade color tokens, pixel font stack, glow utilities, and Tailwind configuration.

Pages

Reference for each of the seven route pages and the content they render.

Build docs developers (and LLMs) love

Get started for freeTalk to us