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/GlobalBackground.tsx
+83 -70
View File
@@ -1,8 +1,11 @@
import { useEffect, useState } from 'react';
import { FloatingPaths } from './FloatingPaths';
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 = () => {
@@ -13,12 +16,18 @@ const GlobalBackground = () => {
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
<div
className="fixed inset-0 bg-zinc-900"
style={{
style={{
zIndex: -2,
position: 'fixed',
top: 0,
@@ -29,105 +38,109 @@ const GlobalBackground = () => {
height: '100%'
}}
/>
{/* Gradient overlay */}
<div
<div
className="fixed inset-0"
style={{
style={{
zIndex: -1,
background: 'linear-gradient(135deg, #1e1e1e 0%, #2a2a2a 50%, #1e1e1e 100%)',
opacity: 0.9
}}
/>
{/* FloatingPaths layer */}
<div
className="fixed inset-0"
style={{
zIndex: -1,
pointerEvents: 'none'
}}
>
<FloatingPaths position={scrollPosition} />
</div>
{/* Test: Visible animated lines */}
<div
{/* 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"
<svg
className="w-full h-full"
preserveAspectRatio="none"
style={{ opacity: 0.3 }}
>
<line
x1="0%"
y1="20%"
x2="100%"
y2="20%"
stroke="white"
<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="y1"
values="20%;80%;20%"
dur="10s"
repeatCount="indefinite"
/>
<animate
attributeName="y2"
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"
<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"
<animate
attributeName="x1"
values="0%;100%;0%"
dur="15s"
repeatCount="indefinite"
/>
</line>
<line
x1="20%"
y1="0%"
x2="20%"
y2="100%"
stroke="white"
<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="x1"
values="20%;80%;20%"
dur="12s"
repeatCount="indefinite"
/>
<animate
attributeName="x2"
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
<div
className="fixed inset-0 pointer-events-none"
style={{
zIndex: -1,
@@ -143,4 +156,4 @@ const GlobalBackground = () => {
);
};
export default GlobalBackground;
export default GlobalBackground;