From c775f3bbb2b46ed5ae052b16c278ac92dbaae8dc Mon Sep 17 00:00:00 2001
From: Damjan Savic <info@damjan-savic.com>
Date: Mon, 5 Jan 2026 22:23:38 +0100
Subject: [PATCH] =?UTF-8?q?Performance:=20Hero-Text=20sofort=20sichtbar=20?=
 =?UTF-8?q?f=C3=BCr=20bessere=20LCP?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Framer-motion Animationen aus Hero-Text entfernt
- Text-Elemente sind jetzt sofort sichtbar ohne opacity: 0
- Eliminiert 3.260ms Render-Verzögerung für LCP-Element
- Kontrast verbessert: text-zinc-500 -> text-zinc-400

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/pages/home/components/Hero.tsx | 48 +++++++-----------------------
 tailwind.config.js                 |  9 ++++++
 2 files changed, 20 insertions(+), 37 deletions(-)

diff --git a/src/pages/home/components/Hero.tsx b/src/pages/home/components/Hero.tsx
index 47cf399..1776857 100644
--- a/src/pages/home/components/Hero.tsx
+++ b/src/pages/home/components/Hero.tsx
@@ -1,6 +1,5 @@
 import { useTranslation } from 'react-i18next';
 import { Github, Linkedin, Mail } from 'lucide-react';
-import { motion } from 'framer-motion';
 
 const Hero = () => {
     const { t } = useTranslation();
@@ -92,47 +91,22 @@ const Hero = () => {
                     </picture>
                 </div>
 
-                {/* Title and Name */}
-                <motion.p
-                    initial={{ opacity: 0, y: 20 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.5, delay: 0.2 }}
-                    className="text-zinc-400 text-sm sm:text-base tracking-wider mb-2"
-                >
+                {/* Title and Name - sofort sichtbar für LCP (keine opacity Animation!) */}
+                <p className="text-zinc-400 text-sm sm:text-base tracking-wider mb-2">
                     {t('pages.home.hero.title')}
-                </motion.p>
-                <motion.h1
-                    initial={{ opacity: 0, y: 20 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.5, delay: 0.3 }}
-                    className="text-4xl sm:text-5xl font-bold mb-3 flex items-center"
-                >
+                </p>
+                <h1 className="text-4xl sm:text-5xl font-bold mb-3 flex items-center">
                     {t('pages.home.hero.name')}<span className="animate-pulse ml-1">|</span>
-                </motion.h1>
-                <motion.p
-                    initial={{ opacity: 0, y: 20 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.5, delay: 0.35 }}
-                    className="text-zinc-300 text-sm sm:text-base max-w-xl text-center mb-2 px-4"
-                >
+                </h1>
+                <p className="text-zinc-300 text-sm sm:text-base max-w-xl text-center mb-2 px-4">
                     {t('pages.home.hero.description')}
-                </motion.p>
-                <motion.p
-                    initial={{ opacity: 0, y: 20 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.5, delay: 0.38 }}
-                    className="text-zinc-500 text-xs sm:text-sm mb-8"
-                >
+                </p>
+                <p className="text-zinc-400 text-xs sm:text-sm mb-8">
                     {t('pages.home.hero.currentRole')}
-                </motion.p>
+                </p>
 
                 {/* Navigation */}
-                <motion.div
-                    initial={{ opacity: 0, y: 20 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.5, delay: 0.4 }}
-                    className="flex flex-col sm:flex-row gap-4 sm:gap-8 text-white text-base sm:text-lg z-20"
-                >
+                <div className="flex flex-col sm:flex-row gap-4 sm:gap-8 text-white text-base sm:text-lg z-20">
                     <button
                         onClick={() => scrollToSection('experience')}
                         className="relative w-full sm:w-auto px-8 py-3 rounded-full uppercase cursor-pointer overflow-hidden group"
@@ -161,7 +135,7 @@ const Hero = () => {
                         <span className="relative z-10">{t('pages.home.hero.navigation.about')}</span>
                         <div className="absolute inset-0 bg-zinc-700/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-full" />
                     </button>
-                </motion.div>
+                </div>
             </div>
 
             {/* Contact Button Bottom */}
diff --git a/tailwind.config.js b/tailwind.config.js
index 25c6767..fa01b18 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -13,6 +13,15 @@ module.exports = {
       fontFamily: {
         sans: ['Inter', 'system-ui', 'sans-serif'],
       },
+      animation: {
+        'slide-up': 'slideUp 0.5s ease-out forwards',
+      },
+      keyframes: {
+        slideUp: {
+          '0%': { transform: 'translateY(10px)' },
+          '100%': { transform: 'translateY(0)' },
+        },
+      },
       colors: {
         border: "rgb(var(--border))",
         input: "rgb(var(--input))",