Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/neon-retro-sys-admin/llms.txt
Use this file to discover all available pages before exploring further.
The Writing page presents the blog archive as a vertical timeline — a format that reinforces the chronological nature of posts while giving each entry room to breathe. The metadata bar below each title captures the kind of context (mood, music) that makes a personal dev blog feel genuinely human rather than corporate. The square marker bullets that straddle the timeline’s left border add a tactile, retro-bulletin-board quality to the reading experience.
Route
Declared in the router as:
<Route path="writing" element={<WritingPage />} />
h1 styled as a terminal log filename, underlined with a 4px bottom border in magenta:
<h1 className="text-4xl font-display text-white mb-8 border-b-4 border-y2k-magenta inline-block pb-2">
BLOG_ARCHIVE.log
</h1>
Timeline Layout
The archive list is a space-y-12 container. Each post renders as an <article> with:
- A left border line:
border-l-2 border-y2k-gray
- Left padding:
pl-6
- A group hover applied to the entire article:
group
Diamond Bullet Marker
Each article gets a square bullet absolutely positioned on the timeline border:
<div className="absolute -left-[9px] top-0 w-4 h-4 bg-y2k-black border-2 border-y2k-magenta group-hover:bg-y2k-magenta transition-colors" />
w-4 h-4 square offset -left-[9px] to straddle the border line. On hover (group-hover) the background fills solid magenta, creating a highlighted marker effect.
Post Card Structure
Each post card contains four sections.
1. Title
<h2 className="text-2xl font-display text-y2k-cyan group-hover:text-white transition-colors cursor-pointer">
{post.title}
</h2>
text-y2k-cyan and transitions to white on hover at the article group level.
<div className="flex flex-wrap gap-4 font-mono text-xs text-gray-500 bg-y2k-lightgray/30 p-2 border border-y2k-gray">
<div className="flex items-center gap-1">
<Clock size={12} /> {post.date}
</div>
<div className="flex items-center gap-1">
<span className="text-y2k-lime">Mood:</span> {post.mood}
</div>
<div className="flex items-center gap-1">
<Headphones size={12} className="text-y2k-purple" /> {post.music}
</div>
</div>
Mood: label uses text-y2k-lime to stand out from the rest of the gray text. The Headphones icon in purple precedes the currently-playing track.
3. Excerpt Paragraph
<p className="font-sans text-gray-300 leading-relaxed mb-4">{post.excerpt}</p>
<div className="flex items-center justify-between">
<div className="flex gap-2">
{post.tags.map(tag => (
<span key={tag} className="flex items-center text-xs font-mono text-y2k-magenta bg-y2k-magenta/10 px-2 py-1">
<Hash size={10} /> {tag}
</span>
))}
</div>
<button className="font-mono text-sm text-white hover:text-y2k-cyan hover:underline">
[READ_MORE]
</button>
</div>
<Hash> Lucide icon (10px) inline before the tag text. The pill background is a 10% magenta tint. The [READ_MORE] button is right-aligned and turns cyan with underline on hover.
Blog Posts
All three posts are defined in data/mockData.js and exported as the blogPosts array.
Post 1 — From IV Drips to API Trips
| Field | Value |
|---|
| Date | 2026-04-12 |
| Mood | Caffeinated |
| Music | Darude - Sandstorm |
| Tags | Reflections, Career Transition |
Post 2 — Why I Built a Button That Hates You
| Field | Value |
|---|
| Date | 2026-02-28 |
| Mood | Chaotic Evil |
| Music | Mindless Self Indulgence |
| Tags | Project Writeups, CSS |
Post 3 — The Great Webpack Migration of ‘25
| Field | Value |
|---|
| Date | 2025-11-15 |
| Mood | Exhausted |
| Music | Lo-Fi Beats to Cry To |
| Tags | Bug Reports, Build Tools |
Data Structure
Each post object in data/mockData.js:
{
id: 'post-1',
title: 'From IV Drips to API Trips',
date: '2026-04-12',
mood: 'Caffeinated',
music: 'Darude - Sandstorm',
tags: ['Reflections', 'Career Transition'],
excerpt: 'How triaging patients in the ER surprisingly prepared me for managing state...',
}
Adding a New Post
Prepend a new object to the beginning of the blogPosts array so it appears at the top of the timeline (most recent first):
{
id: 'post-4',
title: 'Six Months of TypeScript: A Love Letter and a Restraining Order',
date: '2026-06-10',
mood: 'Conflicted',
music: 'Evanescence - Bring Me To Life',
tags: ['TypeScript', 'Reflections'],
excerpt: 'TypeScript caught three bugs before I even finished typing the function signature. It also refused to compile for 45 minutes over a missing semicolon. We have a complex relationship.',
}
Notes
[READ_MORE] links are not yet connected to full post pages. The button currently has no href or onClick handler. To add full post pages, create a /writing/:slug route, pass the post id as the slug, and fetch post content from a CMS, MDX files, or an extended data object. Update [READ_MORE] to a <Link to={/writing/${post.id}}> once those routes exist.