Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/neon-retro-sys-admin/llms.txt

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

The Skills page reframes a standard “tech stack” list as a character stats dashboard — the same language used for RPG character sheets, deliberately chosen to match the portfolio’s overall aesthetic and the About page’s VITAL_STATS.dat framing. Proficiency levels are shown as filled progress bars rather than star ratings or badge lists, making relative strengths immediately readable at a glance.

​
Route

/skills
Declared in the router as: 
<Route path="skills" element={<SkillsPage />} />

​
Page Header

The page opens with a centered title block: 
<div className="text-center">
  <h1 className="text-4xl font-display text-white mb-2">CHARACTER_STATS.dat</h1>
  <p className="font-mono text-gray-500">Current Level: Mid-Weight Developer</p>
</div>

​
Four-Panel Grid

The four skill panels sit in a two-column grid (grid grid-cols-1 md:grid-cols-2 gap-8). Each panel is a RetroWindow component with a distinct color.

​
Languages (Cyan)

<RetroWindow title="Languages" color="cyan">
  <SkillBar name="JavaScript (ES6+)" level={90} color="cyan" />
  <SkillBar name="TypeScript"        level={85} color="cyan" />
  <SkillBar name="HTML/CSS"          level={95} color="cyan" />
  <SkillBar name="Python"            level={60} color="cyan" />
</RetroWindow>
SkillLevel
JavaScript (ES6+)90%
TypeScript85%
HTML/CSS95%
Python60%

​
Front-End (Magenta)

<RetroWindow title="Front-End" color="magenta">
  <SkillBar name="React"          level={90} color="magenta" />
  <SkillBar name="Tailwind CSS"   level={85} color="magenta" />
  <SkillBar name="Framer Motion"  level={75} color="magenta" />
  <SkillBar name="Next.js"        level={80} color="magenta" />
</RetroWindow>
SkillLevel
React90%
Tailwind CSS85%
Framer Motion75%
Next.js80%

​
Back-End & Data (Lime)

<RetroWindow title="Back-End & Data" color="lime">
  <SkillBar name="Node.js"     level={70} color="lime" />
  <SkillBar name="PostgreSQL"  level={65} color="lime" />
  <SkillBar name="REST APIs"   level={85} color="lime" />
</RetroWindow>
SkillLevel
Node.js70%
PostgreSQL65%
REST APIs85%

​
Specialties (Purple)

The Specialties panel does not use progress bars. Instead, it renders each specialty as a <Sticker> component inside a flex-wrap container: 
<RetroWindow title="Specialties" color="purple">
  <div className="flex flex-wrap gap-4 p-2">
    {skills.specialties.map((specialty, index) => (
      <Sticker
        key={specialty}
        color={['white', 'magenta', 'cyan', 'lime'][index % 4]}
        rotation={Math.random() * 10 - 5}
      >
        {specialty}
      </Sticker>
    ))}
  </div>
</RetroWindow>
The four specialties cycle through colors in order: white → magenta → cyan → lime. Each sticker receives a random rotation between -5° and +5° on render.
Specialty
Debugging Spaghetti Code
Translating Medical Jargon
Pixel Pushing
Writing Docs People Actually Read

​
SkillBar Component

The SkillBar is a local component defined inside the Skills page file. It renders a label row above a filled progress track: 
function SkillBar({ name, level, color }) {
  return (
    <div className="mb-4">
      <div className="flex justify-between font-mono text-xs mb-1">
        <span className="text-gray-300">{name}</span>
        <span className={`text-y2k-${color}`}>{level}%</span>
      </div>
      <div className="h-4 w-full bg-y2k-black border border-y2k-gray p-0.5">
        <div
          className={`h-full bg-y2k-${color} shadow-[inset_0_1px_0_rgba(255,255,255,0.5),inset_0_-1px_0_rgba(0,0,0,0.3)]`}
          style={{ width: `${level}%` }}
        />
      </div>
    </div>
  );
}
Key style details:
  • The outer track is h-4 (16px) with a dark background and a p-0.5 inset padding.
  • The fill bar uses bg-y2k-{color} set to the same color as the parent panel.
  • An inline style sets width to the percentage value, making the fill proportional.
  • A box-shadow inset adds a subtle highlight at the top edge and a shadow at the bottom edge, giving the bar a slightly raised appearance.

​
Data Structure

Skills data lives in data/mockData.js under the skills export: 
const skills = {
  languages: [
    { name: 'JavaScript (ES6+)', level: 90 },
    { name: 'TypeScript',        level: 85 },
    { name: 'HTML/CSS',          level: 95 },
    { name: 'Python',            level: 60 },
  ],
  frontend: [
    { name: 'React',          level: 90 },
    { name: 'Tailwind CSS',   level: 85 },
    { name: 'Framer Motion',  level: 75 },
    { name: 'Next.js',        level: 80 },
  ],
  backend: [
    { name: 'Node.js',    level: 70 },
    { name: 'PostgreSQL', level: 65 },
    { name: 'REST APIs',  level: 85 },
  ],
  specialties: [
    'Debugging Spaghetti Code',
    'Translating Medical Jargon',
    'Pixel Pushing',
    'Writing Docs People Actually Read',
  ],
};

​
Updating Skills

​
Changing a proficiency level

Find the skill by name in the relevant array and update its level value (0–100): 
{ name: 'TypeScript', level: 85 },  // before
{ name: 'TypeScript', level: 92 },  // after
The progress bar width updates automatically since it is driven by style={{ width: \$%` }}`.

​
Adding a skill to an existing panel

Append a new object to the appropriate array: 
frontend: [
  { name: 'React',          level: 90 },
  { name: 'Tailwind CSS',   level: 85 },
  { name: 'Framer Motion',  level: 75 },
  { name: 'Next.js',        level: 80 },
  { name: 'Astro',          level: 55 },  // new entry
],

​
Adding a specialty

Append a string to the specialties array. The color cycling uses index % 4, so the next specialty after the existing four will automatically be assigned "white" (index 4 % 4 = 0). 
specialties: [
  'Debugging Spaghetti Code',
  'Translating Medical Jargon',
  'Pixel Pushing',
  'Writing Docs People Actually Read',
  'Surviving Code Reviews',  // new entry
],

Build docs developers (and LLMs) love

Get started for freeTalk to us