Skip to main content

Documentation Index

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

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

The Projects page renders your work as a wall of retro game cartridges. Each cartridge is driven by a single object in the projects data array — add an object, get a cartridge; remove one, it disappears. There is no separate config file or CMS to sync. This page explains every field on the project object, how to add a new genre filter, and how to choose the right neon color for each entry.

​
Project object schema

Every project in the array follows the same shape. Below is the full field reference.
​
id
number
required
A unique integer identifier for the project. When adding a new entry, increment from the highest existing id in the array.
​
title
string
required
The project name as it appears on the cartridge label. Follow the SCREAMING_SNAKE_CASE convention used by the existing entries — it reads as a program filename and fits the retro aesthetic.
​
genre
string
required
The category tag for this project. Must exactly match one of the strings in the genres filter array. Built-in options are "WEB APP", "TOOL", and "STATIC SITE". See Adding a new genre filter if you need a new category.
​
desc
string
required
A short description revealed on card hover. One or two punchy sentences work best — the card has limited vertical space.
​
demo
string
required
The full URL to the live demo. If no demo is deployed yet, use "#" as a placeholder; the button will still render but navigates nowhere.
​
source
string
required
The full URL to the source code repository (GitHub, GitLab, etc.). Use "#" as a placeholder if the repository is not yet public.
​
mocked
boolean
required
Set to true when the demo uses placeholder or sample data rather than real content. When true, the cartridge displays a ⚠ DEMO USES SAMPLE DATA badge, signalling to visitors that the demo is illustrative only.
​
color
"cyan" | "lime" | "magenta"
required
The neon accent colour applied to the cartridge label strip and the glowing hover border. Must be one of the three supported theme values. See the Cartridge color guide below for recommended usage.

​
Adding a new project

Here is a complete example you can paste into the array and customise: 
{
  id:     5,
  title:  "PIXEL_CHAT",
  genre:  "WEB APP",
  desc:   "Real-time chat app with a pixel-art UI and no JavaScript framework. Just vibes and WebSockets.",
  demo:   "https://pixelchat.example.com",
  source: "https://github.com/you/pixel-chat",
  mocked: false,
  color:  "magenta"
}
Add the object to the end of the projects array (before the closing ]), separated by a comma: 
const projects = [
  { id: 1, title: "DOOM.JS",       ... },
  { id: 2, title: "NEON_GRID",     ... },
  { id: 3, title: "STATIC_SHOCK",  ... },
  { id: 4, title: "API_INVADER",   ... },
  // ↓ your new project
  {
    id:     5,
    title:  "PIXEL_CHAT",
    genre:  "WEB APP",
    desc:   "Real-time chat app with a pixel-art UI and no JavaScript framework. Just vibes and WebSockets.",
    demo:   "https://pixelchat.example.com",
    source: "https://github.com/you/pixel-chat",
    mocked: false,
    color:  "magenta"
  }
];

​
Adding a new genre filter

Genre filter buttons on the Projects page are generated from a separate genres array. The default list is: 
const genres = ["ALL", "WEB APP", "TOOL", "STATIC SITE"];
To add a new category, append your string to the array: 
const genres = ["ALL", "WEB APP", "TOOL", "STATIC SITE", "GAME"];
A new filter button labelled GAME will appear automatically. Then make sure the genre field on any project you want in that category matches the string exactly — capitalisation and spacing must be identical.
The "ALL" entry must always remain the first item in the genres array. It is the default selected filter and shows every project regardless of genre.

​
Cartridge color guide

Pick the color that best reflects what a project does. Mixing all three across your cartridge wall keeps the layout visually interesting.
ColorHexGlow effectSuggested use
cyan#00f0ffElectric blue glowTools, utilities, and developer aids
lime#9eff00Acid green glowOpen-source and community projects
magenta#ff2bd6Hot-pink neon glowWeb apps, products, and experiments
Aim for a roughly even spread of colors and genres across your cartridge wall. A row of five magenta web-app cartridges looks monotonous — alternate colors and vary genres to keep the wall energetic and easy to scan.

​
Rebuilding after edits

The dev server picks up array changes instantly with hot-module replacement — no restart needed. When you are ready to deploy, regenerate the static bundle: 
npm run build
The updated cartridge wall will be included in the output written to the dist/ directory.

Build docs developers (and LLMs) love

Get started for freeTalk to us