Writing Page: Journal, GeoCities, and Forum Blog Posts

The Writing page (/writing) is a blog post listing that deliberately avoids a uniform card design. Each post is rendered in one of three distinct retro visual styles — a dark journal entry, a garish GeoCities-inspired panel, or a Windows 98–style forum thread — giving the feed an eclectic, handcrafted feel. Every post also carries metadata fields for mood (as an emoji) and currently-playing music, reinforcing the personal-web aesthetic. A sidebar provides an archive breakdown by year and a tag cloud for browsing by category.

Layout structure

The page is a two-column layout on large screens: the main post list on the left (lg:col-span-3) and a sticky archive sidebar on the right (lg:col-span-1). On smaller screens, both columns stack vertically.

┌───────────────────────────────┬──────────────────┐
│  Post list                    │  Archive sidebar  │
│  (journal | geocities | forum)│  ─────────────── │
│  ─────────────────────────    │  2026 ............│
│  Post 1 (journal style)       │  2025 ............│
│  Post 2 (geocities style)     │  2024 ............│
│  Post 3 (forum style)         │                   │
│  ...                          │  Tags             │
└───────────────────────────────┴──────────────────┘

Post metadata fields

Every blog post object carries the following fields:

Field	Type	Example
`id`	`number`	`1`
`title`	`string`	`"Why I Still Use CSS Variables in 2026"`
`date`	`string`	`"10/24/2026"`
`style`	`"journal" \| "geocities" \| "forum"`	`"journal"`
`mood`	`string` (emoji + label)	`"caffeinated ☕"`
`music`	`string`	`"The Midnight - Sunset"`
`excerpt`	`string`	First 1–3 sentences of the post

The three post styles

Journal
GeoCities
Forum

The journal style evokes a personal diary or dev log. The card has a dark purple background and a thick left accent border in the site’s --purple color.Visual characteristics:

