feat: add image/video preview of projects

1 files changed, 32 insertions, 6 deletions

diff --git a/components/projects-grid.tsx b/components/projects-grid.tsx
index 9ccb0fb..52ef95a 100644
--- a/components/projects-grid.tsx
+++ b/components/projects-grid.tsx
@@ -1,10 +1,13 @@
 import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import Link from "next/link";
+import Image from "next/image";
 
 interface Project {
   title: string;
   description: string;
   githubUrl: string;
+  videoSrc?: string;
+	imageSrc?: string;
 }
 
 const projects: Project[] = [
@@ -12,20 +15,23 @@ const projects: Project[] = [
     title: "Boilerplate",
     description: "A comprehensive starter template for modern web development projects.",
     githubUrl: "https://github.com/schererleander/boilerplate",
+    videoSrc: "/videos/boilerplate-preview.mp4",
   },
   {
-    title: "Quiz Website",
-    description: "An interactive quiz platform built to test your knowledge.",
-    githubUrl: "https://github.com/schererleander/quiz",
+    title: "Authentication",
+    description: "Simple authentication system built using Express.js.",
+    githubUrl: "https://github.com/schererleander/authentication",
+		imageSrc: "/images/authentication-preview.png"
   },
   {
     title: "Space Invaders",
-    description: "A classic arcade game clone recreated with modern web technologies.",
+    description: "Space Invaders clone written in Python using Pygame for an old-school project.",
     githubUrl: "https://github.com/schererleander/spaceinvaders",
+    videoSrc: "/videos/spaceinvaders-preview.mp4",
   },
   {
     title: "Specula",
-    description: "A mirror project or reflection tool (Description inferred from name).",
+    description: "A minimal TUI tool written in Go to view file metadata and description.",
     githubUrl: "https://github.com/schererleander/specula",
   },
 ];
@@ -37,7 +43,27 @@ export function ProjectsGrid() {
         {projects.map((project) => (
           <Link href={project.githubUrl} key={project.title} target="_blank" className="block group h-full">
             <Card className="h-full transition-all duration-300 bg-card/50 hover:bg-card/80 shadow-none p-0 gap-0 overflow-hidden">
-              <div className="w-full h-40 bg-muted animate-pulse" />
+              {project.videoSrc ? (
+                  <video
+                    className="w-full h-40 object-cover"
+                    src={project.videoSrc}
+                    autoPlay
+                    loop
+                    muted
+                    playsInline
+                    aria-label={`${project.title} preview`}
+                  />
+              ) : project.imageSrc ? (
+								<Image
+										className="w-full h-40 object-cover"
+										src={project.imageSrc}
+										alt={`${project.title} preview`}
+										width={500}
+										height={300}
+									/>
+							) : (
+                <div className="w-full h-40 bg-muted animate-pulse" />
+              )}
               <CardHeader className="p-6">
                 <CardTitle className="group-hover:text-primary transition-colors">{project.title}</CardTitle>
                 <CardDescription className="text-muted-foreground/60 group-hover:text-muted-foreground transition-colors">{project.description}</CardDescription>