Skip to main content

Documentation Index

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

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

The Blog page presents writing as a physical stack of journal pages left on a reading table — each card slightly askew, layered on top of the next, waiting to be picked up and read. Hovering a card peels it away from the stack and lifts it to the front, where it flattens and enlarges for easy reading.

​
Sample Blog Posts

The posts array in Blog.js defines three entries in the starter kit:

Binding State with Zustand

Date: Oct 31, 2023Excerpt: “A treatise on lightweight state management rituals that avoid the heavy toll of Redux boilerplate.”Rotation: -3°

The Necromancy of Legacy Code

Date: Sep 15, 2023Excerpt: “How to safely resurrect and refactor ancient jQuery scripts without angering the original authors.”Rotation: 2°

Warding Your APIs

Date: Aug 02, 2023Excerpt: “Essential protective runes (JWTs) and rate-limiting spells to keep malicious bots at bay.”Rotation: -1°

​
Stacking Layout

Cards are rendered inside a relative w-full max-w-xl mx-auto mt-10 wrapper. Each card is position: absolute top-0 left-0 w-full — they all start at the same origin point and are offset downward by marginTop: index * 80px applied via the inline style prop. Layering is controlled with zIndex: posts.length - index, so the first card (index 0) has the highest z-index and sits on top of the visual stack: 
posts.map((post, index) => (
  <motion.div
    key={index}
    style={{
      rotate: post.rotation,
      marginTop: `${index * 80}px`,
      zIndex: posts.length - index,
    }}
    className="absolute top-0 left-0 w-full cursor-pointer group"
  >
A spacer <div> at the end of the wrapper — style={{ height: $px }} — pushes the page height out to prevent the absolute-positioned cards from collapsing the scroll container.

​
Card Anatomy

Each card uses the parchment-texture class with heavy drop shadows. Inside, from left to right:
1

Ruled Margin Lines

Two absolute vertical lines (top-0 bottom-0 left-8 w-px bg-blood/30 and top-0 bottom-0 left-10 w-px bg-blood/30) simulate the red ruled lines of a lined journal page.
2

Padded Content Area

All text sits inside a pl-8 wrapper to clear the margin lines.
3

Date

Rendered in Pinyon Script (font-cursive) at text-xl text-blood as a <span> block.
4

Title

An <h2> in Cinzel text-2xl text-midnight-darker font-bold.
5

Excerpt

A <p> in EB Garamond text-lg text-midnight-darker/80 leading-relaxed.
6

Read Entry CTA

A <span> in Cinzel Small Caps text-sm text-blood tracking-widest uppercase with a border-b border-blood/30 underline that transitions to border-blood on group hover.

​
Hover Interaction

Each card’s motion.div uses a whileHover prop to lift the hovered card above the stack: 
whileHover={{
  scale: 1.05,
  rotate: 0,       // Flattens the tilt back to upright
  y: -20,          // Lifts the card 20px upward
  zIndex: 50,      // Forces it above all other cards
  transition: { duration: 0.3 },
}}
The zIndex: 50 override in whileHover ensures the lifted card always renders on top, regardless of the static stacking order.

​
Entry Animation

Cards animate in from above the page on first render: 
initial={{ opacity: 0, y: -50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: index * 0.2 }}
Each card is staggered by 0.2 * index seconds, so the top card appears first, then the second, then the third, creating a cascading drop effect as the page loads.

​
How to Add Posts

Edit the posts array at the top of Blog.js: 
// Blog.js
const posts = [
  {
    title: "Your Post Title",
    date: "Nov 15, 2024",
    excerpt: "A one or two sentence summary of what the post covers.",
    rotation: -2,   // Degrees. Keep between -5 and 5 for best effect.
  },
  // Add more entries…
];
Posts are rendered in array order, with index 0 at the top of the visual stack. Add new posts to the beginning of the array so the most recent entry appears on top.
The "Read Entry →" CTA is currently a <span> with no href. To link posts to real routes or external URLs, replace the <span> with an <a> or React Router <Link> and add a link field to each post object.

Build docs developers (and LLMs) love

Get started for freeTalk to us