Updated UI

src/app/globals.css

@@ -44,10 +44,8 @@
   --sidebar-primary-foreground: #fbfbfb;
 
   /* --- Glow effects from file 2 --- */
-  --glow-minty: 0 0 20px hsl(159 31% 80% / 0.6),
-    0 0 40px hsl(159 31% 80% / 0.3);
-  --glow-primary: 0 0 20px hsl(32 28% 23% / 0.6),
-    0 0 40px hsl(32 28% 23% / 0.3);
+  --glow-minty: 0 0 20px hsl(159 31% 80% / 0.6), 0 0 40px hsl(159 31% 80% / 0.3);
+  --glow-primary: 0 0 20px hsl(32 28% 23% / 0.6), 0 0 40px hsl(32 28% 23% / 0.3);
 }
 
 .dark {
@@ -170,12 +168,10 @@ body {
   }
 
   .name-glow:hover {
-    text-shadow: 
-      0 0 10px rgba(189, 156, 122, 0.8),
-      0 0 20px rgba(189, 156, 122, 0.6),
-      0 0 30px rgba(189, 156, 122, 0.4),
+    text-shadow: 0 0 10px rgba(189, 156, 122, 0.8),
+      0 0 20px rgba(189, 156, 122, 0.6), 0 0 30px rgba(189, 156, 122, 0.4),
       0 0 40px rgba(189, 156, 122, 0.3);
-    color: #EBDEBE;
+    color: #ebdebe;
   }
 
   /* Permanent glow effects */
@@ -269,22 +265,58 @@ body {
   .animate-duration-3s {
     animation-duration: 3s;
   }
-  
+
   .animate-duration-2s {
     animation-duration: 2s;
   }
-  
+
   .animate-duration-4s {
     animation-duration: 4s;
   }
+
+  /* Added for Shader.tsx optimization */
+  .move-grid-animation {
+    animation: move-grid 80s linear infinite;
+  }
+
+  @keyframes move-grid {
+    0% {
+      transform: translate(0, 0);
+    }
+    100% {
+      transform: translate(-40px, -40px);
+    }
+  }
 }
 
 @keyframes shake {
-  0%, 100% { transform: translateX(0); }
-  25% { transform: translateX(-4px); }
-  75% { transform: translateX(4px); }
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-4px);
+  }
+  75% {
+    transform: translateX(4px);
+  }
 }
 
 .animate-shake {
   animation: shake 0.3s ease-in-out;
-}
+}
+
+/* Grid slide animation using background-position for CSS gradients */
+@keyframes grid-slide {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 50px 50px;
+  }
+}
+
+.animate-grid-slide {
+  animation: grid-slide 2s linear infinite;
+  will-change: background-position;
+}

src/components/ClientLayoutShell.tsx

@@ -7,6 +7,7 @@ import { useState, useEffect } from "react";
 import { useSession } from "next-auth/react";
 import { Toaster } from "sonner";
 import DemoOne from "@/components/ShaderBackground";
+import { Shader } from "./Shader";
 
 type ClientLayoutShellProps = {
   children: React.ReactNode;
@@ -58,7 +59,7 @@ export function ClientLayoutShell({ children }: ClientLayoutShellProps) {
     <>
       {!isEntryPage && (
         <div className="fixed -z-10 h-full w-screen">
-          <DemoOne />
+          <Shader />
         </div>
       )}
       <Toaster theme="system" richColors />

src/components/Shader.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import React, { useState, useRef, useEffect } from "react";
+// Removed Framer Motion hooks: useMotionValue, useAnimationFrame, MotionValue
+// import { motion } from "framer-motion"; // 'motion' is no longer needed
+import { cn } from "@/lib/utils";
+
+// CSS-based grid pattern using repeating-linear-gradient
+// This ensures the pattern renders continuously without waiting for full tiles
+const GridPattern = () => {
+  return (
+    <div
+      className="w-full h-full animate-grid-slide"
+      style={{
+        backgroundImage: `
+          repeating-linear-gradient(
+            0deg,
+            transparent,
+            transparent 49px,
+            var(--foreground) 49px,
+            var(--foreground) 50px
+          ),
+          repeating-linear-gradient(
+            90deg,
+            transparent,
+            transparent 49px,
+            var(--foreground) 49px,
+            var(--foreground) 50px
+          )
+        `,
+        backgroundSize: "50px 50px",
+        backgroundRepeat: "repeat",
+      }}
+    />
+  );
+};
+
+export const Shader = () => {
+  // isMobile state is unused in this simplified example, but kept for context
+  const [isMobile, setIsMobile] = React.useState(false);
+
+  // All grid-related state (gridOffsetX, gridOffsetY, useAnimationFrame) has been removed.
+
+  // NOTE: The `useEffect` for `visibilitychange` is now redundant
+  // because CSS animations automatically pause when the tab is hidden.
+
+  return (
+    <div
+      className={cn(
+        "relative w-full h-screen flex flex-col items-center justify-center overflow-hidden"
+      )}
+      style={{
+        background: "var(--background)",
+        color: "var(--foreground)",
+      }}
+    >
+      {/* Optimized Grid Layer 
+          - opacity-20 for subtlety
+          - Removed `transform: translateZ(0)` here, as it's better placed on the animating element (the rect)
+      */}
+      <div className="absolute inset-0 opacity-7 pointer-events-none">
+        {/* The animation logic is now inside GridPattern */}
+        <GridPattern />
+      </div>
+
+      {/* Decorative Blobs - Retained with conditional blur */}
+      <div className="absolute inset-0 pointer-events-none">
+        <div
+          className={cn(
+            "absolute right-[-20%] top-[-20%] w-[40%] h-[40%] rounded-full",
+            isMobile ? "blur-[60px] opacity-50" : "blur-[120px]"
+          )}
+          style={{
+            background: "color-mix(in srgb, var(--primary) 20%, transparent)",
+            // Add will-change to the expensive blur operation
+            willChange: "filter, transform",
+          }}
+        />
+        <div
+          className={cn(
+            "absolute right-[10%] top-[-10%] w-[20%] h-[20%] rounded-full",
+            isMobile ? "blur-[50px] opacity-50" : "blur-[100px]"
+          )}
+          style={{
+            background: "color-mix(in srgb, var(--secondary) 15%, transparent)",
+            willChange: "filter, transform",
+          }}
+        />
+        <div
+          className={cn(
+            "absolute left-[-10%] bottom-[-20%] w-[40%] h-[40%] rounded-full",
+            isMobile ? "blur-[60px] opacity-50" : "blur-[120px]"
+          )}
+          style={{
+            background: "color-mix(in srgb, var(--primary) 12%, transparent)",
+            willChange: "filter, transform",
+          }}
+        />
+      </div>
+    </div>
+  );
+};

src/lib/skillIcons.ts

@@ -59,6 +59,9 @@ import {
   SiScikitlearn,
   SiPandas,
   SiNumpy,
+  SiCplusplus,
+  SiSharp,
+  SiC,
 } from "react-icons/si";
 
 import {
@@ -165,9 +168,9 @@ const skillIconMap: Record<string, IconType> = {
   Swift: SiSwift,
   PHP: SiPhp,
   Ruby: SiRuby,
-  "C#": FaCode,
-  "C++": FaCode,
-  C: FaCode,
+  "C#": SiSharp,
+  "C++": SiCplusplus,
+  C: SiC,
   "React Native": SiReact,
   Flutter: SiFlutter,
   Cybersecurity: FaShieldAlt,