new version

src/components/ProjectShowcase.tsx

@@ -1,30 +1,42 @@
 import { ArrowUpRight } from "lucide-react";
 
-const projects = [
+type Project = {
+  title: string;
+  description: string;
+  image: string;
+  url: string;
+};
+
+const projects: Project[] = [
   {
-    title: "Triple AI",
-    description: "Webentwicklung / UI Design / Custom Code",
-    image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=600&fit=crop",
+    title: "Email Sorter",
+    description: "E-Mails automatisch sortieren",
+    image: "/project%20pics/emailsorter.png",
+    url: "https://emailsorter.webklar.com/",
   },
   {
     title: "Neutral",
     description: "Webentwicklung / Custom Code",
     image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&h=600&fit=crop",
+    url: "#",
   },
   {
     title: "Verbatim Labs",
     description: "Webentwicklung / UI Design / Custom Code",
     image: "https://images.unsplash.com/photo-1559028012-481c04fa702d?w=800&h=600&fit=crop",
+    url: "#",
   },
   {
     title: "JMK Engineers",
     description: "Webentwicklung / UI Design / Custom Code",
     image: "https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=800&h=600&fit=crop",
+    url: "#",
   },
   {
     title: "GOODZ Club",
     description: "Webentwicklung / Custom Code / Lokalisierung",
     image: "https://images.unsplash.com/photo-1542744094-3a31f272c490?w=800&h=600&fit=crop",
+    url: "#",
   },
 ];
 
@@ -45,7 +57,9 @@ const ProjectShowcase = () => {
           {projects.map((project, index) => (
             <a
               key={project.title}
-              href="#"
+              href={project.url}
+              target={project.url.startsWith("http") ? "_blank" : undefined}
+              rel={project.url.startsWith("http") ? "noopener noreferrer" : undefined}
               className="group block project-card rounded-lg p-6 md:p-8"
               style={{ animationDelay: `${index * 0.1}s` }}
             >