damjan_savicandClaude Opus 4.5
61c7c523ab
- 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>
160 lines
5.2 KiB
TypeScript
160 lines
5.2 KiB
TypeScript
import { useEffect, useState, lazy, Suspense } from 'react';
|
|
|
|
// 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 [scrollPosition, setScrollPosition] = useState(0);
|
|
const [showPaths, setShowPaths] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
setScrollPosition(window.scrollY * 0.001);
|
|
};
|
|
|
|
window.addEventListener('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 (
|
|
<>
|
|
{/* Background layer - behind everything */}
|
|
<div
|
|
className="fixed inset-0 bg-zinc-900"
|
|
style={{
|
|
zIndex: -2,
|
|
position: 'fixed',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
width: '100%',
|
|
height: '100%'
|
|
}}
|
|
/>
|
|
|
|
{/* Gradient overlay */}
|
|
<div
|
|
className="fixed inset-0"
|
|
style={{
|
|
zIndex: -1,
|
|
background: 'linear-gradient(135deg, #1e1e1e 0%, #2a2a2a 50%, #1e1e1e 100%)',
|
|
opacity: 0.9
|
|
}}
|
|
/>
|
|
|
|
{/* FloatingPaths layer - lazy loaded after 2s */}
|
|
{showPaths && (
|
|
<div
|
|
className="fixed inset-0"
|
|
style={{
|
|
zIndex: -1,
|
|
pointerEvents: 'none'
|
|
}}
|
|
>
|
|
<Suspense fallback={null}>
|
|
<FloatingPaths position={scrollPosition} />
|
|
</Suspense>
|
|
</div>
|
|
)}
|
|
|
|
{/* Simple animated lines with CSS */}
|
|
<div
|
|
className="fixed inset-0 pointer-events-none"
|
|
style={{ zIndex: -1 }}
|
|
>
|
|
<svg
|
|
className="w-full h-full"
|
|
preserveAspectRatio="none"
|
|
style={{ opacity: 0.3 }}
|
|
>
|
|
<line
|
|
x1="0%"
|
|
y1="20%"
|
|
x2="100%"
|
|
y2="20%"
|
|
stroke="white"
|
|
strokeWidth="1"
|
|
opacity="0.2"
|
|
>
|
|
<animate
|
|
attributeName="y1"
|
|
values="20%;80%;20%"
|
|
dur="10s"
|
|
repeatCount="indefinite"
|
|
/>
|
|
<animate
|
|
attributeName="y2"
|
|
values="20%;80%;20%"
|
|
dur="10s"
|
|
repeatCount="indefinite"
|
|
/>
|
|
</line>
|
|
|
|
<line
|
|
x1="0%"
|
|
y1="50%"
|
|
x2="100%"
|
|
y2="50%"
|
|
stroke="white"
|
|
strokeWidth="1"
|
|
opacity="0.15"
|
|
>
|
|
<animate
|
|
attributeName="x1"
|
|
values="0%;100%;0%"
|
|
dur="15s"
|
|
repeatCount="indefinite"
|
|
/>
|
|
</line>
|
|
|
|
<line
|
|
x1="20%"
|
|
y1="0%"
|
|
x2="20%"
|
|
y2="100%"
|
|
stroke="white"
|
|
strokeWidth="1"
|
|
opacity="0.1"
|
|
>
|
|
<animate
|
|
attributeName="x1"
|
|
values="20%;80%;20%"
|
|
dur="12s"
|
|
repeatCount="indefinite"
|
|
/>
|
|
<animate
|
|
attributeName="x2"
|
|
values="20%;80%;20%"
|
|
dur="12s"
|
|
repeatCount="indefinite"
|
|
/>
|
|
</line>
|
|
</svg>
|
|
</div>
|
|
|
|
{/* Grid overlay */}
|
|
<div
|
|
className="fixed inset-0 pointer-events-none"
|
|
style={{
|
|
zIndex: -1,
|
|
backgroundImage: `
|
|
linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px)
|
|
`,
|
|
backgroundSize: '50px 50px',
|
|
opacity: 0.5
|
|
}}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default GlobalBackground;
|