diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/projects-grid.tsx | 38 |
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> |