Add auto-moving Galaxy background without mouse parallax

Author: HamiParsa

src/app/globals.css

@@ -4,7 +4,7 @@
 /* Apply styles to html and body */
 html, body {
   /* Set dark background color */
-  background-color: #0F0E0E;
+  background-color: black;
 
   /* Enable smooth scrolling for anchor links */
   scroll-behavior: smooth;

src/components/Bio.tsx

@@ -10,40 +10,48 @@ import {
   FaLaptopCode,
 } from "react-icons/fa6";
 import { IoLogoJavascript } from "react-icons/io5";
-import { RiNextjsFill } from "react-icons/ri";
+import { RiNextjsFill, RiTailwindCssFill } from "react-icons/ri";
 import { GiChessKing } from "react-icons/gi";
 import { TbBrandRedux } from "react-icons/tb";
 import { SiTypescript } from "react-icons/si";
-import { RiTailwindCssFill } from "react-icons/ri";
+import GalaxyBackground from "./GalaxyBackgroundParallax"; // <- our new galaxy background
 
+// ===============================
+// Bio Component
+// ===============================
 export default function Bio() {
-  // List of skills with icons
+  // ===== Skills Array =====
+  // Each skill has a name and an icon component with optional color
   const skills = [
     { name: "HTML", icon: <FaHtml5 className="text-orange-400" /> },
     { name: "CSS", icon: <FaCss3Alt className="text-blue-500" /> },
     { name: "JavaScript", icon: <IoLogoJavascript className="text-amber-300" /> },
     { name: "React", icon: <FaReact className="text-blue-900" /> },
-    { name: "Next", icon: <RiNextjsFill /> },
+    { name: "Next.js", icon: <RiNextjsFill /> },
     { name: "TypeScript", icon: <SiTypescript className="text-blue-500" /> },
     { name: "Zustand", icon: <TbBrandRedux className="text-purple-600" /> },
     { name: "Tailwind", icon: <RiTailwindCssFill className="text-blue-500" /> },
   ];
 
-  // Mounted check for client-only rendering
+  // ===== Mounted State =====
+  // Used to ensure animations and motion values only run on the client
   const [mounted, setMounted] = useState(false);
   useEffect(() => setMounted(true), []);
 
-  // Motion values for parallax tilt effect
+  // ===== Mouse Tilt Animation =====
+  // motionX & motionY track mouse movement
   const motionX = useMotionValue(0);
   const motionY = useMotionValue(0);
+  // rotateY & rotateX transform motion values into rotation degrees
   const rotateY = useTransform(motionX, (val) => val);
   const rotateX = useTransform(motionY, (val) => -val);
 
-  // Track mouse position to update tilt
+  // ===== Mouse Move Effect =====
+  // Moves the profile image slightly based on mouse position
   useEffect(() => {
     if (!mounted) return;
     const handleMouseMove = (e: MouseEvent) => {
-      const x = (e.clientX / window.innerWidth - 0.5) * 30;
+      const x = (e.clientX / window.innerWidth - 0.5) * 30; // Rotate up to 15 degrees
       const y = (e.clientY / window.innerHeight - 0.5) * 30;
       motionX.set(x);
       motionY.set(y);
@@ -52,59 +60,51 @@ export default function Bio() {
     return () => window.removeEventListener("mousemove", handleMouseMove);
   }, [mounted, motionX, motionY]);
 
-  // Generate floating particles once on client
-  const [particles, setParticles] = useState<{ top: number; left: number }[]>([]);
-  useEffect(() => {
-    if (!mounted) return;
-    setParticles(
-      Array.from({ length: 40 }).map(() => ({
-        top: Math.random() * 100,
-        left: Math.random() * 100,
-      }))
-    );
-  }, [mounted]);
-
   return (
     <div id="about" className="relative min-h-screen font-bricolage overflow-hidden">
-      {/* Animated background gradient */}
-      <div className="absolute inset-0 -z-10 animate-bgGradient"></div>
+      {/* ===== Galaxy Background Component ===== */}
+      <GalaxyBackground />
 
-      {/* Floating particles animation */}
-      <div className="absolute inset-0 -z-10 pointer-events-none">
-        {particles.map((p, i) => (
-          <motion.div
-            key={i}
-            className="w-1 h-1 bg-white rounded-full opacity-30 absolute"
-            style={{ top: `${p.top}%`, left: `${p.left}%` }}
-            animate={{
-              y: [`0%`, `${Math.random() * 50 - 25}%`, `0%`],
-              x: [`0%`, `${Math.random() * 50 - 25}%`, `0%`],
-            }}
-            transition={{
-              duration: Math.random() * 8 + 4,
-              repeat: Infinity,
-              repeatType: "mirror",
-              ease: "easeInOut",
-            }}
+      {/* ===============================
+          Main Content
+          =============================== */}
+      <div className="flex flex-col lg:flex-row-reverse items-center justify-center mt-36 px-6 lg:px-0 gap-16">
+        {/* ===== Profile Image with Glow & Tilt ===== */}
+        <motion.div
+          className="relative w-80 h-80 lg:w-96 lg:h-96 perspective z-10"
+          style={{ rotateX, rotateY }}
+          animate={{ y: ["0%", "-3%", "0%"] }}
+          transition={{ duration: 6, repeat: Infinity, repeatType: "mirror", ease: "easeInOut" }}
+        >
+          {/* Layered Gradient Glows */}
+          <div className="absolute inset-0 rounded-2xl blur-3xl opacity-60 bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 animate-glow1"></div>
+          <div className="absolute inset-0 rounded-2xl blur-2xl opacity-40 bg-gradient-to-r from-purple-400 via-pink-400 to-pink-600 animate-glow2"></div>
+          <div className="absolute inset-0 rounded-2xl blur-xl opacity-30 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 animate-glow3"></div>
+
+          <Image
+            src="https://i.ibb.co/h5pf15q/image.png"
+            width={400}
+            height={400}
+            alt="Hami Parsa"
+            className="relative rounded-2xl shadow-2xl border border-gray-800"
           />
-        ))}
-      </div>
+        </motion.div>
 
-      <div className="flex flex-col lg:flex-row-reverse items-center justify-center mt-36 px-6 lg:px-0 gap-16">
-        {/* Text section with intro and skills */}
+        {/* ===== Text Section ===== */}
         <div className="text-gray-100 max-w-lg flex flex-col gap-6 z-10 relative">
+          {/* Name with Gradient & Icon */}
           <h1 className="flex items-center gap-2 text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 animate-textGradient">
             Im Hami Parsa
             <GiChessKing className="text-yellow-400 text-4xl animate-bounce" />
           </h1>
 
+          {/* Role */}
           <h2 className="text-2xl flex items-center gap-2 text-gray-300 hover:text-white transition-colors duration-300">
             Front End Developer <FaLaptopCode className="text-indigo-400 text-2xl" />
           </h2>
-
           <hr className="border-gray-800" />
 
-          {/* Skills grid */}
+          {/* ===== Skills Grid ===== */}
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
             {skills.map((skill) => (
               <div
@@ -117,76 +117,27 @@ export default function Bio() {
             ))}
           </div>
         </div>
-
-        {/* Profile image with parallax tilt and glowing layers */}
-        <motion.div
-          className="relative w-80 h-80 lg:w-96 lg:h-96 perspective z-10"
-          style={{ rotateX, rotateY }}
-          animate={{ y: ["0%", "-3%", "0%"] }}
-          transition={{ duration: 6, repeat: Infinity, repeatType: "mirror", ease: "easeInOut" }}
-        >
-          {/* Neon glow layers */}
-          <div className="absolute inset-0 rounded-2xl blur-3xl opacity-60 bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 animate-glow1"></div>
-          <div className="absolute inset-0 rounded-2xl blur-2xl opacity-40 bg-gradient-to-r from-purple-400 via-pink-400 to-pink-600 animate-glow2"></div>
-          <div className="absolute inset-0 rounded-2xl blur-xl opacity-30 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 animate-glow3"></div>
-
-          <Image
-            src="https://i.ibb.co/h5pf15q/image.png"
-            width={400}
-            height={400}
-            alt="Hami Parsa"
-            className="relative rounded-2xl shadow-2xl border border-gray-800"
-          />
-        </motion.div>
       </div>
 
-      {/* Bio paragraph */}
+      {/* ===== Bio Paragraph ===== */}
       <p className="text-white text-center mt-[300px] max-w-3xl mx-auto text-lg sm:text-xl leading-relaxed">
-        Hi, Im <span className="font-bold text-pink-500">Hami Parsa</span> — a <span className="text-indigo-400 font-semibold">passionate Front-End Developer</span> dedicated to crafting <span className="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 font-bold">modern, interactive, and visually stunning</span> web experiences.
-        <br /><br />
-        I transform ideas into <span className="text-purple-400 font-semibold">user-friendly websites</span> using <span className="text-yellow-400 font-bold">HTML, CSS, JavaScript</span>, <span className="text-blue-500 font-bold">React</span>, and <span className="text-indigo-400 font-bold">Next.js</span>.
-        <br /><br />
-        Always learning, always improving — I strive to build projects that combine <span className="text-pink-400 font-semibold">beautiful design</span> with <span className="text-purple-500 font-semibold">high performance</span>.
-        <br /><br />
-        Lets collaborate and create <span className="bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 font-bold">something extraordinary</span> together!
+        Hi, Im <span className="font-bold text-pink-500">Hami Parsa</span> — a <span className="text-indigo-400 font-semibold">passionate Front-End Developer</span> crafting <span className="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 font-bold">modern, interactive, and visually stunning</span> web experiences.
       </p>
 
-      {/* Custom animations and styles */}
+      {/* ===== Custom Animations ===== */}
       <style jsx>{`
         .perspective { perspective: 1000px; }
 
-        @keyframes glow1 {
-          0% { background-position: 0% 50%; }
-          50% { background-position: 100% 50%; }
-          100% { background-position: 0% 50%; }
-        }
-        @keyframes glow2 {
-          0% { background-position: 100% 0%; }
-          50% { background-position: 0% 100%; }
-          100% { background-position: 100% 0%; }
-        }
-        @keyframes glow3 {
-          0% { background-position: 50% 0%; }
-          50% { background-position: 50% 100%; }
-          100% { background-position: 50% 0%; }
-        }
-
+        /* Glow Animations for Profile Image */
+        @keyframes glow1 { 0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%} }
+        @keyframes glow2 { 0%{background-position:100% 0%}50%{background-position:0% 100%}100%{background-position:100% 0%} }
+        @keyframes glow3 { 0%{background-position:50% 0%}50%{background-position:50% 100%}100%{background-position:50% 0%} }
         .animate-glow1 { background-size: 200% 200%; animation: glow1 6s ease-in-out infinite; }
         .animate-glow2 { background-size: 200% 200%; animation: glow2 8s ease-in-out infinite; }
         .animate-glow3 { background-size: 200% 200%; animation: glow3 10s ease-in-out infinite; }
 
-        @keyframes bgGradient {
-          0% { background-position: 0% 50%; }
-          50% { background-position: 100% 50%; }
-          100% { background-position: 0% 50%; }
-        }
-        .animate-bgGradient { background-size: 200% 200%; animation: bgGradient 20s ease infinite; }
-
-        @keyframes textGradient {
-          0% { background-position: 0% 50%; }
-          50% { background-position: 100% 50%; }
-          100% { background-position: 0% 50%; }
-        }
+        /* Gradient Text Animation */
+        @keyframes textGradient { 0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%} }
         .animate-textGradient { background-size: 200% 200%; animation: textGradient 6s ease-in-out infinite; }
       `}</style>
     </div>

src/components/Footer.tsx

@@ -1,76 +1,98 @@
 "use client";
 
 import { FaGithub, FaLinkedin } from "react-icons/fa";
+import { motion } from "framer-motion";
+import { useState, useEffect } from "react";
 
 export default function Footer() {
+  const [particles, setParticles] = useState<{ top: number; left: number; xOffset: number; delay: number }[]>([]);
+
+  useEffect(() => {
+    setParticles(
+      Array.from({ length: 20 }).map(() => ({
+        top: Math.random() * 100,
+        left: Math.random() * 100,
+        xOffset: Math.random() * 300 - 150,
+        delay: Math.random() * 10,
+      }))
+    );
+  }, []);
+
   return (
-    <footer className="relative mt-[100px] bg-gray-900 text-white pt-16 pb-8 overflow-hidden">
-      {/* Animated Glowing Background */}
-      <div className="absolute inset-0 -z-10 bg-gradient-to-r from-pink-600 via-purple-600 to-indigo-600 opacity-30 animate-gradientSlow blur-2xl"></div>
+    <footer className="relative mt-[150px] text-white pt-20 pb-10 overflow-hidden">
+      {/* Background Gradient */}
+      <div className="absolute inset-0 -z-10 bg-gradient-to-r from-cyan-500 via-purple-600 to-pink-600 opacity-30 animate-gradientSlow blur-3xl"></div>
+
+      <div className="max-w-7xl mx-auto px-6 relative">
+        <motion.div
+          initial={{ y: 50, opacity: 0 }}
+          whileInView={{ y: 0, opacity: 1 }}
+          transition={{ duration: 1, ease: "easeOut" }}
+          viewport={{ once: true }}
+          className="rounded-3xl bg-white/10 backdrop-blur-2xl border border-white/20 shadow-2xl p-10 flex flex-col md:flex-row items-center justify-between gap-10 relative overflow-hidden"
+        >
+          <div className="absolute inset-0 rounded-3xl border-2 border-transparent bg-gradient-to-r from-cyan-400 via-purple-500 to-pink-500 opacity-50 blur-md -z-10"></div>
+
+          <motion.h1 whileHover={{ scale: 1.05 }} className="text-3xl font-extrabold bg-gradient-to-r from-cyan-400 via-purple-500 to-pink-500 bg-clip-text text-transparent tracking-wide">
+            Hami Parsa
+          </motion.h1>
 
-      <div className="max-w-7xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-8">
-        {/* Copyright */}
-        <p className="text-gray-300 text-center md:text-left hover:text-white transition-all duration-300 text-lg md:text-base font-semibold">
-          &copy; {new Date().getFullYear()} Hami Parsa. All Rights Reserved.
-        </p>
+          <div className="flex gap-10">
+            {[
+              { icon: <FaGithub size={32} />, link: "https://github.com/hamiparsa", color: "hover:shadow-pink-500/60" },
+              { icon: <FaLinkedin size={32} />, link: "https://www.linkedin.com/in/hami-parsa-146ba437a/", color: "hover:shadow-blue-500/60" },
+            ].map((item, i) => (
+              <motion.a
+                key={i}
+                href={item.link}
+                target="_blank"
+                rel="noopener noreferrer"
+                whileHover={{ scale: 1.3, rotate: 5 }}
+                className={`text-gray-300 hover:text-white transition-all duration-300 transform hover:scale-125 hover:shadow-lg ${item.color}`}
+              >
+                {item.icon}
+              </motion.a>
+            ))}
+          </div>
 
-        {/* Social Links */}
-        <div className="flex gap-8">
-          <a
-            href="https://github.com/hamiparsa"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-gray-300 hover:text-white transition-all duration-300 transform hover:scale-125 hover:shadow-lg hover:shadow-pink-500/60"
-          >
-            <FaGithub size={32} />
-          </a>
-          <a
-            href="https://www.linkedin.com/in/hami-parsa-146ba437a/"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-gray-300 hover:text-blue-500 transition-all duration-300 transform hover:scale-125 hover:shadow-lg hover:shadow-blue-500/60"
-          >
-            <FaLinkedin size={32} />
-          </a>
-        </div>
+          <motion.p initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.5 }} className="text-gray-300 font-medium text-center md:text-right text-lg">
+            © {new Date().getFullYear()} Hami Parsa. All Rights Reserved.
+          </motion.p>
+        </motion.div>
       </div>
 
-      {/* Bottom Gradient Line with Glow */}
-      <div className="mt-10 h-1 w-3/4 mx-auto rounded-full bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 animate-gradientFast shadow-2xl shadow-pink-500/50"></div>
+      <motion.div initial={{ scaleX: 0 }} whileInView={{ scaleX: 1 }} transition={{ duration: 1.5, ease: "easeOut" }} viewport={{ once: true }} className="mt-14 h-1 w-2/3 mx-auto rounded-full bg-gradient-to-r from-cyan-400 via-purple-500 to-pink-500 shadow-[0_0_20px_rgba(236,72,153,0.8)]"></motion.div>
 
-      {/* Extra Floating Glow Circles */}
-      <div className="absolute -top-12 -left-12 w-32 h-32 bg-pink-500/30 rounded-full blur-3xl animate-floatSlow"></div>
-      <div className="absolute -bottom-16 -right-16 w-40 h-40 bg-indigo-500/30 rounded-full blur-3xl animate-floatSlow delay-2000"></div>
+      <div className="absolute -top-16 left-10 w-40 h-40 bg-cyan-500/30 rounded-full blur-3xl animate-floatSlow"></div>
+      <div className="absolute bottom-0 right-10 w-52 h-52 bg-purple-500/30 rounded-full blur-3xl animate-floatSlow delay-2000"></div>
+
+      {/* Floating Neon Particles */}
+      <div className="absolute inset-0 pointer-events-none">
+        {particles.map((p, i) => (
+          <motion.span
+            key={i}
+            className="absolute w-2 h-2 rounded-full bg-white/70"
+            initial={{ opacity: 0, y: 0 }}
+            animate={{ opacity: [0, 1, 0], y: [-20, -100], x: p.xOffset }}
+            transition={{ duration: 5 + Math.random() * 5, repeat: Infinity, delay: p.delay }}
+            style={{ top: `${p.top}%`, left: `${p.left}%` }}
+          />
+        ))}
+      </div>
 
       <style jsx>{`
         @keyframes gradientSlow {
           0% { background-position: 0% 50%; }
           50% { background-position: 100% 50%; }
           100% { background-position: 0% 50%; }
         }
-        @keyframes gradientFast {
-          0% { background-position: 0% 50%; }
-          50% { background-position: 100% 50%; }
-          100% { background-position: 0% 50%; }
-        }
         @keyframes floatSlow {
           0%, 100% { transform: translateY(0px); }
-          50% { transform: translateY(20px); }
-        }
-        .animate-gradientSlow {
-          background-size: 200% 200%;
-          animation: gradientSlow 25s ease infinite;
-        }
-        .animate-gradientFast {
-          background-size: 200% 200%;
-          animation: gradientFast 6s ease infinite;
-        }
-        .animate-floatSlow {
-          animation: floatSlow 10s ease-in-out infinite;
-        }
-        .delay-2000 {
-          animation-delay: 2s;
+          50% { transform: translateY(30px); }
         }
+        .animate-gradientSlow { background-size: 200% 200%; animation: gradientSlow 30s ease infinite; }
+        .animate-floatSlow { animation: floatSlow 12s ease-in-out infinite; }
+        .delay-2000 { animation-delay: 2s; }
       `}</style>
     </footer>
   );