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 Home page is the entry point of the portfolio — a lovingly reconstructed Y2K personal homepage built in React. It immediately establishes the aesthetic with a chromatic-aberration pixel-art heading, a magenta marquee ticker, and a grid of retro WindowPanel widgets. Every element is deliberate: this page is both a functional developer portfolio and a love letter to the era of blinking text and tiled backgrounds.

​
What’s on this page

​
Heading & Ticker

The top section renders a large pixel-art <h1> with the animate-chromatic Tailwind class, which applies a CSS RGB-channel split animation to simulate chromatic aberration — a signature Y2K glitch effect. Directly below the heading is a full-width marquee ticker rendered in magenta. The ticker text scrolls continuously via the animate-ticker class and reads: 
*** LATEST UPDATES: JUST DEPLOYED NEW REACT APP 🚀 *** CURRENTLY LEARNING RUST 🦀
*** LOOKING FOR FRONTEND ROLES 💼 *** GUESTBOOK IS CURRENTLY DOWN FOR MAINTENANCE 🛠️ ***

<h1 className="font-pixel text-5xl md:text-7xl mb-4 animate-chromatic uppercase tracking-widest">
  Welcome to my Homepage
</h1>

<div className="w-full bg-y2k-magenta text-black font-mono text-sm py-1 overflow-hidden border-y-2 border-black relative flex items-center">
  <div className="whitespace-nowrap animate-ticker font-bold">
    *** LATEST UPDATES: JUST DEPLOYED NEW REACT APP 🚀 *** CURRENTLY LEARNING RUST 🦀
    *** LOOKING FOR FRONTEND ROLES 💼 *** GUESTBOOK IS CURRENTLY DOWN FOR MAINTENANCE 🛠️ ***
  </div>
</div>

​
about_me.txt — Bio Panel (cyan WindowPanel)

Occupies two-thirds of the main grid (md:col-span-2). Contains a bouncing pixel-art SVG avatar icon alongside three paragraphs of bio text. Key design choices:
  • The words weird, expressive, and fun are highlighted in y2k-magenta, y2k-lime, and y2k-cyan respectively, reinforcing the color palette as a communication tool.
  • A blockquote near the bottom of the panel delivers the page’s thesis statement: “If a 1999 personal homepage grew up, learned React, and got a CS degree—this is what it would look like.”
  • A muted italic line at the very bottom reads: "> Warning: May contain traces of nested tables and spacer GIFs (just kidding, it's all CSS Grid now)."
<WindowPanel title="about_me.txt" titleBarColor="cyan">
  <div className="flex gap-4 items-start">
    {/* Pixel-art SVG avatar — bounces via animate-bounce */}
    <svg width="40" height="40" viewBox="0 0 40 40" className="pixel-art fill-y2k-cyan animate-bounce">
      <path d="M5 5 h25 l5 5 v25 h-30 z" fill="none" stroke="currentColor" strokeWidth="2" />
      <rect x="10" y="5" width="15" height="12" fill="currentColor" />
      <rect x="12" y="22" width="16" height="13" fill="none" stroke="currentColor" strokeWidth="2" />
    </svg>
    <div className="font-sans text-sm leading-relaxed space-y-4">
      <p>
        Hey there. I'm a developer who grew up on the wild west of the early internet...
        the web should be <span className="text-y2k-magenta font-bold"> weird</span>,
        <span className="text-y2k-lime font-bold"> expressive</span>, and
        <span className="text-y2k-cyan font-bold"> fun</span>.
      </p>
    </div>
  </div>
</WindowPanel>

​
Visitor Counter

The visitor counter is a self-contained animated component (C in the compiled bundle) placed in the right column above the status widget. It animates from 000000 to 000042 over approximately 2,100 ms using setInterval with a 50 ms tick. Each digit is rendered as an individual styled <div> to create a segmented LED display effect. 
function VisitorCounter() {
  const [count, setCount] = useState("000000");

  useEffect(() => {
    let current = 0;
    const target = 42;

    const interval = setInterval(() => {
      if (current < target) {
        current += 1;
        setCount(current.toString().padStart(6, "0"));
      } else {
        clearInterval(interval);
      }
    }, 50); // 42 ticks × 50ms = 2,100ms total

    return () => clearInterval(interval);
  }, []);

  return (
    <div className="flex items-center gap-2 bg-black p-2 border-2 border-y2k-panelDark shadow-[inset_2px_2px_0_rgba(0,0,0,0.8)]">
      <span className="font-pixel text-xl uppercase text-y2k-textMuted">Visitors:</span>
      <div className="flex gap-1">
        {count.split("").map((digit, i) => (
          <div
            key={i}
            className="bg-[#111] border border-[#333] px-1 py-0.5 font-pixel text-2xl text-y2k-lime"
          >
            {digit}
          </div>
        ))}
      </div>
    </div>
  );
}
The counter always starts at 000000 on every page load and increments to 000042. It is a visual gag — a deliberately fake visitor counter in the tradition of 1999 personal homepages.

​
status.ini — Status Widget (magenta WindowPanel)

A minimal <ul> rendered in monospace font, styled to look like a .ini config file. Key names are highlighted in y2k-lime.
KeyValue
LocationCyberia
MoodCaffeinated
ListeningDarude - Sandstorm.mid
EditorVS Code (Dark+ Y2K)
<WindowPanel title="status.ini" titleBarColor="magenta">
  <ul className="font-mono text-xs space-y-2 text-y2k-textMuted">
    <li><span className="text-y2k-lime">Location:</span> Cyberia</li>
    <li><span className="text-y2k-lime">Mood:</span> Caffeinated</li>
    <li><span className="text-y2k-lime">Listening:</span> Darude - Sandstorm.mid</li>
    <li><span className="text-y2k-lime">Editor:</span> VS Code (Dark+ Y2K)</li>
  </ul>
</WindowPanel>

​
Webring Footer

At the bottom of the page, a centered webring banner mimics the classic convention of linking personal sites together into a navigable ring. It contains << Prev and Next >> buttons flanking a label. 
<div className="inline-flex items-center gap-4 bg-y2k-panel p-2 border border-y2k-panelDark">
  <button className="text-xs font-mono hover:text-y2k-cyan">&lt;&lt; Prev</button>
  <div className="text-center">
    <div className="font-pixel text-sm text-y2k-orange">Part of the</div>
    <div className="font-pixel text-lg">Personal Dev Webring</div>
  </div>
  <button className="text-xs font-mono hover:text-y2k-cyan">Next &gt;&gt;</button>
</div>
A small caption below reads: "this page took 0.04s to load. RIP Internet Explorer." — a final retro-flavored easter egg in 10px monospace.
The webring section intentionally uses non-functional placeholder buttons. In a future version, these would link to other developer portfolio sites in a curated ring — a homage to the original webring concept from the late 1990s.

​
Layout Structure

The home page uses a responsive CSS Grid layout:
  • Mobile: Single-column stack — heading, ticker, bio panel, counter, status, webring.
  • Desktop (md:): Two-column grid — about_me.txt spans 2 columns; counter + status.ini stack in the remaining column.
The outer container is flex flex-col gap-8 max-w-4xl mx-auto h-full pb-12, ensuring proper scroll padding at the bottom.

Build docs developers (and LLMs) love

Get started for freeTalk to us