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.

The Projects page is the portfolio’s central showcase, reimagined as a LEVEL SELECT screen from a classic arcade game. Each project in the developer’s catalogue is represented by an ArcadeCabinet component — a styled card that looks like a standing arcade machine, complete with a category badge, project title, short description, and a row of action buttons. Visitors can launch a live demo, jump to the GitHub source, or open the README directly from each cabinet. The grid layout lets multiple projects sit side by side, inviting the visitor to pick the level they want to explore.

​
Route Info

PropertyValue
Path/projects
Arcade LabelLEVEL SELECT
Navigation IconShown in the Navigation inventory panel
Page TransitionPageTransition blur/scale wrapper, pt-24 pb-32 padding

​
Visual Layout

The page renders a responsive grid of ArcadeCabinet cards. Above the grid there is typically a section heading styled in the pixel font. Each cabinet in the grid occupies one cell and displays:
  1. Color variant accent — a per-cabinet color scheme (top bezel or glow) that visually distinguishes projects at a glance.
  2. Category badge — a pixel-styled badge showing the project’s category (e.g., Web App, CLI Tool, Open Source).
  3. Title — the project name in pixel font.
  4. Description — a short one-to-two sentence summary of what the project does.
  5. Action buttons — up to three buttons: RUN DEMO, SOURCE, and README, each triggering an external link or in-app navigation.
A mockDataNote prop can be applied to individual cabinets to visually flag that the project data is placeholder content.

​
Key Components

ArcadeCabinet

The primary display component for each project. Accepts title, description, category, color, and optional mockDataNote as props.

PageTransition

Shared entrance animation wrapper. All route content fades and scales in on navigation.

Category badge

A pixel-bordered inline badge rendered inside the cabinet. Communicates the project type without taking up vertical space.

GhostSprite

Background floating sprites shared across all routes, contributing to the arcade atmosphere behind the cabinet grid.

​
ArcadeCabinet Component

The ArcadeCabinet component (located at components/arcade-cabinet) is the building block of the Projects page. Each instance maps to one project entry.

​
Props

PropTypeDescription
titlestringProject name displayed in the cabinet header
descriptionstringShort summary shown in the cabinet body
categorystringLabel used to render the pixel category badge
color'lime' | 'magenta' | 'cyan' | 'orange'Color variant key that sets the cabinet’s accent scheme
mockDataNoteboolean(optional) When true, renders a visual indicator that this cabinet contains placeholder data

​
Adding a New Project Card

To add a new project to the Level Select grid, locate the projects data array inside the Projects page component (or its co-located data file) and append a new entry: 
// Inside the projects data array
{
  title: "Your Project Name",
  description: "A one-to-two sentence summary of what this project does and why it matters.",
  category: "Web App",
  color: "cyan",
  mockDataNote: false,
}
This entry is then spread into an ArcadeCabinet as props: 
import ArcadeCabinet from "@/components/arcade-cabinet";

// Rendered inside the grid map
<ArcadeCabinet
  title="Your Project Name"
  description="A one-to-two sentence summary of what this project does and why it matters."
  category="Web App"
  color="cyan"
  mockDataNote={false}
/>
The color prop accepts four values: lime, magenta, cyan, and orange. Passing any other value will fall back to the default cabinet style. Distribute these four variants intentionally across your project grid so related work shares a color theme.

​
Interactivity & Special Features

  • Action buttons — each cabinet can surface action buttons (e.g., RUN DEMO, SOURCE, README) wired to external URLs. These are defined within the component’s internal data, not via top-level props.
  • mockDataNote indicator — when enabled, a small visual tag (e.g., a pixel badge reading “DEMO DATA”) appears on the cabinet to communicate to real visitors that the project is a placeholder. Remove this flag when replacing placeholder entries with real projects.
  • Grid responsiveness — the cabinet grid reflows from a single column on mobile to two or three columns on wider viewports.

​
Customization Notes

Replace all cabinets that have mockDataNote={true} with real project data before publishing the portfolio publicly. Placeholder cabinets with live demo buttons that point nowhere will harm the visitor experience.
Aim for a consistent description length across all cabinets — one to two sentences, roughly the same character count. Uneven descriptions cause cabinets in the same grid row to render at different heights, breaking the uniform arcade-cabinet silhouette.
Four color variants are available — lime, magenta, cyan, and orange. Distribute them across projects intentionally: assigning the same color to projects in the same category makes the grid easier to scan at a glance, reinforcing the LEVEL SELECT metaphor where level worlds have distinct color themes.

Build docs developers (and LLMs) love

Get started for freeTalk to us