Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/dark-retro-webpage/llms.txt

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

The Skills page (/skills) presents the developer’s technical proficiencies as a set of categorized <Win98Window> panels, each containing a list of skills with animated CSS progress bars. The bars fill from left to right on page load using a CSS animation keyed on a custom --progress property. Categories group related technologies so visitors can quickly assess breadth and depth at a glance.

​
Layout structure

The page renders a two-column grid on large screens (lg:grid-cols-2) that collapses to a single column on smaller viewports. Each column holds one or more <Win98Window> category panels. The overall container is max-w-6xl centered with mx-auto and py-12 vertical padding. 
┌─────────────────────┬─────────────────────┐
│  Win98Window        │  Win98Window        │
│  "Frontend.exe"     │  "Backend.exe"      │
│  ─────────────────  │  ─────────────────  │
│  React       ████▒  │  Node.js     ███▒▒  │
│  TypeScript  ████▒  │  PostgreSQL  ██▒▒▒  │
│  CSS/Tailwind ███▒▒ │  REST APIs   ████▒  │
├─────────────────────┼─────────────────────┤
│  Win98Window        │  Win98Window        │
│  "Tools.exe"        │  "Other.exe"        │
│  ─────────────────  │  ─────────────────  │
│  Vite        ████▒  │  Figma       ███▒▒  │
│  Git         █████  │  Linux       ███▒▒  │
└─────────────────────┴─────────────────────┘

​
Skill categories

The default skill data is organized into four categories:
Category window titleSkills included
Frontend.exeReact, TypeScript, CSS / Tailwind
Backend.exeNode.js, PostgreSQL, REST APIs
Tools.exeVite, Git, Docker
Other.exeFigma, Linux, Accessibility
Each skill entry carries a name, an optional icon (emoji or SVG), and a numeric level from 0 to 100 representing proficiency.

​
Skill row and progress bar

Each skill is rendered as a horizontal row: the skill name and icon on the left, the progress bar on the right. The bar uses a div with a fixed height and an animated width. 
// Skill row pattern (from assets/main.js)
<div className="flex items-center gap-4">
  {/* Skill label */}
  <div className="w-32 flex-shrink-0 flex items-center gap-2 font-mono text-sm text-[#c0c8d8]">
    <span>{skill.icon}</span>
    <span>{skill.name}</span>
  </div>

  {/* Progress track (bevel-inset) */}
  <div className="flex-1 h-3 bevel-inset bg-black w-full p-[2px] relative">
    {/* Filled portion */}
    <div
      className="h-full bg-[#000080] transition-all duration-200"
      style={{ width: `${skill.level}%` }}
    />
    <div className="absolute inset-0 flex items-center justify-center font-mono text-[10px] text-white mix-blend-difference">
      {skill.level}% COMPLETE
    </div>
  </div>
</div>
The progress track uses .bevel-inset — the inverse of .bevel-window — to create a sunken trough effect. The fill bar uses bg-[#000080] (matching the Win98 title bar blue) with an overlay percentage label in mix-blend-difference white text. 
/* From main.css */
.bevel-inset {
  border-top:    2px solid #475569;
  border-left:   2px solid #475569;
  border-bottom: 2px solid #e2e8f0;
  border-right:  2px solid #e2e8f0;
  background: #0f172a;
}
The progress bar width is set via an inline style prop rather than a Tailwind arbitrary-value class, which keeps the transition smooth and avoids generating hundreds of utility classes at build time.

​
Adding a skill

Skills are defined in a categories array inside the Skills component in assets/main.js. To add a skill to an existing category, push a new object into the relevant category’s skills array: 
// In assets/main.js — skills data structure
const categories = [
  {
    title: "Frontend.exe",
    skills: [
      { name: "React",      icon: "⚛️", level: 90 },
      { name: "TypeScript", icon: "🔷", level: 85 },
      { name: "CSS/Tailwind", icon: "🎨", level: 88 },
      // Add a new skill:
      { name: "Framer Motion", icon: "🎞️", level: 75 },
    ],
  },
  {
    title: "Backend.exe",
    skills: [
      { name: "Node.js",    icon: "🟢", level: 80 },
      { name: "PostgreSQL", icon: "🐘", level: 70 },
    ],
  },
  // ...
];
FieldTypeNotes
namestringDisplayed beside the icon in font-mono
iconstringEmoji or short string rendered before the name
levelnumber (0–100)Controls the width of the progress fill

​
Adding a new category

To add an entirely new category panel, append a new object to the categories array and add the corresponding <Win98Window> to the grid in the component’s JSX: 
{
  title: "Design_Tools.exe",
  skills: [
    { name: "Figma",      icon: "🖌️", level: 78 },
    { name: "Blender",    icon: "🧊", level: 45 },
  ],
}
Then render it in the grid alongside the existing panels: 
<Win98Window title="Design_Tools.exe">
  {category.skills.map((skill) => (
    <SkillRow key={skill.name} skill={skill} />
  ))}
</Win98Window>

​
Customization

Change bar accent colors: The fill bar uses bg-[#000080]. Swap this to any of the site’s CSS custom properties — --purple (#a855f7), --magenta (#ff2bd6), --cyan (#22d3ee), --mint (#5eead4), or --lime (#a3ff12) — to change the bar palette. Adjust animation duration: The inline transition: "width 1s ease-out" controls how long each bar takes to fill. Increase the value (e.g., 2s) for a slower reveal or replace ease-out with linear for a uniform fill speed. Add a text label instead of percentage: Remove the percentage <span> and replace it with a string label (e.g., "Expert", "Proficient") mapped from the level range in a helper function.
Trigger the progress bar animation on scroll (rather than on page load) by wrapping the fill div in a Framer Motion motion.div with whileInView={{ width: skill.level + "%" }} and viewport={{ once: true }}.

​
Related pages

About

Bio, quick-facts, and interests grid

Projects

Filterable portfolio cards with tech stack tags

Case Studies

Deep-dive project narratives with IRC-style process logs

Home

Site hero, navigation, and Win98 intro panel

Build docs developers (and LLMs) love

Get started for freeTalk to us