Add grid animations

Author: shield44

src/components/AboutSection.tsx

@@ -22,8 +22,13 @@ const AboutSection = () => {
   }
 
   return (
-    <section id="about" ref={ref} className="min-h-screen py-32 px-4 md:px-8 relative z-10">
-      <div className="max-w-7xl mx-auto">
+    <section id="about" ref={ref} className="min-h-screen py-32 px-4 md:px-8 relative z-10 overflow-hidden">
+      {/* Animated Grid Background */}
+      <div className="bg-grid-wrapper opacity-30">
+        <div className="bg-grid-animated" />
+      </div>
+
+      <div className="max-w-7xl mx-auto relative z-10">
         <motion.div
           className="mb-16 flex items-end justify-between border-b border-white/10 pb-8"
           variants={itemVariants}

src/components/HeroSection.tsx

@@ -37,6 +37,11 @@ const HeroSection = () => {
       className="min-h-screen flex items-center justify-center relative overflow-hidden pt-20"
       ref={containerRef}
     >
+      {/* Animated Grid Background */}
+      <div className="bg-grid-wrapper">
+        <div className="bg-grid-animated" />
+      </div>
+
       <div className="max-w-7xl mx-auto px-4 w-full flex flex-col items-center justify-center relative z-10">
 
         <motion.div
@@ -45,7 +50,7 @@ const HeroSection = () => {
             y: mousePosition.y
           }}
           transition={{ type: "spring", stiffness: 50, damping: 20 }}
-          className="text-center"
+          className="text-center w-full"
         >
           <motion.div 
             initial="hidden"
@@ -64,7 +69,7 @@ const HeroSection = () => {
 
             <motion.h1 
               variants={titleVariants}
-              className="text-7xl md:text-9xl lg:text-[12rem] font-black tracking-tighter leading-none mb-6 kinetic-text"
+              className="text-7xl md:text-9xl lg:text-[12rem] font-black tracking-tighter leading-none mb-6 cyber-title select-none w-full max-w-full overflow-hidden"
             >
               SHIELD44
             </motion.h1>

src/components/ProjectsSection.tsx

@@ -97,8 +97,13 @@ const ProjectsSection = () => {
   }
 
   return (
-    <section id="projects" ref={ref} className="min-h-screen py-32 px-4 md:px-8 relative z-10">
-      <div className="max-w-7xl mx-auto">
+    <section id="projects" ref={ref} className="min-h-screen py-32 px-4 md:px-8 relative z-10 overflow-hidden">
+      {/* Animated Grid Background */}
+      <div className="bg-grid-wrapper opacity-30">
+        <div className="bg-grid-animated" />
+      </div>
+
+      <div className="max-w-7xl mx-auto relative z-10">
         <motion.div
           className="mb-16 flex items-end justify-between border-b border-white/10 pb-8"
           variants={itemVariants}

src/styles/globals.css

@@ -91,4 +91,42 @@ h1, h2, h3, h4, h5, h6 {
 .no-scrollbar {
   -ms-overflow-style: none;
   scrollbar-width: none;
+}
+
+/* Cyber Title - Hollow text that fills on hover */
+.cyber-title {
+  color: transparent;
+  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.9);
+  transition: all 0.5s ease-out;
+  cursor: default;
+}
+.cyber-title:hover {
+  color: #00E5FF;
+  -webkit-text-stroke: 0px transparent;
+  text-shadow: 0 0 60px rgba(0, 229, 255, 0.8), 0 0 100px rgba(139, 92, 246, 0.5);
+  transform: scale(1.02);
+}
+
+/* Animated Grid Background */
+@keyframes grid-move {
+  0% { transform: translateY(0); }
+  100% { transform: translateY(50px); }
+}
+.bg-grid-wrapper {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  z-index: 0;
+  pointer-events: none;
+  mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
+  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
+}
+.bg-grid-animated {
+  position: absolute;
+  inset: -100px;
+  background-image: 
+    linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
+  background-size: 50px 50px;
+  animation: grid-move 3s linear infinite;
 }