ProjectCardSmall Component

A compact card component for displaying completed projects with essential information in a clean, horizontal layout.

Import


import ProjectCardSmall from '@/components/ProjectCardSmall'

Props

Prop	Type	Default	Required	Description
`title`	`string`	-	✔	The project title
`description`	`string`	-	✔	A brief description of the project
`completedDate`	`string`	-	-	Completion date (e.g., “2024”, “Q2 2024”)
`domain`	`string`	-	-	Project domain/category
`href`	`string`	-	-	URL to the project details page
`linkText`	`string`	-	-	Accessible text for the navigation link
`color`	`ProjectColor`	`"emerald"`	-	Color theme for the card

Color Options

Available color themes: emerald, blue, green, purple, red, orange, yellow, slate

Usage Examples

Basic Example


<ProjectCardSmall
  title='Lunar Garden'
  description='An experiment in cultivating moss and bonsai under simulated low-gravity conditions with artificial moonlight.'
  completedDate='2024'
  domain='AstroBotany'
  href='/project/lunar-garden'
  color='emerald'
/>

Minimal Example


<ProjectCardSmall
  title='Echo Jar'
  description='A glass vessel designed to capture and replay whispers as faint resonances hours after they were spoken.'
/>

Multiple Cards


<div className='space-y-3'>
  <ProjectCardSmall
    title='Nebula Loom'
    description='A weaving device that threads starlight into shimmering fabrics, rumored to change patterns with cosmic events.'
    completedDate='2026'
    domain='Cosmic Textiles'
    color='blue'
  />
 
  <ProjectCardSmall
    title='Chrono Compass'
    description='An instrument that doesn’t point north, but instead aligns with the strongest timeline nearby.'
    completedDate='2032'
    domain='Temporal Navigation'
    color='purple'
  />
</div>

Design Features

Horizontal Layout: Optimized for displaying multiple projects in a list
Completion Indicator: Checkmark icon shows project status
Responsive Design: Adapts to different screen sizes
Hover Effects: Subtle lift and shadow on hover
Dark Mode Support: Full dark mode compatibility
Color Theming: Multiple color schemes with consistent styling
Accessibility: Proper ARIA labels and keyboard navigation

Visual Structure

Temporal Toaster

A kitchen appliance that lightly browns bread by borrowing residual heat from alternate timelines.

2024

Kitchenware

The card displays a completion checkmark, project information on the left, completion details and domain on the right, with an optional navigation arrow when href is provided.

TypeScript Interface


interface ProjectCardSmallProps {
  title: string
  description: string
  completedDate?: string
  domain?: string
  href?: string
  linkText?: string
  color?:
    | 'emerald'
    | 'blue'
    | 'green'
    | 'purple'
    | 'red'
    | 'orange'
    | 'yellow'
    | 'slate'
}