feat: add localized project details and translations for portfolio section

2026-08-04 16:15:00 +02:00 · 2026-08-04 16:15:00 +02:00 · 21cbb732cf
commit 21cbb732cf
parent fb5350c66c
3 changed files with 101 additions and 63 deletions
--- a/src/components/Portfolio.tsx
+++ b/src/components/Portfolio.tsx
@ -1,67 +1,68 @@
+"use client";
+
 import Link from "next/link";
 import Image from "next/image";
-
-/**
- * Static list of featured and secondary portfolio project items
- */
-const PROJECTS = [
-  {
-    title: "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.",
-    image: "/assets/projects/dabubble.png",
-    tags: [
-      { name: "Angular", featured: true },
-      { name: "TypeScript", featured: true },
-      { name: "Google Firebase", featured: false },
-    ],
-    isFeatured: true,
-    demoLink: "https://dabubble.andre-kempf.com/",
-    githubLink: "https://git.andre-kempf.com/Chneemann/dabubble",
-  },
-  {
-    title: "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.",
-    image: "/assets/projects/join.png",
-    tags: [
-      { name: "Angular (TS)", featured: true },
-      { name: "Django REST", featured: true },
-      { name: "Python", featured: false },
-      { name: "PostgreSQL", featured: false },
-    ],
-    isFeatured: false,
-    demoLink: "https://join.andre-kempf.com/",
-    frontendLink: "https://git.andre-kempf.com/Chneemann/join",
-    backendLink: "https://git.andre-kempf.com/Chneemann/join-api",
-  },
-  {
-    title: "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.",
-    image: "/assets/projects/videoflix.png",
-    tags: [
-      { name: "Angular (TS)", featured: true },
-      { name: "Django REST", featured: true },
-      { name: "Python", featured: false },
-      { name: "PostgreSQL", featured: false },
-    ],
-    isFeatured: false,
-    demoLink: "https://videoflix.andre-kempf.com/",
-    frontendLink:
-      "https://git.andre-kempf.com/Chneemann/videoflix/src/branch/main/frontend",
-    backendLink:
-      "https://git.andre-kempf.com/Chneemann/videoflix/src/branch/main/backend",
-  },
-];
+import { useTranslations } from "next-intl";

 /**
 * 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: tPortfolio("projects.dabubble.type"),
+      description: tPortfolio("projects.dabubble.description"),
+      image: "/assets/projects/dabubble.png",
+      tags: [
+        { name: "Angular", featured: true },
+        { name: "TypeScript", featured: true },
+        { name: "Google Firebase", featured: false },
+      ],
+      isFeatured: true,
+      demoLink: "https://dabubble.andre-kempf.com/",
+      gitLink: "https://git.andre-kempf.com/Chneemann/dabubble",
+    },
+    {
+      title: "Join",
+      type: tPortfolio("projects.join.type"),
+      description: tPortfolio("projects.join.description"),
+      image: "/assets/projects/join.png",
+      tags: [
+        { name: "Angular (TS)", featured: true },
+        { name: "Django REST", featured: true },
+        { name: "Python", featured: false },
+        { name: "PostgreSQL", featured: false },
+      ],
+      isFeatured: false,
+      demoLink: "https://join.andre-kempf.com/",
+      frontendLink: "https://git.andre-kempf.com/Chneemann/join",
+      backendLink: "https://git.andre-kempf.com/Chneemann/join-api",
+    },
+    {
+      title: "Videoflix",
+      type: tPortfolio("projects.videoflix.type"),
+      description: tPortfolio("projects.videoflix.description"),
+      image: "/assets/projects/videoflix.png",
+      tags: [
+        { name: "Angular (TS)", featured: true },
+        { name: "Django REST", featured: true },
+        { name: "Python", featured: false },
+        { name: "PostgreSQL", featured: false },
+      ],
+      isFeatured: false,
+      demoLink: "https://videoflix.andre-kempf.com/",
+      frontendLink:
+        "https://git.andre-kempf.com/Chneemann/videoflix/src/branch/main/frontend",
+      backendLink:
+        "https://git.andre-kempf.com/Chneemann/videoflix/src/branch/main/backend",
+    },
+  ];
+
  // 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>
--- a/src/i18n/messages/de.json
+++ b/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."
+      }
+    }
  }
 }
--- a/src/i18n/messages/en.json
+++ b/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."
+      }
+    }
  }
 }