feat: update Aurora component color handling and adjust background properties for improved visual effect

Author: codevoid048

app/layout.tsx

@@ -89,9 +89,9 @@ export default function RootLayout({
         {/* Aurora Background */}
         <div className="fixed inset-0 -z-20 w-screen h-screen">
           <Aurora
-            colorStops={["hsl(0 0% 12%)", "hsl(0 0% 40%)", "hsl(0 0% 95%)"]}
-            blend={0.5}
-            amplitude={1.0}
+            colorStops={["rgb(0,0,0)", "rgb(0,0,0)", "rgb(0,0,0)"]}
+            blend={0.4}
+            amplitude={0.8}
             speed={0.5}
           />
         </div>

components/sections/projects.tsx

@@ -186,11 +186,17 @@ function ProjectCard({
   return (
     <motion.div
       className="relative rounded-xl border border-border bg-card/10 p-6 group"
-      initial={{ opacity: 0, y: 50, rotateX: -15 }}
+      initial={{ 
+        opacity: 0, 
+        y: 50, 
+        rotateX: -15,
+        boxShadow: "0 0px 0px rgba(0, 0, 0, 0)"
+      }}
       whileInView={{
         opacity: 1,
         y: 0,
-        rotateX: 0
+        rotateX: 0,
+        boxShadow: "0 0px 0px rgba(0, 0, 0, 0)"
       }}
       viewport={{ once: true, margin: "-50px" }}
       transition={{

components/ui/aurora.tsx

@@ -158,8 +158,22 @@ export default function Aurora(props: AuroraProps) {
         delete geometry.attributes.uv;
       }
 
-      const colorStopsArray = colorStops.map(hex => {
-        const c = new Color(hex);
+      const colorStopsArray = colorStops.map(colorStr => {
+        let c: Color;
+        if (colorStr.startsWith('rgb(')) {
+          // Parse rgb(r,g,b) format
+          const rgbMatch = colorStr.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+          if (rgbMatch) {
+            const r = parseInt(rgbMatch[1]) / 255;
+            const g = parseInt(rgbMatch[2]) / 255;
+            const b = parseInt(rgbMatch[3]) / 255;
+            c = new Color(r, g, b);
+          } else {
+            c = new Color('#808080'); // fallback gray
+          }
+        } else {
+          c = new Color(colorStr);
+        }
         return [c.r, c.g, c.b];
       });
 
@@ -187,8 +201,22 @@ export default function Aurora(props: AuroraProps) {
           program.uniforms.uAmplitude.value = propsRef.current.amplitude ?? 1.0;
           program.uniforms.uBlend.value = propsRef.current.blend ?? blend;
           const stops = propsRef.current.colorStops ?? colorStops;
-          program.uniforms.uColorStops.value = stops.map((hex: string) => {
-            const c = new Color(hex);
+          program.uniforms.uColorStops.value = stops.map((colorStr: string) => {
+            let c: Color;
+            if (colorStr.startsWith('rgb(')) {
+              // Parse rgb(r,g,b) format
+              const rgbMatch = colorStr.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+              if (rgbMatch) {
+                const r = parseInt(rgbMatch[1]) / 255;
+                const g = parseInt(rgbMatch[2]) / 255;
+                const b = parseInt(rgbMatch[3]) / 255;
+                c = new Color(r, g, b);
+              } else {
+                c = new Color('#808080'); // fallback gray
+              }
+            } else {
+              c = new Color(colorStr);
+            }
             return [c.r, c.g, c.b];
           });
           renderer.render({ scene: mesh });