Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/choose-your-destiny/llms.txt

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

The Projects section presents the portfolio’s built work as a grid of neon-accented cards, each styled like a mission briefing in a cyberpunk operative dossier. Cards start in a muted state and saturate into full neon color on hover — a grayscale-to-color reveal that makes the grid feel alive without being visually noisy at a glance. Each card carries a project title in arcade font, a short description, a category badge (FRONTEND, FULLSTACK, or CLI TOOL), a list of tech stack tags, and three action buttons: INSERT COIN (live demo), SOURCE (repository), and MANUAL (documentation). Route: /projects (hash: #/projects)
Color theme: Neon purple (#A855F7 / --neon-purple)

​
Project Cards

The project data lives in the ys array in the project source. Each object defines the card’s visual treatment and link metadata.

NEURO_LINK

Category: FRONTEND · Color: Cyan
A real-time dashboard for monitoring synthetic neural networks. Built with React, WebSockets, and excessive neon.
Tech: React, TypeScript, Zustand, Framer Motion
(Demo mode enabled)

DATA_HEIST

Category: FULLSTACK · Color: Magenta
Secure file transfer protocol with a gamified interface. Bypass firewalls (auth) to upload payloads.
Tech: Node.js, Express, PostgreSQL, React

SYS_MONITOR

Category: CLI TOOL · Color: Lime
Terminal-based system resource monitor written in Rust. Because GUIs are for the weak.
Tech: Rust, TUI, Crossbeam
(Demo mode enabled)

VOID_COMMERCE

Category: FRONTEND · Color: Orange
E-commerce platform for selling intangible digital assets. High conversion, zero physical inventory.
Tech: Next.js, Stripe, Tailwind, Prisma

​
Card Anatomy

Each project card is composed of several distinct layers:

​
Grayscale-to-Color Hover Reveal

The effect is a CSS filter transition on the project image element: 
/* Rendered via Tailwind utilities in the project source */
.project-image {
  filter: grayscale(100%) brightness(0.7);
  transition: filter 0.3s ease;
}

.project-card:hover .project-image {
  filter: grayscale(0%) brightness(1);
}
The surrounding card border and title glow animate simultaneously, creating a coordinated reveal from monochrome to full neon on pointer enter.

​
Data Structure

// Project entries — ys array (source)
const ys = [
  {
    id: 1,
    title: "NEURO_LINK",
    category: "FRONTEND",
    color: "cyan",
    image: "https://images.unsplash.com/...",
    desc: "A real-time dashboard for monitoring synthetic neural networks...",
    tech: ["React", "TypeScript", "Zustand", "Framer Motion"],
    demoMode: true,
  },
  {
    id: 2,
    title: "DATA_HEIST",
    category: "FULLSTACK",
    color: "magenta",
    image: "https://images.unsplash.com/...",
    desc: "Secure file transfer protocol with a gamified interface...",
    tech: ["Node.js", "Express", "PostgreSQL", "React"],
    demoMode: false,
  },
  {
    id: 3,
    title: "SYS_MONITOR",
    category: "CLI TOOL",
    color: "lime",
    image: "https://images.unsplash.com/...",
    desc: "Terminal-based system resource monitor written in Rust...",
    tech: ["Rust", "TUI", "Crossbeam"],
    demoMode: true,
  },
  {
    id: 4,
    title: "VOID_COMMERCE",
    category: "FRONTEND",
    color: "orange",
    image: "https://images.unsplash.com/...",
    desc: "E-commerce platform for selling intangible digital assets...",
    tech: ["Next.js", "Stripe", "Tailwind", "Prisma"],
    demoMode: false,
  },
];

​
Adding or Editing a Project

This is a pre-built static site — assets/main.js is a minified bundle and is not meant to be hand-edited. To add or update projects, fork or clone the original source repository, make changes to the source files, then rebuild and redeploy.
1

Fork or clone the source repository

Obtain the original (pre-build) source from the project’s repository. The minified assets/main.js file in the deployed site is not intended for direct editing.
2

Add a new project object in the source

In the source, locate the ys array in the projects page component and append a new entry. Required fields are id, title, category, color, image, desc, and tech. Set demoMode: true to display the pulsing DEMO MODE badge.
{
  id: 5,
  title: "GHOST_PROTOCOL",
  category: "FULLSTACK",
  color: "purple",
  image: "https://your-image-url.com/preview.jpg",
  desc: "Covert messaging app with end-to-end encryption and zero logs.",
  tech: ["Next.js", "WebSockets", "Redis", "TypeScript"],
  demoMode: false,
}
3

Choose a neon color

Set color to one of the available palette names: cyan, magenta, purple, lime, or orange. This value drives the card border color, title glow, and tech tag accent.
4

Rebuild the bundle

Run vite build to regenerate assets/main.js with the updated data, then deploy the updated assets/ directory.
Set demoMode: true on any project that has a live deployment but no production-ready environment. This adds a pulsing DEMO MODE badge to the card image, signaling to visitors that the link leads to a demo environment rather than a live product.

Build docs developers (and LLMs) love

Get started for freeTalk to us