import Image from "next/image"; import Link from "next/link"; import { ExternalLink } from "lucide-react"; import { Card, CardContent, CardFooter, CardHeader, } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; // Sample project data with tech-related projects const projects = [ { id: 1, title: "E-Commerce Platform", category: "Web Development", description: "A responsive e-commerce platform built with Next.js and Stripe integration.", image: "https://images.unsplash.com/photo-1546054454-aa26e2b734c7?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.0.3", tags: ["Next.js", "React", "Stripe", "Tailwind CSS"], }, { id: 2, title: "AI-Powered Analytics Dashboard", category: "Data Visualization", description: "Interactive dashboard with machine learning insights for business metrics.", image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3", tags: ["React", "D3.js", "TensorFlow.js", "Python"], }, { id: 3, title: "Mobile Fitness App", category: "App Development", description: "Cross-platform fitness tracking application with social features and workout plans.", image: "https://images.unsplash.com/photo-1593811167562-9cef47bfc4d7?q=80&w=2069&auto=format&fit=crop&ixlib=rb-4.0.3", tags: ["React Native", "Firebase", "Redux", "HealthKit"], }, { id: 4, title: "Blockchain Wallet Interface", category: "Web3 Development", description: "Secure and intuitive wallet application for cryptocurrency management.", image: "https://images.unsplash.com/photo-1639762681485-074b7f938ba0?q=80&w=2032&auto=format&fit=crop&ixlib=rb-4.0.3", tags: ["Ethereum", "Web3.js", "React", "Solidity"], }, { id: 5, title: "Real-time Chat Application", category: "Full Stack Development", description: "End-to-end encrypted messaging platform with video call capabilities.", image: "https://images.unsplash.com/photo-1611162616305-c69b3fa7fbe0?q=80&w=2074&auto=format&fit=crop&ixlib=rb-4.0.3", tags: ["Socket.io", "WebRTC", "Node.js", "MongoDB"], }, { id: 6, title: "Smart Home IoT Dashboard", category: "IoT Development", description: "Control system for smart home devices with automation rules and energy tracking.", image: "https://images.unsplash.com/photo-1585503418537-88331351ad99?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3", tags: ["IoT", "MQTT", "React", "Node.js"], }, ]; export default function PortfolioProjectStandardGrid() { return (

{/* Section header */}

Featured Projects

A selection of my recent software development work, showcasing expertise in front-end, back-end, and mobile application development.

{/* Project grid */}

{projects.map((project) => ( {/* Project image */}

{/* Category badge visible on hover */}

{project.category}

{/* Project content */}

{project.title}

{project.description}

{/* Tags */}

{project.tags.map((tag) => ( {tag} ))}

))}

); }

Portfolio Project Displays

Standard Grid

Filterable GridPreview

Quote StackPreview

Stats CardsPreview

Zigzag LayoutPreview