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.

neocities-dev is a personal developer portfolio website built as a single-page React application and deployed to Neocities static hosting. It leans fully into the Y2K / early-internet aesthetic: chunky bevel-border panels, chromatic-aberration glows, pixel-art fonts, and an operating-system-style navigation sidebar — all rendered in the browser with React, styled with a custom Tailwind theme, and bundled by Vite. The project exists to prove that a modern React toolchain and a lovingly retro visual design are not mutually exclusive.

​
Architecture

neocities-dev is built on four key technologies:
LayerTechnology
UI frameworkReact 18
Build toolVite
Client-side routingReact Router (hash mode)
StylingTailwind CSS (custom Y2K theme)

​
Hash-based routing

Neocities is a pure static file host — there is no server to rewrite URLs or return index.html for unknown paths. To support deep-linking without server configuration, the app uses hash-based routing: every route is prefixed with /#/ (e.g. /#/about, /#/projects). The browser never sends the fragment to the server, so every navigation stays within the single index.html entry point. The index.html entry point bootstraps this behaviour with a small inline script: 
window.__STATIC_PAGE_ROUTE__ = "/";

(function () {
  if (!window.location.hash || window.location.hash === "#") {
    window.location.replace(
      window.location.pathname +
      window.location.search +
      "#/"
    );
  }
})();
This script sets a window.__STATIC_PAGE_ROUTE__ marker (used by the React bundle to know which static page shell loaded it) and redirects bare visits to the root hash #/ so React Router always has a valid hash to work with.

​
FakeBrowserChrome wrapper

The outermost shell of the app is a FakeBrowserChrome component that wraps the entire viewport in a mock browser window — styled to evoke Netscape Navigator, complete with a decorative address bar, nav toolbar buttons, and window-chrome controls. Inside it, a persistent FrameNav sidebar provides navigation, and individual page content is rendered into WindowPanel containers.
All page content is rendered client-side inside a single <div id="root"> element. The pages/ HTML shells (see Project Structure below) exist only so Neocities can serve each route URL directly without a 404.

​
Project Structure

neocities-dev/
├── index.html              # Root entry point; sets __STATIC_PAGE_ROUTE__ and bootstraps hash redirect
├── assets/
│   ├── main.js             # Compiled Vite bundle — all React app code lives here after build
│   └── main.css            # Compiled Tailwind output — includes Y2K theme tokens and utility classes
├── components/
│   ├── FakeBrowserChrome.js  # Outermost mock-browser wrapper (Netscape Navigator aesthetic)
│   ├── FrameNav.js           # Persistent left-sidebar navigation
│   ├── WindowPanel.js        # Reusable bevel-border content panel with title bar
│   ├── PixelButton.js        # Styled button with primary / secondary / accent variants
│   └── CustomCursor.js       # Replaces the default cursor with a pixel-art crosshair
├── pages/
│   ├── Home.html           # Static shell for /
│   ├── About.html          # Static shell for /about
│   ├── Projects.html       # Static shell for /projects
│   ├── Skills.html         # Static shell for /skills
│   ├── Writing.html        # Static shell for /writing
│   ├── CaseStudies.html    # Static shell for /case-studies
│   └── Contact.html        # Static shell for /contact
├── useScreenInit.js        # Shared React and ReactDOM module (preloaded by all pages)
└── canvas.manifest.js      # Canvas manifest entry point
Each file in pages/ is a minimal HTML document that loads the same assets/main.js bundle and sets its own window.__STATIC_PAGE_ROUTE__ value. This lets the React app know which route was requested even before it has parsed the URL hash.

​
Routes

All routes are served via hash fragments, making them fully compatible with static hosting.
RouteHash pathPurpose
Home/#/Landing page — hero section and intro
About/#/aboutPersonal bio and background (About_Me.txt)
Projects/#/projectsPortfolio of work (Projects.dir)
Skills/#/skillsTechnologies and tools (Skills.dat)
Writing/#/writingBlog posts and articles (Writing.log)
Case Studies/#/case-studiesIn-depth project breakdowns (Cases.doc)
Contact/#/contactContact form and links (Contact.msg)
The friendly file-extension labels in parentheses are the exact labels displayed in the FrameNav sidebar, reinforcing the Y2K OS aesthetic (e.g. Home.exe, About_Me.txt, Projects.dir).

​
Explore Further

Quickstart

Clone the repo and serve the pre-built static site locally or deploy it to Neocities in minutes.

Components

Explore WindowPanel, FrameNav, PixelButton, FakeBrowserChrome, and CustomCursor.

Styling & Theme

Y2K Tailwind tokens, fonts (VT323, Space Mono, Inter), and custom CSS utility classes.

Pages

How the static HTML shells in pages/ map to React Router routes.

Build docs developers (and LLMs) love

Get started for freeTalk to us