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.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.
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. Thenum field is the Roman numeral displayed in the left column and used as the React key:
Animations
whileInView slide-in
whileInView slide-in
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.Hover excerpt slide-down
Hover excerpt slide-down
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.Title colour transition
Title colour transition
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.Top-edge gradient
Top-edge gradient
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
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.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.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.