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 Projects page presents completed work as physical artefacts — parchment notes pinned to a cork board, each one rotated slightly off-axis, stamped with a wax seal, and annotated with the technologies used and a flavour-text description. The result turns a conventional project grid into a tactile collection of magical evidence.

​
The Projects Data Array

At the top of assets/Projects.js sits the projects data array. Each entry is a plain JavaScript object with five fields:
FieldTypePurpose
titlestringProject name displayed as the card heading
ingredientsstring[]Tech stack rendered as pill badges
incantationstringOne-sentence flavour description of the project
linkstringURL for the “Inspect Artifact →” anchor
rotationnumberCSS rotate value in degrees (positive or negative)
The four sample projects shipped in the starter kit are:

Necromancer UI

Ingredients: React, Tailwind, Framer MotionIncantation: “A dark-mode dashboard that resurrects dead data streams into actionable insights. Built for the modern data warlock.”Rotation: -2°

Alchemist E-Commerce

Ingredients: Next.js, Stripe, PostgreSQLIncantation: “Transmuting raw traffic into pure gold. A high-conversion storefront with seamless checkout rituals.”Rotation: 3°

Scrying Glass App

Ingredients: React Native, WebRTC, Socket.ioIncantation: “Peer across the veil with real-time video communication. Low latency, high clarity, zero dark spirits attached.”Rotation: -1°

Grimoire CMS

Ingredients: Vue, Node.js, MongoDBIncantation: “A headless content management system for cataloging spells, curses, and blog posts. Highly extensible.”Rotation: 4°

​
Card Anatomy

Each card is built from two layers inside a motion.div:
1

Pin Circle

An absolute -top-3 left-1/2 -translate-x-1/2 circle with bg-midnight-darker border-2 border-spell simulates a push-pin holding the note to the board.
2

Wax Seal

An absolute top-4 right-4 circle with bg-blood and a rotate-12 transform holds a Cinzel "W" character. On group hover the seal rotates back to 0° over 500ms via group-hover:rotate-0 transition-transform.
3

Parchment Body

A parchment-texture p-8 md:p-10 rounded-sm div forms the card surface. An absolute inset-0 border-[8px] border-midnight/5 overlay with an irregular border-radius gives the edge a hand-torn look.
4

Card Content

Inside the parchment body, top to bottom: the project title as an <h3> with a border-b border-midnight/20 rule; an Ingredients section with the tech-stack pills; an Incantation section with the description paragraph; and an <a> CTA.
// Ingredients pill list
<ul className="flex flex-wrap gap-2">
  {project.ingredients.map((ingredient, i) => (
    <li
      key={i}
      className="font-garamond text-sm text-midnight-darker bg-midnight/5 px-3 py-1 rounded-full border border-midnight/10"
    >
      {ingredient}
    </li>
  ))}
</ul>

// CTA link
<a
  href={project.link}
  className="inline-block font-cinzel text-sm font-bold text-midnight-darker border-b-2 border-blood pb-1 hover:text-blood transition-colors"
>
  Inspect Artifact →
</a>

​
Framer Motion Animations

Each card motion.div receives three animation props:
Cards use whileInView with viewport={{ once: true, margin: "-100px" }} so they only animate once, triggering 100px before they enter the viewport. Each card’s transition has a staggered delay of index * 0.2 seconds:
initial={{ opacity: 0, y: 50 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: index * 0.2 }}

​
How to Customize

Edit the projects data array at the very top of assets/Projects.js. Every field maps directly to a visible element on the card: 
// assets/Projects.js
const projects = [
  {
    title: "Your Project Name",
    ingredients: ["React", "TypeScript", "Supabase"],
    incantation: "A one-sentence description in the voice of your portfolio.",
    link: "https://github.com/you/your-project",
    rotation: -2,   // Degrees. Negative tilts left, positive tilts right.
  },
  // Add more objects to add more cards…
];
Keep rotation values between -5 and 5 degrees for the best visual effect. Larger values can make the grid feel chaotic rather than charming.
All link values in the starter kit are set to "#". Replace them with real URLs (GitHub repos, live demos, case study routes like /case-studies) before deploying.

Build docs developers (and LLMs) love

Get started for freeTalk to us