ProjectCard Component

A comprehensive project showcase molecule that displays project information including image, description, technologies, and action buttons.

Live Example

Featured

Completed

Portfolio Website

A modern, responsive portfolio website built with Astro and Tailwind CSS. Features a clean design, smooth animations, and optimized performance.

Astro TypeScript Tailwind CSS Vercel

<ProjectCard 
  title="Portfolio Website"
  description="A modern, responsive portfolio website..."
  image="/images/projects/portfolio.jpg"
  tech=AstroTypeScriptTailwind CSSVercel
  liveUrl="https://sergiovazquez.dev"
  githubUrl="https://github.com/sergiovazquez/portfolio"
  featured=true
/>

Component Structure

The ProjectCard is a molecule component that combines several UI atoms to create a comprehensive project showcase:

Used Atoms

Card - Main container
Button - Action buttons
Badge - Featured indicator
Pill - Technology tags

Features

Project image with lazy loading
Technology stack display
Live demo and GitHub links
Featured project highlighting

Props

Prop	Type	Required	Default	Description
title	string	Yes	-	Project title/name
description	string	Yes	-	Project description
image	string	No	'/images/placeholder.jpg'	Project image URL
tech	string[]	No	[]	Array of technologies used
liveUrl	string	No	undefined	Live demo URL
githubUrl	string	No	undefined	GitHub repository URL
featured	boolean	No	false	Whether project is featured
class	string	No	''	Additional CSS classes

Visual Examples

Featured Project

Projects marked as featured display a special badge.

Featured

Completed

E-Commerce Platform

Full-stack e-commerce solution with React, Node.js, and PostgreSQL. Features user authentication, payment processing, and admin dashboard.

React Node.js PostgreSQL Stripe

         
     Featured  
     Completed  
 
      E-Commerce Platform 
  
   Full-stack e-commerce solution... 
      React  Node.js  PostgreSQL  Stripe

Standard Project

Regular project card without featured badge.

Completed

Weather App

Simple weather application built with vanilla JavaScript and OpenWeather API. Features current weather and 5-day forecast.

JavaScript CSS3 OpenWeather API

         
       Completed  
 
      Weather App 
  
   Simple weather application... 
      JavaScript  CSS3  OpenWeather API

GitHub Only Project

Project with only GitHub link (no live demo).

Completed

CLI Tool

Command-line utility for automating development workflows. Built with Python and Click framework.

Python Click PyPI

         
       Completed  
 
      CLI Tool 
  
   Command-line utility for automating... 
      Python  Click  PyPI

Layout Structure

Card Layout

The ProjectCard follows a structured layout pattern:

Header Section

• Project image (aspect ratio 16:9)
• Featured badge (if applicable)

Content Section

• Project title
• Project description
• Technology stack (pills)

Action Section

• Live demo button (if URL provided)
• GitHub button (if URL provided)

Responsive Behavior

• Image maintains aspect ratio across screen sizes
• Technology pills wrap to new lines as needed
• Action buttons stack vertically on small screens
• Card width adapts to container
• Touch-friendly button sizes on mobile

Technology Stack Display

Technology Pills

Technologies are displayed as interactive pills that wrap naturally:

React Node.js TypeScript PostgreSQL Docker

tech=ReactNode.jsTypeScriptPostgreSQLDocker

Best Practices

• Limit to 3-6 main technologies for clarity
• Use consistent naming (e.g., "React" not "ReactJS")
• Order by importance or relevance
• Include both frontend and backend technologies
• Consider including deployment platforms

Action Buttons

Button Variants

Live Demo Button

Primary button for live project demos

GitHub Button

Outline button for source code

Button Logic

• Live demo button only appears if liveUrl is provided
• GitHub button only appears if githubUrl is provided
• Both buttons open in new tabs with proper security attributes
• Buttons are responsive and stack on mobile devices
• Hover effects provide visual feedback

Featured Badge

Badge Display

Featured projects display a special badge in the top-right corner:

Featured

Project with Featured Badge

This project is highlighted as featured work

         
     Featured  
     Completed

When to Use Featured

• Your best or most impressive projects
• Recent work that showcases current skills
• Projects with significant impact or recognition
• Limit to 2-3 featured projects for impact

Usage Examples

Minimal Project

         
       Completed  
 
      Simple Calculator 
  
   Basic calculator app built with vanilla JavaScript

Complete Project

         
     Featured  
     Completed  
 
      Task Management App 
  
   Full-featured task management application with real-time collaboration 
      Vue.js  Firebase  Tailwind CSS  PWA

In a Grid Layout

Grid layout with dynamic project mapping:

• Responsive grid (1-3 columns)
• Maps over projects array
• Passes all project properties
• Consistent spacing with gap-6

With Custom Styling

         
       Completed  
 
      Mobile App 
  
   Cross-platform mobile application 
      React Native  Expo  Firebase

Dependencies

This molecule component depends on the following atoms:

Required Atoms

• Card.astro - Main container
• Button.astro - Action buttons
• Badge.astro - Featured indicator
• Pill.astro - Technology tags

External Dependencies

• Image assets for projects
• Proper image optimization
• External URLs for demos/repos

Import

import ProjectCard from '../ui/molecules/ProjectCard.astro';