Skip to main content

Documentation Index

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

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

The Writing page (/writing) reframes a blog post listing as a military-style mission dossier board. The headline MISSION BRIEFINGS appears in GlitchText. A row of pill-shaped filter tabs lets visitors narrow posts by category. When the ALL filter is active, a pinned featured post appears at the top — PINNED MISSION — before the standard card grid. Each post is styled differently according to its category type, giving each article its own material metaphor: a terminal printout, a polaroid photograph, a floppy disk label, or a parchment quest scroll.

​
Filter Tab System

Five filter tabs are defined as an array: 
const filters = [
  "ALL",
  "Technical Manuals",
  "Bug Reports",
  "Reflections",
  "Translated Briefings",
];
Each tab renders as a button. The active tab receives a highlighted border and background; inactive tabs use subdued colours. Clicking a tab sets a React state value (activeFilter) which filters the post array via Array.filter(post => post.type === activeFilter). Selecting ALL skips the filter and also unmasks the pinned post.

​
Pinned Post

The pinned/featured post is rendered outside the standard grid, visible only when activeFilter === "ALL". It displays a pulsing PINNED MISSION badge. The card uses a two-column flex layout with:
  • A thumbnail panel: a blurred background image with a Cpu icon centred
  • A copy panel with the title, excerpt, and READ MANUAL → button
Pinned post content:
  • Title: The Architecture of Fun
  • Excerpt: Why enterprise software needs to steal more ideas from video games to improve user retention and reduce burnout.
  • CTA: READ MANUAL →

​
Post Card Data

The four non-pinned posts in the source are:
IDTitleTypeDate
1Why I Stopped Centering Divs and Started LivingReflections2026-04-12
2CRITICAL ERROR: State Management in 2026Bug Reports2026-03-28
3Building the Glitch ArcadeTechnical Manuals2026-05-15
4Understanding WebGL for MortalsTranslated Briefings2026-02-10
const posts = [
  {
    id: 1,
    title: "Why I Stopped Centering Divs and Started Living",
    type: "Reflections",
    date: "2026-04-12",
    excerpt: "A philosophical journey into modern CSS layout techniques and the mental toll of vertical alignment.",
    style: "polaroid",
  },
  {
    id: 2,
    title: "CRITICAL ERROR: State Management in 2026",
    type: "Bug Reports",
    date: "2026-03-28",
    excerpt: "Analyzing the fallout of the great Redux vs Zustand war and how to survive the aftermath.",
    style: "terminal",
  },
  {
    id: 3,
    title: "Building the Glitch Arcade",
    type: "Technical Manuals",
    date: "2026-05-15",
    excerpt: "A deep dive into the Framer Motion and CSS tricks used to build this exact portfolio.",
    style: "floppy",
  },
  {
    id: 4,
    title: "Understanding WebGL for Mortals",
    type: "Translated Briefings",
    date: "2026-02-10",
    excerpt: "Translating the arcane mathematics of shaders into plain English.",
    style: "quest",
  },
];

​
Card Style Variants

A helper function returns a class string based on the style field. All variants share a base of padding, flex column layout, full height, and a hover lift transition:

terminal

Dark background with neon-green border and text in the HUD font. Green glow shadow applied. Used for: Bug Reports — evokes a command-line crash log.

polaroid

White background, black text, extra bottom padding, and a slight clockwise tilt that straightens on hover. Used for: Reflections — evokes a personal snapshot.

floppy

Dark blue background with a thick grey top border and white text. Used for: Technical Manuals — evokes a 3.5″ floppy disk label.

quest

Dark parchment background with a gold border and aged-paper text colour in a serif font. Used for: Translated Briefings — evokes a fantasy quest scroll.
If no matching style is found, the default variant uses the standard arcade-navy pixel-bordered card style.

​
Card Anatomy

Each post card is a motion.div that enters at opacity: 0, y: 20 and animates to opacity: 1, y: 0 with a stagger delay of index * 0.1s. Inside each card:
  1. Header row — a category icon chip and the date string right-aligned
  2. Title — in the pixel font
  3. Excerpt — body text at reduced opacity
  4. Footer row — category label left and an arrow right that translates on group hover

​
Customisation

1

Add a new post

Append an object to the posts array with id, title, type (must match a filter string), date, excerpt, and style (one of terminal/polaroid/floppy/quest).
2

Add a new category

Add the category string to the filters array and set the type field on any posts that belong to it. The filter button is auto-generated from the array.
3

Add a new card style

Add a new case to the getCardStyle switch statement returning your desired class string. Set style to that new key on any posts that should use it.
4

Update the pinned post

The pinned post title, excerpt, and CTA are hardcoded JSX inside the activeFilter === "ALL" block. Edit them directly in the source to change the featured article.
The Writing page does not currently implement pagination or external MDX loading. All post content is defined inline in the posts array. Connecting to a CMS or MDX file system would require replacing the array with a data-fetch call and routing to individual post pages.

Build docs developers (and LLMs) love

Get started for freeTalk to us