Project Card

The ProjectCard is the core of the portfolio section. It features a hover reveal effect for details and tags.

Usage

import ProjectCard from '~/components/blog/ProjectCard.astro';

<ProjectCard
  title="Project Title"
  description="Brief description."
  image="https://example.com/image.webp"
  tags={['React', 'Astro']}
  slug="project-detail"
/>

Example

Props

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | title | string | Required | The name of the project. | | description | string | Required | A brief overview of the project. | | image | string | Required | URL of the project’s cover image. | | tags | string[] | Required | Array of technology or category tags. | | slug | string | Required | URL slug for the project detail page. |