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>
2026-02-01 15:07:20 +01:00
commit e1bbe5455d
315 changed files with 94124 additions and 0 deletions
@@ -0,0 +1,128 @@
+import Link from 'next/link';
+import { getLocale, getTranslations } from 'next-intl/server';
+import { Mail, Linkedin, Github, MapPin } from 'lucide-react';
+
+const Footer = async () => {
+  const locale = await getLocale();
+  const t = await getTranslations('footer');
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <footer className="relative bg-zinc-800/50 backdrop-blur-sm border-t border-zinc-700/30 pt-8 pb-4 px-4">
+      <div className="max-w-7xl mx-auto">
+        <div className="flex flex-col md:grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+          {/* Contact Section */}
+          <div>
+            <h3 className="text-white text-base font-semibold mb-3">
+              {t('sections.contact.title')}
+            </h3>
+            <div className="space-y-2">
+              <a
+                href={`mailto:${t('sections.contact.email')}`}
+                className="group flex items-center gap-2 text-zinc-400 hover:text-white transition-colors duration-200 text-sm w-fit"
+              >
+                <Mail className="h-4 w-4 text-zinc-500 group-hover:text-white transition-colors duration-200 flex-shrink-0" />
+                <span>{t('sections.contact.email')}</span>
+              </a>
+              <div className="flex items-center gap-2 text-zinc-400 text-sm w-fit">
+                <MapPin className="h-4 w-4 text-zinc-500 flex-shrink-0" />
+                <span>{t('sections.contact.location')}</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Navigation Section */}
+          <div>
+            <h3 className="text-white text-base font-semibold mb-3 text-left">
+              {t('sections.navigation.title')}
+            </h3>
+            <nav className="flex flex-col space-y-2">
+              <Link
+                href={`/${locale}/portfolio`}
+                className="text-zinc-400 hover:text-white transition-colors duration-200 text-sm w-fit"
+              >
+                {t('sections.navigation.links.portfolio')}
+              </Link>
+              <Link
+                href={`/${locale}/blog`}
+                className="text-zinc-400 hover:text-white transition-colors duration-200 text-sm w-fit"
+              >
+                {t('sections.navigation.links.blog')}
+              </Link>
+              <Link
+                href={`/${locale}/about`}
+                className="text-zinc-400 hover:text-white transition-colors duration-200 text-sm w-fit"
+              >
+                {t('sections.navigation.links.about')}
+              </Link>
+              <Link
+                href={`/${locale}/contact`}
+                className="text-zinc-400 hover:text-white transition-colors duration-200 text-sm w-fit"
+              >
+                {t('sections.navigation.links.contact')}
+              </Link>
+            </nav>
+          </div>
+
+          {/* Social Media Section */}
+          <div>
+            <h3 className="text-white text-base font-semibold mb-3 text-left">
+              {t('sections.social.title')}
+            </h3>
+            <div className="flex space-x-4">
+              <a
+                href="https://www.linkedin.com/in/damjan-savić-720288127/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="group text-zinc-400 hover:text-white transition-colors duration-200"
+                aria-label="LinkedIn"
+              >
+                <Linkedin className="transform transition-transform group-hover:scale-110" size={20} />
+              </a>
+              <a
+                href="https://github.com/damjan1996"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="group text-zinc-400 hover:text-white transition-colors duration-200"
+                aria-label="GitHub"
+              >
+                <Github className="transform transition-transform group-hover:scale-110" size={20} />
+              </a>
+            </div>
+          </div>
+
+          {/* Legal Section */}
+          <div className="border-t border-zinc-700/30 pt-4">
+            <div className="flex flex-col space-y-4">
+              <p className="text-zinc-400 text-xs text-left">
+                &copy; {currentYear} Damjan Savić. {t('legal.copyright')}
+              </p>
+              <div className="flex space-x-4">
+                <Link
+                  href={`/${locale}/privacy`}
+                  className="text-zinc-400 hover:text-white text-xs transition-colors duration-200"
+                >
+                  {t('legal.links.privacy')}
+                </Link>
+                <Link
+                  href={`/${locale}/imprint`}
+                  className="text-zinc-400 hover:text-white text-xs transition-colors duration-200"
+                >
+                  {t('legal.links.imprint')}
+                </Link>
+                <Link
+                  href={`/${locale}/terms`}
+                  className="text-zinc-400 hover:text-white text-xs transition-colors duration-200"
+                >
+                  {t('legal.links.terms')}
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;