Initial commit: Portfolio Website

Vollständige Next.js 15 Portfolio-Website mit:
- Blog-System mit 100+ Artikeln
- Supabase-Integration
- Responsive Design mit Tailwind CSS
- TypeScript-Konfiguration
- Testing-Setup mit Vitest und Playwright

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/components/layout/NavLink.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { ReactNode } from 'react';
+
+interface NavLinkProps {
+  href: string;
+  icon: ReactNode;
+  label: string;
+  onClick?: () => void;
+  className?: string;
+}
+
+export function NavLink({ href, icon, label, onClick, className }: NavLinkProps) {
+  const pathname = usePathname();
+  // Check if path matches (accounting for locale prefix)
+  const pathWithoutLocale = pathname.replace(/^\/(de|en|sr)/, '');
+  const hrefWithoutLocale = href.replace(/^\/(de|en|sr)/, '');
+  const isActive = pathWithoutLocale === hrefWithoutLocale ||
+    (hrefWithoutLocale === '' && pathWithoutLocale === '');
+
+  return (
+    <Link
+      href={href}
+      onClick={onClick}
+      className={`
+        relative flex items-center gap-2 rounded-full py-2.5 px-4 min-h-[44px]
+        transition-all duration-200 ease-in-out
+        focus:outline-none focus:ring-2 focus:ring-zinc-600 focus:ring-offset-2 focus:ring-offset-zinc-950
+        ${isActive ? 'text-white bg-zinc-700/60' : 'text-zinc-400 hover:text-white hover:bg-zinc-800/30'}
+        ${className || ''}
+      `}
+    >
+      {icon}
+      <span className="text-sm tracking-wide">{label}</span>
+    </Link>
+  );
+}