Skip to main content

Documentation Index

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

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

The Projects page appears as “The Color Wheel” in the navigation bar. It is the primary showcase for your portfolio work, displaying featured projects using MarbledCard components arranged in a responsive grid. Each card has a category badge, project title, short description, and a “Read Study” call-to-action that can link to a Case Study or an external project URL.

​
File location

pages/Projects.html

​
MarbledCard usage

Each project on this page is displayed using the MarbledCard component from components/MarbledCard.js. The component accepts four props:
PropTypePurpose
titlestringProject name displayed as the card heading
excerptstringShort project description shown below the title
categorystringBadge label displayed at the top of the card (e.g., “Web App”)
delaynumberSeconds to delay the scroll-entry animation for this card
To add a project card, include a MarbledCard call with your project details: 
<MarbledCard
  title="Portfolio Redesign"
  excerpt="Rebuilt my personal site with a focus on performance and visual identity."
  category="Web Design"
  delay={0}
/>

​
Content guidelines

Keep project descriptions short and scannable. Two to three sentences is enough — visitors who want more detail can follow the “Read Study” link to the Case Studies page. Each description should answer three questions:
  1. What did you build or do?
  2. What technologies or methods were involved?
  3. What was the result or impact?
Use the category badge to group related projects so visitors can quickly identify the type of work at a glance. Common category values include “Web App”, “Open Source”, “Design”, “API”, “Mobile”, and “Library”.

​
Staggering cards

Use the delay prop to stagger the scroll-entry animation so cards appear one after another rather than all at once. Increment by 0.1 seconds per card: 
<MarbledCard title="First Project"  category="Web App"    delay={0}   excerpt="..." />
<MarbledCard title="Second Project" category="Open Source" delay={0.1} excerpt="..." />
<MarbledCard title="Third Project"  category="Design"      delay={0.2} excerpt="..." />
<MarbledCard title="Fourth Project" category="API"         delay={0.3} excerpt="..." />
The whileInView animation in MarbledCard triggers once as each card enters the viewport, so the stagger only plays the first time the visitor scrolls past the section.

Build docs developers (and LLMs) love

Get started for freeTalk to us