Skip to main content

Documentation Index

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

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

The Blog page presents writing as an early-2000s personal journal. Each entry is a self-contained card with a pixel-art avatar, a teal Win98-style title bar showing the post name and date, and a dashed metadata block at the bottom that records the author’s current mood and the song they were listening to when they wrote it. The FileText and BookOpen Lucide icons are associated with this section.

​
Purpose

This section is where the portfolio owner shares thoughts, tutorials, rants, or retrospectives. Styled as a retro journal rather than a modern blog, it reinforces the site’s Y2K personality. The “Currently Listening” and “Current Mood” metadata fields are both a period-accurate detail and a warm, personal touch that differentiates the page from a generic content list.

​
Layout and Structure

The page uses a max-w-3xl mx-auto space-y-10 single-column layout — deliberately narrow to feel like a personal journal rather than a content hub. A centred heading block at the top reads "My Online Journal" with an italic subheading: "Thoughts, rants, and code snippets." Each blog entry card is a bg-white border border-gray-300 shadow-md box with three zones:
  1. Title bar: bg-win-teal text-white strip containing the post title (font-bold text-lg) and timestamp (font-courier text-xs), styled to look exactly like a Win98Window title bar.
  2. Body area: A horizontal flex layout with a hidden-on-mobile avatar column on the left (pixel-art generated avatar + username "WebDev99" in text-win-blue) and the post content on the right in font-times text-sm leading-relaxed.
  3. Metadata footer: A bg-gray-100 border border-dashed block showing “Current Mood:” and “Currently Listening:” values, followed by a "Read More..." link in text-win-blue font-bold aligned right.
Below the entries, a win98-button reads "Older Entries >>".
The blog entry data array is declared as a module-level constant. The default dataset contains three entries. There is no CMS or API; all posts are defined in source code.

​
Blog Entry Data Structure

{
  id: 1,
  date: "October 24, 2002 @ 11:45 PM",
  title: "Just discovered CSS",
  mood: "🤯 Mind Blown",
  music: "Linkin Park - In The End",
  content: "Okay guys, you have to check this out..."
}
The three default entries are:
idTitleDateMoodMusic
1Just discovered CSSOctober 24, 2002 @ 11:45 PM🤯 Mind BlownLinkin Park - In The End
2Late night coding sessionSeptember 15, 2002 @ 02:10 AM😴 Sleepy but determinedEiffel 65 - Blue (Da Ba Dee)
3New layout!!!August 01, 2002 @ 04:20 PM😎 CoolSmash Mouth - All Star

​
How to Customize

1

Add new journal entries

Append objects to the blog data array, following the data structure above. Each entry needs a unique id (used as the React key and for the avatar seed URL), a date string, title, mood, music, and content. The date is rendered verbatim — use any format you like.
2

Change the avatar service

Avatars are generated from https://api.dicebear.com/7.x/pixel-art/svg?seed=${entry.id}. Swap the seed to a username string for a consistent per-author avatar, or point the src at a static image in public/ to use a real photo.
3

Replace the username label

The hardcoded "WebDev99" username below each avatar is a plain string. Replace it with your actual handle, or make it a per-entry field if you want multiple author voices.
4

Link Read More to full post pages

Currently the "Read More..." link points to "#". Replace it with a hash route (e.g. "#/blog/1") and add a matching route in the router config to render a full-post view.
The "Comments closed since 2003 lol" footer note is a static string in each card’s footer. It is part of the joke, but you can replace it with a real comment count or a link to a comments section if you wire up a backend.

Build docs developers (and LLMs) love

Get started for freeTalk to us