Skip to main content

Documentation Index

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

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

The Projects page turns a portfolio grid into a functional-feeling desktop environment. Each project is represented as a file icon on a simulated Windows-style desktop, complete with a menu bar showing a fake directory path. Clicking an icon triggers an animated modal RetroWindow — the project’s detail sheet — so visitors can browse work the same way they’d open files on an old PC.

​
Route

/projects
Declared in the router as: 
<Route path="projects" element={<ProjectsPage />} />

​
Desktop Explorer UI

The page root is a h-full flex flex-col container. The top of the page renders a Windows-style menu bar: 
<div className="bg-y2k-gray border-2 border-y2k-lightgray p-2 mb-6 flex gap-4 items-center font-mono text-sm">
  <span className="text-gray-400">File Edit View Help</span>
  <div className="h-4 w-px bg-gray-600" />
  <span className="text-y2k-lime">C:\Users\Admin\Projects&gt;</span>
</div>
Below the menu bar, projects are rendered as a responsive icon grid: 
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 p-4">
The grid renders 2 columns on mobile, 4 on medium screens, and up to 5 on large screens.

​
Icon Component

Each project renders as a motion.div with hover/tap scale animations: 
<motion.div
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
  onClick={() => setSelectedId(project.id)}
  className="flex flex-col items-center gap-2 cursor-pointer group"
>
  <div className={`w-16 h-16 flex items-center justify-center border-2 border-transparent
    group-hover:border-y2k-${project.color} group-hover:bg-y2k-${project.color}/10 transition-all`}>
    <ProjectIcon size={40} className={`text-y2k-${project.color}`} />
  </div>
  <span className="font-mono text-xs text-center bg-black/50 px-1
    group-hover:bg-y2k-magenta group-hover:text-white">
    {project.filename}
  </span>
</motion.div>
On hover, the icon container gains a colored border and 10% tinted background matching the project’s color. The filename label switches to a magenta background with white text. The icon component is resolved at runtime from a lookup map: 
const iconComponents = {
  'heart-pulse':    HeartPulse,
  'shopping-cart':  ShoppingCart,
  'file-code':      FileCode,
  'calendar':       Calendar,
  'folder':         Folder,   // fallback
};
If a project’s icon field does not match a key in this map, the Folder icon is used as a fallback.

​
Project Detail Modal

Clicking any icon sets selectedId in local state. An AnimatePresence-wrapped overlay renders when selectedId is set: 
<AnimatePresence>
  {selectedProject && (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
      <motion.div
        initial={{ opacity: 0, scale: 0.9 }}
        animate={{ opacity: 1, scale: 1 }}
        exit={{ opacity: 0, scale: 0.9 }}
        className="w-full max-w-2xl"
      >
        <RetroWindow
          title={selectedProject.filename}
          color={selectedProject.color}
          onClose={() => setSelectedId(null)}
        >
          {/* detail content */}
        </RetroWindow>
      </motion.div>
    </div>
  )}
</AnimatePresence>
The backdrop is bg-black/60 backdrop-blur-sm. The modal animates in by scaling from 0.9 → 1 and exits in reverse.

​
Modal Content Structure

