Skip to main content

Documentation Index

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

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

The Skills page reimagines the classic developer skills matrix as an AIM (AOL Instant Messenger) buddy-list window. Skill categories are collapsible groups, individual skills appear as “buddies” with online/away/idle status indicators, and clicking a skill opens a terminal-style info panel on the right. A Hammer icon (Lucide) labels the page heading.

​
Purpose

This section communicates technical proficiency to potential employers or collaborators. The AIM metaphor is intentional: skills that are in heavy daily use are marked “Online”, occasionally used skills are “Away”, and rusty ones are “Idle” — giving an honest at-a-glance picture of current expertise without resorting to a conventional skill-percentage bar chart.

​
Layout and Structure

The page uses a two-column layout (grid-cols-1 md:grid-cols-3 gap-8) at medium breakpoints.
  • Buddy list panel (left, ~1/3 width): A Win98Window titled "Buddy List" contains the skill groups. Each group header is a collapsible win98-button showing the category name with an in-parentheses status count. The three default categories are:
    • Frontend (Online: 4): React, CSS/Tailwind, TypeScript, HTML Marquee
    • Backend (Away: 2): Node.js, PostgreSQL
    • Design (Idle: 2): Figma, Photoshop 7.0 Individual skill rows show the skill name and a ChevronRight icon; selecting one updates the detail panel.
  • Detail panel (right, ~2/3 width): A bg-black text-y2k-lime font-courier terminal pane renders the selected skill’s name, level, years of exp, and a one-line humorous desc. A small bar chart made of stacked <div> elements visualises proficiency level.
The page component tracks two pieces of state: the list of expanded category names and the currently selected skill. Both reset on route navigation. There is no persistence between visits.

​
Skill Data Structure

Each skill category follows this shape: 
{
  name: "Frontend (Online: 4)",
  skills: [
    {
      name: "React",
      level: "expert",      // "expert" | "intermediate" | "beginner"
      exp: "5 years",
      desc: "I dream in components."
    }
  ]
}
The default data matches the categories exactly as listed above. All eight default skill entries and their levels are sourced directly from the component’s data array — do not add invented skills without updating the source.

​
How to Customize

1

Add or remove skill categories

Locate the category array declared as a module-level constant in the source. Add new category objects or remove existing ones. The category name string controls both the label and the status count displayed in the group header.
2

Update individual skills

Each skill entry inside a category’s skills array has four fields: name, level, exp, and desc. Change level to "intermediate" or "beginner" to adjust the visualised proficiency bar. Keep desc short and witty — it renders in a single font-courier text-sm line.
3

Rename the status labels

The online/away/idle status words are embedded in the category name string (e.g. "Backend (Away: 2)"). Update the parenthetical portion to reflect actual status counts or use a different label scheme entirely.
The tooltip at the top of the buddy list reads "Double-click a skill to IM". This is a fun flavour-text string — swap it for a personal tagline or remove the element if you prefer a cleaner header.

Build docs developers (and LLMs) love

Get started for freeTalk to us