Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/dev-mode/llms.txt
Use this file to discover all available pages before exploring further.
The Writing page presents the developer’s articles as physical paper cards pinned to a wooden corkboard. Each card is tilted at a slight random angle, mimicking something tacked up in a hurry. Hovering over a card straightens it and scales it up slightly, as if the reader is leaning in for a closer look. The overall aesthetic draws from zine culture, photocopied flyers, and vintage software manuals.
Route
| Property | Value |
|---|
| Hash route | /#/writing |
| Page heading | MANUAL RACK |
| Subtitle | READ THE DOCS OR PERISH |
Article Catalogue
Four articles are displayed on the corkboard. Each card shows a thumbtack pin graphic at the top, a type badge, a retro date, the article title, a short excerpt, and a READ MORE button.
| Title | Date | Type | Rotation | Background | Excerpt |
|---|
| WHY I REWROTE IT IN RUST (AND REGRETTED IT) | OCT 1989 | ZINE | -3deg | bg-yellow-100 | A tragic tale of memory safety and lost weekends. |
| CSS GRID: A SURVIVAL GUIDE | NOV 1992 | MANUAL | 2deg | bg-blue-100 | How to center a div without crying. |
| THE ART OF THE CONSOLE.LOG | JAN 1995 | FLYER | -1deg | bg-pink-100 | Debugging like a caveman, but with style. |
| REACT HOOKS EXPLAINED TO MY CAT | MAR 1998 | ZINE | 4deg | bg-green-100 | Meow meow useEffect meow memory leak. |
The dates are retro-styled and intentionally anachronistic — they place modern web development topics in the era of early home computing and zine culture, reinforcing the portfolio’s nostalgic aesthetic.
Article Type Badges
Each article is assigned one of three content-type labels, displayed as a small badge on the card:
| Type | Description |
|---|
| ZINE | Opinion pieces and personal narratives |
| MANUAL | Technical reference and how-to guides |
| FLYER | Short-form tips, tricks, and micro-essays |
Card Interaction
Cards are laid out in a grid on the corkboard background. Each card has an individual rotation applied to it, giving the wall an organic, hand-assembled feel.
| State | Visual Behaviour |
|---|
| Default | Card is tilted at a slight angle, thumbtack visible at top |
| Hover | Card rotates to 0deg (straightens) and scales up |
| Button | READ MORE button becomes active, navigates to the full article |
The rotation-to-zero hover effect is handled by Framer Motion, which interpolates the card’s rotate property smoothly. This makes the “lean in” metaphor feel physically convincing without jarring snapping.