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.

RetroNav is the persistent top-of-page navigation bar for the NeonRetro Sys_Admin portfolio. It renders a <nav> element with sticky top-0 z-50 positioning and a semi-transparent bg-y2k-black/90 backdrop-blur-sm background, so it floats above page content as users scroll. The left side displays the brand link SYS_ADMIN styled with the .rainbow-text class; the right side renders seven icon-plus-label links — each pointing to a distinct page — using React Router’s NavLink for automatic active-state detection.

​
Layout and Positioning

The nav element carries the following structural classes: 
w-full border-b-2 border-y2k-gray bg-y2k-black/90 backdrop-blur-sm sticky top-0 z-50
Inside, content is constrained to max-w-6xl mx-auto px-4. On mobile the brand and links stack vertically (flex-col); from the md breakpoint upward they sit on a single row (md:flex-row justify-between). The site logo links back to / and is rendered as: 
<NavLink to="/" className="font-display text-2xl font-bold tracking-widest rainbow-text">
  SYS_ADMIN
</NavLink>
The .rainbow-text utility class applies a CSS animated gradient that cycles through the full neon palette, giving the brand mark its signature Y2K iridescence. Links are defined in an internal array and mapped to NavLink components. The full set of routes, labels, Lucide icons, and accent colors is:
PathLabelIconColor Class
/HOME.exeTerminaltext-y2k-magenta
/aboutABOUT.txtFileTexttext-y2k-cyan
/projectsPROJECTS.zipFolderOpentext-y2k-lime
/skillsSKILLS.datCputext-y2k-purple
/writingBLOG.logBookOpentext-y2k-magenta
/case-studiesCASES.docFileTexttext-y2k-cyan
/contactCONTACT.batMailtext-y2k-lime
Each link renders its icon at size={14} followed by the label text. On extra-small screens, labels are hidden via hidden sm:inline so only the icon remains visible, keeping the nav usable on narrow viewports without overflow.

​
Active State Styling

NavLink’s className prop receives the { isActive } argument. When a link matches the current route, these classes are applied in addition to the base styles: 
border-{color} bg-{color}/10 shadow-retro-{color}
The result is a colored border, a faint tinted background, and a neon glow shadow — all scoped to the specific accent color of that link. Inactive links show only a transparent border, keeping the nav visually clean until a route is active.

​
No External Props

RetroNav accepts no props. It reads its routes from a static internal array and relies on React Router’s NavLink to derive active state from the current URL. There is no external configuration or context dependency beyond the router being present.

​
Adding a New Nav Item

To extend the nav with an additional page, add an entry to the internal navLinks array inside RetroNav.js: 
// Inside RetroNav.js
import { Zap } from 'lucide-react';

const navLinks = [
  // ...existing entries...
  {
    path: '/uses',
    label: 'USES.txt',
    icon: Zap,
    color: 'text-y2k-lime',
  },
];
The new entry will automatically render with icon, label, and active-state styling. Make sure the corresponding <Route> is also registered in the React Router tree inside main.js.

​
Usage in Layout

RetroNav is imported and rendered at the top of the Layout component, wrapping all page content: 
import { RetroNav } from '../components/layout/RetroNav';

export function Layout() {
  return (
    <>
      <RetroNav />
      <Marquee text="*** WELCOME TO MY CORNER OF THE INTERNET ***" />
      <main className="max-w-6xl mx-auto px-4 py-8">
        <Outlet />
      </main>
    </>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us