feat: Add professional portfolio images and Hero redesign

- Add 15 optimized WebP images for portfolio (21-53KB each) - Redesign Hero section with full-width background image - Add SSR support for Hero component - Update About section with new portrait image - Update Contact page with professional headshot - Add images to Services/Leistungen page - Add image optimization script (sharp) - Update translations for gallery section Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-19 23:33:28 +01:00
parent b1ec7b4d61
commit 87c7ebc5e3
75 changed files with 10271 additions and 1314 deletions
@@ -0,0 +1,114 @@
+import { getTranslations } from 'next-intl/server';
+import { Linkedin, Github, ChevronDown } from 'lucide-react';
+import Image from 'next/image';
+
+const Hero = async () => {
+  const t = await getTranslations('pages.home.hero');
+
+  return (
+    <section id="home" className="relative h-screen max-h-screen text-white overflow-hidden">
+      {/* Hero Image - Full Width */}
+      <div className="absolute inset-0">
+        <Image
+          src="/hero-portrait.jpg"
+          alt="Damjan Savić"
+          fill
+          sizes="100vw"
+          className="object-cover object-top md:object-left"
+          priority
+        />
+      </div>
+
+      {/* Desktop: Gradient on left side */}
+      <div className="hidden md:block absolute inset-y-0 left-0 w-1/2 bg-gradient-to-r from-zinc-950 via-zinc-950 via-60% to-transparent z-10" />
+
+      {/* Mobile: Gradient at bottom for text */}
+      <div className="md:hidden absolute inset-x-0 bottom-0 h-[60%] bg-gradient-to-t from-zinc-950 via-zinc-950/80 via-40% to-transparent z-10 pointer-events-none" />
+
+      {/* Social Links - Top */}
+      <div className="absolute top-8 left-6 sm:left-12 lg:left-20 flex gap-4 z-20">
+        <a
+          href="https://www.linkedin.com/in/damjan-savi%C4%87-720288127/"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="group text-zinc-400 hover:text-white transition-colors"
+          aria-label="LinkedIn"
+        >
+          <Linkedin className="transform transition-transform group-hover:scale-110" size={22} />
+        </a>
+        <a
+          href="https://github.com/damjan1996"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="group text-zinc-400 hover:text-white transition-colors"
+          aria-label="GitHub"
+        >
+          <Github className="transform transition-transform group-hover:scale-110" size={22} />
+        </a>
+      </div>
+
+      {/* Main Content - Bottom on mobile, left on desktop */}
+      <div className="relative z-20 h-full flex flex-col justify-end md:justify-center items-center md:items-start px-6 sm:px-12 lg:px-20 pb-24 md:pb-0">
+        <div className="max-w-3xl space-y-4 md:space-y-6 text-center md:text-left">
+          <p className="text-zinc-400 text-sm sm:text-base tracking-[0.3em] uppercase">
+            {t('title')}
+          </p>
+
+          <h1 className="text-4xl sm:text-5xl lg:text-7xl font-bold tracking-tight">
+            {t('name')}
+            <span className="animate-pulse text-white/80">|</span>
+          </h1>
+
+          <p className="text-zinc-300 text-base sm:text-lg lg:text-xl max-w-lg leading-relaxed">
+            {t('description')}
+          </p>
+
+          {/* CTA Buttons */}
+          <div className="flex flex-wrap justify-center md:justify-start gap-3 sm:gap-4 pt-2 sm:pt-4">
+            <a
+              href="mailto:info@damjan-savic.com"
+              className="px-6 sm:px-8 py-2.5 sm:py-3 bg-white text-zinc-900 font-medium rounded-full hover:bg-zinc-200 transition-colors text-sm sm:text-base"
+            >
+              {t('cta')}
+            </a>
+            <a
+              href="#projects"
+              className="px-6 sm:px-8 py-2.5 sm:py-3 border border-zinc-600 text-white rounded-full hover:bg-zinc-800 transition-colors text-sm sm:text-base"
+            >
+              {t('navigation.projects')}
+            </a>
+          </div>
+
+          {/* Navigation Links - Hidden on mobile */}
+          <nav className="hidden sm:flex gap-8 pt-4 text-sm uppercase tracking-wider">
+            <a
+              href="#experience"
+              className="text-zinc-400 hover:text-white transition-colors"
+            >
+              {t('navigation.experience')}
+            </a>
+            <a
+              href="#skills"
+              className="text-zinc-400 hover:text-white transition-colors"
+            >
+              {t('navigation.skills')}
+            </a>
+            <a
+              href="#about"
+              className="text-zinc-400 hover:text-white transition-colors"
+            >
+              {t('navigation.about')}
+            </a>
+          </nav>
+        </div>
+      </div>
+
+      {/* Scroll Indicator - Hidden on mobile */}
+      <div className="hidden sm:block absolute bottom-8 left-1/2 -translate-x-1/2 z-20 animate-bounce">
+        <ChevronDown className="text-zinc-400" size={28} />
+      </div>
+    </section>
+  );
+};
+
+export default Hero;