NeonRetro Sys_Admin: Y2K Portfolio React SPA Overview

NeonRetro Sys_Admin is a personal developer portfolio template that reimagines the browser as a late-1990s desktop operating system. Built with React 18 and React Router v6, it renders each section of your portfolio inside draggable RetroWindow components that look and feel like classic OS dialog boxes — complete with neon glow effects, scanline overlays, and pixelated Silkscreen typography. Every page transition is animated with Framer Motion, and all portfolio content — projects, skills, blog posts, and case studies — lives in a single file: data/mockData.js.

Key Features

Y2K Neon Aesthetic

A dark (#050505) base canvas with neon magenta, cyan, lime, and purple accent colors rendered via Tailwind CSS custom tokens. Fonts are sourced from Google Fonts: Silkscreen for headings, VT323 for monospaced terminal text, and Inter for body copy — replicating the visual language of early-2000s web design without sacrificing readability.

React Router v6 SPA

Seven client-side routes — Home, About, Projects, Skills, Writing, Case Studies, and Contact — are managed by React Router v6 with no full-page reloads. The Layout component wraps every route with shared navigation (RetroNav), a scrolling Marquee ticker, and a Footer, keeping chrome consistent across the entire site.

Draggable RetroWindow

The RetroWindow UI component is the core building block of every page. Each window renders with an OS-style title bar, three chrome buttons (minimize, maximize, and close), and optional Framer Motion drag behavior — so visitors can physically rearrange content on the screen just like moving windows on a classic desktop.

Framer Motion Animations

Page entries, window mounts, and interactive hover states are all driven by Framer Motion. Variants define consistent initial, animate, and exit states so that every transition feels deliberate rather than abrupt, matching the theatrical quality of the retro OS theme.

Tailwind CSS Custom Tokens

Tailwind CSS provides the utility foundation, extended with project-specific color tokens for each neon accent. The CursorTrail layout component adds a glowing particle trail that follows the mouse pointer, automatically disabled for users who have enabled the prefers-reduced-motion media query.

Centralized mockData.js

All portfolio content — project entries, skill levels, blog posts, case studies, and guestbook messages — is declared in data/mockData.js as plain JavaScript arrays. Updating your portfolio never requires touching a component: edit one file and every page that consumes that data re-renders automatically.

Tech Stack

Technology	Version	Role
React	18	UI component library and rendering engine
React Router	v6	Client-side routing across all seven pages
Framer Motion	latest	Page transitions, drag behavior, and micro-animations
Tailwind CSS	latest	Utility-first styling with custom neon color tokens
Lucide React	latest	Icon set used for project and navigation icons
Vite	latest	Development server and production bundler

Theme Tokens

All neon accent colors are defined as Tailwind CSS custom tokens and used consistently across every component. The tokens map to the following hex values:

Token	Hex value	Usage
`y2k-black`	`#050505`	Page background and window body fill
`y2k-gray`	`#1a1a1a`	Borders, nav dividers, and muted surfaces
`y2k-magenta`	`#ff00ff`	Primary accent — Home nav item, alerts, cursor trail
`y2k-cyan`	`#00ffff`	Secondary accent — About nav item, stable indicators
`y2k-lime`	`#39ff14`	Tertiary accent — Projects nav item, Marquee text
`y2k-purple`	`#8a2be2`	Quaternary accent — Skills nav item, tag highlights

Component API

RetroWindow

The RetroWindow component wraps any content in a Y2K-style OS window chrome with a colored title bar and three chrome buttons.

import { RetroWindow } from './components/ui/RetroWindow';

<RetroWindow
  title="MY_PROJECTS.zip"
  color="cyan"
  draggable={true}
  onClose={() => setOpen(false)}
>
  <p>Window content goes here.</p>
</RetroWindow>

Prop	Type	Default	Description
`title`	`string`	—	Text shown in the window’s title bar
`color`	`"magenta" \| "cyan" \| "lime" \| "purple"`	`"magenta"`	Controls the title bar fill and border/shadow accent color
`draggable`	`boolean`	`false`	When `true`, wraps the window in a Framer Motion `motion.div` that can be dragged freely within the viewport
`onClose`	`() => void`	—	Callback fired when the close (×) button is clicked
`className`	`string`	`""`	Additional Tailwind classes appended to the outer wrapper
`children`	`ReactNode`	—	Content rendered inside the scrollable window body

Sticker

The Sticker component renders a decorative label badge with a slight rotation, a colored border, and a Framer Motion hover animation.

import { Sticker } from './components/ui/Sticker';

<Sticker color="lime" rotation={-8}>
  OPEN SOURCE
</Sticker>

Prop	Type	Default	Description
`children`	`ReactNode`	—	Text or elements displayed inside the sticker
`rotation`	`number`	`-5`	Initial rotation in degrees; hover animation adds 5° on top of this value
`color`	`"white" \| "magenta" \| "cyan" \| "lime"`	`"white"`	Sets the badge background, border, and text color
`className`	`string`	`""`	Additional Tailwind classes appended to the sticker element

Marquee

The Marquee component renders a full-width scrolling ticker bar. Hovering the ticker pauses the animation.

import { Marquee } from './components/layout/Marquee';

<Marquee text="*** WELCOME TO MY PORTFOLIO *** CURRENTLY: SHIPPING ***" />

Prop	Type	Default	Description
`text`	`string`	—	The string to repeat and scroll continuously across the ticker
`className`	`string`	`""`	Additional Tailwind classes appended to the outer container

CursorTrail

CursorTrail is a layout-level component that renders a glowing neon particle trail following the mouse pointer. It renders null automatically when the user’s OS has prefers-reduced-motion: reduce enabled. No props are required.

import { CursorTrail } from './components/layout/CursorTrail';

// Place once, near the top of your layout tree
<CursorTrail />

RetroNav

RetroNav renders the sticky top navigation bar with links to all seven routes. Each link displays a Lucide icon and a filename-style label (e.g. PROJECTS.zip), highlighted in its accent color when the route is active. No props are required.

import { RetroNav } from './components/layout/RetroNav';

<RetroNav />

Layout

Layout is the root shell component that composes CursorTrail, RetroNav, Marquee, an <Outlet /> for the active route, and Footer into a full-page stack. Wrap your router with Layout to apply the shared chrome to every page automatically.

import { Layout } from './components/layout/Layout';

// Used as the element of your root route in React Router v6
<Route element={<Layout />}>
  {/* child routes */}
</Route>

Project Structure

The repository is organized into four top-level source directories, each with a distinct responsibility:

neon-retro-sys-admin/
├── assets/          # Compiled CSS (main.css) and bundled JS output from Vite
├── components/
│   ├── layout/      # RetroNav, Footer, Layout, Marquee, CursorTrail
│   └── ui/          # RetroWindow, Sticker
├── data/
│   └── mockData.js  # All portfolio content: projects, skills, posts, case studies
└── pages/           # Static HTML output produced by Vite for each route

components/layout/ contains the structural shell of every page: Layout.js composes RetroNav, Marquee, and Footer around the active route’s content, while CursorTrail.js layers the neon cursor effect globally. components/ui/ holds the two reusable presentational primitives: RetroWindow.js (the draggable OS-window chrome) and Sticker.js (decorative badge elements placed around the canvas). pages/ contains the static HTML files generated by Vite’s production build, one per route.

All portfolio content — including project entries, per-skill proficiency levels, blog post excerpts, case study writeups, and guestbook messages — is stored exclusively in data/mockData.js. To personalize the portfolio, you only ever need to edit that one file. No component code needs to change.

Overview

Architecture

Components

Pages

Data & Customization

NeonRetro Sys_Admin: Y2K Portfolio React SPA Overview

Key Features

Y2K Neon Aesthetic

React Router v6 SPA

Draggable RetroWindow

Framer Motion Animations

Tailwind CSS Custom Tokens

Centralized mockData.js

Tech Stack

Theme Tokens

Component API

RetroWindow

Sticker

Marquee

CursorTrail

RetroNav

Layout

Project Structure

Build docs developers (and LLMs) love

Overview

Architecture

Components

Pages

Data & Customization

Documentation Index

​Key Features

Y2K Neon Aesthetic

React Router v6 SPA

Draggable RetroWindow

Framer Motion Animations

Tailwind CSS Custom Tokens

Centralized mockData.js

​Tech Stack

​Theme Tokens

​Component API

​RetroWindow

​Sticker

​Marquee

​CursorTrail

​RetroNav

​Layout

​Project Structure

Build docs developers (and LLMs) love

Key Features

Tech Stack

Theme Tokens

Component API

RetroWindow

Sticker

Marquee

CursorTrail

RetroNav

Layout

Project Structure