Projects Page — The Grimoire of Completed Works

The Projects page (/projects) is titled The Grimoire and subtitled “The Coven of Completed Projects.” It renders four 3D flip cards in a responsive CSS grid, each representing a completed project. Hovering a card rotates it 180° on the Y axis to reveal the project’s description, tech stack, and action links on the reverse face.

Visual & UX Overview

Responsive CSS Grid

Cards are laid out in a grid that responds to viewport width: 1 column on mobile, 2 columns on medium and large screens (md:grid-cols-2 lg:grid-cols-2), and 3 columns on extra-large screens (xl:grid-cols-3).

3D Flip Interaction

Each card is h-[450px] tall and uses CSS transform-style: preserve-3d with perspective. On hover, the card’s rotateY value transitions from 0 to 180 via a Framer Motion spring animation. The front face has backface-visibility: hidden and the back face starts at rotateY: 180deg so it appears correctly when revealed.

Front Face Anatomy

The front face shows: an Unsplash project image (grayscale → color on hover), a <Sigil> badge, a mock-data disclosure note (mockNote), the project category, and the project title.

Back Face Anatomy

The back face shows: the heading “The Incantation”, a project description paragraph, a row of tech stack badges (labelled “Components:”), and three action buttons — Cast Demo, Reveal Source, and Read Tome.

Projects Data

The four projects are defined in a static array. Each object contains all data needed to render both the front and back faces:

const projects = [
  {
    id: 1,
    title: "Apothecary Inventory",
    category: "Full Stack",
    sigilType: "alchemy",
    image: "https://images.unsplash.com/photo-1607527941584-38600f3c5b8b?auto=format&fit=crop&q=80&w=600&h=400",
    mockNote: "Conjured with sample potion data",
    description: "A comprehensive inventory management system built for a modern herbalist. Features real-time stock tracking, low-ingredient alerts, and recipe cost calculation.",
    tech: ["React", "Node.js", "PostgreSQL", "Tailwind"],
    demoUrl: "#",
    sourceUrl: "#",
    readmeUrl: "#",
  },
  {
    id: 2,
    title: "Lunar Phase Tracker",
    category: "Frontend",
    sigilType: "moon",
    image: "https://images.unsplash.com/photo-1532693322450-2cb5c511067d?auto=format&fit=crop&q=80&w=600&h=400",
    mockNote: "Relies on celestial APIs",
    description: "An elegant dashboard tracking moon phases, astrological events, and optimal planting times. Built with a focus on accessibility and fluid animations.",
    tech: ["TypeScript", "Next.js", "Framer Motion"],
    demoUrl: "#",
    sourceUrl: "#",
    readmeUrl: "#",
  },
  {
    id: 3,
    title: "Grimoire CMS",
    category: "Architecture",
    sigilType: "star",
    image: "https://images.unsplash.com/photo-1589829085413-56de8ae18c73?auto=format&fit=crop&q=80&w=600&h=400",
    mockNote: "Headless setup demonstration",
    description: "A custom content management system designed specifically for organizing long-form magical texts, spells, and historical archives with complex tagging.",
    tech: ["React", "GraphQL", "Prisma"],
    demoUrl: "#",
    sourceUrl: "#",
    readmeUrl: "#",
  },
  {
    id: 4,
    title: "The Scrying Pool",
    category: "Data Viz",
    sigilType: "eye",
    image: "https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&q=80&w=600&h=400",
    mockNote: "Visualizing mocked user flows",
    description: "An analytics dashboard that turns complex user behavior data into beautiful, readable visual patterns. Because raw data is just unrefined magic.",
    tech: ["D3.js", "React", "Tailwind"],
    demoUrl: "#",
    sourceUrl: "#",
    readmeUrl: "#",
  },
];

Sigil-to-Project Mapping

Project	Sigil Type	Rationale
Apothecary Inventory	`alchemy`	Mixing ingredients → database records and React state
Lunar Phase Tracker	`moon`	Direct thematic match
Grimoire CMS	`star`	Star as symbol of structured, celestial knowledge
The Scrying Pool	`eye`	Scrying = gazing / observing data

