Skip to main content

Documentation Index

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

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

The Scrolls page (je component) is the portfolio’s writing showcase. It presents technical articles and reflections in two distinct layouts: a large featured hero card with a folded-corner parchment effect for the pinned post, and a stacked card archive beneath it for all remaining articles. Hovering the archive stack fans the cards out, letting each one become individually readable.

​
Writing Data

All articles are defined in the constant j: 
const j = [
  {
    id: 1,
    title: "Why I Stopped Using console.log() and Started Trusting the Void",
    excerpt: "A deep dive into advanced debugging techniques when the browser console betrays you.",
    category: "Reflection",
    icon: PenTool,
    date: "Oct 31, 2023",
    featured: true
  },
  {
    id: 2,
    title: "The Anatomy of a Memory Leak",
    excerpt: "Tracking down a ghost in the machine that was slowly devouring our React application.",
    category: "Bug Report",
    icon: Bug,
    date: "Sep 15, 2023",
    featured: false
  },
  {
    id: 3,
    title: "Summoning APIs with React Query",
    excerpt: "Stop writing custom fetch hooks. Let the library handle the dark magic of caching and refetching.",
    category: "Technical",
    icon: Terminal,
    date: "Aug 02, 2023",
    featured: false
  },
  {
    id: 4,
    title: "CSS Grid: A Hexagonal Approach",
    excerpt: "Building complex, non-rectangular layouts without losing your mind.",
    category: "Technical",
    icon: Terminal,
    date: "Jul 18, 2023",
    featured: false
  },
];

​
Field Reference

FieldTypeDescription
idnumberUnique identifier; used as React list key
titlestringFull article title displayed on the card
excerptstringShort summary shown below the title
categorystringContent tag: "Reflection", "Bug Report", or "Technical"
iconLucide iconIcon component rendered on the card face (PenTool, Bug, Terminal)
datestringHuman-readable publication date
featuredbooleanWhen true, the post renders in the hero card layout

​
Featured Card

The post with featured: true (currently id: 1) is pulled out of the stack and rendered as a full-width hero card above the archive. Its visual treatment is distinct from the archive cards:

Folded-Corner Effect

A CSS pseudo-element folds the top-right corner of the card inward, mimicking a turned page or parchment curl. The fold is rendered with a contrasting inner shadow.

Featured Scroll Badge

A magenta pill badge labelled “Featured Scroll” sits in the top-left corner alongside a BookOpen icon, immediately signalling the card’s special status.
The card body renders (top to bottom):
  1. Date — muted text, e.g. "Oct 31, 2023"
  2. Title — large heading with full article title
  3. Excerpt — body-size paragraph with the summary text
On hover the card emits a soft glow, consistent with the glass-panel aesthetic used throughout the portfolio.

​
Archive Stack

The three non-featured posts (featured: false) render as a stacked card deck below the hero card. The stack state is managed with a single useState pair — [n, s] — where n is a boolean (false = stack collapsed at rest, true = stack fanned out on hover).

​
Rest State

When no card is hovered, each card in the deck is offset by a small, incremental amount to suggest depth: 
// Rest offset per card
const offsetY = index * 20; // 0px, 20px, 40px, ...
Cards overlap significantly, with only the top card fully visible. Each card also carries a small random rotation (assigned once on mount) so the stack looks organically fanned rather than mechanically uniform.

​
Hover / Fan-Out State

When the stack is hovered, the cards fan out to become individually readable: 
// Expanded offset per card
const offsetY = index * 120; // 0px, 120px, 240px, ...
Hovering any point on the visible stack toggles the expanded state. Clicking or moving the cursor away collapses the stack back to its compact rest position. Framer Motion animates the y translation on each card for a smooth spring transition.
The random per-card rotation is determined at component mount and remains stable across expand/collapse cycles, so the fan always unfurls in the same visually distinctive arrangement.

​
Article Categories

The three category tags used across the current article set:
CategoryIconTypical subject matter
ReflectionPenToolPersonal takes, mindset, process
Bug ReportBugWar stories about specific bugs and their fixes
TechnicalTerminalHow-to guides, library deep-dives, CSS techniques
Categories are cosmetic — they appear as a label on each card but do not drive filtering or routing logic.

​
Adding a New Article

To add a post, append a new object to the j array: 
{
  id: 5,                           // Must be unique
  title: "Your Article Title",
  excerpt: "A one- or two-sentence summary of what the article covers.",
  category: "Technical",           // "Reflection" | "Bug Report" | "Technical"
  icon: Terminal,                  // Import from 'lucide-react'
  date: "Jan 10, 2024",
  featured: false,
}
Only one article should have featured: true at any time. If multiple entries are marked featured, only the first one encountered during the array filter will render in the hero card slot; the others will be silently dropped from both the hero and the archive stack.
To promote an existing article to featured, set its featured flag to true and set all other entries to false: 
// Promote id: 3 to featured
{ id: 3, ..., featured: true  },  // ← new featured post
{ id: 1, ..., featured: false },  // ← demoted to archive
There is no pagination in the current implementation. All non-featured articles appear in the archive stack simultaneously. For larger article collections, consider slicing the array or adding a “load more” interaction.

Build docs developers (and LLMs) love

Get started for freeTalk to us