Implementierung - SEO - 01.08.2025

src/components/FloatingPaths.tsx

@@ -15,8 +15,8 @@ export function FloatingPaths({ position }: { position: number }) {
     }))
 
     return (
-        <div className="absolute inset-0 pointer-events-none">
-            <svg className="w-full h-full text-accent" viewBox="0 0 696 316" fill="none">
+        <div className="absolute inset-0 pointer-events-none floating-paths" style={{ isolation: 'isolate', zIndex: 0 }}>
+            <svg className="w-full h-full text-accent" viewBox="0 0 696 316" fill="none" style={{ transform: 'translateZ(0)' }}>
                 <title>Background Paths</title>
                 {paths.map((path) => (
                     <motion.path
@@ -36,6 +36,7 @@ export function FloatingPaths({ position }: { position: number }) {
                             repeat: Number.POSITIVE_INFINITY,
                             ease: "linear",
                         }}
+                        style={{ willChange: 'auto' }}
                     />
                 ))}
             </svg>

src/components/HreflangTags.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { useRouter } from 'react-router-dom';
 import { Helmet } from 'react-helmet-async';
 import { useTranslation } from 'react-i18next';
 

src/components/Layout.tsx

@@ -19,7 +19,7 @@ import LanguageSwitcher from "./LanguageSwitcher";
 import { Link, useLocation } from "react-router-dom";
 import Footer from "./Footer";
 import { useScrollContext } from "./ScrollContext";
