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.

The neocities-dev portfolio is built on five handcrafted React components that deliver a cohesive Y2K aesthetic throughout the entire site. Each component is self-contained, composed using JSX and Tailwind CSS utility classes, and bundled directly into the main output by Vite — there is no separate component library to install.

WindowPanel

Retro OS-style panel with a gradient title bar, minimize / maximize / close chrome buttons, and a scrollable content area. Supports four title-bar colour themes.

FrameNav

Fixed sidebar navigation with avatar, blinking status indicator, and React Router NavLink entries for every page in the portfolio.

FakeBrowserChrome

Full-app wrapper that simulates a Netscape Navigator 4 browser window, complete with a navy-blue title bar, nav toolbar, and a static address-bar URL.

PixelButton

Bevel-styled pixel-font button with primary, secondary, and accent variants, active-state press animation, and support for all native <button> attributes.

CustomCursor

Replaces the system cursor with a pixel-art SVG arrow and a magenta particle trail that follows mouse movement across the entire viewport.

​
Architecture

All five components live in the components/ directory at the root of the repository. They are written as standard React functional components using JSX and are compiled into the main production bundle by Vite — there is no separate build step required. 
components/
├── WindowPanel.js
├── FrameNav.js
├── FakeBrowserChrome.js
├── PixelButton.js
└── CustomCursor.js
Each file is a pre-bundled ES module (the .js extension contains transpiled JSX). You can import them directly using their minified export aliases: 
import { W as WindowPanel }       from "./components/WindowPanel.js";
import { P as PixelButton }       from "./components/PixelButton.js";
import { C as CustomCursor }      from "./components/CustomCursor.js";
import { F as FakeBrowserChrome } from "./components/FakeBrowserChrome.js";
import { F as FrameNav }          from "./components/FrameNav.js";
The exported names are minified single-character aliases in the current build (W, P, C, F). Both FakeBrowserChrome.js and FrameNav.js export their component as F — use a local alias (e.g. FakeBrowserChrome and FrameNav) to disambiguate when importing both in the same file. If you refactor any component, update the corresponding import alias in assets/main.js as well.

​
Custom CSS Classes

Two utility classes are defined in assets/main.css and are shared by multiple components. They are not Tailwind utilities — they must be present in the stylesheet for the components to render correctly.
ClassUsed byPurpose
bevel-windowWindowPanel, FakeBrowserChromeApplies the classic inset/outset bevel border that mimics Win95/98 window chrome
bevel-buttonPixelButton, window control buttonsApplies a raised bevel border with an inverted inset shadow on :active
Both classes rely on box-shadow layering rather than border properties, so they compose cleanly with Tailwind border utilities without conflict.

Build docs developers (and LLMs) love

Get started for freeTalk to us