Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/windows-xp-developer/llms.txt

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

The Skills page turns a résumé skill list into a visual statement. Six core competencies are displayed as animated progress bars inside a glassmorphism panel. Each bar is colour-coded with its own blue-to-indigo, teal, green, purple, or pink gradient and fills from left to right on page load, giving the page a dynamic “loading” quality that suits the software-portfolio aesthetic perfectly.

​
Visual overview

Six skill rows stack vertically inside the glass panel. Each row shows the skill name on the left, a wide gradient bar in the centre, and the numeric level on the right. The bars each have a distinct colour gradient so the section is visually varied without breaking the Aqua palette family. The gradients range from cool blue-indigo for React to warm pink for UI/UX Design.

Skill bars

Each competency renders as a full-width animated bar. The fill animates from width: 0 to width: {level}% on mount, driven by Framer Motion.

Colour coding

Each skill has its own gradient: blue for React, indigo for TypeScript, teal for CSS/Tailwind, green for Node.js, purple for Framer Motion, and pink for UI/UX Design.

​
The six skills

All skill data is stored in a flat array in the Skills route component inside assets/main.js:
SkillLevelGradient
React & React Native90%from-blue-400 to-blue-600
TypeScript85%from-blue-500 to-indigo-600
CSS / Tailwind95%from-teal-400 to-teal-600
Node.js75%from-green-400 to-green-600
Framer Motion80%from-purple-400 to-purple-600
UI/UX Design85%from-pink-400 to-pink-600

​
Component structure

// Simplified Skills page structure
import { motion } from 'framer-motion';

const skills = [
  { name: 'React & React Native', level: 90, color: 'from-blue-400 to-blue-600' },
  { name: 'TypeScript',           level: 85, color: 'from-blue-500 to-indigo-600' },
  { name: 'CSS / Tailwind',       level: 95, color: 'from-teal-400 to-teal-600' },
  { name: 'Node.js',              level: 75, color: 'from-green-400 to-green-600' },
  { name: 'Framer Motion',        level: 80, color: 'from-purple-400 to-purple-600' },
  { name: 'UI/UX Design',         level: 85, color: 'from-pink-400 to-pink-600' },
];

function SkillBar({ name, level, color }) {
  return (
    <div className="skill-row">
      <div className="skill-header">
        <span className="skill-name">{name}</span>
        <span className="skill-level">{level}%</span>
      </div>
      <div className="bar-track">
        <motion.div
          className={`bar-fill bg-gradient-to-r ${color}`}
          initial={{ width: 0 }}
          animate={{ width: `${level}%` }}
          transition={{ duration: 1, ease: 'easeOut' }}
        />
      </div>
    </div>
  );
}

export default function Skills() {
  return (
    <div className="skills-panel aqua-glass">
      {skills.map((skill) => (
        <SkillBar key={skill.name} {...skill} />
      ))}
    </div>
  );
}

​
Customization

The skills data is a flat array in the Skills route component inside assets/main.js. To add, remove, or reorder skills, locate the array by searching for "React & React Native": 
// In assets/main.js — locate the skills array (search for "React & React Native")
const skills = [
  {
    name:  'React & React Native', // Displayed as row label
    level: 90,                     // 0–100; drives bar fill percentage
    color: 'from-blue-400 to-blue-600', // Tailwind gradient classes
  },
  // Add or remove entries here
];
Keep level values honest — they are the first thing a technical recruiter or fellow developer will scrutinise. A bar at 95% for a technology you learned last month will undercut trust immediately.
The color field uses Tailwind gradient utility classes. If you add a new skill, pick a gradient that is not already used by another skill to keep the colour coding distinct.

​
Key interactions

InteractionBehaviour
Page loadAll bars animate from width: 0 to their target level percentage over 1 second with ease: 'easeOut'
Animation timingAll bars animate simultaneously on mount — there is no stagger between rows
HoverNo interactive hover state on the bars themselves in the default build
The skills array is flat — there are no nested category groups (Frontend, Backend, etc.) in the source. All six skills appear in a single panel in the order they are declared in the array.

Build docs developers (and LLMs) love

Get started for freeTalk to us