feat: add localized project details and translations for portfolio section

src/components/Portfolio.tsx

@@ -1,15 +1,22 @@
+"use client";
+
 import Link from "next/link";
 import Image from "next/image";
+import { useTranslations } from "next-intl";
 
 /**
- * Static list of featured and secondary portfolio project items
+ * Portfolio showcase section highlighting primary and secondary projects
  */
+export default function Portfolio() {
+  const tCommon = useTranslations("Common");
+  const tPortfolio = useTranslations("Portfolio");
+
+  // Static list of featured and secondary portfolio project items with translation keys
   const PROJECTS = [
     {
       title: "DABubble",
-    type: "Web Application",
+      type: tPortfolio("projects.dabubble.type"),
-    description:
+      description: tPortfolio("projects.dabubble.description"),
-      "This App is a Slack Clone App. It revolutionizes team communication and collaboration with its intuitive interface, real-time messaging, and robust channel organization.",
       image: "/assets/projects/dabubble.png",
       tags: [
         { name: "Angular", featured: true },
@@ -18,13 +25,12 @@ const PROJECTS = [
       ],
       isFeatured: true,
       demoLink: "https://dabubble.andre-kempf.com/",
-    githubLink: "https://git.andre-kempf.com/Chneemann/dabubble",
+      gitLink: "https://git.andre-kempf.com/Chneemann/dabubble",
     },
     {
       title: "Join",
-    type: "Full-Stack App",
+      type: tPortfolio("projects.join.type"),
-    description:
+      description: tPortfolio("projects.join.description"),
-      "Task manager inspired by the Kanban System. Create and organize tasks using drag and drop functions, assign users and categories to ensure efficient management.",
       image: "/assets/projects/join.png",
       tags: [
         { name: "Angular (TS)", featured: true },
@@ -39,9 +45,8 @@ const PROJECTS = [
     },
     {
       title: "Videoflix",
-    type: "Full-Stack App",
+      type: tPortfolio("projects.videoflix.type"),
-    description:
+      description: tPortfolio("projects.videoflix.description"),
-      "Video platform for sharing and discovering videos. Upload, view, and stream content in various quality levels, all within a user-friendly interface designed to enhance the video experience.",
       image: "/assets/projects/videoflix.png",
       tags: [
         { name: "Angular (TS)", featured: true },
@@ -58,10 +63,6 @@ const PROJECTS = [
     },
   ];
 
-/**
- * Portfolio showcase section highlighting primary and secondary projects
- */
-export default function Portfolio() {
   // Separate featured highlight from remaining secondary project cards
   const featuredProject = PROJECTS.find((p) => p.isFeatured);
   const secondaryProjects = PROJECTS.filter((p) => !p.isFeatured);
@@ -74,10 +75,11 @@ export default function Portfolio() {
       {/* Section Header */}
       <div className="mb-4 space-y-1">
         <p className="text-xs font-mono text-blue-500 tracking-wider uppercase">
-          // 03. Projects
+          // 03. {tPortfolio("sectionSub")}
         </p>
         <h2 className="text-3xl font-bold text-white tracking-tight">
-          Portfolio<span className="text-blue-500">.</span>
+          {tCommon("portfolio")}
+          <span className="text-blue-500">.</span>
         </h2>
       </div>
 
@@ -87,7 +89,7 @@ export default function Portfolio() {
           <div className="group relative rounded-2xl border border-slate-700/60 bg-slate-900/90 backdrop-blur-md shadow-lg shadow-black/40 border-t-slate-600/50 hover:border-blue-500/50 hover:bg-slate-800/90 hover:shadow-2xl hover:shadow-blue-500/10 hover:-translate-y-0.5 transition-all duration-300 ease-out overflow-hidden grid md:grid-cols-12 items-center">
             <div className="absolute -top-12 -right-12 w-32 h-32 bg-blue-500/15 rounded-full blur-xl group-hover:bg-blue-500/25 transition-all duration-500 pointer-events-none z-20" />
             <div className="absolute top-0 right-0 z-20 px-4 py-1.5 bg-blue-950/80 backdrop-blur-md border-b border-l border-blue-500/60 text-blue-300 font-mono text-xs font-semibold rounded-bl-xl shadow-md shadow-blue-500/10">
-              Featured Project
+              {tPortfolio("featuredBadge")}
             </div>
 
             {/* Description & Metadata */}
@@ -135,13 +137,13 @@ export default function Portfolio() {
                       Live Demo ↗
                     </Link>
                   )}
-                  {featuredProject.githubLink && (
+                  {featuredProject.gitLink && (
                     <Link
-                      href={featuredProject.githubLink}
+                      href={featuredProject.gitLink}
                       target="_blank"
                       className="text-slate-400 hover:text-white transition-colors"
                     >
-                      GitHub Repo
+                      Git Repo
                     </Link>
                   )}
                 </div>

src/i18n/messages/de.json

@@ -31,5 +31,23 @@
   "Skills": {
     "sectionSub": "Technologien",
     "description": "Durch die praktische Arbeit an verschiedenen Projekten erweitere und vertiefe ich meine Fähigkeiten in der Full-Stack-Entwicklung kontinuierlich. Hier ist eine Übersicht der Technologien, Frameworks und Tools, mit denen ich arbeite."
+  },
+  "Portfolio": {
+    "sectionSub": "Projekte",
+    "featuredBadge": "Ausgewähltes Projekt",
+    "projects": {
+      "dabubble": {
+        "type": "Web-Anwendung",
+        "description": "Eine Slack-Klon-App, die die Teamkommunikation und -zusammenarbeit durch eine intuitive Benutzeroberfläche, Echtzeit-Messaging und robuste Kanalorganisation revolutioniert."
+      },
+      "join": {
+        "type": "Full-Stack-App",
+        "description": "Vom Kanban-System inspiriertes Task-Management. Erstelle und organisiere Aufgaben per Drag-and-Drop, weise Benutzer und Kategorien zu und sorge für effizientes Management."
+      },
+      "videoflix": {
+        "type": "Full-Stack-App",
+        "description": "Videoplattform zum Teilen und Entdecken von Videos. Lade Inhalte hoch, betrachte und streame sie in verschiedenen Qualitätsstufen – in einer benutzerfreundlichen Oberfläche."
+      }
+    }
   }
 }

src/i18n/messages/en.json

@@ -31,5 +31,23 @@
   "Skills": {
     "sectionSub": "Technical Stack",
     "description": "Through hands-on experience in various projects, I continuously expand and refine my full-stack development skills. Here is an overview of the technologies, frameworks, and tools I work with."
+  },
+  "Portfolio": {
+    "sectionSub": "Projects",
+    "featuredBadge": "Featured Project",
+    "projects": {
+      "dabubble": {
+        "type": "Web Application",
+        "description": "This App is a Slack Clone App. It revolutionizes team communication and collaboration with its intuitive interface, real-time messaging, and robust channel organization."
+      },
+      "join": {
+        "type": "Full-Stack App",
+        "description": "Task manager inspired by the Kanban System. Create and organize tasks using drag and drop functions, assign users and categories to ensure efficient management."
+      },
+      "videoflix": {
+        "type": "Full-Stack App",
+        "description": "Video platform for sharing and discovering videos. Upload, view, and stream content in various quality levels, all within a user-friendly interface designed to enhance the video experience."
+      }
+    }
   }
 }