GretTech
Back to Components

Project Card

portfolio

A sophisticated card component for showcasing projects with 3D hover effects.

Props

PropTypeDefaultDescription
project
object-The project data object.
title
string"Portfolio Website Redesign"The title of the project.
description
string"A modern, responsive portfolio..."A description of the project.
technologies
string[]['Next.js', 'React', 'Tailwind CSS', 'Framer Motion']Array of technologies used.
url
string""Live URL of the project.
githubUrl
string""GitHub repository URL.
startDate
Date | stringnew Date(2023, 0, 1)The start date of the project.
endDate
Date | stringnew Date(2023, 5, 15)The end date of the project.
imageUrl
string""URL for the project thumbnail image.

Usage Examples

Private Project (No Image/Links)

import { ProjectCard } from "@/showcase/project-card";
export default function PrivateProjectExample() {
  const project = {
    title: "Internal Dashboard",
    description: "An internal company dashboard. The source code is private and there is no public demo.",
    technologies: ["Next.js", "Tailwind CSS"],
  };
  return <ProjectCard project={project} />;
}

Key Features

  • 3D hover tilt effect
  • Dynamic background gradients
  • Technology tags
  • Responsive image layout