3D Flip Card Implementation

const [flipped, setFlipped] = useState(false);

// Card wrapper
<div
  onMouseEnter={() => setFlipped(true)}
  onMouseLeave={() => setFlipped(false)}
>
  <motion.div
    className="w-full h-full relative preserve-3d"
    animate={{ rotateY: flipped ? 180 : 0 }}
    transition={{ type: "spring", stiffness: 260, damping: 20 }}
  >
    {/* Front face */}
    <div className="absolute inset-0 backface-hidden">
      {/* image, mockNote badge, sigil badge, category, title */}
    </div>

    {/* Back face */}
    <div className="absolute inset-0 backface-hidden rotate-y-180">
      <h3>The Incantation</h3>
      {/* description, tech badges ("Components:"), action buttons */}
    </div>
  </motion.div>
</div>

The flipped state is per-card (each card has its own local useState), not shared at the grid level. This means multiple cards can be flipped simultaneously if the user moves their cursor quickly between them.

Card Entrance Animation

Cards stagger in on page load:

// Wrapping each card
<motion.div
  initial={{ opacity: 0, y: 30 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ delay: index * 0.15, duration: 0.6 }}
>

Back Face Action Buttons

Each project card’s back face presents three actions:

Button Label	Action
Cast Demo	Opens `demoUrl`
Reveal Source	Opens `sourceUrl` (GitHub)
Read Tome	Opens `readmeUrl`

Customization

Adding a new project

Append a new object to the projects array with all required fields: id (number), title, category, sigilType (one of star | moon | alchemy | eye), image, mockNote, description, tech (string array), demoUrl, sourceUrl, and readmeUrl. The grid will automatically accommodate the new card.

Changing card height

Card height is set as a fixed h-[450px] Tailwind class on the card wrapper. Increase this value for projects with longer descriptions on the back face, or standardise at a larger value to give all cards more breathing room.

Replacing Unsplash images

Each project’s image field is a URL string. Replace Unsplash URLs with hosted images, local /public assets, or a CDN path. Recommended aspect ratio is 16:9 or 4:3 for best coverage on the front face. Images are displayed as object-cover CSS.

Updating tech stack badges

The tech array on each project is an arbitrary string array. Each element becomes a badge chip on the back face (under the “Components:” label). There is no maximum length enforced, but more than six items may overflow the back face at smaller viewport widths.

Component Dependencies

Component	Source	Role
`Sigil`	`components/Sigil.js`	Animated SVG sigil rendered on each card’s front face
`BackgroundEffects`	`components/BackgroundEffects.js`	Global ambient particle and blur layer
`Navigation`	`components/Navigation.js`	Fixed top navigation bar
`motion` (Framer Motion)	`assets/proxy.js`	`rotateY` spring flip animation, staggered grid entrance

If a project has a dedicated case study on the /case-studies route, link directly from the project description text or add a note on the back face pointing to /case-studies.

Core Components

Page Components

Projects Page — The Grimoire of Completed Works

Visual & UX Overview

Responsive CSS Grid

3D Flip Interaction

Front Face Anatomy

Back Face Anatomy

Projects Data

Sigil-to-Project Mapping

3D Flip Card Implementation

Card Entrance Animation

Back Face Action Buttons

Customization

Component Dependencies

Build docs developers (and LLMs) love

Core Components

Page Components

Documentation Index

​Visual & UX Overview

Responsive CSS Grid

3D Flip Interaction

Front Face Anatomy

Back Face Anatomy

​Projects Data

​Sigil-to-Project Mapping

​3D Flip Card Implementation

​Card Entrance Animation

​Back Face Action Buttons

​Customization

​Component Dependencies

Build docs developers (and LLMs) love

Visual & UX Overview

Projects Data

Sigil-to-Project Mapping

3D Flip Card Implementation

Card Entrance Animation

Back Face Action Buttons

Customization

Component Dependencies