Skip to main content

Documentation Index

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

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

The Projects page (/projects) presents portfolio work through an arcade game selection metaphor — each project is a “build” that the visitor can choose from a grid of cartridge-style cards, with detailed stats and links appearing in a persistent STAGE PREVIEW panel on the right side. The page headline reads CHOOSE YOUR BUILD, rendered in GlitchText. A genre filter bar above the grid lets visitors narrow the card list by category. Clicking a card populates the preview panel without leaving the page, mirroring a video game’s level-select or character-select screen.

​
Filter Bar

Five genre filter buttons sit above the grid, each styled as pixel-bordered buttons that toggle between active and inactive states: 
const genres = ["ALL", "E-COMMERCE", "PRODUCTIVITY", "DASHBOARD", "SOCIAL"];
Clicking ALL resets the filter. Any other genre shows only matching projects via Array.filter. Add a new genre string to this array and set the corresponding genre field on the project object to make it filterable.

​
Project Data

The four projects defined in the source are:

NEON COMMERCE

Genre: E-COMMERCE Stack: React, Node.js, Three.js, Stripe Stats: Speed 85 · Power 90 · Magic 75 High-performance storefront with real-time inventory syncing and 3D product previews.

TASK SLAYER

Genre: PRODUCTIVITY Stack: Vue, Firebase, Tailwind, Framer Motion Stats: Speed 95 · Power 70 · Magic 80 Gamified task manager where completing todos deals damage to a virtual boss.

DATA DUNGEON

Genre: DASHBOARD Stack: React, D3.js, PostgreSQL, GraphQL Stats: Speed 70 · Power 100 · Magic 60 Complex analytics dashboard turning boring metrics into an interactive map.

SYNTH CHAT

Genre: SOCIAL Stack: Next.js, Socket.io, WebRTC, Redis Stats: Speed 100 · Power 85 · Magic 90 Real-time messaging app with end-to-end encryption and retro visual filters.
// Project data structure — add objects here to create new cards
const projects = [
  {
    id: "p1",
    title: "NEON COMMERCE",
    genre: "E-COMMERCE",
    image: "https://images.unsplash.com/...",
    stats: { speed: 85, power: 90, magic: 75 },
    desc: "High-performance storefront with real-time inventory syncing and 3D product previews.",
    stack: ["React", "Node.js", "Three.js", "Stripe"],
  },
  // ...
];

​
Card Grid Layout

The grid uses a responsive split: the card grid takes the larger portion and the preview panel takes the remainder, inside a 12-column container. On small screens both stack vertically. Each project card is a motion.div with a layout prop that animates in at scale: 0.8, opacity: 0 and exits the same way, driven by AnimatePresence when the genre filter changes. 
<motion.div
  layout
  initial={{ opacity: 0, scale: 0.8 }}
  animate={{ opacity: 1, scale: 1 }}
  exit={{ opacity: 0, scale: 0.8 }}
  onClick={() => setActiveId(project.id)}
>
  {/* Cover image */}
  <div className="aspect-video overflow-hidden relative mb-2">
    <img src={project.image} alt={project.title} />
    <h3>{project.title}</h3>
  </div>
  {/* Hover stat overlay */}
  <div className="absolute inset-0 opacity-0 group-hover:opacity-100">
    <StatBar label="SPEED (FE)" value={project.stats.speed} color="bg-neon-cyan" />
    <StatBar label="POWER (BE)" value={project.stats.power} color="bg-neon-magenta" />
    <StatBar label="MAGIC (UI)" value={project.stats.magic} color="bg-neon-yellow" />
  </div>
</motion.div>
On hover, the cover image switches from monochrome to full colour, and the card face fades out to reveal the stat bar overlay.

​
StatBar Component

The StatBar component renders an animated progress bar for each project stat: 
const StatBar = ({ label, value, color }) => (
  <div className="w-full">
    <div className="flex justify-between font-hud text-sm text-white mb-1">
      <span>{label}</span>
      <span>{value}</span>
    </div>
    <div className="h-2 bg-arcade-navy w-full">
      <motion.div
        initial={{ width: 0 }}
        whileInView={{ width: `${value}%` }}
        transition={{ duration: 0.5, delay: 0.2 }}
        className={`h-full ${color}`}
      />
    </div>
  </div>
);
value is a number 0–100 mapping directly to the bar’s width percentage. The bar animates in via whileInView whenever the element enters the viewport.

​
Stage Preview Panel

The right panel displays the selected project’s full details. Before any card is selected, it shows a pulsing placeholder with the label SELECT A BUILD TO VIEW STATS. When a project is selected, a motion.div slides in from x: 20, opacity: 0 containing:
  1. A full-width aspect-video image with a scan-line overlay effect
  2. The project title in the pixel font
  3. The description paragraph
  4. A flex-wrap row of tech stack tags
  5. Two PixelButton actions: RUN DEMO (primary) and SOURCE (secondary variant)

​
Customisation

1

Add a new project

Append an object to the projects array with id, title, genre, image, stats (speed/power/magic as 0–100 integers), desc, and stack fields.
2

Add a new genre filter

Add a string to the genres array and set genre to the same string on each relevant project. The filter button and filter logic are driven by this array automatically.
3

Add demo and source URLs

The RUN DEMO and SOURCE PixelButton elements currently use href="#". Replace with the real URLs before deploying.
4

Change stat labels

SPEED (FE), POWER (BE), and MAGIC (UI) are label strings passed to <StatBar>. Rename them inside the hover overlay — for example to PERF, SCALE, or DX.
The layout prop on each project card enables Framer Motion’s automatic layout animation. Adding or removing cards while the filter is active will produce a smooth reflow. However, every card must have a stable key prop (use the project id) or the layout animation will be incorrect.

Build docs developers (and LLMs) love

Get started for freeTalk to us