Skip to main content

Documentation Index

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

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

The Blog page stages each article as a page from an ancient manuscript. A dark parchment-coloured background with a subtle noise texture gives each article card the appearance of aged paper. A feather quill icon and Roman numeral index sit beside the publication date, followed by the article title in a warm serif gold. Hovering the card slides down an excerpt paragraph and a “Read Incantation” call-to-action link. The result makes even a short list of posts feel like a curated grimoire.

Overview

The Blog page lives at route /blog and is titled “The Scribe’s Pages”. Its opening quote — “Knowledge recorded is magic preserved.” — reinforces the idea that writing is itself a form of magic. The page is stateless — no click or hover state is stored in React. All interactions are handled by Framer Motion’s whileHover on motion.div wrappers, which drive the excerpt height from 0 to auto and opacity from 0 to 1.
The excerpt reveal uses whileHover: { height: "auto", opacity: 1 } from initial: { height: 0, opacity: 0 }. Framer Motion handles the height: auto interpolation, which is not possible with a plain CSS transition. No JavaScript state is needed for this interaction.

Layout & Components

Aged paper cards

Each article is a div with background: #1a1510, a border of #3a2e20, and border-radius: sm. The parchment texture is created by a pointer-events-none overlay div with a base64-encoded SVG noise pattern at 20% opacity and mix-blend-mode: overlay. A second overlay gradient (from-[#2a2015]) darkens the top edge like a curled page.

Feather icon & Roman numeral

A Feather icon (lucide-react) and the article’s Roman numeral are rendered in a left sidebar column (hidden below md). The numeral uses a gold serif font at text-2xl. A 1px vertical gold line extends below the numeral for visual continuity down the card.

Hover reveal excerpt

The excerpt p and “Read Incantation” span are inside a motion.div with initial: { height: 0, opacity: 0 } and whileHover: { height: "auto", opacity: 1 }. The transition uses duration: 0.4, ease: "easeOut". The excerpt text is italic gold-brown; the CTA is uppercase with a gold underline border.

whileInView entrance

Each article motion.div enters from x: -50, opacity: 0 via whileInView: { opacity: 1, x: 0 } with staggered delay: index * 0.2 seconds. The viewport guard uses once: true so the animation only fires once, even if the user scrolls back.

Data Structure

Articles are defined as an array of objects. The num field is the Roman numeral displayed in the left column and used as the React key:
const articles = [
  {
    num: "I",
    title: "Summoning React Components from the Void",
    date: "Oct 31, 2023",
    excerpt:
      "A beginner's guide to materializing UI elements out of pure thought and JSX.",
  },
  {
    num: "II",
    title: "The Dark Arts of CSS Grid",
    date: "Nov 15, 2023",
    excerpt:
      "Bending the fabric of the viewport to your will without losing your sanity.",
  },
  {
    num: "III",
    title: "Banishing Memory Leaks in useEffect",
    date: "Dec 02, 2023",
    excerpt:
      "How to properly cleanse your components and avoid lingering phantom processes.",
  },
];

Animations

Article cards enter from the left (x: -50) with opacity: 0. They transition to x: 0, opacity: 1 when scrolled into view, staggered by index * 0.2 seconds. The duration is 0.8 s. This creates a reading-left-to-right entry motion that feels natural for a list layout.
The motion.div wrapping the excerpt and CTA uses overflow: hidden (implicit from height: 0) and whileHover to expand. Because the parent card element’s height is not fixed, the card expands downward to accommodate the revealed text — no fixed heights are needed.
The article h3 title transitions its colour from #e6c88a (warm parchment gold) to the site’s primary gold token on hover via a Tailwind group-hover:text-gold transition-colors class. This is a CSS transition rather than Framer Motion, providing instant responsiveness.
A position: absolute gradient overlay (h-4, from-[#2a2015] to-transparent) sits at the top of each card to simulate the slightly darker upper edge of aged paper. This is purely decorative CSS with no animation.

Customization

1

Add a new article

Push a new object into the articles array with the next Roman numeral, a title, a publication date string, and a one-sentence excerpt. The card layout adapts automatically. For consistency, write excerpts in the same mystical voice as the existing entries — one sentence is ideal.
2

Link to full posts

Currently, the “Read Incantation” CTA is a static span. Replace it with a React Router Link or an <a> tag pointing to the full post URL. Add a url field to each article object and use it as the href.
3

Adjust the parchment colour

The card background is #1a1510 and the border is #3a2e20. To make the cards lighter (a cream parchment), shift these toward #2a2015 and #4a3e28. Adjust the noise overlay opacity from 0.20 to 0.35 for stronger texture.
4

Change the date format

The date field is a plain string. It renders after the Feather icon in text-xs uppercase tracking-widest. Use any format that suits your locale — "2023-10-31", "31 Oct 2023", or "Samhain 2023" all render correctly.
To feature a post as a “Pinned Scroll”, add a pinned: true field to one article object and render it with a slightly larger font size, a decorative wax-seal SVG badge, and a higher z-index — visually distinguishing it as the grimoire’s frontispiece.

Build docs developers (and LLMs) love