Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/dev-mode-arcade/llms.txt

Use this file to discover all available pages before exploring further.

The Skills page transforms a traditional skills list into an arcade control panel. Three SkillCabinet sections — each styled as a different arcade cabinet — group the developer’s technical abilities by category. Within each cabinet, individual skills are displayed as large circular coin-op buttons. Hovering over a button reveals a tooltip showing the skill’s level string and a short description. All skill data is drawn from the skills object in data/mockData.js, organized into frontend, backend, and tooling sub-arrays, each with its own cabinet color theme.

​
Route

PropertyValue
Path/skills
File (compiled)assets/main.js — SkillsPage component
Data exportskills (exported as s from mockData.js)
Theme colorsarcade-lime (frontend) · arcade-purple (backend) · arcade-cyan (tooling)
Screen titleCONTROL PANEL

​
What It Displays

The page renders three SkillCabinet sections stacked vertically. Each cabinet has a colored heading and contains a row of circular buttons — one per skill.

​
Frontend Cabinet — Lime

SkillLevel
ReactLevel 99
TypeScriptLevel 85
Tailwind CSSLevel 90
Framer MotionLevel 75

​
Backend Cabinet — Purple

SkillLevel
Node.jsLevel 80
PostgreSQLLevel 70
RedisLevel 60

​
Tooling Cabinet — Cyan

SkillLevel
GitLevel 95
DockerLevel 65
ViteLevel 85

​
Animations

Each SkillCabinet section uses Framer Motion’s whileInView trigger with a scale animation. Buttons scale from 0.8 to 1.0 as they enter the viewport, staggered by 0.08 s per item. 
// Approximate SkillCabinet button animation variant
const skillButtonVariants = {
  hidden: { opacity: 0, scale: 0.8 },
  visible: {
    opacity: 1,
    scale: 1,
    transition: { duration: 0.3, ease: "easeOut" },
  },
};

// Stagger applied at the container level
const cabinetVariants = {
  hidden: {},
  visible: {
    transition: { staggerChildren: 0.08 },
  },
};
The whileInView animation fires once per cabinet as it scrolls into view. The once: true viewport option prevents re-triggering on scroll back. Level tooltips are CSS-only and do not use Framer Motion.

​
Tooltip Behavior

Hovering over a skill button reveals a floating tooltip anchored above the button. The tooltip displays:
  • Skill name — the same label shown on the button face
  • Level — a string value (e.g. Level 99, Level 85)
  • Description — a one-sentence note about proficiency or usage context
Tooltips are styled with bg-arcade-black, border-arcade-lime, and font-mono text to match the cabinet aesthetic. They appear via a CSS opacity + translateY transition on hover.

​
Data Schema

The skills export is an object with three array properties — frontend, backend, and tooling. Each skill entry in those arrays has the following shape: 
// data/mockData.js — skill object shape
{
  name: string,  // Display label on the button face
  level: string, // Level string shown in tooltip, e.g. "Level 99"
  desc: string,  // Tooltip description line
}

​
Field Reference

FieldTypeDisplayed AsNotes
namestringButton face labelKeep short — max ~12 chars
levelstringTooltip level labelFormat: "Level <value>"
descstringTooltip body textOne sentence recommended

​
Customization

Adding a new skill Append a new entry to the appropriate sub-array (frontend, backend, or tooling) in data/mockData.js. 
// data/mockData.js — adding to the frontend array
frontend: [
  // ... existing entries
  {
    name: "Astro",
    level: "Level 70",
    desc: "Building content-driven sites with Astro's island architecture.",
  },
],
Changing a skill level Update the level string for the relevant skill entry. The level value is displayed in the hover tooltip. Adding a new cabinet category The SkillCabinet component accepts a color prop. If you add a fourth category (e.g. design), add the new array to the skills object in mockData.js and add a new SkillCabinet instance in SkillsPage: 
// Adding a fourth cabinet in SkillsPage
<SkillCabinet
  title="DESIGN"
  color="magenta"
  skills={skills.design}
/>
Skill button labels render in VT323 pixel font. Names longer than about 12 characters will wrap inside the circular button boundary. Keep skill names concise — abbreviate if needed (e.g. TS for TypeScript, PG for PostgreSQL).

​
SkillCabinet Props

The SkillCabinet component used on this page accepts the following props:
PropTypeDescription
titlestringCabinet section heading
color"lime" | "purple" | "cyan" | "magenta"Accent color for cabinet border and heading glow
skillsSkill[]Array of skill objects for this cabinet

​
Sample Data

// data/mockData.js (export s)
{
  frontend: [
    { name: "React",         level: "Level 99", desc: "Component architecture, hooks, context, performance tuning." },
    { name: "TypeScript",    level: "Level 85", desc: "Strict mode survivor. Generics enthusiast." },
    { name: "Tailwind CSS",  level: "Level 90", desc: "Utility-first styling at the speed of thought." },
    { name: "Framer Motion", level: "Level 75", desc: "Making things bounce, slide, and glow." },
  ],
  backend: [
    { name: "Node.js",    level: "Level 80", desc: "Event-driven server logic and API design." },
    { name: "PostgreSQL", level: "Level 70", desc: "Relational data modeling and complex queries." },
    { name: "Redis",      level: "Level 60", desc: "Caching and pub/sub for real-time features." },
  ],
  tooling: [
    { name: "Git",    level: "Level 95", desc: "Time travel and alternate timeline management." },
    { name: "Docker", level: "Level 65", desc: "Containerizing the chaos." },
    { name: "Vite",   level: "Level 85", desc: "Lightning-fast builds and HMR." },
  ],
}

About

The Character Bio page that pairs with Skills to present the full developer profile.

Mock Data Reference

Full reference for all mockData.js exports including the skills object schema.

Design Tokens

Cabinet color tokens — lime, purple, and cyan — used for section theming.

Animations

whileInView scale animation patterns used by the SkillCabinet sections.

Build docs developers (and LLMs) love

Get started for freeTalk to us