NeonRetro Sys_Admin is a Vite-built single-page application. Rather than a traditional multi-page site, the entire React tree is bootstrapped from one HTML shell and navigated client-side using React Router’s hash-based router. The directory layout reflects that architecture: a small set of handwritten source files inDocumentation 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.
components/ and data/, with compiled output landing in assets/ and pages/.
Directory tree
Folder breakdown
index.html — App shell
index.html is the only HTML file that Vite serves directly. It contains an empty <div id="root"> where React mounts the entire application, a <script type="module"> tag that loads assets/main.js, and a set of <link rel="modulepreload"> hints that tell the browser to pre-fetch every component module before they are needed. You will never need to edit this file for normal development — it is regenerated by Vite on each build.
assets/ — Compiled output
Vite bundles all JavaScript into assets/main.js and all Tailwind utility classes plus custom CSS into assets/main.css. Two supporting bundles — jsx-runtime.js and createLucideIcon.js — are split out because they are shared across many components and benefit from independent caching. The proxy.js file is the Framer Motion compatibility shim that bridges the motion namespace used by Framer with the compiled React runtime.
components/layout/ — Chrome layer
This directory holds every piece of UI that wraps page content:
| File | Purpose |
|---|---|
Layout.js | Root layout — scanline overlay, CursorTrail, RetroNav, Marquee, <main>, Footer |
RetroNav.js | Sticky top navigation bar with NavLink active states |
Footer.js | Bottom bar with social links and status line |
CursorTrail.js | Canvas-based neon particle trail that follows the pointer |
Marquee.js | Horizontally scrolling ticker — pauses on hover |
components/ui/ — Reusable primitives
| File | Purpose |
|---|---|
RetroWindow.js | Draggable window chrome with a colored title bar and close button |
Sticker.js | Rotated badge/label with one of the Y2K color variants |
data/mockData.js — The data layer
All portfolio content is defined in a single file and imported by page components as named exports. There is no external API or CMS — everything ships in the bundle.
| Export | Variable | Type | Content |
|---|---|---|---|
p | projects | Array | Four portfolio projects, each with id, name, filename, icon, color, categories, description, disclaimer, and links |
s | skills | Object | Four skill categories: languages, frontend, backend, and specialties |
b | blogPosts | Array | Three blog posts with title, date, mood, music, tags, and excerpt |
c | caseStudies | Array | One detailed case study with problem, goal, process, designDecisions, devDecisions, result, and skills |
g | guestbookEntries | Array | Three seed guestbook entries with name, date, and message |
data/mockData.js directly. Each consuming page component imports only the exports it needs.
pages/ — Compiled per-page HTML
This directory contains static HTML snapshots for each route (About.html, Projects.html, Skills.html, Writing.html, CaseStudies.html, Contact.html). These are generated output files for deployment environments that require pre-rendered HTML at each path. Do not edit them by hand.
How the app bootstraps
index.html loads assets/main.js as a JavaScript module. That bundle calls ReactDOM.render() on the #root div, mounting the HashRouter → Routes → Layout tree. All subsequent navigation is handled client-side with no full-page reloads. Because the router uses hash-based URLs (/#/about, /#/projects), the app can be hosted on any static file server without server-side URL rewriting.
Files inside
assets/ and pages/ are compiled output — they are regenerated every time you run vite build. Make all source edits in components/, data/, or the root source files, then rebuild. Editing the compiled bundles directly will have no lasting effect.