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 around a coherent Y2K design language — the visual aesthetic of early-2000s personal web pages rendered through a modern React and Tailwind CSS stack. Every visual decision flows from four interlocking ideas: near-black backgrounds that make neon colors pop, pixel-art fonts that evoke CRT screens and floppy disks, inset bevel shadows that simulate the raised-plastic chrome of Windows 98 UI, and a tight neon palette of cyan, magenta, and lime that could have been pulled straight from a GeoCities banner.

​
Design Principles

​
Dark by default

The page background (bg-y2k-bg, #0B0B14) is a deep near-black navy. Panel surfaces step up slightly to bg-y2k-panel (#1A1A2E) and borders/dividers use bg-y2k-panelDark (#121220). This layered darkness gives the neon accent colors — cyan, magenta, lime — maximum perceived brightness without any extra glow or filter.

​
Pixel aesthetic

The font-pixel class maps to VT323, a Google Font that mimics the character ROM of vintage dot-matrix displays. Headings, navigation labels, and window title bars all use VT323. SVG icons rendered with the .pixel-art class add shape-rendering: crispEdges so they scale without anti-aliasing, preserving hard pixel edges at every viewport size.

​
Bevel chrome

Instead of modern drop-shadows or blurred cards, the site uses inset box-shadows to simulate the raised plastic feel of Win9x dialog boxes. The .bevel-window primitive applies a bright top-left inset highlight and a dark bottom-right inset shadow. .bevel-button does the same and inverts the shadows on :active so pressing the button looks physically depressed.

​
Retro color palette

Accent colors are intentionally over-saturated: #00E5FF (cyan), #FF00E5 (magenta), and #C6FF00 (lime) are the three primary neons. Secondary accents include #FF6B1A (orange) and #9D00FF (purple). All are defined as custom Tailwind color extensions so they are available as bg-*, text-*, and border-* utilities across the entire codebase.

​
Component Primitives

​
WindowPanel

WindowPanel is the reusable container component that wraps all major content sections. It applies the .bevel-window CSS class internally, giving every panel the same dark background, 2 px dark border, and inset shadow treatment. 
// Typical usage
<div className="bevel-window p-4">
  <p className="font-pixel text-y2k-cyan text-xl">SECTION TITLE</p>
  {/* content */}
</div>

​
PixelButton

PixelButton wraps interactive controls — navigation items, form submits, icon actions. It applies .bevel-button, a 75 ms color transition, and swaps the inset shadow direction on :active to produce a tactile press effect. On :active, the border also switches to border-y2k-cyan. 
// Typical usage
<button className="bevel-button px-3 py-1 font-pixel text-y2k-cyan text-sm uppercase tracking-widest">
  EXECUTE
</button>

​
Raw CSS classes

You can apply the bevel treatment directly with these two utility classes without importing any React component: 
/* Panel / card container */
.bevel-window {
  border: 2px solid #121220;           /* y2k-panelDark */
  background-color: #1A1A2E;           /* y2k-panel */
  box-shadow:
    inset  2px  2px rgba(255, 255, 255, 0.10),
    inset -2px -2px rgba(0, 0, 0, 0.60),
    4px 4px rgba(0, 0, 0, 0.80);
}

/* Interactive button */
.bevel-button {
  border: 2px solid transparent;
  background-color: #1A1A2E;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 75ms;
  box-shadow:
    inset  2px  2px rgba(255, 255, 255, 0.20),
    inset -2px -2px rgba(0, 0, 0, 0.60);
}
.bevel-button:active {
  border-color: #00E5FF;
  box-shadow:
    inset  2px  2px rgba(0, 0, 0, 0.60),
    inset -2px -2px rgba(255, 255, 255, 0.10);
}

​
Responsive Layout

The site uses two primary Tailwind breakpoints:
BreakpointMin-widthBehavior
md768 pxSidebar expands from collapsed mobile drawer to a fixed w-64 / w-80 column; main content switches from flex-col to flex-row; hero text scales to text-7xl.
lg1024 pxMulti-column grids expand from 3-column to 4-column layouts for project cards and skill badges.
Below md, all panels stack vertically, the navigation sidebar collapses, and padding tightens to p-2 / p-3 to keep content readable on narrow screens. The global layout wrapper uses max-w-6xl mx-auto so it never stretches beyond 72 rem on large displays.

​
Explore the Styling Guides

Colors

Full token table, semantic color roles, and opacity variant examples.

Typography

VT323, Space Mono, and Inter — font families, sizes, and loading details.

Animations

All six custom keyframe animations with durations, timings, and usage sites.

Build docs developers (and LLMs) love

Get started for freeTalk to us