Skip to main content

Documentation Index

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

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

The Skills page is styled as a character stats screen from an RPG save file — titled CHARACTER_STATS.DAT in a large cyan pixel font. Twelve skills across four categories are displayed as segmented LED progress bars. A DOS terminal panel on the right runs two mock commands to reveal the developer’s daily toolchain and aspirational future goals.

​
What’s on this page

​
Skill Categories & Levels

Skills are grouped into four WindowPanel instances, one per category, in the left two-thirds of the layout. Each panel’s title matches the category name.
CategorySkillLevel
LanguagesJavaScript/TS90
LanguagesPython70
LanguagesHTML/CSS95
Web DevReact85
Web DevNext.js75
Web DevTailwind90
Back-endNode.js80
Back-endSQL65
Back-endREST APIs85
OtherGit/GitHub85
OtherUI/Design70
OtherDebugging95
HTML/CSS and Debugging share the highest recorded level at 95, while SQL is the lowest at 65. The scale is 0–100.

​
LED Progress Bar Component

Each skill row renders the skill name in a 32-character pixel-font label (w-32 shrink-0) alongside a custom LedBar component. The bar consists of 20 segments arranged horizontally in a flex gap-[2px] container.

​
Segment Calculation

// Number of lit segments for a given level
const litSegments = Math.round(level / 100 * 20);

// Examples:
// level 95 → Math.round(0.95 * 20) = Math.round(19.0) = 19 segments lit
// level 90 → Math.round(0.90 * 20) = Math.round(18.0) = 18 segments lit
// level 70 → Math.round(0.70 * 20) = Math.round(14.0) = 14 segments lit
// level 65 → Math.round(0.65 * 20) = Math.round(13.0) = 13 segments lit
Lit segments use bg-y2k-lime with a green glow (shadow-[0_0_5px_rgba(198,255,0,0.5)]). Unlit segments use bg-[#111], giving the appearance of a dormant LED that hasn’t been activated. 
function LedBar({ level }) {
  const litSegments = Math.round(level / 100 * 20);

  return (
    <div className="flex gap-[2px] h-4 bg-black p-[2px] border border-y2k-panelDark w-full relative group">
      {Array.from({ length: 20 }).map((_, index) => (
        <div
          key={index}
          className={`flex-1 ${
            index < litSegments
              ? "bg-y2k-lime shadow-[0_0_5px_rgba(198,255,0,0.5)]"
              : "bg-[#111]"
          }`}
        />
      ))}

      {/* Tooltip on hover */}
      <div className="absolute -top-8 left-1/2 -translate-x-1/2 hidden group-hover:block bg-white text-black font-pixel text-sm px-2 py-1 border-2 border-black z-10 whitespace-nowrap">
        Level: {level}
        <div className="absolute -bottom-2 left-1/2 -translate-x-1/2 w-0 h-0 border-l-[4px] border-l-transparent border-t-[4px] border-t-white border-r-[4px] border-r-transparent" />
      </div>
    </div>
  );
}
Hovering over any LED bar triggers a CSS group-hover tooltip that surfaces the numeric level (e.g., Level: 85) in a pixel-font speech bubble with a downward-pointing CSS triangle.

​
DOS Terminal Panel

The right column (lg:col-span-1) contains a full-height simulated DOS terminal — black background, green y2k-lime text, inset box shadow. It simulates two command sessions.

​
stack --daily

Runs on boot and lists the developer’s daily toolchain under DAILY_TOOLS.LST: 
MS-DOS Version 6.22
(C)Copyright Microsoft Corp 1981-1994.

C:\> stack --daily
> Loading dependencies... [OK]
> Initializing environment... [OK]

DAILY_TOOLS.LST:
- VS Code (Insiders)
- iTerm2 + ZSH
- Figma
- Chrome DevTools
- Spotify (Lo-Fi Beats)
- Coffee.exe (Critical)

​
ping future_goals

A second command block pings aspirational skills as if they were networked hosts: 
C:\> ping future_goals
Pinging future_goals with 32 bytes of data:
Reply from WebGL: bytes=32 time<1ms
Reply from Rust: bytes=32 time=2ms
Reply from Three.js: bytes=32 time<1ms
A blinking cursor (animate-blink) follows the final C:\> prompt, reinforcing the illusion of a live terminal. 
<div className="bg-black border-2 border-[#333] h-full p-4 font-mono text-sm text-y2k-lime shadow-[inset_0_0_10px_rgba(0,0,0,1)] overflow-y-auto">
  <div className="mb-4">
    MS-DOS Version 6.22 <br />
    (C)Copyright Microsoft Corp 1981-1994.
  </div>

  <div className="mb-2">
    <span className="text-white">C:\&gt;</span> stack --daily
  </div>

  {/* ... tool list ... */}

  <div className="mb-2">
    <span className="text-white">C:\&gt;</span> ping future_goals
  </div>

  {/* ... ping output ... */}

  <div className="mt-4 flex items-center">
    <span className="text-white">C:\&gt;</span>
    {" "}
    <span className="w-2 h-4 bg-y2k-lime animate-blink ml-1 inline-block" />
  </div>
</div>

​
Layout Structure

  • Outer: max-w-5xl mx-auto flex flex-col gap-6 h-full
  • Title: font-pixel text-4xl text-y2k-cyan — CHARACTER_STATS.DAT
  • Content grid: grid grid-cols-1 lg:grid-cols-3 gap-6 flex-1 min-h-0
    • Left (2 cols): Four WindowPanel skill groups, stacked vertically in an overflow-y-auto scroll container
    • Right (1 col): DOS terminal panel, h-full overflow-y-auto

Build docs developers (and LLMs) love

Get started for freeTalk to us