diff --git a/src/components/Portfolio.tsx b/src/components/Portfolio.tsx index 22e9801..18d9526 100644 --- 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 */}

- // 03. Projects + // 03. {tPortfolio("sectionSub")}

- Portfolio. + {tCommon("portfolio")} + .

@@ -87,7 +89,7 @@ export default function Portfolio() {
- Featured Project + {tPortfolio("featuredBadge")}
{/* Description & Metadata */} @@ -135,13 +137,13 @@ export default function Portfolio() { Live Demo ↗ )} - {featuredProject.githubLink && ( + {featuredProject.gitLink && ( - GitHub Repo + Git Repo )}
diff --git a/src/i18n/messages/de.json b/src/i18n/messages/de.json index b19e064..1391ac0 100644 --- 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." + } + } } } diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json index e23aa35..a4855b2 100644 --- 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." + } + } } }