Skip to main content

Documentation Index

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

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

The MissionPatchWall component (MissionPatchWall.js) renders your portfolio projects as circular mission-patch badges arranged in a responsive grid. Clicking a patch opens a full-screen modal with the project description, tech tags, and link buttons. All project data lives in a single JavaScript array called E near the top of the file, making it straightforward to add, remove, or reorder entries without touching any JSX.

​
The Project Data Array

Each project is an object in the E array. Here is the complete shape with every field explained: 
// MissionPatchWall.js — project data array
const E = [
  {
    id: "p1",                              // Unique string — used as React key & layoutId
    name: "Nebula UI",                     // Displayed on the patch badge and modal heading
    type: "Component Library",             // Shown below the name (patch footer + modal subheading)
    desc: "A React component library built for deep-space applications. Features zero-gravity physics simulations for drag-and-drop interfaces.",
                                           // Full description rendered inside the modal
    tech: ["React", "Framer Motion", "Tailwind"],
                                           // Rendered as pill tags under "Payload Specs" in modal
    color: "from-aurora-teal to-space-900",// Tailwind gradient — patch background + modal header strip
    icon: "🌌",                            // Emoji — centred on the patch and repeated in the modal
  },
  // ... more entries
];
The id value is used as a Framer Motion layoutId to animate the patch expanding into the modal. Every entry must have a unique id string — duplicates will cause the shared-layout animation to break.

​
Existing Projects

The four default entries are:
idnametypeiconcolor gradient
p1Nebula UIComponent Library🌌from-aurora-teal to-space-900
p2Orbit TrackerData Visualization🛰️from-aurora-pink to-space-900
p3Quantum CommsReal-time Chat📡from-aurora-mint to-space-900
p4Void ExplorerWeb Game🚀from-indigo-500 to-space-900

​
Available Color Gradients

The patch background and modal header strip both use the color field as Tailwind bg-gradient-to-br (patch) and bg-gradient-to-r (modal) classes. The to-space-900 end-stop keeps everything consistent with the dark theme.

Aurora Teal

from-aurora-teal to-space-900 — cool cyan-green, great for developer tooling projects.

Aurora Pink

from-aurora-pink to-space-900 — warm magenta, works well for design or creative projects.

Aurora Mint

from-aurora-mint to-space-900 — soft pastel green, suits open-source or utility libraries.

Indigo

from-indigo-500 to-space-900 — deep blue-purple, fitting for games or immersive experiences.
You can also use any valid Tailwind from-* colour as the start-stop (e.g. from-violet-500, from-rose-500, from-amber-500), as long as the class is included in your Tailwind config’s safelist or present elsewhere in the project so it is not purged.

​
Adding a New Project

Push a new object onto the E array. Use an id that does not already exist in the array: 
// MissionPatchWall.js — adding a fifth project
const E = [
  { id: "p1", /* ... */ },
  { id: "p2", /* ... */ },
  { id: "p3", /* ... */ },
  { id: "p4", /* ... */ },

  // ↓ new entry
  {
    id: "p5",
    name: "Aurora Analytics",
    type: "Dashboard",
    desc: "A real-time analytics platform visualising user-interaction streams as particle simulations. Built for high-throughput event pipelines.",
    tech: ["React", "D3.js", "WebSockets", "TypeScript"],
    color: "from-violet-500 to-space-900",
    icon: "📊",
  },
];
The grid layout is grid-cols-1 sm:grid-cols-2 lg:grid-cols-4, so adding a fifth entry will wrap onto a second row at the lg breakpoint. There is no upper limit on entries — the grid simply continues to wrap.

​
Removing a Project

Delete the entire object literal from the E array. The remaining patches will reflow automatically: 
// Remove p3 by deleting its object from the array
const E = [
  { id: "p1", /* ... */ },
  { id: "p2", /* ... */ },
  // { id: "p3", ... }  ← deleted
  { id: "p4", /* ... */ },
];

​
Reordering Projects

The patches render in the same order as the array. Move objects up or down to change their left-to-right display order: 
// Swap p2 and p4 — Orbit Tracker now appears last
const E = [
  { id: "p1", /* Nebula UI */ },
  { id: "p4", /* Void Explorer */ },
  { id: "p3", /* Quantum Comms */ },
  { id: "p2", /* Orbit Tracker */ },
];

​
Wiring Up Real GitHub and Live-Demo Links

The modal currently renders both link buttons pointing to href="#". To add real URLs, extend each project object with github and url fields, then update the JSX anchor tags to read from those fields. Step 1 — Add fields to your data: 
// MissionPatchWall.js — extended entry with real links
{
  id: "p1",
  name: "Nebula UI",
  type: "Component Library",
  desc: "A React component library built for deep-space applications...",
  tech: ["React", "Framer Motion", "Tailwind"],
  color: "from-aurora-teal to-space-900",
  icon: "🌌",
  github: "https://github.com/your-username/nebula-ui",  // ← add this
  url: "https://nebula-ui.dev",                          // ← add this
},
Step 2 — Update the modal anchor tags in the JSX: 
// MissionPatchWall.js — modal link buttons (find these two <a> elements)

// GitHub button — was href="#"
<a
  href={e.github ?? "#"}
  target="_blank"
  rel="noopener noreferrer"
  className="p-2 bg-space-800 rounded-lg text-slate-400 hover:text-aurora-light transition-colors"
>
  <GithubIcon className="w-5 h-5" />
</a>

// Live-demo button — was href="#"
<a
  href={e.url ?? "#"}
  target="_blank"
  rel="noopener noreferrer"
  className="p-2 bg-space-800 rounded-lg text-slate-400 hover:text-aurora-light transition-colors"
>
  <ExternalLink className="w-5 h-5" />
</a>
Using e.github ?? "#" keeps the button functional even for projects where you haven’t provided a link yet — clicking it simply stays on the page instead of navigating away.

​
Complete Customised Example

Here is a fully populated entry ready to paste in: 
{
  id: "p5",
  name: "Stellar Forms",
  type: "Form Builder",
  desc: "A drag-and-drop form builder with conditional logic, multi-step flows, and WCAG 2.1 AA accessibility compliance. Exports to React, Vue, or plain HTML.",
  tech: ["React", "TypeScript", "Tailwind", "Zod"],
  color: "from-rose-500 to-space-900",
  icon: "📋",
  github: "https://github.com/your-username/stellar-forms",
  url: "https://stellar-forms.app",
},
Keep id values as simple strings without spaces or special characters. Framer Motion uses the id as a DOM data-motion-layout-id attribute — non-alphanumeric characters may cause unexpected layout animation behaviour.

Build docs developers (and LLMs) love

Get started for freeTalk to us