locale upgrade

2026-01-22 20:56:35 +01:00
parent 377631ee50
commit 37a1bc4e18
28 changed files with 2117 additions and 71 deletions
--- a/app/_ui/HomePageServer.tsx
+++ b/app/_ui/HomePageServer.tsx
@@ -0,0 +1,136 @@
+import Header from "../components/Header.server";
+import Script from "next/script";
+import ActivityFeedClient from "./ActivityFeedClient";
+import {
+  getHeroTranslations,
+  getAboutTranslations,
+  getProjectsTranslations,
+  getContactTranslations,
+  getFooterTranslations,
+} from "@/lib/translations-loader";
+import {
+  HeroClient,
+  AboutClient,
+  ProjectsClient,
+  ContactClient,
+  FooterClient,
+} from "../components/ClientWrappers";
+
+interface HomePageServerProps {
+  locale: string;
+}
+
+export default async function HomePageServer({ locale }: HomePageServerProps) {
+  // Parallel laden aller Translations
+  const [heroT, aboutT, projectsT, contactT, footerT] = await Promise.all([
+    getHeroTranslations(locale),
+    getAboutTranslations(locale),
+    getProjectsTranslations(locale),
+    getContactTranslations(locale),
+    getFooterTranslations(locale),
+  ]);
+
+  return (
+    <div className="min-h-screen">
+      <Script
+        id={"structured-data"}
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify({
+            "@context": "https://schema.org",
+            "@type": "Person",
+            name: "Dennis Konkol",
+            url: "https://dk0.dev",
+            jobTitle: "Software Engineer",
+            address: {
+              "@type": "PostalAddress",
+              addressLocality: "Osnabrück",
+              addressCountry: "Germany",
+            },
+            sameAs: [
+              "https://github.com/Denshooter",
+              "https://linkedin.com/in/dkonkol",
+            ],
+          }),
+        }}
+      />
+      <ActivityFeedClient />
+      <Header locale={locale} />
+      {/* Spacer to prevent navbar overlap */}
+      <div className="h-24 md:h-32" aria-hidden="true"></div>
+      <main className="relative">
+        <HeroClient locale={locale} translations={heroT} />
+
+        {/* Wavy Separator 1 - Hero to About */}
+        <div className="relative h-24 overflow-hidden">
+          <svg
+            className="absolute inset-0 w-full h-full"
+            viewBox="0 0 1440 120"
+            preserveAspectRatio="none"
+          >
+            <path
+              d="M0,64 C240,96 480,32 720,64 C960,96 1200,32 1440,64 L1440,120 L0,120 Z"
+              fill="url(#gradient1)"
+            />
+            <defs>
+              <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
+                <stop offset="0%" stopColor="#BAE6FD" stopOpacity="0.4" />
+                <stop offset="50%" stopColor="#DDD6FE" stopOpacity="0.4" />
+                <stop offset="100%" stopColor="#FBCFE8" stopOpacity="0.4" />
+              </linearGradient>
+            </defs>
+          </svg>
+        </div>
+
+        <AboutClient locale={locale} translations={aboutT} />
+
+        {/* Wavy Separator 2 - About to Projects */}
+        <div className="relative h-24 overflow-hidden">
+          <svg
+            className="absolute inset-0 w-full h-full"
+            viewBox="0 0 1440 120"
+            preserveAspectRatio="none"
+          >
+            <path
+              d="M0,64 C360,96 720,32 1080,64 C1200,96 1320,32 1440,64 L1440,0 L0,0 Z"
+              fill="url(#gradient2)"
+            />
+            <defs>
+              <linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="0%">
+                <stop offset="0%" stopColor="#A7F3D0" stopOpacity="0.3" />
+                <stop offset="50%" stopColor="#BFDBFE" stopOpacity="0.3" />
+                <stop offset="100%" stopColor="#DDD6FE" stopOpacity="0.3" />
+              </linearGradient>
+            </defs>
+          </svg>
+        </div>
+
+        <ProjectsClient locale={locale} translations={projectsT} />
+
+        {/* Wavy Separator 3 - Projects to Contact */}
+        <div className="relative h-24 overflow-hidden">
+          <svg
+            className="absolute inset-0 w-full h-full"
+            viewBox="0 0 1440 120"
+            preserveAspectRatio="none"
+          >
+            <path
+              d="M0,32 C240,64 480,0 720,32 C960,64 1200,0 1440,32 L1440,120 L0,120 Z"
+              fill="url(#gradient3)"
+            />
+            <defs>
+              <linearGradient id="gradient3" x1="0%" y1="0%" x2="100%" y2="0%">
+                <stop offset="0%" stopColor="#FDE68A" stopOpacity="0.3" />
+                <stop offset="50%" stopColor="#FCA5A5" stopOpacity="0.3" />
+                <stop offset="100%" stopColor="#C4B5FD" stopOpacity="0.3" />
+              </linearGradient>
+            </defs>
+          </svg>
+        </div>
+
+        <ContactClient locale={locale} translations={contactT} />
+      </main>
+      <FooterClient locale={locale} translations={footerT} />
+    </div>
+  );
+}
--- a/app/_ui/ProjectDetailClient.tsx
+++ b/app/_ui/ProjectDetailClient.tsx
@@ -5,6 +5,7 @@ import { ExternalLink, Calendar, ArrowLeft, Github as GithubIcon, Share2 } from
 import Link from "next/link";
 import { useEffect } from "react";
 import ReactMarkdown from "react-markdown";
