Skip to main content

Documentation Index

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

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

The projects.js data file is the single source of truth for all content rendered on the Projects page. It exports a named array (p) of project objects, each consumed directly by the ProjectPanel component to render a card complete with a header image, tech-stack badge row, body copy, and one or more action links. Editing this file is the only step required to add, remove, or update a project entry — no component changes are needed. Location: data/projects.js

​
Data Shape

Each element in the array conforms to the following shape. Fields marked optional may be omitted entirely when not applicable. 
interface Project {
  id: string;            // URL-safe slug, e.g. "void-tracker"
  title: string;         // Displayed in ALL CAPS display font
  description: string;   // Paragraph shown in the card body
  tags: string[];        // Tech stack badges, e.g. ["React", "TypeScript"]
  image: string;         // Full image URL (used as object-cover card header)
  demoUrl?: string;      // Optional live demo link
  sourceUrl?: string;    // Optional GitHub / source link
  readmeUrl?: string;    // Optional README link
  bindingNotes?: string; // Optional footer annotation rendered in the card
}

​
Field Reference

​
id
string
required
A URL-safe slug that uniquely identifies the project, e.g. "void-tracker". Used as a React list key and may be referenced by other data files (such as caseStudies.js). Must be lowercase, hyphen-separated, and unique across the array.
​
title
string
required
The project display name rendered in the card heading. The ProjectPanel component forces this to ALL CAPS using the display font. Write it in whatever casing feels natural — the style layer handles the transformation.
​
description
string
required
A short paragraph of body copy shown inside the card below the tag row. Aim for one to three sentences that capture what the project does and why it exists.
​
tags
string[]
required
An ordered list of technology names rendered as badge chips on the card. Keep each tag concise (one word or a short abbreviation). There is no enforced maximum, but four to five tags is the practical visual limit before the row wraps awkwardly.
​
image
string
required
A fully-qualified HTTPS image URL used as the object-cover card header image. Unsplash URLs with auto=format&fit=crop&q=80&w=800 query parameters are the established convention in this project, but any hosted image URL works.
​
demoUrl
string
An optional URL to a live deployment or hosted demo. When present, ProjectPanel renders a Live Demo action button. Use "#" as a placeholder while a deployment is pending.
​
sourceUrl
string
An optional URL to the source repository (GitHub, GitLab, etc.). When present, ProjectPanel renders a Source action button.
​
readmeUrl
string
An optional direct link to the project README. When present, ProjectPanel renders a README action button alongside any other action links.
​
bindingNotes
string
An optional short annotation displayed as a footer line in the card — used for caveats, disclaimers, or flavour text about the project’s runtime behaviour.

​
Current Projects

The four projects currently defined in data/projects.js: 
export const p = [
  {
    id: "void-tracker",
    title: "VOID TRACKER",
    description:
      "A dark-mode first task management system utilizing local storage and a custom drag-and-drop interface. Built to organize chaos into structured data.",
    tags: ["React", "TypeScript", "Tailwind", "Zustand"],
    image:
      "https://images.unsplash.com/photo-1555949963-aa79dcee981c?auto=format&fit=crop&q=80&w=800",
    demoUrl: "#",
    sourceUrl: "#",
    bindingNotes: "Data persists locally. No external database summoned.",
  },
  {
    id: "nexus-dashboard",
    title: "NEXUS DASHBOARD",
    description:
      "Real-time analytics dashboard visualizing mock server metrics. Features custom D3.js charts wrapped in React components with glowing neon aesthetics.",
    tags: ["Next.js", "D3.js", "Framer Motion", "WebSockets"],
    image:
      "https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&q=80&w=800",
    demoUrl: "#",
    sourceUrl: "#",
    readmeUrl: "#",
    bindingNotes: "Metrics are simulated via client-side generation.",
  },
  {
    id: "spell-checker-cli",
    title: "SPELL.CHK CLI",
    description:
      "A command-line tool for linting markdown files for specific terminology and style guide adherence. Written in Rust for maximum execution speed.",
    tags: ["Rust", "CLI", "Regex", "Markdown"],
    image:
      "https://images.unsplash.com/photo-1629654297299-c8506221ca97?auto=format&fit=crop&q=80&w=800",
    sourceUrl: "#",
    readmeUrl: "#",
  },
  {
    id: "alchemy-ui",
    title: "ALCHEMY UI",
    description:
      "A component library of highly animated, accessible React components. Focuses on complex micro-interactions and keyboard navigability.",
    tags: ["React", "Storybook", "Radix UI", "CSS Modules"],
    image:
      "https://images.unsplash.com/photo-1507721999472-8ed4421c4af2?auto=format&fit=crop&q=80&w=800",
    demoUrl: "#",
    sourceUrl: "#",
  },
];

​
Adding a Project

Append a new object to the end of the exported array. Provide at minimum the five required fields (id, title, description, tags, image). Omit any optional fields that are not yet applicable.
Keep id values lowercase and hyphen-separated. The value must be unique across the entire array — duplicate ids will cause React key warnings and may break any cross-references from caseStudies.js.

​
Removing a Project

Delete the corresponding object from the array. If any entry in data/caseStudies.js references the project’s id in its sigilId field, update or remove that reference as well to avoid a broken icon lookup.

​
Image URL Guidelines

All image values must be fully-qualified HTTPS URLs. HTTP URLs will be blocked by the browser’s mixed-content policy when the site is served over HTTPS. Unsplash source URLs with ?auto=format&fit=crop&q=80&w=800 are the recommended convention and match the aspect ratio expected by the card header.

Build docs developers (and LLMs) love

Get started for freeTalk to us