Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/neon-retro-web/llms.txt

Use this file to discover all available pages before exploring further.

The Writing page (/writing) is styled as “THE ZINE ARCHIVE” — a curated collection of technical essays and developer ramblings formatted in three distinctly retro presentation layers. A Geocities-style black panel with a stardust background texture leads with the flagship article Why Semantic HTML Still Matters flanked by a navigation sidebar and a dancing-baby GIF. A white-background forum-style DevLog follows with two inline comments. Finally, a terminal <pre> block renders an ASCII art essay titled THE ART OF DEBUGGING in teal monospace on black. The page fades in as a motion.div at max-w-5xl with space-y-12 vertical rhythm.

​
Page Structure

// Writing page component (minified identifier: im)
const WritingPage = () => (
  <motion.div
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    exit={{ opacity: 0 }}
    className="max-w-5xl mx-auto space-y-12 pb-16"
  >
    {/* Section header */}
    <div className="flex items-center gap-4 mb-8 border-b-4 border-double border-y2k-magenta pb-4">
      <PenLineIcon className="w-10 h-10 text-y2k-magenta" />
      <div>
        <h2 className="font-display text-4xl text-white">THE ZINE ARCHIVE</h2>
        <p className="font-code text-sm text-y2k-teal">
          Thoughts, bug reports, and technical ramblings.
        </p>
      </div>
    </div>

    {/* Post 1: Geocities-style panel */}
    <div className="bg-black border-4 border-y2k-lime p-1 relative overflow-hidden">
      {/* Stardust texture overlay + sidebar nav + article body */}
    </div>

    {/* Post 2: Forum DevLog with comments */}
    <div className="bg-white text-black font-serif border border-gray-300 shadow-lg max-w-3xl mx-auto">
      {/* #4a6b82 header + post body + 2 comments */}
    </div>

    {/* Post 3: Terminal ASCII art essay */}
    <div className="bg-black border border-y2k-teal p-6 font-code text-y2k-teal">
      <pre>
        {/* THE ART OF DEBUGGING — ASCII art + essay */}
      </pre>
    </div>
  </motion.div>
);

​
Post Breakdown

​
Post 1 — Geocities Panel: “Why Semantic HTML Still Matters”

The outer container is a bg-black border-4 border-y2k-lime div with a stardust texture overlay at 30 % opacity. Inside, a flex row splits into:
  • Left sidebar (48-wide, border-r-2 border-dashed border-y2k-lime): A blinking ~*~ MENU ~*~ heading in y2k-lime, a nav list (Home, Web Rings, Guestbook, My MIDI Collection), and a dancing baby GIF from Giphy.
  • Right article body: Two flame Heart icons flank the headline. Below, a Published: 10/24/2023 | Category: Front-End dateline. Three body paragraphs discuss <div> vs <button>, the benefits of semantic HTML, and the free accessibility you get from it. A READ FULL ARTICLE > lime button closes the section.
// Geocities panel structure
<div className="bg-black border-4 border-y2k-lime p-1 relative overflow-hidden">
  <div className="absolute inset-0 bg-[url('...')] opacity-30" />
  <div className="bg-black/80 relative z-10 p-6 flex flex-col md:flex-row gap-6">
    {/* Sidebar */}
    <div className="md:w-48 shrink-0 border-r-2 border-dashed border-y2k-lime pr-4">
      <h3 className="font-display text-2xl text-y2k-lime text-center mb-4 blink">
        ~*~ MENU ~*~
      </h3>
      <ul className="space-y-2 font-code text-xs text-y2k-turquoise">
        <li>Home</li>
        <li>Web Rings</li>
        <li>Guestbook</li>
        <li>My MIDI Collection</li>
      </ul>
      <img src="https://media.giphy.com/media/11ISwbgCxEzMyY/giphy.gif" alt="Dancing Baby" />
    </div>
    {/* Article */}
    <div className="flex-1 font-body">{/* ... */}</div>
  </div>
</div>

​
Post 2 — Forum DevLog: “The Great Migration”

A white-background font-serif blog post styled after mid-2000s forum/blog software. Header bar is bg-[#4a6b82] with white text. Post date: Tuesday, March 12th, posted by Admin. Post body covers migrating a 1,500-line class-component monolith to functional components and hooks, resulting in a 40 % load time improvement. Two inline comments follow in bg-gray-100 boxes:
Comment AuthorTimeComment
CodeNinja99March 12, 4:15 PM”Only 1,500 lines? Those are rookie numbers. I once saw a jQuery file that was 10k lines long.”
AdminMarch 12, 4:45 PM”@CodeNinja99 Please add a trigger warning before mentioning 10k line jQuery files next time. 😱“

​
Post 3 — ASCII Art Terminal Essay: “THE ART OF DEBUGGING”

A bg-black border border-y2k-teal container holds a <pre> block with font-code text-y2k-teal styling. The content is an ASCII art title header followed by an essay on debugging philosophy. This is the only place in the portfolio where a raw <pre> block is used.

​
Customising This Page

This is a pre-built static site. The repository contains only compiled output — there is no src/ directory or editable source files. The customisation steps below describe changes that must be made in the original source project before rebuilding.
1

Edit the Geocities article

In your source project, find the flex-1 font-body article div inside the bg-black border-4 border-y2k-lime panel. The headline is in <h2 className="font-display text-3xl text-white text-glow-magenta">. The dateline is a <p className="text-xs text-y2k-lime font-code mb-4">. Replace headline, dateline, and the three body <p> tags with your own article content.
2

Add a new Geocities article

In the source project, the Geocities panel is self-contained. Duplicate the entire bg-black border-4 border-y2k-lime div and place it below the existing one within the space-y-12 container. Update the headline, dateline, body text, and the category on the dateline string.
3

Update the DevLog post

In the source project, locate the bg-white text-black font-serif post container. Edit the bg-[#4a6b82] header <h1> and <p> (date) tags. Replace the three body <p> tags. Scroll to the Comments (2) section and update the username, timestamp, and text of each comment <div>. Change Comments (2) count if you add/remove comment blocks.
4

Update the ASCII art essay

In the source project, the <pre> block inside the bg-black border border-y2k-teal terminal container is a raw string. Replace the contents with any ASCII art or plain-text essay. Make sure newlines are preserved — the <pre> tag handles whitespace as-is.
5

Change the sidebar menu items

In the source project, the four <li> items in the Geocities sidebar (Home, Web Rings, Guestbook, My MIDI Collection) are decoration-only with no href. Replace them with actual section links or leave them as retro flavour text. To make them functional, wrap each in <Link to="..."> from React Router.
6

Swap the dancing baby GIF

In the source project, the Giphy dancing baby (https://media.giphy.com/media/11ISwbgCxEzMyY/giphy.gif) is the sidebar’s mascot. Replace the src with any GIF URL. Keep dimensions at w-16 h-16 for the sidebar to stay proportional.
The blink class on the ~*~ MENU ~*~ sidebar heading is a custom CSS animation defined in assets/main.css. It is not a standard Tailwind utility. Do not remove it if you want the blinking effect to work — the class name must match exactly.
The Writing page is the most modular for expansion. Each post format (Geocities panel, forum post, terminal essay) is a completely independent <div> with no shared state. To add a new post type — say, a fake AIM chat transcript or a Geocities counter — simply append a new styled block inside the space-y-12 container in the source project and it will receive proper vertical spacing automatically.

Build docs developers (and LLMs) love

Get started for freeTalk to us