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 Projects page presents the portfolio’s work as a Windows-style file explorer. Projects are displayed as folder icons in a filterable grid. Clicking any icon opens a detail panel on the right showing the project description, tech stack badges, a sample-data warning when applicable, and three action buttons. The entire interface lives inside a single WindowPanel titled C:\My Files\Projects.

​
What’s on this page

​
Filter Tabs

Five tab buttons sit above the file grid, separated by a bottom border. The active tab receives a filled bg-y2k-cyan style with an inset shadow; inactive tabs show a dimmer panel color. Tabs are scrollable horizontally on small screens.
Tab LabelProjects Shown
All FilesAll 5 projects
WebNeoDashboard.exe, Guestbook_API.sys
DataDataScraper.bat
ToolsPixelUI_Kit.dll
DemosSpaceInvaders.exe
const filters = ["All Files", "Web", "Data", "Tools", "Demos"];

{filters.map((filter) => (
  <button
    key={filter}
    onClick={() => setActiveFilter(filter)}
    className={`px-4 py-1 font-pixel text-lg whitespace-nowrap border-2 ${
      activeFilter === filter
        ? "bg-y2k-cyan text-black border-y2k-cyan shadow-[inset_2px_2px_0_rgba(255,255,255,0.5)]"
        : "bg-y2k-panel text-y2k-text border-y2k-panelDark hover:bg-y2k-panelDark"
    }`}
  >
    {filter}
  </button>
))}

​
Project File Grid

Filtered projects are displayed as a responsive grid of folder icons (grid-cols-2 sm:grid-cols-3 lg:grid-cols-4). Each icon is a pixel-art SVG in y2k-cyan, with the filename in 12px monospace below. Selecting a project highlights it with a border-y2k-magenta bg-y2k-magenta/10 border and populates the detail panel. Unselected items show border-transparent with a hover state. 
{filteredProjects.map((project) => (
  <div
    key={project.id}
    onClick={() => setSelected(project)}
    className={`flex flex-col items-center gap-2 p-4 cursor-pointer border-2 transition-all ${
      selected?.id === project.id
        ? "border-y2k-magenta bg-y2k-magenta/10"
        : "border-transparent hover:border-y2k-panelDark hover:bg-black/20"
    }`}
  >
    <svg width="48" height="48" viewBox="0 0 48 48" className="pixel-art fill-y2k-cyan drop-shadow-md">
      <path d="M4 8h12l4 4h24v28H4z" fill="#00E5FF" />
      <path d="M4 16h40v20H4z" fill="#00B3CC" />
      <rect x="12" y="24" width="24" height="4" fill="#0B0B14" opacity="0.3" />
    </svg>
    <span className="font-mono text-xs text-center break-all">{project.name}</span>
  </div>
))}

​
Project Catalogue

All five projects are defined as a static array in the source. The full list:
NameTypeTech StackSample Data
NeoDashboard.exeWebReact, Tailwind, Zustand✅ Yes
DataScraper.batDataPython, BeautifulSoup❌ No
PixelUI_Kit.dllToolsTypeScript, CSS❌ No
Guestbook_API.sysWebNode.js, Express, Redis✅ Yes
SpaceInvaders.exeDemosHTML5 Canvas, JS❌ No
The descriptions shown in the detail panel (sourced verbatim from the project data array):
NameDescription
NeoDashboard.exeA modern admin dashboard with a retro skin.
DataScraper.batCLI tool for extracting structured data from messy sites.
PixelUI_Kit.dllA component library for building 90s inspired interfaces.
Guestbook_API.sysREST API for classic guestbooks with modern rate limiting.
SpaceInvaders.exeCanvas-based clone of the classic arcade game.
The file extensions in project names (.exe, .bat, .dll, .sys) are purely aesthetic — a nod to Windows executable naming conventions, not actual file types. Each extension loosely corresponds to the project category.

​
Detail Panel

When a project is selected, a 320px-wide (w-80) right-side detail panel appears with:
  1. Header — project name in y2k-cyan pixel font, type in 10px monospace below.
  2. Placeholder image — a 128px-tall decorative block using a CSS grid pattern overlay with rotated/blended magenta and cyan rectangles.
  3. Description — one-sentence project description in font-sans text-sm.
  4. Tech stack badges — each technology rendered as a bordered pill in font-mono text-[10px].
  5. Sample data warning — shown only when sampleData: true; lime text on a lime-tinted background.
  6. Action buttons — three PixelButton components: Run Demo (primary), View Source (secondary), README.txt (secondary).
{selected && (
  <div className="w-full md:w-80 bg-black border-2 border-y2k-panelDark p-4 flex flex-col gap-4">
    {/* Header */}
    <div className="border-b border-[#333] pb-2">
      <h3 className="font-pixel text-2xl text-y2k-cyan break-all">{selected.name}</h3>
      <div className="font-mono text-[10px] text-y2k-textMuted mt-1">Type: {selected.type}</div>
    </div>

    {/* Tech stack */}
    <div className="flex flex-wrap gap-2">
      {selected.stack.map((tech) => (
        <span key={tech} className="bg-y2k-panel px-2 py-1 font-mono text-[10px] text-y2k-textMuted border border-[#333]">
          {tech}
        </span>
      ))}
    </div>

    {/* Sample data warning */}
    {selected.sampleData && (
      <div className="font-mono text-xs text-y2k-lime bg-y2k-lime/10 p-1 border border-y2k-lime/30 text-center">
        ⚠ uses sample data
      </div>
    )}

    {/* Action buttons */}
    <div className="mt-auto pt-4 flex flex-col gap-2">
      <PixelButton variant="primary" className="w-full text-sm py-1">Run Demo</PixelButton>
      <div className="flex gap-2">
        <PixelButton variant="secondary" className="flex-1 text-xs py-1">View Source</PixelButton>
        <PixelButton variant="secondary" className="flex-1 text-xs py-1">README.txt</PixelButton>
      </div>
    </div>
  </div>
)}
When no project is selected, the detail panel area shows: "Select a file to view details." in muted monospace.
The two projects marked sampleData: true (NeoDashboard.exe and Guestbook_API.sys) display a lime-colored advisory banner in the detail panel. This communicates to visitors that any live demo is running against mock/seeded data rather than real production data.

​
Layout Structure

  • Outer: h-full flex flex-col max-w-6xl mx-auto
  • Single WindowPanel titled C:\My Files\Projects fills the content area (flex-1 flex flex-col)
  • Filter tabs — horizontal scrollable row above the main content split
  • Main split — flex flex-col md:flex-row gap-6 flex-1 min-h-0
    • Left: responsive icon grid (flex-1, overflow-y-auto)
    • Right: fixed-width detail panel (w-full md:w-80)

Build docs developers (and LLMs) love

Get started for freeTalk to us