Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/dev-mode-arcade/llms.txt

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

The Writing page brings the developer’s blog posts and articles to life as a shelf of vintage instruction manuals. Each article is styled as a physical booklet — a light lavender paper background, monospace chapter numbering, a color-coded type badge (REFLECTION, TECHNICAL, or BUG REPORT), a title, excerpt, and publication date. Hovering over a manual triggers a Framer Motion animation that lifts the card upward and applies a slight rotation, mimicking picking a book off a shelf. All article data is sourced from the articles array in data/mockData.js.

​
Route

PropertyValue
Path/writing
File (compiled)assets/main.js — WritingPage component
Data exportarticles (exported as a from mockData.js)
Theme colors#e0d8e8 (card paper) · arcade-purple · arcade-lime
Screen titleINSTRUCTION MANUALS

​
What It Displays

The page renders a grid of article cards. Each card represents one article and uses a light lavender paper texture (bg-[#e0d8e8]) to contrast with the dark arcade background. The grid is single-column on mobile and multi-column on wider viewports.

​
Article Card Anatomy

ElementDescription
Chapter numberCHAPTER XX in dim monospace at the top of the card
Type badgeColored pill showing REFLECTION, TECHNICAL, or BUG REPORT
TitleBold display text in dark ink against the paper background
ExcerptShort preview paragraph in body text
DatePublication date in Mon YYYY format, bottom-right of the card

​
Current Articles

Three articles are included in the default dataset:
ChapterTitleTypeDate
01The State Management DilemmaREFLECTIONOct 2025
02CSS Grid: A Boss GuideTECHNICALAug 2025
03Memory Leak in Sector 7BUG REPORTMay 2025

​
Animations

Cards use Framer Motion’s whileHover to produce a shelf-lift effect. On hover, each card translates upward by 8 px and rotates slightly to 1 deg, then returns on mouse-leave. 
// Approximate whileHover variant on each article card
const manualHoverVariants = {
  rest: { y: 0, rotate: 0 },
  hover: {
    y: -8,
    rotate: 1,
    transition: { duration: 0.2, ease: "easeOut" },
  },
};
The paper background color (#e0d8e8) is applied as an inline Tailwind arbitrary value (bg-[#e0d8e8]). It is intentionally light to simulate aged paper and contrast with the dark arcade background behind the cards. Changing it to a dark color will break the ink-on-paper legibility of the card text.

​
Data Schema

Each entry in the articles array must conform to the following shape: 
// data/mockData.js — article object shape
{
  id: string,      // Unique identifier, used as React key
  chapter: string, // Zero-padded chapter number string, e.g. "01"
  title: string,   // Article headline displayed on the manual cover
  type: string,    // Badge category — "REFLECTION" | "TECHNICAL" | "BUG REPORT"
  excerpt: string, // Short preview shown on the card face
  date: string,    // Publication date string, e.g. "Oct 2025"
}

​
Field Reference

FieldTypeDisplayed AsNotes
idstringNot displayedUsed as React list key
chapterstringCHAPTER <value> headingZero-padded two-digit string, e.g. "01"
titlestringManual title textKeep under 60 chars
typestringType badge (colored pill)Must match one of three valid values
excerptstringBody preview text1–2 sentences recommended
datestringBottom-right dateUse Mon YYYY format for consistency

​
Type Badge Colors

Badge ValueColor
REFLECTIONarcade-purple
TECHNICALarcade-lime
BUG REPORTarcade-magenta

​
Customization

Adding a new article Append a new object to the articles array in data/mockData.js. The type field controls the badge color. 
// data/mockData.js
export const a = [
  // ... existing entries
  {
    id: "art-4",
    chapter: "04",
    title: "Why I Stopped Writing CSS from Scratch",
    type: "REFLECTION",
    excerpt:
      "After three years of writing custom stylesheets, utility-first CSS finally clicked — here's what changed my mind.",
    date: "Dec 2025",
  },
];
Changing the type badge Update the type field to one of the three valid values: "REFLECTION", "TECHNICAL", or "BUG REPORT". The badge color updates automatically based on this value.
Article cards render best with excerpts of 20–40 words. Longer excerpts cause the card to grow taller than its neighbors in the grid, disrupting the “shelf of matching manuals” visual. Trim excerpts to a single punchy sentence for the cleanest layout.

​
Chapter Numbering

Chapter numbers come directly from the chapter field on each data object — they are not derived from the array index. Each entry in mockData.js carries its own chapter string (e.g. "01", "02", "03"). When adding a new article, set the chapter field to the next sequential zero-padded number.

​
Sample Data

// data/mockData.js (export a)
[
  {
    id: "art-1",
    chapter: "01",
    title: "The State Management Dilemma",
    type: "REFLECTION",
    date: "Oct 2025",
    excerpt: "Why I stopped worrying and learned to love simple React Context.",
  },
  {
    id: "art-2",
    chapter: "02",
    title: "CSS Grid: A Boss Guide",
    type: "TECHNICAL",
    date: "Aug 2025",
    excerpt: "Defeating complex layouts without relying on absolute positioning.",
  },
  {
    id: "art-3",
    chapter: "03",
    title: "Memory Leak in Sector 7",
    type: "BUG REPORT",
    date: "May 2025",
    excerpt: "Hunting down a rogue useEffect that was crashing the browser.",
  },
]

Case Studies

Long-form boss-fight replay format for deep project breakdowns.

Mock Data Reference

Full schema reference for all mockData.js exports including articles.

Animations

whileHover lift and rotate patterns used on the instruction manual cards.

Typography

Pixel and monospace font usage for chapter labels and type badges.

Build docs developers (and LLMs) love

Get started for freeTalk to us