Add animated shader gradient background with blur effects

- Added ShaderGradientBackground component with 3 animated spheres
- Enhanced glass effects with backdrop-blur across all text surfaces
- Improved readability while maintaining colored borders
- Adjusted animation speed and movement parameters for optimal effect

app/components/About.tsx

@@ -304,14 +304,14 @@ const About = () => {
                       scale: 1.02,
                       transition: { duration: 0.4, ease: "easeOut" },
                     }}
-                    className={`p-5 rounded-xl border-2 transition-[background-color,border-color,box-shadow] duration-500 ease-out ${
+                    className={`p-5 rounded-xl border-2 transition-[background-color,border-color,box-shadow] duration-500 ease-out backdrop-blur-md ${
                       idx === 0
-                        ? "bg-gradient-to-br from-liquid-sky/10 to-liquid-mint/10 border-liquid-sky/30 hover:border-liquid-sky/50 hover:from-liquid-sky/15 hover:to-liquid-mint/15"
+                        ? "bg-gradient-to-br from-liquid-sky/25 to-liquid-mint/25 border-liquid-sky/50 hover:border-liquid-sky/70 hover:from-liquid-sky/35 hover:to-liquid-mint/35"
                         : idx === 1
-                          ? "bg-gradient-to-br from-liquid-peach/10 to-liquid-coral/10 border-liquid-peach/30 hover:border-liquid-peach/50 hover:from-liquid-peach/15 hover:to-liquid-coral/15"
+                          ? "bg-gradient-to-br from-liquid-peach/25 to-liquid-coral/25 border-liquid-peach/50 hover:border-liquid-peach/70 hover:from-liquid-peach/35 hover:to-liquid-coral/35"
                           : idx === 2
-                            ? "bg-gradient-to-br from-liquid-lavender/10 to-liquid-pink/10 border-liquid-lavender/30 hover:border-liquid-lavender/50 hover:from-liquid-lavender/15 hover:to-liquid-pink/15"
-                            : "bg-gradient-to-br from-liquid-teal/10 to-liquid-lime/10 border-liquid-teal/30 hover:border-liquid-teal/50 hover:from-liquid-teal/15 hover:to-liquid-lime/15"
+                            ? "bg-gradient-to-br from-liquid-lavender/25 to-liquid-pink/25 border-liquid-lavender/50 hover:border-liquid-lavender/70 hover:from-liquid-lavender/35 hover:to-liquid-pink/35"
+                            : "bg-gradient-to-br from-liquid-teal/25 to-liquid-lime/25 border-liquid-teal/50 hover:border-liquid-teal/70 hover:from-liquid-teal/35 hover:to-liquid-lime/35"
                     }`}
                   >
                     <div className="flex items-center gap-3 mb-3">
@@ -326,14 +326,14 @@ const About = () => {
                       {stack.items.map((item, itemIdx) => (
                         <span
                           key={`${stack.category}-${item}-${itemIdx}`}
-                          className={`px-3 py-1.5 rounded-lg border-2 text-sm text-stone-700 font-medium transition-all duration-400 ease-out ${
+                          className={`px-3 py-1.5 rounded-lg border-2 text-sm text-stone-800 font-semibold transition-all duration-400 ease-out backdrop-blur-sm ${
                             itemIdx % 4 === 0
-                              ? "bg-liquid-mint/10 border-liquid-mint/30 hover:bg-liquid-mint/20 hover:border-liquid-mint/50"
+                              ? "bg-liquid-mint/25 border-liquid-mint/50 hover:bg-liquid-mint/35 hover:border-liquid-mint/70"
                               : itemIdx % 4 === 1
-                                ? "bg-liquid-lavender/10 border-liquid-lavender/30 hover:bg-liquid-lavender/20 hover:border-liquid-lavender/50"
+                                ? "bg-liquid-lavender/25 border-liquid-lavender/50 hover:bg-liquid-lavender/35 hover:border-liquid-lavender/70"
                                 : itemIdx % 4 === 2
-                                  ? "bg-liquid-rose/10 border-liquid-rose/30 hover:bg-liquid-rose/20 hover:border-liquid-rose/50"
-                                  : "bg-liquid-sky/10 border-liquid-sky/30 hover:bg-liquid-sky/20 hover:border-liquid-sky/50"
+                                  ? "bg-liquid-rose/25 border-liquid-rose/50 hover:bg-liquid-rose/35 hover:border-liquid-rose/70"
+                                  : "bg-liquid-sky/25 border-liquid-sky/50 hover:bg-liquid-sky/35 hover:border-liquid-sky/70"
                           }`}
                         >
                           {String(item)}
@@ -363,18 +363,18 @@ const About = () => {
                       scale: 1.02,
                       transition: { duration: 0.4, ease: "easeOut" },
                     }}
-                  className={`flex items-center gap-3 p-4 rounded-xl border-2 transition-[background-color,border-color,box-shadow] duration-500 ease-out ${
+                  className={`flex items-center gap-3 p-4 rounded-xl border-2 transition-[background-color,border-color,box-shadow] duration-500 ease-out backdrop-blur-md ${
                       idx === 0
-                        ? "bg-gradient-to-r from-liquid-mint/10 to-liquid-sky/10 border-liquid-mint/30 hover:border-liquid-mint/50 hover:from-liquid-mint/15 hover:to-liquid-sky/15"
+                        ? "bg-gradient-to-r from-liquid-mint/25 to-liquid-sky/25 border-liquid-mint/50 hover:border-liquid-mint/70 hover:from-liquid-mint/35 hover:to-liquid-sky/35"
                         : idx === 1
-                          ? "bg-gradient-to-r from-liquid-coral/10 to-liquid-peach/10 border-liquid-coral/30 hover:border-liquid-coral/50 hover:from-liquid-coral/15 hover:to-liquid-peach/15"
+                          ? "bg-gradient-to-r from-liquid-coral/25 to-liquid-peach/25 border-liquid-coral/50 hover:border-liquid-coral/70 hover:from-liquid-coral/35 hover:to-liquid-peach/35"
                           : idx === 2
-                            ? "bg-gradient-to-r from-liquid-lavender/10 to-liquid-pink/10 border-liquid-lavender/30 hover:border-liquid-lavender/50 hover:from-liquid-lavender/15 hover:to-liquid-pink/15"
-                            : "bg-gradient-to-r from-liquid-lime/10 to-liquid-teal/10 border-liquid-lime/30 hover:border-liquid-lime/50 hover:from-liquid-lime/15 hover:to-liquid-teal/15"
+                            ? "bg-gradient-to-r from-liquid-lavender/25 to-liquid-pink/25 border-liquid-lavender/50 hover:border-liquid-lavender/70 hover:from-liquid-lavender/35 hover:to-liquid-pink/35"
+                            : "bg-gradient-to-r from-liquid-lime/25 to-liquid-teal/25 border-liquid-lime/50 hover:border-liquid-lime/70 hover:from-liquid-lime/35 hover:to-liquid-teal/35"
                     }`}
                   >
-                    <hobby.icon size={20} className="text-stone-600" />
-                    <span className="text-stone-700 font-medium">
+                    <hobby.icon size={20} className="text-stone-700" />
+                    <span className="text-stone-800 font-semibold">
                       {String(hobby.text)}
                     </span>
                   </motion.div>

app/components/Hero.tsx

@@ -133,7 +133,7 @@ const Hero = () => {
               transition={{ duration: 0.6, delay: 0.3, ease: "easeOut" }}
               className="absolute -bottom-8 left-1/2 -translate-x-1/2 z-30"
             >
-              <div className="px-6 py-2.5 rounded-full glass-panel text-stone-800 font-sans font-bold text-sm tracking-wide shadow-lg backdrop-blur-xl border border-white/50">
+              <div className="px-6 py-2.5 rounded-full bg-white/90 backdrop-blur-xl text-stone-900 font-sans font-bold text-sm tracking-wide shadow-lg border-2 border-stone-300">
                 dk<span className="text-red-500 font-extrabold">0</span>.dev
               </div>
             </motion.div>
@@ -207,10 +207,10 @@ const Hero = () => {
                 ease: [0.25, 0.1, 0.25, 1],
               }}
               whileHover={{ scale: 1.03, y: -3 }}
-              className="flex items-center space-x-2 px-5 py-2.5 rounded-full bg-white/70 border border-white/90 shadow-sm backdrop-blur-sm"
+              className="flex items-center space-x-2 px-5 py-2.5 rounded-full bg-white/85 border-2 border-stone-300 shadow-md backdrop-blur-lg"
             >
-              <feature.icon className="w-4 h-4 text-stone-700" />
-              <span className="text-stone-700 font-medium text-sm">
+              <feature.icon className="w-4 h-4 text-stone-800" />
+              <span className="text-stone-800 font-semibold text-sm">
                 {feature.text}
               </span>
             </motion.div>

app/components/ShaderGradientBackground.tsx

@@ -13,8 +13,8 @@ const ShaderGradientBackground = () => {
         width: "100%",
         height: "100%",
         zIndex: -1,
-        filter: "blur(120px)",
-        opacity: 0.5,
+        filter: "blur(150px)",
+        opacity: 0.65,
         pointerEvents: "none",
       }}
     >
@@ -27,10 +27,11 @@ const ShaderGradientBackground = () => {
           height: "100%",
         }}
       >
+        {/* Sphere 1 - Links oben */}
         <ShaderGradient
           animate="on"
           axesHelper="off"
-          brightness={1.2}
+          brightness={1.3}
           cAzimuthAngle={180}
           cDistance={3.6}
           cPolarAngle={90}
@@ -48,26 +49,112 @@ const ShaderGradientBackground = () => {
           grain="on"
           lightType="3d"
           pixelDensity={2.9}
-          positionX={-1.4}
-          positionY={0}
+          positionX={-2.5}
+          positionY={1.5}
           positionZ={0}
           range="disabled"
           rangeEnd={40}
           rangeStart={0}
           reflection={0.1}
           rotationX={0}
-          rotationY={10}
+          rotationY={15}
           rotationZ={50}
           shader="defaults"
           type="sphere"
-          uAmplitude={4.2}
+          uAmplitude={6.0}
           uDensity={0.8}
           uFrequency={5.5}
-          uSpeed={0.4}
-          uStrength={4.6}
+          uSpeed={0.5}
+          uStrength={5.0}
           uTime={0}
           wireframe={false}
         />
+        
+        {/* Sphere 2 - Rechts mitte */}
+        <ShaderGradient
+          animate="on"
+          axesHelper="off"
+          brightness={1.25}
+          cAzimuthAngle={180}
+          cDistance={3.6}
+          cPolarAngle={90}
+          cameraZoom={1}
+          color1="#e167c5"
+          color2="#b01040"
+          color3="#b04a17"
+          destination="onCanvas"
+          embedMode="off"
+          envPreset="city"
+          format="gif"
+          fov={45}
+          frameRate={10}
+          gizmoHelper="hide"
+          grain="on"
+          lightType="3d"
+          pixelDensity={2.9}
+          positionX={2.0}
+          positionY={-0.5}
+          positionZ={-0.5}
+          range="disabled"
+          rangeEnd={40}
+          rangeStart={0}
+          reflection={0.1}
+          rotationX={0}
+          rotationY={25}
+          rotationZ={70}
+          shader="defaults"
+          type="sphere"
+          uAmplitude={5.5}
+          uDensity={0.9}
+          uFrequency={4.8}
+          uSpeed={0.45}
+          uStrength={4.8}
+          uTime={10}
+          wireframe={false}
+        />
+        
+        {/* Sphere 3 - Unten links */}
+        <ShaderGradient
+          animate="on"
+          axesHelper="off"
+          brightness={1.2}
+          cAzimuthAngle={180}
+          cDistance={3.6}
+          cPolarAngle={90}
+          cameraZoom={1}
+          color1="#b04a17"
+          color2="#e167c5"
+          color3="#b01040"
+          destination="onCanvas"
+          embedMode="off"
+          envPreset="city"
+          format="gif"
+          fov={45}
+          frameRate={10}
+          gizmoHelper="hide"
+          grain="on"
+          lightType="3d"
+          pixelDensity={2.9}
+          positionX={-0.5}
+          positionY={-2.0}
+          positionZ={0.3}
+          range="disabled"
+          rangeEnd={40}
+          rangeStart={0}
+          reflection={0.1}
+          rotationX={0}
+          rotationY={20}
+          rotationZ={60}
+          shader="defaults"
+          type="sphere"
+          uAmplitude={5.8}
+          uDensity={0.7}
+          uFrequency={6.0}
+          uSpeed={0.52}
+          uStrength={4.9}
+          uTime={20}
+          wireframe={false}
+        />
       </ShaderGradientCanvas>
     </div>
   );

app/globals.css

@@ -52,35 +52,35 @@ html {
 
 /* Liquid Glass Effects */
 .glass-panel {
-    background: rgba(250, 248, 243, 0.5);
-    backdrop-filter: blur(12px) saturate(120%);
-    -webkit-backdrop-filter: blur(12px) saturate(120%);
-    border: 1px solid rgba(215, 204, 200, 0.5);
-    box-shadow: 0 8px 32px rgba(62, 39, 35, 0.08);
+    background: rgba(250, 248, 243, 0.75);
+    backdrop-filter: blur(20px) saturate(130%);
+    -webkit-backdrop-filter: blur(20px) saturate(130%);
+    border: 1px solid rgba(215, 204, 200, 0.6);
+    box-shadow: 0 8px 32px rgba(62, 39, 35, 0.12);
     will-change: backdrop-filter;
 }
 
 .glass-card {
-    background: rgba(255, 252, 245, 0.8);
-    backdrop-filter: blur(24px) saturate(180%);
-    -webkit-backdrop-filter: blur(24px) saturate(180%);
-    border: 1px solid rgba(215, 204, 200, 0.6);
+    background: rgba(255, 252, 245, 0.85);
+    backdrop-filter: blur(30px) saturate(200%);
+    -webkit-backdrop-filter: blur(30px) saturate(200%);
+    border: 1px solid rgba(215, 204, 200, 0.7);
     box-shadow:
-        0 4px 6px -1px rgba(62, 39, 35, 0.04),
-        0 2px 4px -1px rgba(62, 39, 35, 0.03),
-        inset 0 0 20px rgba(255, 252, 245, 0.5);
+        0 4px 6px -1px rgba(62, 39, 35, 0.06),
+        0 2px 4px -1px rgba(62, 39, 35, 0.05),
+        inset 0 0 30px rgba(255, 252, 245, 0.6);
     transition: all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
     will-change: transform, box-shadow;
 }
 
 .glass-card:hover {
-    background: rgba(255, 252, 245, 0.9);
+    background: rgba(255, 252, 245, 0.95);
     box-shadow:
-        0 20px 25px -5px rgba(62, 39, 35, 0.1),
-        0 10px 10px -5px rgba(62, 39, 35, 0.04),
-        inset 0 0 20px rgba(255, 252, 245, 0.8);
+        0 20px 25px -5px rgba(62, 39, 35, 0.15),
+        0 10px 10px -5px rgba(62, 39, 35, 0.08),
+        inset 0 0 30px rgba(255, 252, 245, 0.9);
     transform: translateY(-4px);
-    border-color: rgba(215, 204, 200, 0.8);
+    border-color: rgba(215, 204, 200, 0.9);
 }
 
 /* Typography & Headings */