damjan_savic/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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>
This commit is contained in:
damjan_savic
2026-01-05 22:23:38 +01:00
co-authored by Claude Opus 4.5
parent df053fb7a0
commit c775f3bbb2
2 changed files with 20 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/home/components/Hero.tsx
+11 -37
View File
@@ -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 */}