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.

Getting NeonRetro Sys_Admin running locally takes about five minutes. You’ll clone the repository, install dependencies, boot the Vite dev server, and then swap in your own content by editing a single data file. By the end of this guide you’ll have a fully functional Y2K-aesthetic portfolio running at http://localhost:5173 with your own projects, skills, and blog posts in place.

​
Prerequisites

Before you begin, make sure you have the following installed:
  • Node.js 18 or later — required by Vite and the project’s dev scripts
  • Git — to clone the repository
  • A terminal — any shell (bash, zsh, PowerShell) works fine

​
Setup

1

Clone the repository

Clone the project from GitHub and navigate into the new directory:
git clone https://github.com/apursley2012/neon-retro-sys-admin.git && cd neon-retro-sys-admin
2

Install dependencies

Install all required packages using your preferred package manager:
npm install
3

Start the development server

Start the Vite dev server with hot-module replacement enabled:
npm run dev
Vite will print a local URL in your terminal. Open http://localhost:5173 in your browser to see the portfolio running live. Changes you make to source files are reflected instantly without a full page reload.
4

Edit your portfolio content in mockData.js

Open data/mockData.js. This is the single file that controls everything visitors read on the site. The projects array is the most prominent section — each object in it maps directly to a project card rendered on the Projects page.Here is the real structure of a project entry, taken directly from the source:
{
  id: "proj-1",
  name: "VITAL_SIGNS.exe",
  filename: "vital_signs.exe",
  icon: "heart-pulse",         // Lucide React icon name
  color: "magenta",            // Neon accent: "magenta" | "cyan" | "lime" | "purple"
  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: "#",
    source: "#",
    readme: "#"
  },
  date: "2025-10-14"
}
Replace the existing entries with your own projects. The same file also contains skills (with per-skill percentage levels), blogPosts, caseStudies, and guestbookEntries arrays — update each one to reflect your own background.
5

Build for production

When you’re ready to deploy, generate an optimized static build:
npm run build
Vite compiles and bundles the entire application into the dist/ directory. The output is a set of static HTML, CSS, and JS files that can be hosted on any static hosting platform — GitHub Pages, Netlify, Vercel, or a plain web server.
Because all content lives in data/mockData.js, you can keep the entire component layer untouched and treat the data file as your personal CMS. Edit it once, and every page that reads from it — Projects, Skills, Writing, Case Studies — updates automatically on the next save.

​
What You’ll See

Once the dev server is running, the portfolio exposes seven pages via React Router v6 client-side navigation:
RoutePageWhat it shows
/HomeThe landing screen with your name, title, and an animated neon welcome prompt
/aboutAboutA RetroWindow containing your bio, background, and a personal introduction
/projectsProjectsOne draggable RetroWindow per project entry from the projects array in mockData.js
/skillsSkillsProficiency bars for languages, frontend, and backend technologies drawn from the skills object
/writingWritingBlog post excerpts from the blogPosts array, each displayed with mood and currently-playing-music metadata
/case-studiesCase StudiesDeep-dive writeups from the caseStudies array, covering problem, process, design decisions, and outcome
/contactContactA contact form alongside the Guestbook — a retro message board populated from guestbookEntries in mockData.js
Every page wraps its content in one or more RetroWindow components, so the draggable, OS-window aesthetic is consistent from the first page to the last.

Build docs developers (and LLMs) love

Get started for freeTalk to us