Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/neocities-dev/llms.txt

Use this file to discover all available pages before exploring further.

FrameNav is the persistent sidebar rendered on every page of the portfolio. It takes no props — the route list, avatar, and footer text are all hardcoded inside the component. It uses React Router’s NavLink to apply an active class to the currently matched route.

​
No props

FrameNav is a zero-configuration component. Simply mount it alongside your page content: 
<div className="flex flex-col md:flex-row h-full w-full absolute inset-0">
  <FrameNav />
  <main className="flex-1 overflow-y-auto relative z-0 p-4 md:p-8">
    <Outlet />
  </main>
</div>

​
Hardcoded route list

The navigation items are defined in the internal Lp array (minified name in the compiled output). The full list is: 
const routes = [
  { path: "/",             label: "Home.exe"      },
  { path: "/about",        label: "About_Me.txt"  },
  { path: "/projects",     label: "Projects.dir"  },
  { path: "/skills",       label: "Skills.dat"    },
  { path: "/writing",      label: "Writing.log"   },
  { path: "/case-studies", label: "Cases.doc"     },
  { path: "/contact",      label: "Contact.msg"   },
];
Each label uses a file-extension suffix to reinforce the retro OS theme. To add, remove, or rename a route, edit this array directly in components/FrameNav.js and add the corresponding <Route> in assets/main.js.

​
NavLink active state

Each route is rendered as a React Router NavLink. When the link’s path matches the current URL, the following classes are applied to produce the “selected file” look: 
bevel-button py-2 px-3 font-pixel text-xl text-left transition-colors
bg-y2k-panelDark text-y2k-cyan border-y2k-cyan shadow-[inset_2px_2px_0_rgba(0,0,0,0.8)]
Inactive links use text-y2k-text hover:text-y2k-magenta. The transition creates a clear visual indicator of the current page without any JavaScript state.

​
Avatar and header section

At the top of the sidebar, FrameNav renders:
  1. Avatar image — a square portrait fetched from a hardcoded Unsplash URL (https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=200&h=200&auto=format&fit=crop), displayed at w-24 h-24 with imageRendering: "pixelated" and inside a border-2 border-y2k-cyan frame.
  2. SYS_ADMIN heading — rendered in font-pixel text-2xl text-y2k-magenta animate-chromatic. The animate-chromatic animation applies a shifting RGB text-shadow to produce a chromatic aberration glitch effect.
  3. Status: ONLINE line — rendered in text-xs text-y2k-lime font-mono animate-blink. The animate-blink class makes the status line pulse at a 1-second interval, mimicking a classic BBS terminal.
{/* Conceptual representation of the header section */}
<div className="text-center mb-4">
  <div className="inline-block border-2 border-y2k-cyan p-1 bg-black mb-2">
    <img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=200&h=200&auto=format&fit=crop" alt="Avatar" className="w-24 h-24 object-cover pixelated" />
  </div>
  <h2 className="font-pixel text-2xl text-y2k-magenta animate-chromatic">
    SYS_ADMIN
  </h2>
  <div className="text-xs text-y2k-lime font-mono animate-blink">Status: ONLINE</div>
</div>

​
Footer

The bottom of the sidebar shows a small version/resolution note rendered in two lines: 
v2.0.24
Best viewed in 800x600
This text is rendered in text-xs text-y2k-textMuted text-center font-mono and serves as a nostalgic nod to the era when personal homepages included browser-compatibility warnings.
FrameNav does not manage its own open/close state. On mobile breakpoints, the layout is handled by the parent flex container in assets/main.js. If you need a collapsible drawer version, wrap FrameNav in a state-controlled container and toggle its visibility externally.
The animate-chromatic and animate-blink keyframe animations are defined in assets/main.css via @keyframes. If you port FrameNav to another project, make sure to copy those keyframe definitions as well.

Build docs developers (and LLMs) love

Get started for freeTalk to us