Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/retrowin/llms.txt

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

The Skills page is reachable at /skills via the skillz.exe desktop icon. It renders a RetroWindow titled “skillz.htm” with address http://127.0.0.1/skillz.htm, positioned at x: 250, y: 150 and sized at 500×350 px. The interior is black with a double-line border, displaying your tech stack as a grid of classic 88×31 pixel web badges — the same dimensions as the “Netscape Now!” and “Made with Notepad” buttons that decorated every GeoCities page — followed by a terminal-style competency readout.

​
Visual Layout

​
Heading

A large VT323-font heading “My Skillz” is rendered in win-cyan and applies a CSS animate-pulse effect — making it glow in and out like an old CRT monitor.

​
Badge Grid

The badges are laid out in a centered flex-wrap row with gap-4 spacing. Every badge is exactly 88 px wide × 31 px tall, with a white border, pixel font, and a unique Tailwind background color. The eight default badges are:
Badge TextColor
TypeScript EnjoyerBlue (bg-blue-600)
React.jsCyan (bg-cyan-600)
Tailwind CSSTeal (bg-teal-500)
Node.jsGreen (bg-green-600)
Best viewed in ChromeYellow (bg-yellow-500, black text)
Made with <3Pink (bg-win-pink)
HTML 4.01 ValidOrange (bg-orange-500)
CSS 2.0Blue (bg-blue-400)
Each badge also receives a staggered animationDelay of index * 0.2s via inline style, creating a cascade effect on page load.

​
Terminal Output

Below the badges, a monospace terminal box with a dark gray background and green text prints a boot-style log: 
> Loading core competencies...
> [OK] Frontend Architecture
> [OK] API Design
> [OK] Database Management
> _
The final > _ line has animate-pulse applied to simulate a blinking cursor.
The 88×31 px size is a deliberate reference to the “button” format popularised by early web culture in the 1990s. Tools like the original Netscape and “Made with Macromedia” badges used this exact pixel dimension.

​
Customization

The badge list is defined as the ld array in assets/main.js, just above the id() component function.

​
Adding or Editing Badges

Each badge is an object with a text label and a color Tailwind class string. Update the array to reflect your real skills: 
const ld = [
  { text: "TypeScript Enjoyer", color: "bg-blue-600"                  },
  { text: "React.js",           color: "bg-cyan-600"                  },
  { text: "Tailwind CSS",       color: "bg-teal-500"                  },
  { text: "Node.js",            color: "bg-green-600"                 },
  { text: "Best viewed in Chrome", color: "bg-yellow-500 text-black"  },
  { text: "Made with <3",       color: "bg-win-pink"                  },
  { text: "HTML 4.01 Valid",    color: "bg-orange-500"                },
  { text: "CSS 2.0",            color: "bg-blue-400"                  },
  // Add yours:
  { text: "PostgreSQL",         color: "bg-indigo-700"                },
];
The color field is passed directly to the badge’s className, so you can include multiple Tailwind utilities — for example "bg-yellow-500 text-black" for a badge that needs dark text on a light background.

​
Removing Badges

Delete any object from the ld array. The flex-wrap layout will automatically reflow the remaining badges.

​
Editing the Terminal Output Lines

The terminal lines are hardcoded <p> elements inside the terminal <div>. To add, remove, or rename competencies, locate this block in the id() function and edit it directly: 
<div className="mt-12 font-mono text-xs text-green-400 text-left bg-gray-900 p-4 border border-green-800">
  <p>&gt; Loading core competencies...</p>
  <p>&gt; [OK] Frontend Architecture</p>
  <p>&gt; [OK] API Design</p>
  <p>&gt; [OK] Database Management</p>
  {/* Add yours: */}
  <p>&gt; [OK] DevOps &amp; CI/CD</p>
  <p className="animate-pulse">&gt; _</p>
</div>
Keep the final <p className="animate-pulse"> line at the bottom so the cursor effect persists.

​
Changing the Heading Animation

The heading uses animate-pulse from Tailwind. To swap it for a different animation — for example a color-cycle keyframe — add a custom animation to your tailwind.config.js and apply it: 
<h2 className="font-vt323 text-4xl text-win-cyan mb-6 animate-[colorCycle_2s_infinite]">
  My Skillz
</h2>
Keep badge text short — ideally under 14 characters. The 88×31 px constraint is strict, and longer strings will overflow or wrap awkwardly inside the badge bounds.

Build docs developers (and LLMs) love

Get started for freeTalk to us