The Skills page reframes the traditional competency matrix as an arcade high-score table. Instead of a static list of logos or a plain percentage chart, each skill is entered into a leaderboard where proficiency is expressed as a score bar — the same visual language players have always used to compare their standing at the end of a game. Skills are grouped into categories (languages, frameworks, tools) that function like separate leaderboard divisions, letting visitors immediately find the domain they care about most. The trophy icon in the navigation panel signals that this is where the player’s best stats live.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 | /skills |
| Arcade Label | HIGH SCORES |
| Navigation Icon | Trophy (trophy) |
| Page Transition | PageTransition blur/scale wrapper, pt-24 pb-32 padding |
Visual Layout
The page is organized into categorical leaderboard sections, each rendered as a styled table or scored list:- Section heading — each category (e.g., LANGUAGES, FRAMEWORKS, TOOLS) is introduced with a pixel-font heading that mimics a leaderboard division title.
- Leaderboard rows — each skill occupies one row: rank indicator, skill name, and a score bar.
- Score bars — horizontal fill bars styled like classic arcade score meters, using accent color fills (cyan, magenta, yellow) to indicate proficiency level.
- Category dividers — visual separators between skill groups keep the leaderboard organized without breaking the table aesthetic.
HUD, CRTOverlay, and GhostSprite components appear as on all other routes.
Key Components
PageTransition
Shared entrance animation wrapper applied to all routes. Blurs and scales content in on navigation.
Leaderboard table / list
The primary content structure. Each row represents one skill with its name and a score-bar visualization.
Score bar / meter
A horizontal progress-bar-style element filled to represent proficiency. Styled with arcade color accents and smooth fill transitions.
HUD
Fixed top overlay showing player name, score, and clock — present on every route.
Skill Categories
Skills are divided into three primary categories. Each maps to a leaderboard section on the page:| Category | Examples |
|---|---|
| Languages | JavaScript, TypeScript, Python, Rust, etc. |
| Frameworks | React, Next.js, Node.js, Express, etc. |
| Tools | Git, Docker, Figma, VS Code, etc. |
These categories are defined in the skills data array inside the Skills page component (or a co-located data file). Add, remove, or rename categories by editing that array — the leaderboard sections render dynamically from whatever categories are present in the data.
Interactivity & Special Features
- Score bar animation — bars animate from zero to their target fill value on page load or scroll-into-view, mimicking the score tallying sequence at the end of an arcade level.
- Hover highlights — individual leaderboard rows may lift or change background on hover to reinforce the interactive leaderboard metaphor.
- Rank indicators — optional rank numbers (1st, 2nd, 3rd…) or arcade-style rank icons (gold/silver/bronze) can prefix each row to deepen the high-score aesthetic.
- Responsive layout — on narrow viewports the leaderboard collapses to a single-column list; the score bars scale proportionally.
Customization Notes
To add or update a skill, locate the skills data array and add or modify an entry with at minimum a
name, category, and score (or level) field. The score bar fill derives from this value, so use a consistent scale (e.g., 0–100) across all entries for fair visual comparison.