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

Performance: Framer-motion aus kritischem Pfad entfernt

Browse Source 
- Framer-motion aus Layout, NavLink, ContactInfo, LanguageSwitcher entfernt
- PageTransition komplett vereinfacht (keine 1200ms Verzögerung mehr)
- FloatingPaths wird erst nach 2s lazy geladen
- Framer-motion und lucide-react in separate Chunks getrennt
- Icons-Chunk: 10.87KB (statt 126KB ui-vendor)
- Animations-Chunk wird erst bei Bedarf geladen

Einsparung: ~115KB beim Initial Load

🤖 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:34:52 +01:00
co-authored by Claude Opus 4.5
parent c775f3bbb2
commit 61c7c523ab
8 changed files with 209 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ContactInfo.tsx
+5 -11
View File
@@ -1,15 +1,9 @@
import { Phone, Mail, ArrowRight } from "lucide-react" import { Phone, Mail, ArrowRight } from "lucide-react"
import { Link } from "react-router-dom" import { Link } from "react-router-dom"
import { motion } from "framer-motion"
export function ContactInfo() { export function ContactInfo() {
return ( return (
<motion.div <div className="pb-6 px-6 pt-4 bg-zinc-800/30 border border-zinc-800 rounded-lg mx-4 mt-2 animate-fade-in">
initial={{ opacity: 0, y: -25 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
className="pb-6 px-6 pt-4 bg-zinc-800/30 border border-zinc-800 rounded-lg mx-4 mt-2"
>
<div className="space-y-4"> <div className="space-y-4">
<h3 className="text-sm font-medium text-white tracking-wider uppercase"> <h3 className="text-sm font-medium text-white tracking-wider uppercase">
Kontakt Kontakt
@@ -19,7 +13,7 @@ export function ContactInfo() {
href="tel:+1234567890" href="tel:+1234567890"
className="flex items-center space-x-3 text-sm text-zinc-400 hover:text-white transition-colors duration-200 group" className="flex items-center space-x-3 text-sm text-zinc-400 hover:text-white transition-colors duration-200 group"
> >
<Phone className="h-4 w-4 text-zinc-500 group-hover:text-white transition-colors duration-200" /> <Phone className="h-4 w-4 text-zinc-400 group-hover:text-white transition-colors duration-200" />
<span>+1 234 567 890</span> <span>+1 234 567 890</span>
</a> </a>
@@ -27,7 +21,7 @@ export function ContactInfo() {
href="mailto:info@damjan-savic.com" href="mailto:info@damjan-savic.com"
className="flex items-center space-x-3 text-sm text-zinc-400 hover:text-white transition-colors duration-200 group" className="flex items-center space-x-3 text-sm text-zinc-400 hover:text-white transition-colors duration-200 group"
> >
<Mail className="h-4 w-4 text-zinc-500 group-hover:text-white transition-colors duration-200" /> <Mail className="h-4 w-4 text-zinc-400 group-hover:text-white transition-colors duration-200" />
<span>info@damjan-savic.com</span> <span>info@damjan-savic.com</span>
</a> </a>
@@ -41,6 +35,6 @@ export function ContactInfo() {
<ArrowRight className="h-4 w-4 transform group-hover:translate-x-1 transition-transform duration-200" /> <ArrowRight className="h-4 w-4 transform group-hover:translate-x-1 transition-transform duration-200" />
</Link> </Link>
</div> </div>
</motion.div> </div>
) )
} }
src/components/GlobalBackground.tsx
+83 -70
View File
@@ -1,8 +1,11 @@
import { useEffect, useState } from 'react'; import { useEffect, useState, lazy, Suspense } from 'react';
import { FloatingPaths } from './FloatingPaths';
// Lazy load FloatingPaths - it's just decoration and shouldn't block initial render
const FloatingPaths = lazy(() => import('./FloatingPaths').then(m => ({ default: m.FloatingPaths })));
const GlobalBackground = () => { const GlobalBackground = () => {
const [scrollPosition, setScrollPosition] = useState(0); const [scrollPosition, setScrollPosition] = useState(0);
const [showPaths, setShowPaths] = useState(false);
useEffect(() => { useEffect(() => {
const handleScroll = () => { const handleScroll = () => {
@@ -13,12 +16,18 @@ const GlobalBackground = () => {
return () => window.removeEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll);
}, []); }, []);
// Delay loading FloatingPaths until after initial render
useEffect(() => {
const timer = setTimeout(() => setShowPaths(true), 2000);
return () => clearTimeout(timer);
}, []);
return ( return (
<> <>
{/* Background layer - behind everything */} {/* Background layer - behind everything */}
<div <div
className="fixed inset-0 bg-zinc-900" className="fixed inset-0 bg-zinc-900"
style={{ style={{
zIndex: -2, zIndex: -2,
position: 'fixed', position: 'fixed',
top: 0, top: 0,
@@ -29,105 +38,109 @@ const GlobalBackground = () => {
height: '100%' height: '100%'
}} }}
/> />
{/* Gradient overlay */} {/* Gradient overlay */}
<div <div
className="fixed inset-0" className="fixed inset-0"
style={{ style={{
zIndex: -1, zIndex: -1,
background: 'linear-gradient(135deg, #1e1e1e 0%, #2a2a2a 50%, #1e1e1e 100%)', background: 'linear-gradient(135deg, #1e1e1e 0%, #2a2a2a 50%, #1e1e1e 100%)',
opacity: 0.9 opacity: 0.9
}} }}
/> />
{/* FloatingPaths layer */} {/* FloatingPaths layer - lazy loaded after 2s */}
<div {showPaths && (
className="fixed inset-0" <div
style={{ className="fixed inset-0"
zIndex: -1, style={{
pointerEvents: 'none' zIndex: -1,
}} pointerEvents: 'none'
> }}
<FloatingPaths position={scrollPosition} /> >
</div> <Suspense fallback={null}>
<FloatingPaths position={scrollPosition} />
{/* Test: Visible animated lines */} </Suspense>
<div </div>
)}
{/* Simple animated lines with CSS */}
<div
className="fixed inset-0 pointer-events-none" className="fixed inset-0 pointer-events-none"
style={{ zIndex: -1 }} style={{ zIndex: -1 }}
> >
<svg <svg
className="w-full h-full" className="w-full h-full"
preserveAspectRatio="none" preserveAspectRatio="none"
style={{ opacity: 0.3 }} style={{ opacity: 0.3 }}
> >
<line <line
x1="0%" x1="0%"
y1="20%" y1="20%"
x2="100%" x2="100%"
y2="20%" y2="20%"
stroke="white" stroke="white"
strokeWidth="1" strokeWidth="1"
opacity="0.2" opacity="0.2"
> >
<animate <animate
attributeName="y1" attributeName="y1"
values="20%;80%;20%" values="20%;80%;20%"
dur="10s" dur="10s"
repeatCount="indefinite" repeatCount="indefinite"
/> />
<animate <animate
attributeName="y2" attributeName="y2"
values="20%;80%;20%" values="20%;80%;20%"
dur="10s" dur="10s"
repeatCount="indefinite" repeatCount="indefinite"
/> />
</line> </line>
<line <line
x1="0%" x1="0%"
y1="50%" y1="50%"
x2="100%" x2="100%"
y2="50%" y2="50%"
stroke="white" stroke="white"
strokeWidth="1" strokeWidth="1"
opacity="0.15" opacity="0.15"
> >
<animate <animate
attributeName="x1" attributeName="x1"
values="0%;100%;0%" values="0%;100%;0%"
dur="15s" dur="15s"
repeatCount="indefinite" repeatCount="indefinite"
/> />
</line> </line>
<line <line
x1="20%" x1="20%"
y1="0%" y1="0%"
x2="20%" x2="20%"
y2="100%" y2="100%"
stroke="white" stroke="white"
strokeWidth="1" strokeWidth="1"
opacity="0.1" opacity="0.1"
> >
<animate <animate
attributeName="x1" attributeName="x1"
values="20%;80%;20%" values="20%;80%;20%"
dur="12s" dur="12s"
repeatCount="indefinite" repeatCount="indefinite"
/> />
<animate <animate
attributeName="x2" attributeName="x2"
values="20%;80%;20%" values="20%;80%;20%"
dur="12s" dur="12s"
repeatCount="indefinite" repeatCount="indefinite"
/> />
</line> </line>
</svg> </svg>
</div> </div>
{/* Grid overlay */} {/* Grid overlay */}
<div <div
className="fixed inset-0 pointer-events-none" className="fixed inset-0 pointer-events-none"
style={{ style={{
zIndex: -1, zIndex: -1,
@@ -143,4 +156,4 @@ const GlobalBackground = () => {
); );
}; };
export default GlobalBackground; export default GlobalBackground;
src/components/LanguageSwitcher.tsx
+40 -50
View File
@@ -1,8 +1,6 @@
// C:\Development\Damjan Savic\Portfolio\src\components\LanguageSwitcher.tsx
import React, { useRef, useState, useEffect } from 'react'; import React, { useRef, useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Globe } from 'lucide-react'; import { Globe } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
const LanguageSwitcher: React.FC = () => { const LanguageSwitcher: React.FC = () => {
const { i18n } = useTranslation(); const { i18n } = useTranslation();
@@ -31,14 +29,13 @@ const LanguageSwitcher: React.FC = () => {
}; };
useEffect(() => { useEffect(() => {
// Check if mobile on mount and resize
const checkMobile = () => { const checkMobile = () => {
setIsMobile(window.innerWidth < 768); setIsMobile(window.innerWidth < 768);
}; };
checkMobile(); checkMobile();
window.addEventListener('resize', checkMobile); window.addEventListener('resize', checkMobile);
document.addEventListener('mousedown', handleClickOutside); document.addEventListener('mousedown', handleClickOutside);
return () => { return () => {
window.removeEventListener('resize', checkMobile); window.removeEventListener('resize', checkMobile);
@@ -48,12 +45,11 @@ const LanguageSwitcher: React.FC = () => {
return ( return (
<div className="relative inline-block" ref={dropdownRef}> <div className="relative inline-block" ref={dropdownRef}>
<motion.button <button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="flex items-center space-x-2 text-zinc-400 hover:text-white className="flex items-center space-x-2 text-zinc-400 hover:text-white
px-4 py-2 rounded-full transition-colors duration-200 px-4 py-2 rounded-full transition-all duration-200
hover:bg-zinc-800/50 border border-transparent hover:border-zinc-800" hover:bg-zinc-800/50 border border-transparent hover:border-zinc-800
hover:scale-105 active:scale-95"
onClick={() => setIsOpen(!isOpen)} onClick={() => setIsOpen(!isOpen)}
aria-expanded={isOpen} aria-expanded={isOpen}
aria-haspopup="listbox" aria-haspopup="listbox"
@@ -61,48 +57,42 @@ const LanguageSwitcher: React.FC = () => {
> >
<Globe className="h-5 w-5" aria-hidden="true" /> <Globe className="h-5 w-5" aria-hidden="true" />
<span className="text-sm">{currentLanguage}</span> <span className="text-sm">{currentLanguage}</span>
</motion.button> </button>
<AnimatePresence> {/* Dropdown with CSS transitions */}
{isOpen && ( <div
<motion.div className={`absolute ${isMobile ? 'bottom-full mb-2' : 'top-full mt-2'} right-0 w-48 rounded-lg overflow-hidden
initial={{ opacity: 0, y: isMobile ? 10 : -10 }} border border-zinc-800 bg-zinc-900/95 backdrop-blur-sm shadow-lg
animate={{ opacity: 1, y: 0 }} transition-all duration-200 origin-top
exit={{ opacity: 0, y: isMobile ? 10 : -10 }} ${isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95 pointer-events-none'}`}
transition={{ duration: 0.2 }} role="listbox"
className={`absolute ${isMobile ? 'bottom-full mb-2' : 'top-full mt-2'} right-0 w-48 rounded-lg overflow-hidden aria-label="Languages"
border border-zinc-800 bg-zinc-900/95 backdrop-blur-sm onKeyDown={handleKeyDown}
shadow-lg`} >
role="listbox" <div className="py-1">
aria-label="Languages" {languages.map((lang) => (
onKeyDown={handleKeyDown} <button
> key={lang.code}
<div className="py-1"> className={`w-full text-left px-4 py-2 text-sm transition-colors duration-200
{languages.map((lang) => ( hover:bg-zinc-800/50
<motion.button ${i18n.language === lang.code
key={lang.code} ? 'bg-zinc-800 text-white'
whileHover={{ backgroundColor: 'rgba(39, 39, 42, 0.5)' }} : 'text-zinc-400 hover:text-white'
className={`w-full text-left px-4 py-2 text-sm transition-colors duration-200 }`}
${i18n.language === lang.code onClick={() => {
? 'bg-zinc-800 text-white' i18n.changeLanguage(lang.code);
: 'text-zinc-400 hover:text-white' setIsOpen(false);
}`} }}
onClick={() => { role="option"
i18n.changeLanguage(lang.code); aria-selected={i18n.language === lang.code}
setIsOpen(false); >
}} {lang.name}
role="option" </button>
aria-selected={i18n.language === lang.code} ))}
> </div>
{lang.name} </div>
</motion.button>
))}
</div>
</motion.div>
)}
</AnimatePresence>
</div> </div>
); );
}; };
export default LanguageSwitcher; export default LanguageSwitcher;
src/components/Layout.tsx
+63 -85
View File
@@ -1,7 +1,6 @@
// Layout.tsx // Layout.tsx
import { useEffect, useState, ReactNode } from "react"; import { useEffect, useState, ReactNode } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { motion, AnimatePresence } from "framer-motion";
import { import {
Menu, Menu,
X, X,
@@ -143,7 +142,7 @@ const Layout = ({ children }: LayoutProps) => {
<div className="min-h-screen flex flex-col relative"> <div className="min-h-screen flex flex-col relative">
{/* Global Background */} {/* Global Background */}
<GlobalBackground /> <GlobalBackground />
{/* Navigation – oberste Ebene */} {/* Navigation – oberste Ebene */}
<nav <nav
className={` className={`
@@ -161,14 +160,12 @@ const Layout = ({ children }: LayoutProps) => {
<div className="flex justify-between items-center h-16"> <div className="flex justify-between items-center h-16">
{/* Logo */} {/* Logo */}
<Link to="/" className="flex items-center space-x-2 group shrink-0"> <Link to="/" className="flex items-center space-x-2 group shrink-0">
<motion.img <img
src="/header-logo.svg" src="/header-logo.svg"
alt="Damjan Savić Logo" alt="Damjan Savić Logo"
className="h-8 w-auto" className="h-8 w-auto transition-transform duration-200 hover:scale-105"
width={120} width={120}
height={32} height={32}
whileHover={{ scale: 1.05 }}
transition={{ type: "spring", stiffness: 400, damping: 10 }}
/> />
</Link> </Link>
@@ -189,104 +186,85 @@ const Layout = ({ children }: LayoutProps) => {
</div> </div>
{/* Mobile Menu Button */} {/* Mobile Menu Button */}
<motion.button <button
className="md:hidden relative z-50 p-2 rounded-lg text-zinc-400 hover:text-white hover:bg-zinc-800/50 transition-colors" className="md:hidden relative z-50 p-2 rounded-lg text-zinc-400 hover:text-white hover:bg-zinc-800/50 transition-colors active:scale-95"
onClick={toggleMenu} onClick={toggleMenu}
aria-expanded={isMenuOpen} aria-expanded={isMenuOpen}
aria-controls="mobile-menu" aria-controls="mobile-menu"
aria-label={isMenuOpen ? "Close menu" : "Open menu"} aria-label={isMenuOpen ? "Close menu" : "Open menu"}
whileTap={{ scale: 0.95 }}
> >
{isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />} {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
</motion.button> </button>
</div> </div>
</div> </div>
</nav> </nav>
{/* Mobile Menu */} {/* Mobile Menu - CSS-only Animationen */}
<AnimatePresence> {/* Backdrop */}
{isMenuOpen && ( <div
<> className={`fixed inset-0 bg-black/50 md:hidden z-20 pointer-events-none transition-opacity duration-200 ${
{/* Backdrop */} isMenuOpen ? "opacity-100" : "opacity-0"
<motion.div }`}
initial={{ opacity: 0 }} />
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.2 }}
className="fixed inset-0 bg-black/50 md:hidden z-20 pointer-events-none"
/>
{/* Sidebar */} {/* Sidebar */}
<motion.div <div
initial={{ x: "100%" }} className={`fixed right-0 top-0 h-full w-80 bg-zinc-900/95 backdrop-blur-md shadow-xl md:hidden z-50 border-l border-zinc-800 transition-transform duration-300 ease-out ${
animate={{ x: 0 }} isMenuOpen ? "translate-x-0" : "translate-x-full"
exit={{ x: "100%" }} }`}
transition={{ style={{ willChange: 'transform' }}
type: "tween", >
duration: 0.3, {/* Sidebar Header mit Close-Button */}
ease: [0.4, 0, 0.2, 1] <div className="flex items-center justify-between px-4 h-16 border-b border-zinc-800">
}} <span className="text-white font-semibold">Menu</span>
style={{ <button
willChange: 'transform', onClick={() => setIsMenuOpen(false)}
transform: 'translateZ(0)' aria-label="Close sidebar"
}} className="p-2 rounded-lg text-zinc-400 hover:text-white hover:bg-zinc-800/50 transition-colors active:scale-95"
className="fixed right-0 top-0 h-full w-80 bg-zinc-900/95 backdrop-blur-md shadow-xl md:hidden z-50 border-l border-zinc-800" >
> <X className="h-6 w-6" />
{/* Sidebar Header mit Close-Button */} </button>
<div className="flex items-center justify-between px-4 h-16 border-b border-zinc-800"> </div>
<span className="text-white font-semibold">Menu</span>
<motion.button {/* Scrollbarer Sidebar-Inhalt */}
<div className="h-[calc(100vh_-_4rem)] overflow-y-auto">
<div className="flex flex-col h-full">
{/* Contact Info */}
<ContactInfo />
{/* Navigation Links */}
<div className="py-4 px-4">
{navigationLinks.map(({ path, label, icon }) => (
<NavLink
key={path}
to={path}
icon={icon}
label={label}
onClick={() => setIsMenuOpen(false)} onClick={() => setIsMenuOpen(false)}
aria-label="Close sidebar" className="flex items-center w-full mb-1"
className="p-2 rounded-lg text-zinc-400 hover:text-white hover:bg-zinc-800/50 transition-colors" />
whileTap={{ scale: 0.95 }} ))}
> </div>
<X className="h-6 w-6" />
</motion.button>
</div>
{/* Scrollbarer Sidebar-Inhalt */} {/* Language Switcher */}
<div className="h-[calc(100vh_-_4rem)] overflow-y-auto"> <div className="px-4 py-3 border-t border-zinc-800">
<div className="flex flex-col h-full"> <div className="flex items-center justify-between">
{/* Contact Info */} <span className="text-sm text-zinc-400">
<ContactInfo /> Sprache ändern
</span>
{/* Navigation Links */} <LanguageSwitcher />
<div className="py-4 px-4"> </div>
{navigationLinks.map(({ path, label, icon }) => ( </div>
<NavLink </div>
key={path} </div>
to={path} </div>
icon={icon}
label={label}
onClick={() => setIsMenuOpen(false)}
className="flex items-center w-full mb-1"
/>
))}
</div>
{/* Language Switcher */}
<div className="px-4 py-3 border-t border-zinc-800">
<div className="flex items-center justify-between">
<span className="text-sm text-zinc-500">
Sprache ändern
</span>
<LanguageSwitcher />
</div>
</div>
</div>
</div>
</motion.div>
</>
)}
</AnimatePresence>
{/* Hauptinhalt */} {/* Hauptinhalt */}
<main className="flex-1 pt-2 relative z-10 bg-transparent">{children}</main> <main className="flex-1 pt-2 relative z-10 bg-transparent">{children}</main>
{/* Footer */} {/* Footer */}
<Footer /> <Footer />
{/* Performance Monitor */} {/* Performance Monitor */}
<PerformanceMonitor /> <PerformanceMonitor />
</div> </div>
src/components/NavLink.tsx
+2 -17
View File
@@ -1,6 +1,5 @@
// components/NavLink.tsx // components/NavLink.tsx
import { Link, useLocation } from 'react-router-dom' import { Link, useLocation } from 'react-router-dom'
import { motion } from 'framer-motion'
import React from 'react' import React from 'react'
interface NavLinkProps { interface NavLinkProps {
@@ -22,26 +21,12 @@ export function NavLink({ to, icon, label, onClick, className }: NavLinkProps) {
className={` className={`
relative flex items-center gap-2 rounded-full py-2 px-4 relative flex items-center gap-2 rounded-full py-2 px-4
transition-all duration-200 ease-in-out transition-all duration-200 ease-in-out
${isActive ? 'text-white' : 'text-zinc-400 hover:text-white hover:bg-zinc-800/30'} ${isActive ? 'text-white bg-zinc-700/60' : 'text-zinc-400 hover:text-white hover:bg-zinc-800/30'}
${className} ${className}
`} `}
> >
{icon} {icon}
<span className="text-sm tracking-wide">{label}</span> <span className="text-sm tracking-wide">{label}</span>
{isActive && (
<motion.div
layoutId="activeIndicator"
className="absolute inset-0 rounded-full bg-zinc-700/60 -z-10"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{
type: "spring",
stiffness: 300,
damping: 30
}}
/>
)}
</Link> </Link>
) )
} }
src/components/PageTransition.tsx
+9 -138
View File
@@ -1,154 +1,25 @@
"use client" "use client"
import React, { useEffect, useState, useRef } from "react" import React, { useEffect, useRef } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { useLocation } from "react-router-dom" import { useLocation } from "react-router-dom"
import { useScrollContext } from './ScrollContext'
interface PageTransitionProps { interface PageTransitionProps {
children: React.ReactNode children: React.ReactNode
} }
const Logo = () => { // Simplified page transition - no loading delay for better LCP
const [imageError, setImageError] = useState(false);
return (
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
animate={{
opacity: 1,
scale: 1,
transition: { duration: 0.4 },
}}
exit={{
opacity: 0,
scale: 1.2,
transition: { duration: 0.3 },
}}
className="w-16 h-16 relative"
>
{!imageError ? (
<img
src="/loading-logo.svg"
alt="Logo"
className="w-full h-full object-contain filter brightness-200"
onError={() => setImageError(true)}
/>
) : (
<div className="w-full h-full flex items-center justify-center text-white font-bold text-2xl bg-zinc-800 rounded-full">
DS
</div>
)}
</motion.div>
);
}
const PageTransition = ({ children }: PageTransitionProps) => { const PageTransition = ({ children }: PageTransitionProps) => {
const location = useLocation() const location = useLocation()
const [isTransitioning, setIsTransitioning] = useState(true) // Start with transition on initial load
const [showContent, setShowContent] = useState(false)
const { setIsTransitioning: setGlobalTransitioning } = useScrollContext()
const previousPathRef = useRef<string | null>(null) const previousPathRef = useRef<string | null>(null)
const isFirstMount = useRef(true)
// Handle initial page load transition
useEffect(() => {
if (isFirstMount.current) {
setIsTransitioning(true);
setGlobalTransitioning(true);
// Show content after transition animation
const timer = setTimeout(() => {
setIsTransitioning(false);
setGlobalTransitioning(false);
setShowContent(true);
isFirstMount.current = false;
}, 1200);
return () => clearTimeout(timer);
}
}, [setGlobalTransitioning]);
useEffect(() => { useEffect(() => {
// Skip on first mount // Only scroll on path change, not on initial mount
if (isFirstMount.current) { if (previousPathRef.current && location.pathname !== previousPathRef.current) {
previousPathRef.current = location.pathname; window.scrollTo(0, 0)
return;
} }
previousPathRef.current = location.pathname
}, [location.pathname])
// Only animate if path actually changed return <>{children}</>
if (location.pathname === previousPathRef.current) {
return;
}
// Hide content immediately
setShowContent(false);
// Small delay to ensure React has finished updating
const startTimer = setTimeout(() => {
// Update previous path
previousPathRef.current = location.pathname;
// Reset scroll position
window.scrollTo(0, 0);
// Start transition
setIsTransitioning(true);
setGlobalTransitioning(true);
// End transition after animation and show new content
const endTimer = setTimeout(() => {
setIsTransitioning(false);
setGlobalTransitioning(false);
setShowContent(true);
}, 1200);
// Store the end timer for cleanup
(window as unknown as Window & { __pageTransitionEndTimer?: NodeJS.Timeout }).__pageTransitionEndTimer = endTimer;
}, 10);
return () => {
clearTimeout(startTimer);
const windowWithTimer = window as unknown as Window & { __pageTransitionEndTimer?: NodeJS.Timeout };
if (windowWithTimer.__pageTransitionEndTimer) {
clearTimeout(windowWithTimer.__pageTransitionEndTimer);
}
setIsTransitioning(false);
setGlobalTransitioning(false);
};
}, [location.pathname, setGlobalTransitioning]);
return (
<>
{/* Page transition overlay - always on top */}
<AnimatePresence>
{isTransitioning && (
<motion.div
key="transition-overlay"
className="fixed inset-0 bg-zinc-900/95 backdrop-blur-sm flex items-center justify-center page-transition-active"
style={{ zIndex: 9999 }}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.4, ease: "easeInOut" }}
>
<Logo />
</motion.div>
)}
</AnimatePresence>
{/* Content - only show when transition is complete */}
<div style={{ opacity: showContent ? 1 : 0, transition: 'opacity 0.3s ease-in-out' }}>
<motion.div
key={location.pathname}
initial={{ opacity: 0 }}
animate={{ opacity: showContent ? 1 : 0 }}
transition={{ duration: 0.3 }}
>
{children}
</motion.div>
</div>
</>
)
} }
export default PageTransition export default PageTransition
tailwind.config.js
+5
View File
@@ -15,12 +15,17 @@ module.exports = {
}, },
animation: { animation: {
'slide-up': 'slideUp 0.5s ease-out forwards', 'slide-up': 'slideUp 0.5s ease-out forwards',
'fade-in': 'fadeIn 0.3s ease-out forwards',
}, },
keyframes: { keyframes: {
slideUp: { slideUp: {
'0%': { transform: 'translateY(10px)' }, '0%': { transform: 'translateY(10px)' },
'100%': { transform: 'translateY(0)' }, '100%': { transform: 'translateY(0)' },
}, },
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
}, },
colors: { colors: {
border: "rgb(var(--border))", border: "rgb(var(--border))",
vite.config.ts
+2 -1
View File
@@ -122,7 +122,8 @@ export default defineConfig({
'react-vendor': ['react', 'react-dom', 'react-router-dom'], 'react-vendor': ['react', 'react-dom', 'react-router-dom'],
'mdx-vendor': ['@mdx-js/react'], 'mdx-vendor': ['@mdx-js/react'],
'i18n-vendor': ['i18next', 'react-i18next'], 'i18n-vendor': ['i18next', 'react-i18next'],
'ui-vendor': ['framer-motion', 'lucide-react'] 'icons': ['lucide-react'],
'animations': ['framer-motion']
}, },
// Optimierte Asset-Dateinamen // Optimierte Asset-Dateinamen
assetFileNames: (assetInfo) => { assetFileNames: (assetInfo) => {