+import { useTranslations } from "next-intl";

 export type ProjectDetailData = {
  id: number;
@@ -28,6 +29,10 @@ export default function ProjectDetailClient({
  project: ProjectDetailData;
  locale: string;
 }) {
+  const tCommon = useTranslations("common");
+  const tDetail = useTranslations("projects.detail");
+  const tShared = useTranslations("projects.shared");
+
  // Track page view (non-blocking)
  useEffect(() => {
    try {
@@ -64,7 +69,7 @@ export default function ProjectDetailClient({
            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">{tCommon("backToProjects")}</span>
          </Link>
        </motion.div>

@@ -82,7 +87,7 @@ export default function ProjectDetailClient({
            <div className="flex gap-2 shrink-0 pt-2">
              {project.featured && (
                <span className="px-4 py-1.5 bg-stone-900 text-stone-50 text-xs font-bold rounded-full shadow-sm">
-                  Featured
+                  {tShared("featured")}
                </span>
              )}
              <span className="px-4 py-1.5 bg-white border border-stone-200 text-stone-600 text-xs font-medium rounded-full shadow-sm">
@@ -99,7 +104,7 @@ export default function ProjectDetailClient({
            <div className="flex items-center space-x-2">
              <Calendar size={18} />
              <span className="font-mono">
-                {new Date(project.date).toLocaleDateString(undefined, {
+                {new Date(project.date).toLocaleDateString(locale || undefined, {
                  year: "numeric",
                  month: "long",
                  day: "numeric",
@@ -183,7 +188,7 @@ export default function ProjectDetailClient({
            <div className="bg-white/50 backdrop-blur-xl border border-white/60 p-6 rounded-2xl shadow-sm sticky top-32">
              <h3 className="font-bold text-stone-900 mb-4 flex items-center gap-2">
                <Share2 size={18} />
-                Project Links
+                {tDetail("links")}
              </h3>
              <div className="space-y-3">
                {project.live && project.live.trim() && project.live !== "#" ? (
@@ -193,12 +198,12 @@ export default function ProjectDetailClient({
                    rel="noopener noreferrer"
                    className="flex items-center justify-between w-full px-4 py-3 bg-stone-900 text-stone-50 rounded-xl font-medium hover:bg-stone-800 hover:scale-[1.02] transition-all shadow-md group"
                  >
-                    <span>Live Demo</span>
+                    <span>{tDetail("liveDemo")}</span>
                    <ExternalLink size={18} className="group-hover:translate-x-1 transition-transform" />
                  </a>
                ) : (
                  <div className="px-4 py-3 bg-stone-100 text-stone-400 rounded-xl font-medium text-sm text-center border border-stone-200 cursor-not-allowed">
-                    Live demo not available
+                    {tDetail("liveNotAvailable")}
                  </div>
                )}

@@ -209,14 +214,14 @@ export default function ProjectDetailClient({
                    rel="noopener noreferrer"
                    className="flex items-center justify-between w-full px-4 py-3 bg-white border border-stone-200 text-stone-700 rounded-xl font-medium hover:bg-stone-50 hover:text-stone-900 hover:border-stone-300 transition-all shadow-sm group"
                  >
-                    <span>View Source</span>
+                    <span>{tDetail("viewSource")}</span>
                    <GithubIcon size={18} className="group-hover:rotate-12 transition-transform" />
                  </a>
                ) : null}
              </div>

              <div className="mt-8 pt-6 border-t border-stone-100">
-                <h4 className="text-xs font-bold text-stone-400 uppercase tracking-wider mb-3">Tech Stack</h4>
+                <h4 className="text-xs font-bold text-stone-400 uppercase tracking-wider mb-3">{tDetail("techStack")}</h4>
                <div className="flex flex-wrap gap-2">
                  {project.tags.map((tag) => (
                    <span
--- a/app/_ui/ProjectsPageClient.tsx
+++ b/app/_ui/ProjectsPageClient.tsx
@@ -4,6 +4,7 @@ import { useEffect, useMemo, useState } from "react";
 import { motion } from "framer-motion";
 import { ExternalLink, Github, Calendar, ArrowLeft, Search } from "lucide-react";
 import Link from "next/link";
+import { useTranslations } from "next-intl";

 export type ProjectListItem = {
  id: number;
@@ -27,7 +28,11 @@ export default function ProjectsPageClient({
  projects: ProjectListItem[];
  locale: string;
 }) {
-  const [selectedCategory, setSelectedCategory] = useState("All");
+  const tCommon = useTranslations("common");
+  const tList = useTranslations("projects.list");
+  const tShared = useTranslations("projects.shared");
+
+  const [selectedCategory, setSelectedCategory] = useState("all");
  const [searchQuery, setSearchQuery] = useState("");
  const [mounted, setMounted] = useState(false);

@@ -37,13 +42,13 @@ export default function ProjectsPageClient({

  const categories = useMemo(() => {
    const unique = Array.from(new Set(projects.map((p) => p.category))).filter(Boolean);
-    return ["All", ...unique];
+    return ["all", ...unique];
  }, [projects]);

  const filteredProjects = useMemo(() => {
    let result = projects;

-    if (selectedCategory !== "All") {
+    if (selectedCategory !== "all") {
      result = result.filter((project) => project.category === selectedCategory);
    }

@@ -77,16 +82,13 @@ export default function ProjectsPageClient({
            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>{tCommon("backToHome")}</span>
          </Link>

          <h1 className="text-5xl md:text-6xl font-black font-sans mb-6 text-stone-900 tracking-tight">
-            My Projects
+            {tList("title")}
          </h1>
-          <p className="text-xl text-stone-600 max-w-3xl font-light leading-relaxed">
-            Explore my portfolio of projects, from web applications to mobile apps. Each project showcases different
-            skills and technologies.
-          </p>
+          <p className="text-xl text-stone-600 max-w-3xl font-light leading-relaxed">{tList("intro")}</p>
        </motion.div>

        {/* Filters & Search */}
@@ -108,7 +110,7 @@ export default function ProjectsPageClient({
                    : "bg-white text-stone-600 border-stone-200 hover:bg-stone-50 hover:border-stone-300"
                }`}
              >
-                {category}
+                {category === "all" ? tList("all") : category}
              </button>
            ))}
          </div>
@@ -118,7 +120,7 @@ export default function ProjectsPageClient({
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-stone-400" size={18} />
            <input
              type="text"
-              placeholder="Search projects..."
+              placeholder={tList("searchPlaceholder")}
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="w-full pl-10 pr-4 py-2 bg-white border border-stone-200 rounded-full text-stone-800 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-stone-200 focus:border-stone-400 transition-all"
@@ -172,7 +174,7 @@ export default function ProjectsPageClient({
                {project.featured && (
                  <div className="absolute top-3 left-3 z-20">
                    <div className="px-3 py-1 bg-[#292524]/80 backdrop-blur-md text-[#fdfcf8] text-[10px] font-bold uppercase tracking-widest rounded-full shadow-sm border border-white/10">
-                      Featured
+                        {tShared("featured")}
                    </div>
                  </div>
                )}
@@ -273,15 +275,15 @@ export default function ProjectsPageClient({

        {filteredProjects.length === 0 && (
          <div className="text-center py-20">
-            <p className="text-stone-500 text-lg">No projects found matching your criteria.</p>
+            <p className="text-stone-500 text-lg">{tList("noResults")}</p>
            <button
              onClick={() => {
-                setSelectedCategory("All");
+                setSelectedCategory("all");
                setSearchQuery("");
              }}
              className="mt-4 text-stone-800 font-medium hover:underline"
            >
-              Clear filters
+              {tList("clearFilters")}
            </button>
          </div>
        )}