Refactor for i18n, CMS integration, and project slugs; enhance admin & analytics

Co-authored-by: dennis <dennis@konkol.net>

app/projects/[slug]/page.tsx

@@ -6,9 +6,11 @@ import Link from 'next/link';
 import { useParams } from 'next/navigation';
 import { useState, useEffect } from 'react';
 import ReactMarkdown from 'react-markdown';
+import { useLocale, useTranslations } from "next-intl";
 
 interface Project {
   id: number;
+  slug: string;
   title: string;
   description: string;
   content: string;
@@ -24,6 +26,8 @@ interface Project {
 const ProjectDetail = () => {
   const params = useParams();
   const slug = params.slug as string;
+  const locale = useLocale();
+  const t = useTranslations("common");
   const [project, setProject] = useState<Project | null>(null);
 
   // Load project from API by slug
@@ -90,11 +94,11 @@ const ProjectDetail = () => {
           className="mb-8"
         >
           <Link
-            href="/projects"
+            href={`/${locale}/projects`}
             className="inline-flex items-center space-x-2 text-stone-500 hover:text-stone-900 transition-colors group"
           >
             <ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
-            <span className="font-medium">Back to Projects</span>
+            <span className="font-medium">{t("backToProjects")}</span>
           </Link>
         </motion.div>
 

app/projects/page.tsx

@@ -4,9 +4,11 @@ import { useState, useEffect } from "react";
 import { motion } from 'framer-motion';
 import { ExternalLink, Github, Calendar, ArrowLeft, Search } from 'lucide-react';
 import Link from 'next/link';
+import { useLocale, useTranslations } from "next-intl";
 
 interface Project {
   id: number;
+  slug: string;
   title: string;
   description: string;
   content: string;
@@ -26,6 +28,8 @@ const ProjectsPage = () => {
   const [selectedCategory, setSelectedCategory] = useState("All");
   const [searchQuery, setSearchQuery] = useState("");
   const [mounted, setMounted] = useState(false);
+  const locale = useLocale();
+  const t = useTranslations("common");
 
   // Load projects from API
   useEffect(() => {
@@ -87,11 +91,11 @@ const ProjectsPage = () => {
           className="mb-12"
         >
           <Link
-            href="/"
+            href={`/${locale}`}
             className="inline-flex items-center space-x-2 text-stone-500 hover:text-stone-800 transition-colors mb-8 group"
           >
             <ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
-            <span>Back to Home</span>
+            <span>{t("backToHome")}</span>
           </Link>
           
           <h1 className="text-5xl md:text-6xl font-black font-sans mb-6 text-stone-900 tracking-tight">
@@ -222,7 +226,7 @@ const ProjectsPage = () => {
               <div className="p-6 flex flex-col flex-1">
                 {/* Stretched Link covering the whole card (including image area) */}
                 <Link
-                  href={`/projects/${project.title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`}
+                  href={`/${locale}/projects/${project.slug}`}
                   className="absolute inset-0 z-10"
                   aria-label={`View project ${project.title}`}
                 />