feat: update Projects component with framer-motion variants and improve animations

refactor: modify layout to use ClientOnly and BackgroundBlobsClient components

fix: correct import statement for ActivityFeed in the main page

fix: enhance sitemap fetching logic with error handling and mock support

refactor: convert BackgroundBlobs to default export for consistency

refactor: simplify ErrorBoundary component and improve error handling UI

chore: update framer-motion to version 12.24.10 in package.json and package-lock.json

test: add minimal Prisma Client mock for testing purposes

feat: create BackgroundBlobsClient for dynamic import of BackgroundBlobs

feat: implement ClientOnly component to handle client-side rendering

feat: add custom error handling components for better user experience

components/BackgroundBlobs.tsx

@@ -3,7 +3,7 @@
 import { motion, useMotionValue, useTransform, useSpring } from "framer-motion";
 import { useEffect, useState } from "react";
 
-export const BackgroundBlobs = () => {
+const BackgroundBlobs = () => {
   const mouseX = useMotionValue(0);
   const mouseY = useMotionValue(0);
 
@@ -166,3 +166,5 @@ export const BackgroundBlobs = () => {
     </div>
   );
 };
+
+export default BackgroundBlobs;

components/ErrorBoundary.tsx

@@ -1,84 +1,40 @@
-'use client';
+"use client"; // <--- Diese Zeile ist PFLICHT für Error Boundaries!
 
-import React, { Component, ErrorInfo, ReactNode } from 'react';
-import { AlertTriangle } from 'lucide-react';
+import React from "react";
 
-interface Props {
-  children: ReactNode;
-  fallback?: ReactNode;
-}
-
-interface State {
-  hasError: boolean;
-  error: Error | null;
-}
-
-export class ErrorBoundary extends Component<Props, State> {
-  constructor(props: Props) {
+// Wir nutzen "export default", damit der Import ohne Klammern funktioniert
+export default class ErrorBoundary extends React.Component<
+  { children: React.ReactNode },
+  { hasError: boolean }
+> {
+  constructor(props: { children: React.ReactNode }) {
     super(props);
-    this.state = {
-      hasError: false,
-      error: null,
-    };
+    this.state = { hasError: false };
   }
 
-  static getDerivedStateFromError(error: Error): State {
-    return {
-      hasError: true,
-      error,
-    };
+  static getDerivedStateFromError(error: any) {
+    return { hasError: true };
   }
 
-  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    // Log error to console in development
-    if (process.env.NODE_ENV === 'development') {
-      console.error('ErrorBoundary caught an error:', error, errorInfo);
-    }
-    // In production, you could log to an error reporting service
+  componentDidCatch(error: any, errorInfo: any) {
+    console.error("ErrorBoundary caught an error:", error, errorInfo);
   }
 
   render() {
     if (this.state.hasError) {
-      if (this.props.fallback) {
-        return this.props.fallback;
-      }
-
       return (
-        <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-stone-900 via-stone-800 to-stone-900 p-4">
-          <div className="max-w-md w-full bg-stone-800/50 backdrop-blur-sm border border-stone-700/50 rounded-xl p-8 shadow-2xl">
-            <div className="flex items-center justify-center mb-6">
-              <AlertTriangle className="w-16 h-16 text-yellow-500" />
-            </div>
-            <h2 className="text-2xl font-bold text-white mb-4 text-center">
-              Something went wrong
-            </h2>
-            <p className="text-stone-300 mb-6 text-center">
-              We encountered an unexpected error. Please try refreshing the page.
-            </p>
-            {process.env.NODE_ENV === 'development' && this.state.error && (
-              <details className="mt-4">
-                <summary className="text-stone-400 cursor-pointer text-sm mb-2">
-                  Error details (development only)
-                </summary>
-                <pre className="text-xs text-stone-500 bg-stone-900/50 p-3 rounded overflow-auto max-h-40">
-                  {this.state.error.toString()}
-                </pre>
-              </details>
-            )}
-            <button
-              onClick={() => {
-                this.setState({ hasError: false, error: null });
-                window.location.reload();
-              }}
-              className="w-full mt-6 px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-lg font-semibold hover:from-blue-700 hover:to-purple-700 transition-all duration-200 shadow-lg hover:shadow-xl"
-            >
-              Refresh Page
-            </button>
-          </div>
+        <div className="p-4 m-4 bg-red-50 border border-red-200 rounded text-red-800">
+          <h2>Something went wrong!</h2>
+          <button 
+            className="mt-2 px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
+            onClick={() => this.setState({ hasError: false })}
+          >
+            Try again
+          </button>
         </div>
       );
     }
 
     return this.props.children;
   }
-}
+}