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.

NeonRetro Sys_Admin uses React Router v6 with a single nested route tree. A HashRouter wraps everything so the app can be served from GitHub Pages and other static hosts without any server-side URL rewriting — all routes live after the # in the URL (e.g. /#/projects). Every page shares a common Layout component that provides the chrome: the scanline overlay, the cursor trail, the sticky navigation bar, the marquee ticker, and the footer.

​
Route tree

The full route configuration, as extracted from assets/main.js, defines seven leaf routes all nested under a single root Layout route: 
<HashRouter>
  <Routes>
    <Route path="/" element={<Layout />}>
      <Route index element={<Home />} />
      <Route path="about" element={<About />} />
      <Route path="projects" element={<Projects />} />
      <Route path="skills" element={<Skills />} />
      <Route path="writing" element={<Writing />} />
      <Route path="case-studies" element={<CaseStudies />} />
      <Route path="contact" element={<Contact />} />
    </Route>
  </Routes>
</HashRouter>
The index route (<Route index>) renders Home at the root path /#/. All other routes use path segments without a leading slash because they are children of the "/" parent route.

​
Route reference

PathPage ComponentDescription
/#/HomeHero section with draggable RetroWindow widgets
/#/aboutAboutBio, vital stats sidebar, and THINGS_I_NOTICE.log window
/#/projectsProjectsExplorer-style project grid with modal detail views
/#/skillsSkillsSkill bars categorized by Languages, Front-End, Back-End, and Specialties
/#/writingWritingBlog archive with post metadata and tag filtering
/#/case-studiesCaseStudiesTabbed case study viewer with problem/goal/process/result layout
/#/contactContactGuestbook form with seeded entries and contact link panel

​
The Layout component

components/layout/Layout.js is the component rendered by the root <Route path="/" element={<Layout />}>. It is responsible for every piece of persistent UI that appears on all pages. Its render output, in order, is:
  1. Scanline overlay — a <div className="scanline"> positioned absolutely over the entire screen. It runs the scanline CSS animation that moves a translucent band from the top of the viewport to the bottom on a 10-second loop, simulating a CRT refresh.
  2. CursorTrail — a canvas-based component that renders neon particles following the mouse pointer.
  3. RetroNav — the sticky-top navigation bar. It uses React Router’s NavLink component to render links to all seven routes. When a link matches the current location, React Router applies an isActive flag that RetroNav uses to apply accent-color border and background styles.
  4. Marquee — a horizontally scrolling ticker rendered immediately below the nav, initialized with the text *** WELCOME TO MY CORNER OF THE INTERNET *** CURRENTLY: DEBUGGING REALITY *** MOOD: SUSPICIOUS OF CSS ***. The inner element carries animate-marquee and pauses when hovered via hover:[animation-play-state:paused].
  5. <main> containing <Outlet /> — the React Router Outlet is where the matched child route’s component renders. The <main> element constrains content to max-w-6xl and applies consistent horizontal padding.
  6. Footer — the bottom bar with social links and a status line.
RetroNav uses React Router’s NavLink component rather than plain anchor tags. NavLink receives a render prop or className function that exposes { isActive }. The active route link receives a highlighted border and background derived from the Y2K color palette, giving users a clear visual indicator of their current location without any manual state management.

​
Adding a new page

1

Create the page component

Add a new file in your source tree, for example pages/About.jsx. Export a default React component that contains your page content. You can import data from data/mockData.js and use RetroWindow or Sticker from components/ui/ as needed.
2

Import the component in main.js

Open the source entry file and import your new component at the top alongside the existing page imports:
import MyNewPage from './pages/MyNewPage';
3

Register the route

Inside the HashRouter → Routes → root Route block, add a new <Route> sibling to the existing routes:
<Route path="my-new-page" element={<MyNewPage />} />
The path should be a lowercase, hyphen-separated slug. It will be accessible at /#/my-new-page.
4

Add a NavLink in RetroNav

Open components/layout/RetroNav.js and add a NavLink entry pointing to your new path. Follow the same pattern used by the existing links to ensure consistent active-state styling:
<NavLink to="/my-new-page">MY_NEW_PAGE</NavLink>
5

Rebuild the bundle

Run vite build to regenerate assets/main.js. The new route will be live at /#/my-new-page in the compiled output.

Build docs developers (and LLMs) love

Get started for freeTalk to us