diff --git a/public/assets/projects/dabubble.png b/public/assets/projects/dabubble.png deleted file mode 100644 index ffaaef0..0000000 Binary files a/public/assets/projects/dabubble.png and /dev/null differ diff --git a/public/assets/projects/flowstate.png b/public/assets/projects/flowstate.png new file mode 100644 index 0000000..04df9ad Binary files /dev/null and b/public/assets/projects/flowstate.png differ diff --git a/public/assets/projects/videoflix.png b/public/assets/projects/videoflix.png deleted file mode 100644 index bbeac4e..0000000 Binary files a/public/assets/projects/videoflix.png and /dev/null differ diff --git a/public/assets/projects/waveform.png b/public/assets/projects/waveform.png new file mode 100644 index 0000000..1370f51 Binary files /dev/null and b/public/assets/projects/waveform.png differ diff --git a/src/components/Portfolio.tsx b/src/components/Portfolio.tsx index 18d9526..e65dc98 100644 --- a/src/components/Portfolio.tsx +++ b/src/components/Portfolio.tsx @@ -14,18 +14,37 @@ export default function 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", + title: "Waveform", + type: tPortfolio("projects.waveform.type"), + description: tPortfolio("projects.waveform.description"), + image: "/assets/projects/waveform.png", tags: [ - { name: "Angular", featured: true }, - { name: "TypeScript", featured: true }, - { name: "Google Firebase", featured: false }, + { name: "Next.js", featured: true }, + { name: "React", featured: true }, + { name: "Tailwind CSS", featured: false }, + { name: "PostgreSQL", featured: false }, + { name: "Auth.js", featured: true }, ], isFeatured: true, - demoLink: "https://dabubble.andre-kempf.com/", - gitLink: "https://git.andre-kempf.com/Chneemann/dabubble", + demoLink: "https://waveform.andre-kempf.com/", + gitLink: "https://git.andre-kempf.com/Chneemann/waveform", + }, + { + title: "Flowstate", + type: tPortfolio("projects.flowstate.type"), + description: tPortfolio("projects.flowstate.description"), + image: "/assets/projects/flowstate.png", + tags: [ + { name: "Next.js", featured: true }, + { name: "React", featured: true }, + { name: "Tailwind CSS", featured: false }, + { name: "PostgreSQL", featured: false }, + { name: "Drizzle ORM", featured: false }, + { name: "Auth.js", featured: true }, + ], + isFeatured: false, + demoLink: "https://flowstate.andre-kempf.com/", + gitLink: "https://git.andre-kempf.com/Chneemann/flowstate", }, { title: "Join", @@ -43,24 +62,6 @@ export default function Portfolio() { 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 @@ -253,6 +254,15 @@ export default function Portfolio() { Backend )} + {project.gitLink && ( + + Git Repo + + )} diff --git a/src/i18n/messages/de.json b/src/i18n/messages/de.json index 29a32e8..f01c519 100644 --- a/src/i18n/messages/de.json +++ b/src/i18n/messages/de.json @@ -40,17 +40,17 @@ "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." + "flowstate": { + "type": "Full-Stack-App", + "description": "Flowstate ist eine moderne, leistungsstarke Kanban- & Workflow-Webanwendung für nahtloses Produktivitätsmanagement. Entwickelt mit Next.js 16, React 19, PostgreSQL und Drizzle ORM bietet sie ein geschütztes Dashboard, flexible Server- und Board-Verwaltung sowie eine vollautomatisierte Docker-Deployment-Pipeline." + }, + "waveform": { + "type": "Full-Stack-App", + "description": "Waveform ist eine moderne, performante Echtzeit-Chat-Anwendung für nahtlose Kommunikation. Entwickelt mit Next.js 16, React 19, PostgreSQL und Drizzle ORM bietet sie modulare Chat- und Serverstrukturen, Auth.js v5 Authentifizierung und eine automatisierte CI/CD-Deployment-Pipeline." }, "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 397fa1c..34b44d5 100644 --- a/src/i18n/messages/en.json +++ b/src/i18n/messages/en.json @@ -41,17 +41,17 @@ "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." + "flowstate": { + "type": "Full-Stack-App", + "description": "Flowstate is a modern, high-performance Kanban and workflow web application designed for effortless productivity management. Built with Next.js 16, React 19, PostgreSQL, and Drizzle ORM, it features a secure dashboard, flexible board management, and a fully automated Docker deployment pipeline." + }, + "waveform": { + "type": "Full-Stack-App", + "description": "Waveform is a modern, high-performance real-time chat application designed for seamless communication. Built with Next.js 16, React 19, PostgreSQL, and Drizzle ORM, it features modular chat interfaces, secure Auth.js v5 authentication, and an automated CI/CD deployment pipeline." }, "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." } } },