Skip to main content

Documentation Index

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

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

The Articles page — titled “Newsletter from Beyond” — reimagines a standard blog index as a rack of sealed envelopes. Each envelope sits closed and mysterious until the visitor hovers over it, at which point the wax seal dissolves, the flap swings open, and the letter inside slides up to be read. It is the most tactile page in the portfolio and sets a strong first impression of the developer’s attention to interaction detail.

​
Route

/articles

​
Articles Data

All articles are defined in a static constant at the top of the component: 
const ARTICLES = [
  { title: 'Why I stopped using Redux',        date: 'Oct 31, 2023' },
  { title: 'CSS Grid: A Love Story',           date: 'Sep 13, 2023' },
  { title: 'Surviving the Next.js App Router', date: 'Aug 01, 2023' },
];
#TitleDate
1Why I stopped using ReduxOct 31, 2023
2CSS Grid: A Love StorySep 13, 2023
3Surviving the Next.js App RouterAug 01, 2023

​
Envelope Card Structure

Each article is a <motion.div> with class relative h-64 group cursor-pointer perspective-1000. Three layers are stacked absolutely inside it:

​
1. Envelope Body (back)

<div className="absolute inset-0 bg-haunt-tombstoneDark rounded-lg border border-haunt-tombstone" />
A flat dark rectangle that forms the back face of the envelope.

​
2. Paper Letter (middle)

<div className="absolute inset-x-4 bottom-4 top-12 bg-haunt-bone text-haunt-dark p-4 rounded
                transition-transform duration-500
                group-hover:-translate-y-16 group-hover:z-20 shadow-xl">
  <h3>{article.title}</h3>
  <p>{article.date}</p>
  {/* decorative line placeholders */}
</div>
The letter sits tucked inside the envelope at rest. On hover, a CSS transition slides it upward by 64 px (-translate-y-16) and raises its z-index so it appears above the flap.

​
3. Envelope Flaps (top and bottom)

Two triangular shapes made with clip-path are layered to form a realistic envelope:
Elementclip-pathRole
Bottom flappolygon(0 100%, 50% 0, 100% 100%)Static V-shape at the bottom half
Top flappolygon(0 0, 50% 100%, 100% 0)Animated inverted-V that opens on hover
The top flap carries origin-top transition-transform duration-500 group-hover:rotate-x-180, so on hover it rotates 180° around its top edge — giving the illusion of the flap folding open. This rotation is a pure CSS transform driven by the Tailwind group-hover:rotate-x-180 class, not Framer Motion.

​
Wax Seal

The red wax seal is a child of the top-flap element, positioned at its bottom edge so it bridges both halves of the closed envelope: 
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2
                w-8 h-8 bg-red-800 rounded-full shadow-md flex items-center justify-center
                transition-opacity duration-300 group-hover:opacity-0">
  <span className="font-spooky text-white text-xs">S</span>
</div>
  • Centred on the bottom edge of the top flap so it bridges the two halves
  • Fades out (opacity-0) as the flap opens, to avoid floating over the revealed letter

​
Hover Animation Summary

ElementRest stateHover state
Top flaprotate-x-0 (closed)rotate-x-180 (open)
Wax sealopacity-100opacity-0
Paper lettertranslate-y-0-translate-y-16 (slides up)
All transitions run for 500 ms with default CSS easing.

​
Adding a New Article

Append an entry to the ARTICLES array: 
const ARTICLES = [
  { title: 'Why I stopped using Redux',        date: 'Oct 31, 2023' },
  { title: 'CSS Grid: A Love Story',           date: 'Sep 13, 2023' },
  { title: 'Surviving the Next.js App Router', date: 'Aug 01, 2023' },
  // Add your entry here:
  { title: 'Building Accessible Modals',       date: 'Jul 14, 2024' },
];
The grid is grid-cols-1 md:grid-cols-3, so a fourth card will begin a new row on desktop.
Articles are currently static data with no external links. To point each envelope to a real article, add a url field to the data object and wrap the card (or the “read” area of the paper letter) in a <Link to={article.url}> or <a href={article.url} target="_blank">.

Build docs developers (and LLMs) love

Get started for freeTalk to us