Migrate from Vite to Next.js 15 with SSR

- Replace Vite + React Router with Next.js 15 App Router - Implement i18n with next-intl (URL-based: /de, /en, /sr) - Add SSR/SSG for all pages (48 static pages generated) - Setup Supabase SSR client for auth - Migrate all pages: Home, About, Portfolio, Blog, Contact, Login, Dashboard, Imprint, Privacy, Terms - Add Docker support with standalone output - Replace i18next with next-intl JSON translations - Use next/image for optimized images Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-17 01:00:33 +01:00
parent a66f51b9a2
commit b1ec7b4d61
281 changed files with 8024 additions and 8901 deletions
@@ -0,0 +1,89 @@
+import { setRequestLocale } from 'next-intl/server';
+import type { Metadata } from 'next';
+import { getTranslations } from 'next-intl/server';
+import Link from 'next/link';
+
+type Props = {
+  params: Promise<{ locale: string }>;
+};
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: 'pages.about.seo' });
+
+  return {
+    title: t('title'),
+    description: t('description'),
+  };
+}
+
+export default async function AboutPage({ params }: Props) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+
+  const t = await getTranslations('pages.about');
+
+  return (
+    <main className="min-h-screen py-20 px-4">
+      <div className="max-w-4xl mx-auto">
+        {/* Breadcrumb */}
+        <nav className="mb-8">
+          <Link href={`/${locale}`} className="text-zinc-400 hover:text-white transition-colors">
+            Home
+          </Link>
+          <span className="text-zinc-600 mx-2">/</span>
+          <span className="text-white">About</span>
+        </nav>
+
+        {/* Hero Section */}
+        <section className="mb-16">
+          <p className="text-zinc-400 text-sm tracking-wider mb-2">
+            {t('hero.aboutMe')}
+          </p>
+          <h1 className="text-4xl sm:text-5xl font-bold mb-6">
+            {t('hero.title')}
+          </h1>
+          <p className="text-zinc-300 text-lg leading-relaxed">
+            {t('hero.description')}
+          </p>
+        </section>
+
+        {/* Skills Section */}
+        <section className="mb-16">
+          <h2 className="text-2xl font-bold mb-8">Core Expertise</h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div className="bg-zinc-800/50 rounded-lg p-6 border border-zinc-700/50">
+              <h3 className="text-lg font-semibold mb-2">AI & Automation</h3>
+              <p className="text-zinc-400 text-sm">
+                GPT-4, Claude API, Voice AI, n8n, Process Automation
+              </p>
+            </div>
+            <div className="bg-zinc-800/50 rounded-lg p-6 border border-zinc-700/50">
+              <h3 className="text-lg font-semibold mb-2">Fullstack Development</h3>
+              <p className="text-zinc-400 text-sm">
+                Python, TypeScript, React, Next.js, Node.js
+              </p>
+            </div>
+            <div className="bg-zinc-800/50 rounded-lg p-6 border border-zinc-700/50">
+              <h3 className="text-lg font-semibold mb-2">System Integration</h3>
+              <p className="text-zinc-400 text-sm">
+                ERP Systems, APIs, Database Design, DevOps
+              </p>
+            </div>
+          </div>
+        </section>
+
+        {/* Contact CTA */}
+        <section className="text-center">
+          <h2 className="text-2xl font-bold mb-4">Interested in working together?</h2>
+          <Link
+            href={`/${locale}/contact`}
+            className="inline-block px-8 py-4 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors"
+          >
+            Get in Touch
+          </Link>
+        </section>
+      </div>
+    </main>
+  );
+}