Background: bg-[#1a0f24] with border-l-4 border-[#a855f7]
Title: font-mono in text-[#e2e8f0]
Mood + music metadata line: small text-xs row in text-[#94a3b8]
Excerpt: font-sans text-[#c0c8d8], leading-relaxed

// Journal style post card (from assets/main.js)
<div className="bg-[#1a0f24] border-l-4 border-[#a855f7] p-6 shadow-lg">
  <div className="flex flex-wrap gap-4 font-mono text-xs text-[#94a3b8] mb-4 bg-black/50 p-2 rounded">
    <div className="flex items-center gap-1">{post.date}</div>
    <div className="flex items-center gap-1 text-[#a855f7]">
      Mood: {post.mood}
    </div>
    <div className="flex items-center gap-1 text-[#22d3ee]">
      {post.music}
    </div>
  </div>
  <h2 className="text-2xl font-bold mb-2 text-[#e2e8f0]">{post.title}</h2>
  <p className="font-sans leading-relaxed text-[#c0c8d8]">{post.excerpt}</p>
  <div className="mt-4 text-right">
    <button className="text-sm font-mono text-[#5eead4] hover:text-[#ff2bd6] hover:underline">
      [ Read More... ]
    </button>
  </div>
</div>

Sample post using this style: “Why I Still Use CSS Variables in 2026” — mood: caffeinated ☕, music: The Midnight - Sunset

The GeoCities style is deliberately loud and nostalgic, mimicking mid-90s personal homepages with tiled background patterns, ridge-style borders, and brightly colored text.Visual characteristics:

Background: tiled PNG pattern via bg-[url('data:image/png;base64,...')]
Border: border-4 border-ridge border-[#c0c8d8]
Title: font-display text-[#ff2bd6] bg-black inline-block px-2
Excerpt: text-white font-bold bg-black/80 p-2
Mood + music: inline row in font-mono text-xs text-[#94a3b8]

// GeoCities style post card (from assets/main.js)
<div className='bg-[url("data:image/png;base64,...")] border-4 border-ridge border-[#c0c8d8] p-6'>
  <h2 className="font-display text-[#ff2bd6] bg-black inline-block px-2 text-2xl font-bold mb-2">
    {post.title}
  </h2>
  <p className="font-sans leading-relaxed text-white font-bold bg-black/80 p-2">
    {post.excerpt}
  </p>
</div>

Sample post using this style: “Rebuilding the Webring for Modern React” — mood: nostalgic 📼, music: Boards of Canada - Dayvan Cowboy

The forum style mimics a classic Windows 98 / early-2000s bulletin board thread. It uses the .bevel-window class and renders a blue bg-[#000080] title bar identical to the <Win98Window> chrome, with the post body in a padded content area below.Visual characteristics:

Outer wrapper: bevel-window p-0
Title bar: bg-[#000080] text-white p-2 font-bold text-sm flex justify-between
Body: p-6 with font-sans leading-relaxed text-[#c0c8d8]
Mood + music: same font-mono text-xs metadata row as other styles

// Forum post style (from assets/main.js)
<div className="bevel-window p-0">
  <div className="bg-[#000080] text-white p-2 font-bold text-sm flex justify-between">
    <span>Thread: {post.title}</span>
    <span>Posted: {post.date}</span>
  </div>
  <div className="p-6">
    <div className="flex flex-wrap gap-4 font-mono text-xs text-[#94a3b8] mb-4 bg-black/50 p-2 rounded">
      <div className="flex items-center gap-1 text-[#a855f7]">
        Mood: {post.mood}
      </div>
      <div className="flex items-center gap-1 text-[#22d3ee]">
        {post.music}
      </div>
    </div>
    <p className="font-sans leading-relaxed text-[#c0c8d8]">
      {post.excerpt}
    </p>
  </div>
</div>

Sample post using this style: “Stop Over-Engineering Your State Management” — mood: frustrated 😤, music: DOOM Soundtrack

Archive sidebar

The sidebar uses two <div className="bevel-window p-4"> panels — one for the year archive and one for categories.

Year breakdown

A list of years with post counts, styled as a compact font-mono list. Clicking a year filters the post list to show only posts from that year.

.............. 12
.............. 8
.............. 15
Older...

// Archive year entry pattern
<ul className="font-mono text-sm space-y-2 text-[#94a3b8]">
  <li className="hover:text-[#ff2bd6] cursor-pointer flex items-center gap-2">
    <span className="text-[#a855f7]">►</span> 2026 (12)
  </li>
  <li className="hover:text-[#ff2bd6] cursor-pointer flex items-center gap-2">
    <span className="text-[#a855f7]">►</span> 2025 (8)
  </li>
</ul>

Category tags

Below the year list, a wrapping row of tag pills. Clicking a tag filters posts by that category. Current tags include React, CSS, Rants, Tutorials, and Life.

// Category tag pattern
<span className="px-2 py-1 bg-black border border-[#475569] text-xs font-mono text-[#e2e8f0] hover:border-[#22d3ee] cursor-pointer">
  React
</span>

Adding a blog post

Blog posts are defined in an array inside the Writing component in assets/main.js. To publish a new post, append an object to the array:

// In assets/main.js — posts data array
const posts = [
  {
    id: 1,
    title: "Why I Still Use CSS Variables in 2026",
    date: "10/24/2026",
    style: "journal",
    mood: "caffeinated ☕",
    music: "The Midnight - Sunset",
    excerpt: "Tailwind is great, but sometimes you just need the raw power...",
  },
  // Add your new post here:
  {
    id: 4,
    title: "My New Post Title",
    date: "11/01/2026",
    style: "forum",          // "journal" | "geocities" | "forum"
    mood: "focused 🎯",
    music: "Aphex Twin - Windowlicker",
    excerpt: "Opening paragraph of the post...",
  },
];

Customization

Change which posts use which style: Update the style field on any post object to "journal", "geocities", or "forum" to reassign its visual presentation. Add a new style variant: Add a new style string (e.g., "newspaper") to the style discriminator and add a new conditional rendering branch in the post map function in assets/main.js. Reorder the archive years: The sidebar year list is derived from the posts array. To add a year with zero posts to the archive, you can manually add it to a static archiveYears array defined in the component. Disable the mood/music metadata: Remove the metadata line (mood, music) from all three style renderers to create a cleaner listing.

Case Studies

Long-form project retrospectives with IRC-style process logs

About

Developer bio, quick facts, and interests grid

Home

Site entry point with marquee ticker and hero section

Contact

Contact form and retro guestbook

Overview

Pages & Features

Components

Customization

Writing Page: Journal, GeoCities, and Forum Blog Posts

Layout structure

Post metadata fields

The three post styles

Archive sidebar

Year breakdown

Category tags

Adding a blog post

Customization

Case Studies

About

Home

Contact

Build docs developers (and LLMs) love

Overview

Pages & Features

Components

Customization

Documentation Index

​Layout structure

​Post metadata fields

​The three post styles

​Archive sidebar

​Year breakdown

​Category tags

​Adding a blog post

​Customization

​Related pages

Case Studies

About

Home

Contact

Build docs developers (and LLMs) love

Layout structure

Post metadata fields

The three post styles

Archive sidebar

Year breakdown

Category tags

Adding a blog post

Customization

Related pages