Performance: Hero-Text sofort sichtbar für bessere LCP

- 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

@@ -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 */}
+                {/* Title and Name - sofort sichtbar für LCP (keine opacity Animation!) */}
-                <motion.p
+                <p className="text-zinc-400 text-sm sm:text-base tracking-wider mb-2">
-                    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"
-                >
                     {t('pages.home.hero.title')}
-                </motion.p>
+                </p>
-                <motion.h1
+                <h1 className="text-4xl sm:text-5xl font-bold mb-3 flex items-center">
-                    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"
-                >
                     {t('pages.home.hero.name')}<span className="animate-pulse ml-1">|</span>
-                </motion.h1>
+                </h1>
-                <motion.p
+                <p className="text-zinc-300 text-sm sm:text-base max-w-xl text-center mb-2 px-4">
-                    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"
-                >
                     {t('pages.home.hero.description')}
-                </motion.p>
+                </p>
-                <motion.p
+                <p className="text-zinc-400 text-xs sm:text-sm mb-8">
-                    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"
-                >
                     {t('pages.home.hero.currentRole')}
-                </motion.p>
+                </p>
 
                 {/* Navigation */}
-                <motion.div
+                <div className="flex flex-col sm:flex-row gap-4 sm:gap-8 text-white text-base sm:text-lg z-20">
-                    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"
-                >
                     <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 */}

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))",