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.
Every page in NeonRetro Sys_Admin reads its content from a single source of truth: data/mockData.js. Projects, skill levels, blog posts, case studies, and guestbook seed entries are all defined here and exported as named values. No CMS, no database, no API calls — open the file, edit the data, save, and rebuild. This centralized pattern means you only ever need to touch one file to fully swap out the portfolio’s content for your own.
Exported values
The compiled build uses short aliases to minimize bundle size. The five named exports and their aliases are:
| Export name | Alias | Type | Used by |
|---|
projects | p | Array | Desktop icons, Project modals |
skills | s | Object | Skills page |
blogPosts | b | Array | Blog page |
caseStudies | c | Array | Case Studies page |
guestbookEntries | g | Array | Guestbook page |
You will always edit the human-readable names (projects, skills, etc.) in the source file. The short aliases only appear in the compiled dist/ output.
Projects
Each entry in the projects array powers a draggable desktop icon on the home screen and the modal that opens when the icon is double-clicked. The color and icon fields control the visual appearance of both the icon and the RetroWindow modal.
// data/mockData.js — projects array
[
{
id: 'proj-1',
name: 'VITAL_SIGNS.exe', // Display name in the modal title bar
filename: 'vital_signs.exe', // Label rendered beneath the desktop icon
icon: 'heart-pulse', // Lucide icon key — see supported values below
color: 'magenta', // RetroWindow color variant — controls border + shadow
categories: ['React', 'WebSockets', 'Healthcare'],
description: '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.',
disclaimer: 'Static demo. No real patient data used. HIPAA compliant by virtue of being entirely fake.',
links: {
demo: '#', // Replace with your live demo URL
source: '#', // Replace with your GitHub repository URL
readme: '#' // Replace with your README or documentation URL
},
date: '2025-10-14'
}
]
Supported icon values (Lucide icon keys):
| Value | Renders |
|---|
'heart-pulse' | Medical / health projects |
'shopping-cart' | E-commerce projects |
'file-code' | CSS / markup / creative coding |
'calendar' | Scheduling / calendar tools |
'folder' | General / miscellaneous projects |
Supported color values (maps to a RetroWindow border + drop-shadow variant):
| Value | Border class | Shadow class | Accent color |
|---|
'magenta' | border-y2k-magenta | shadow-retro-magenta | #ff00ff |
'cyan' | border-y2k-cyan | shadow-retro-cyan | #00ffff |
'lime' | border-y2k-lime | shadow-retro-lime | #39ff14 |
'purple' | border-y2k-purple | shadow-retro-purple | #8a2be2 |
Skills
The skills export is a single object with four keys. The languages, frontend, and backend arrays each contain objects with a name string and a level integer from 0 to 100 — this integer drives the animated progress bars on the Skills page. The specialties array is a flat list of strings rendered as <Sticker> tags.
// data/mockData.js — skills object
{
languages: [
{ name: 'JavaScript (ES6+)', level: 90 },
{ name: 'TypeScript', level: 85 },
{ name: 'HTML/CSS', level: 95 },
{ name: 'Python', level: 60 }
],
frontend: [
{ name: 'React', level: 90 },
{ name: 'Tailwind CSS', level: 85 },
{ name: 'Framer Motion', level: 75 },
{ name: 'Next.js', level: 80 }
],
backend: [
{ name: 'Node.js', level: 70 },
{ name: 'PostgreSQL', level: 65 },
{ name: 'REST APIs', level: 85 }
],
specialties: [
'Debugging Spaghetti Code',
'Translating Medical Jargon',
'Pixel Pushing',
'Writing Docs People Actually Read'
]
}
Set level to a value between 0 and 100 to reflect your actual proficiency. Replace or extend all entries with your own technologies. Add as many items to any array as you like — the layout adjusts automatically.
Blog Posts
Each entry in the blogPosts array appears as a post card on the Blog page. The mood and music fields are decorative metadata shown in the post header, in keeping with the Y2K personal-website aesthetic. The excerpt is the full visible body of the post — there are no individual post pages, so write the complete content here or keep it as a teaser.
// data/mockData.js — blogPosts array
{
id: 'post-1',
title: 'From IV Drips to API Trips',
date: '2026-04-12',
mood: 'Caffeinated',
music: 'Darude - Sandstorm',
tags: ['Reflections', 'Career Transition'],
excerpt: 'How triaging patients in the ER surprisingly prepared me for managing state in a chaotic React application. Turns out, prioritizing a crashing server is a lot like prioritizing a crashing patient, just with less bodily fluids.'
}
Dates follow YYYY-MM-DD format. Posts are displayed in the order they appear in the array — put your most recent post first, or sort however you like.
Case Studies
Each entry in the caseStudies array maps to a detailed case study card. All six narrative fields (problem, goal, process, designDecisions, devDecisions, result) are plain strings — write in full prose. The skills array at the bottom renders as a list of technology/discipline tags.
// data/mockData.js — caseStudies array
{
id: 'case-1',
title: 'Project: VITAL_SIGNS',
problem: 'Healthcare dashboards are notoriously cluttered, slow, and use colors that induce panic rather than clarity.',
goal: 'Design a real-time monitoring interface that is high-contrast, accessible, and prioritizes critical information without overwhelming the user.',
process: 'Interviewed 3 former nursing colleagues, sketched wireframes on actual graph paper, built a prototype in Figma, then implemented in React.',
designDecisions: 'Chose a dark mode default to reduce eye strain during night shifts. Used neon accents strictly for alerts (red/magenta for critical, cyan for stable).',
devDecisions: 'Used WebSockets for real-time data streaming instead of polling to reduce server load and ensure immediate updates.',
result: 'A performant, accessible dashboard that looks like it belongs in a sci-fi movie but functions perfectly for clinical triage.',
skills: ['React', 'WebSockets', 'UI/UX Design', 'Domain Knowledge (Healthcare)']
}
Link a case study back to its matching project by keeping the title and skills consistent with the corresponding projects entry. This connection is presentational — the two arrays are not joined in code.
Guestbook Entries
The guestbookEntries array seeds the Guestbook page with display entries so it doesn’t appear empty on first load. Each entry is a simple object with an integer id, a name string, an ISO date, and a message string.
// data/mockData.js — guestbookEntries array
[
{ id: 1, name: 'xX_DarkSlayer_Xx', date: '2026-05-20', message: 'First! Cool site, reminds me of my old Angelfire page but less broken.' },
{ id: 2, name: 'Recruiter_Bot_9000', date: '2026-05-22', message: 'Impressive profile. We are looking for a Rockstar Ninja 10x Developer for an unpaid internship. Interested?' },
{ id: 3, name: 'Former_CoWorker_Sarah',date: '2026-05-25', message: 'Still can\'t believe you left the hospital to stare at glowing rectangles all day. Miss you in the ward! Site looks amazing.' }
]
These entries are purely decorative seed data rendered from the static array. The contact / guestbook form does not persist new submissions to this file — any form submissions are ephemeral unless you wire up a backend (see Deployment for form integration options).
Every project in the starter data uses '#' as a placeholder for demo, source, and readme links. Before going live, replace every '#' with a real URL — your deployed demo, GitHub repository, or README on GitHub. Links left as '#' will scroll the page to the top when clicked, which looks unfinished to recruiters.