Inside the RetroWindow, the detail view renders the following sections in sequence:
  1. Header row — Project name (left) and date (right, font-mono text-xs text-gray-500).
  2. Category tags — Mapped from project.categories, each tag is a small bordered pill: px-2 py-1 text-xs font-mono border border-y2k-{color} text-y2k-{color}.
  3. Description — font-sans text-gray-300 leading-relaxed paragraph.
  4. Disclaimer sticky note — A yellow bg-[#ffff88] block with transform rotate-1 and shadow-retro-gray, aligned to the right at 75% width. Prefixed with bold NOTE:.
  5. Action buttons — RUN_DEMO (white background) and VIEW_SOURCE (white border) link elements with ExternalLink and Github Lucide icons respectively.
<div className="flex gap-4 mt-4 pt-4 border-t border-y2k-gray">
  <a href={project.links.demo} className="flex items-center gap-2 px-4 py-2 bg-white text-black font-mono text-sm hover:bg-y2k-magenta hover:text-white transition-colors">
    <ExternalLink size={16} /> RUN_DEMO
  </a>
  <a href={project.links.source} className="flex items-center gap-2 px-4 py-2 border border-white text-white font-mono text-sm hover:bg-white hover:text-black transition-colors">
    <Github size={16} /> VIEW_SOURCE
  </a>
</div>

​
Project Data Reference

All four projects are defined in data/mockData.js and exported as the projects array.
NameFilenameIconColorCategories
VITAL_SIGNS.exevital_signs.exeheart-pulsemagentaReact, WebSockets, Healthcare
Retail_Hell_Escape.zipretail_escape.zipshopping-cartcyanNext.js, Stripe, E-commerce
CSS_Crimes.htmlcss_crimes.htmlfile-codelimeCSS, Design, Chaos
Shift_Scheduler.shscheduler.shcalendarpurpleNode.js, PostgreSQL, CLI
Descriptions:
  • VITAL_SIGNS.exe — A real-time patient monitoring dashboard mockup. Built this to prove to myself that my nursing background wasn’t a waste of time in tech. It streams fake vitals via WebSockets and alerts on anomalies.
  • Retail_Hell_Escape.zip — An anti-capitalist e-commerce store where the prices go up the longer you leave items in your cart. A satirical take on artificial scarcity and my years in retail merchandising.
  • CSS_Crimes.html — A collection of UI components that technically work but are morally wrong. Includes a volume slider that is a randomized bingo cage and a submit button that runs away from your cursor.
  • Shift_Scheduler.sh — A CLI tool for generating fair shift schedules for hospital wards. Uses a custom algorithm to balance night shifts and weekends. Because Excel spreadsheets are the enemy.

​
Data Structure

Each project object in data/mockData.js follows this shape: 
{
  id: 'proj-1',
  name: 'VITAL_SIGNS.exe',         // Display name in the modal header
  filename: 'vital_signs.exe',     // Label shown under the desktop icon
  icon: 'heart-pulse',             // Lucide icon name (see supported list below)
  color: 'magenta',                // RetroWindow color variant
  categories: ['React', 'WebSockets', 'Healthcare'],
  description: 'A real-time patient monitoring dashboard mockup...',
  disclaimer: 'Static demo. No real patient data used...',
  links: {
    demo: '#',
    source: '#',
    readme: '#',
  },
  date: '2025-10-14',              // ISO date string, rendered in the modal header
}

​
Supported Icon Names

The icon lookup map supports five keys. Use exactly these strings in the icon field:
icon valueLucide ComponentSuggested use
heart-pulseHeartPulseHealthcare / medical
shopping-cartShoppingCartE-commerce / retail
file-codeFileCodeFrontend / CSS experiments
calendarCalendarScheduling / time-based tools
folderFolderGeneric / fallback

​
Adding a New Project

  1. Open data/mockData.js.
  2. Append a new object to the projects array following the shape above.
  3. Pick an icon value from the supported list (or add a new entry to the iconComponents map in the Projects component if you need a different Lucide icon).
  4. Set color to one of: magenta, cyan, lime, or purple.
  5. Point links.demo and links.source at real URLs, or keep them as '#' while the project is in progress.
{
  id: 'proj-5',
  name: 'Portfolio_v3.zip',
  filename: 'portfolio_v3.zip',
  icon: 'folder',
  color: 'lime',
  categories: ['React', 'Tailwind', 'Framer Motion'],
  description: 'You are looking at it.',
  disclaimer: 'This portfolio documents itself. Recursion detected.',
  links: { demo: '#', source: 'https://github.com/yourhandle/portfolio', readme: '#' },
  date: '2026-06-01',
}
The new project appears automatically in the icon grid — no changes to the component are needed.

Build docs developers (and LLMs) love

Get started for freeTalk to us