Skip to main content

Documentation Index

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

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

The Skills app reframes a static list of technologies as a live Windows Task Manager. Each skill appears as a running process with a CPU-usage bar that gently fluctuates every 1.5 seconds, giving the impression that your expertise is actively in use. The result is a proficiency overview that feels alive without being gimmicky — and one that immediately communicates relative confidence levels at a glance.

​
Layout

The window mirrors the classic Windows Task Manager chrome:
  1. Tab bar — two tabs at the top: Processes (active, white background) and Performance (inactive, greyed out).
  2. Header row — a three-column grid with Image Name, CPU, and Memory (Proficiency) column labels.
  3. Process list — one row per skill, with the animated bar in the third column.
  4. Status bar — a footer strip with process count on the left and a fixed CPU Usage: 100% (Always learning) message on the right.
<div className="grid grid-cols-[2fr_1fr_3fr] gap-4 pb-2 border-b border-gray-200 text-xs font-bold text-gray-600 mb-2">
  <div>Image Name</div>
  <div>CPU</div>
  <div>Memory (Proficiency)</div>
</div>

​
Skills Data Structure

Skills are defined as a static array at the top of components/apps/SkillsApp.js: 
const skills = [
  { name: 'React.js',      baseUsage: 85, color: 'bg-blue-500'   },
  { name: 'TypeScript',    baseUsage: 90, color: 'bg-blue-600'   },
  { name: 'Tailwind CSS',  baseUsage: 95, color: 'bg-teal-500'   },
  { name: 'Node.js',       baseUsage: 60, color: 'bg-green-500'  },
  { name: 'Framer Motion', baseUsage: 75, color: 'bg-purple-500' },
  { name: 'GraphQL',       baseUsage: 50, color: 'bg-pink-500'   },
];
Each entry has three fields:
FieldTypeDescription
namestringTechnology name shown in the Image Name column
baseUsagenumber (0–100)Baseline proficiency percentage
colorstringAny Tailwind bg-* class for the bar fill

​
Animation

On mount, a useEffect seeds the usages state with each skill’s baseUsage, then starts a 1500 ms interval: 
useEffect(() => {
  // seed initial values
  const initial = {};
  skills.forEach(s => (initial[s.name] = s.baseUsage));
  setUsages(initial);

  const interval = setInterval(() => {
    setUsages(prev => {
      const next = { ...prev };
      skills.forEach(s => {
        const jitter = (Math.random() - 0.5) * 10;
        next[s.name] = Math.min(100, Math.max(0, s.baseUsage + jitter));
      });
      return next;
    });
  }, 1500);

  return () => clearInterval(interval);
}, []);
The bar width is driven by the live usages state value: 
<div
  className={`h-full ${skill.color} transition-all duration-1000 ease-in-out`}
  style={{ width: `${usages[skill.name] || 0}%` }}
/>
The transition-all duration-1000 class smoothly interpolates bar width changes over one second, so each 1.5 s update glides rather than snapping — making the panel feel genuinely animated.

​
Status Bar

<div className="px-3 py-1 bg-gray-100 border-t border-gray-300 text-xs text-gray-600 flex justify-between">
  <span>Processes: {skills.length}</span>
  <span>CPU Usage: 100% (Always learning)</span>
</div>
The Processes count updates automatically when you add or remove entries from the skills array.

​
Customising

Edit the skills array in components/apps/SkillsApp.js to reflect your own stack: 
// Add a new skill
{ name: 'Next.js', baseUsage: 80, color: 'bg-gray-800' },

// Remove a skill — simply delete its object from the array

// Change a proficiency level
{ name: 'GraphQL', baseUsage: 70, color: 'bg-pink-500' }, // was 50
Any Tailwind bg-* colour class works for color. For best visual contrast against the bg-gray-200 track, prefer saturated mid-range shades (500–600).
baseUsage is a baseline, not a cap. Every interval tick applies a random jitter of (Math.random() - 0.5) * 10, meaning the bar can deviate up to ±5 points from baseUsage. The result is always clamped to [0, 100]. Set baseUsage: 100 for a skill you want to appear maxed out — it will still fluctuate between 95 and 100 for a realistic effect.

Build docs developers (and LLMs) love

Get started for freeTalk to us