-import PerformanceMonitor from "./PerformanceMonitor";
+import { PerformanceMonitor } from "./PerformanceMonitor";
 
 interface LayoutProps {
   children: ReactNode;
@@ -33,9 +33,12 @@ const Layout = ({ children }: LayoutProps) => {
   const location = useLocation();
   const { isMenuOpen, setIsMenuOpen } = useScrollContext();
 
-  // Initial mount
+  // Initial mount with immediate execution
   useEffect(() => {
-    setIsMounted(true);
+    // Use requestAnimationFrame to ensure smooth initial render
+    requestAnimationFrame(() => {
+      setIsMounted(true);
+    });
   }, []);
 
   // Schließe das Menü beim Routenwechsel
@@ -116,8 +119,13 @@ const Layout = ({ children }: LayoutProps) => {
         : []),
   ];
 
+  // Render with opacity 0 on initial mount to prevent flicker
   if (!isMounted) {
-    return null;
+    return (
+      <div className="min-h-screen bg-zinc-900">
+        {children}
+      </div>
+    );
   }
 
   return (
@@ -126,9 +134,10 @@ const Layout = ({ children }: LayoutProps) => {
         <nav
             className={`
           fixed w-full z-40 transition-all duration-300
+          bg-zinc-800/50 backdrop-blur-sm border-b border-zinc-700/30
           ${scrolled
-                ? "bg-zinc-900/80 backdrop-blur supports-[backdrop-filter]:bg-zinc-900/80"
-                : "bg-transparent"
+                ? "bg-zinc-900/80 backdrop-blur-md shadow-lg shadow-zinc-900/50"
+                : ""
             }
         `}
             role="navigation"

src/components/NavLink.tsx

@@ -31,7 +31,7 @@ export function NavLink({ to, icon, label, onClick, className }: NavLinkProps) {
             {isActive && (
                 <motion.div
                     layoutId="activeIndicator"
-                    className="absolute inset-0 rounded-full bg-zinc-800/50 -z-10"
+                    className="absolute inset-0 rounded-full bg-zinc-700/60 -z-10"
                     initial={{ opacity: 0 }}
                     animate={{ opacity: 1 }}
                     exit={{ opacity: 0 }}

src/components/PageTransition.tsx

@@ -1,6 +1,6 @@
 "use client"
-import React, { useEffect, useState, useCallback } from "react"
-import { motion, AnimatePresence, cubicBezier } from "framer-motion"
+import React, { useEffect, useState, useRef } from "react"
+import { motion, AnimatePresence } from "framer-motion"
 import { useLocation } from "react-router-dom"
 import { useScrollContext } from './ScrollContext'
 
@@ -8,126 +8,145 @@ interface PageTransitionProps {
     children: React.ReactNode
 }
 
-const customEase = cubicBezier(0.25, 0.1, 0.25, 1)
-
-const Logo = () => (
-    <motion.div
-        initial={{ opacity: 0, scale: 0.8 }}
-        animate={{
-            opacity: 1,
-            scale: 1,
-            transition: { duration: 0.4, ease: customEase },
-        }}
-        exit={{
-            opacity: 0,
-            scale: 1.2,
-            transition: { duration: 0.3, ease: customEase },
-        }}
-        className="w-16 h-16"
-    >
-        <img
-            src="/logo.png"
-            alt="Logo"
-            className="w-full h-full object-contain filter brightness-200"
-        />
-    </motion.div>
-)
+const Logo = () => {
+    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="/logo.png"
+                    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 location = useLocation()
-    const [showLogo, setShowLogo] = useState(false)
-    const [showContent, setShowContent] = useState(true)
-    const { setIsTransitioning } = useScrollContext()
-    const [isAnimating, setIsAnimating] = useState(false)
+    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 isFirstMount = useRef(true)
 
-    const resetScroll = useCallback(() => {
-        window.scrollTo({
-            top: 0,
-            behavior: 'instant'
-        })
-    }, [])
-
-    const startTransition = useCallback(() => {
-        setIsAnimating(true)
-        setIsTransitioning(true)
-        setShowContent(false)
-        setShowLogo(true)
-    }, [setIsTransitioning])
-
-    const finishTransition = useCallback(() => {
-        setShowContent(true)
-        setShowLogo(false)
-        setIsAnimating(false)
-        setIsTransitioning(false)
-        resetScroll()
-    }, [setIsTransitioning, resetScroll])
+    // 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(() => {
-        const cleanup = () => {
-            setShowLogo(false)
-            setShowContent(true)
-            setIsAnimating(false)
-            setIsTransitioning(false)
+        // Skip on first mount
+        if (isFirstMount.current) {
+            previousPathRef.current = location.pathname;
+            return;
         }
 
-        if (location.pathname) {
-            startTransition()
+        // Only animate if path actually changed
+        if (location.pathname === previousPathRef.current) {
+            return;
+        }
 
-            const logoTimer = setTimeout(() => {
-                setShowLogo(false)
-            }, 800)
+        // Hide content immediately
+        setShowContent(false);
+        
+        // Small delay to ensure React has finished updating
+        const startTimer = setTimeout(() => {
+            // Update previous path
+            previousPathRef.current = location.pathname;
 
-            const contentTimer = setTimeout(() => {
-                finishTransition()
-            }, 1000)
+            // Reset scroll position
+            window.scrollTo(0, 0);
 
-            return () => {
-                clearTimeout(logoTimer)
-                clearTimeout(contentTimer)
-                cleanup()
+            // 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 any).__pageTransitionEndTimer = endTimer;
+        }, 10);
+
+        return () => {
+            clearTimeout(startTimer);
+            if ((window as any).__pageTransitionEndTimer) {
+                clearTimeout((window as any).__pageTransitionEndTimer);
             }
-        }
-
-        return cleanup
-    }, [location.pathname, startTransition, finishTransition])
+            setIsTransitioning(false);
+            setGlobalTransitioning(false);
+        };
+    }, [location.pathname, setGlobalTransitioning]);
 
     return (
-        <div className={`relative min-h-screen bg-zinc-900 ${isAnimating ? 'pointer-events-none' : ''}`}>
-            <AnimatePresence mode="wait">
-                {showLogo && (
+        <>
+            {/* Page transition overlay - always on top */}
+            <AnimatePresence>
+                {isTransitioning && (
                     <motion.div
-                        className="fixed inset-0 z-[60] bg-zinc-900 pointer-events-none"
+                        key="transition-overlay"
+                        className="fixed inset-0 bg-zinc-900 flex items-center justify-center page-transition-active"
+                        style={{ zIndex: 9999 }}
                         initial={{ opacity: 0 }}
                         animate={{ opacity: 1 }}
                         exit={{ opacity: 0 }}
-                        transition={{ duration: 0.3, ease: customEase }}
+                        transition={{ duration: 0.4, ease: "easeInOut" }}
                     >
-                        <div className="absolute inset-0 flex items-center justify-center">
-                            <Logo />
-                        </div>
+                        <Logo />
                     </motion.div>
                 )}
             </AnimatePresence>
-
-            <AnimatePresence mode="wait">
-                {showContent && (
-                    <motion.div
-                        className="relative z-0 min-h-screen"
-                        initial={{ opacity: 0 }}
-                        animate={{ opacity: 1 }}
-                        exit={{ opacity: 0 }}
-                        transition={{
-                            duration: 0.3,
-                            ease: customEase,
-                        }}
-                    >
-                        <div className={isAnimating ? 'pointer-events-none' : ''}>
-                            {children}
-                        </div>
-                    </motion.div>
-                )}
-            </AnimatePresence>
-        </div>
+            
+            {/* 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>
+        </>
     )
 }