Update src/pages/Home.jsx

src/pages/Home.jsx

@@ -1,129 +1,130 @@
-import React from "react";
-import { motion } from "framer-motion";
-import { IoLogoLinkedin } from "react-icons/io5";
-import { BiLogoGmail } from "react-icons/bi";
-import { BsGithub } from "react-icons/bs";
-import { TypeAnimation } from "react-type-animation";
-
-export default function Home() {
-  return (
-    <div className="mt-20" id="home">
-      <div className="flex justify-between py-10 items-center px-5 lg:px-28 lg:flex-row flex-col-reverse">
-
-        <motion.div
-          className="lg:w-[45%]"
-          initial={{ opacity: 0, x: -50 }}
-          animate={{ opacity: 1, x: 0 }}
-          transition={{ duration: 1, ease: "easeInOut" }}
-        >
-
-          <motion.div
-            className="text-2xl lg:text-5xl flex flex-col mt-8 lg:mt-0 gap-2 lg:gap-5 text-nowrap"
-            initial="hidden"
-            animate="visible"
-            variants={{
-              hidden: { opacity: 0, y: 20 },
-              visible: {
-                opacity: 1,
-                y: 0,
-                transition: { staggerChildren: 0.2, ease: "easeInOut" },
-              },
-            }}
-          >
-            <motion.h2 variants={{ hidden: { opacity: 0, y: 10 }, visible: { opacity: 1, y: 0 } }}>
-              Hello, <TypeAnimation
-                sequence={[
-                  'I am Aditya Kumar',
-                  1000,
-                  // 'I am a App Developer',
-                  // 1000,
-                  // 'I am a UI/UX Designer',
-                  // 1000,
-                ]}
-                speed={10}
-                style={{ fontWeight:600 }}
-                repeat={Infinity}
-              />
-            </motion.h2>
-            <motion.h2 variants={{ hidden: { opacity: 0, y: 10 }, visible: { opacity: 1, y: 0 } }}>
-              <span className="font-extrabold">Fullstack</span>{" "}
-              <span
-                className="text-white font-extrabold"
-                style={{ WebkitTextStroke: "1px black" }}
-              >
-                App Developer
-              </span>
-            </motion.h2>
-            <motion.h2 variants={{ hidden: { opacity: 0, y: 10 }, visible: { opacity: 1, y: 0 } }}>
-              Based In <span className="font-extrabold">India.</span>
-            </motion.h2>
-          </motion.div>
-
-          <motion.p
-            className="text-[#71717A] text-sm lg:text-base mt-5"
-            initial={{ opacity: 0, y: 10 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.5, duration: 1 }}
-          >
-            Passionate about technology, I specialize in App Development and Backend Systems. I'm focused on building innovative cross-platform solutions and continuously expanding my skills. My goal is to grow as a developer and contribute to impactful projects in the tech industry.
-          </motion.p>
-
-          <motion.div
-            className="flex items-center gap-x-5 mt-10 lg:mt-14"
-            initial={{ opacity: 0, y: 10 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.8, duration: 1 }}
-          >
-            <motion.a
-              href="mailto:aditya.kumar25025@gmail.com"
-              className="bg-white p-2 lg:p-3 rounded border-2 border-black"
-              whileHover={{ scale: 1.1, backgroundColor: "#000", color: "#fff" }}
-              whileTap={{ scale: 0.9 }}
-            >
-              <BiLogoGmail className="w-4 h-4 lg:w-5 lg:h-5" />
-            </motion.a>
-            <motion.a
-              href="https://www.linkedin.com/in/25-aditya-kumar"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="bg-white p-2 lg:p-3 rounded border-2 border-black"
-              whileHover={{ scale: 1.1, backgroundColor: "#000", color: "#fff" }}
-              whileTap={{ scale: 0.9 }}
-            >
-              <IoLogoLinkedin className="w-4 h-4 lg:w-5 lg:h-5" />
-            </motion.a>
-            <motion.a
-              href="https://leetcode.com/Adi025/"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="bg-white p-2 lg:p-3 rounded border-2 border-black"
-              whileHover={{ scale: 1.1, backgroundColor: "#000", color: "#fff" }}
-              whileTap={{ scale: 0.9 }}
-            >
-              <img src="/src/assets/leetcode-svgrepo-com.svg" alt="LeetCode" className="w-4 h-4 lg:w-5 lg:h-5" />
-            </motion.a>
-            <motion.a
-              href="https://github.com/Aditya002500"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="bg-white p-2 lg:p-3 rounded border-2 border-black"
-              whileHover={{ scale: 1.1, backgroundColor: "#000", color: "#fff" }}
-              whileTap={{ scale: 0.9 }}
-            >
-              <BsGithub className="w-4 h-4 lg:w-5 lg:h-5" />
-            </motion.a>
-          </motion.div>
-        </motion.div>
-
-        <motion.div
-          className="lg:w-[55%] w-full"
-          initial={{ opacity: 0, x: 50 }}
-          animate={{ opacity: 1, x: 0 }}
-          transition={{ duration: 1, ease: "easeInOut" }}
-        >
-          <img className="h-full w-full" src="/assets/hero-vector.svg" alt="Hero Vector" />
-        </motion.div>
-      </div>
-    </div>
-  );
-}
+import React from "react";
+import { motion } from "framer-motion";
+import { IoLogoLinkedin } from "react-icons/io5";
+import { BiLogoGmail } from "react-icons/bi";
+import { BsGithub } from "react-icons/bs";
+import { TypeAnimation } from "react-type-animation";
+import leetcodeLogo from "../assets/leetcode-svgrepo-com.svg";
+
+export default function Home() {
+  return (
+    <div className="mt-20" id="home">
+      <div className="flex justify-between py-10 items-center px-5 lg:px-28 lg:flex-row flex-col-reverse">
+
+        <motion.div
+          className="lg:w-[45%]"
+          initial={{ opacity: 0, x: -50 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 1, ease: "easeInOut" }}
+        >
+
+          <motion.div
+            className="text-2xl lg:text-5xl flex flex-col mt-8 lg:mt-0 gap-2 lg:gap-5 text-nowrap"
+            initial="hidden"
+            animate="visible"
+            variants={{
+              hidden: { opacity: 0, y: 20 },
+              visible: {
+                opacity: 1,
+                y: 0,
+                transition: { staggerChildren: 0.2, ease: "easeInOut" },
+              },
+            }}
+          >
+            <motion.h2 variants={{ hidden: { opacity: 0, y: 10 }, visible: { opacity: 1, y: 0 } }}>
+              Hello, <TypeAnimation
+                sequence={[
+                  'I am Aditya Kumar',
+                  1000,
+                  // 'I am a App Developer',
+                  // 1000,
+                  // 'I am a UI/UX Designer',
+                  // 1000,
+                ]}
+                speed={10}
+                style={{ fontWeight:600 }}
+                repeat={Infinity}
+              />
+            </motion.h2>
+            <motion.h2 variants={{ hidden: { opacity: 0, y: 10 }, visible: { opacity: 1, y: 0 } }}>
+              <span className="font-extrabold">Fullstack</span>{" "}
+              <span
+                className="text-white font-extrabold"
+                style={{ WebkitTextStroke: "1px black" }}
+              >
+                App Developer
+              </span>
+            </motion.h2>
+            <motion.h2 variants={{ hidden: { opacity: 0, y: 10 }, visible: { opacity: 1, y: 0 } }}>
+              Based In <span className="font-extrabold">India.</span>
+            </motion.h2>
+          </motion.div>
+
+          <motion.p
+            className="text-[#71717A] text-sm lg:text-base mt-5"
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.5, duration: 1 }}
+          >
+            Passionate about technology, I specialize in App Development and Backend Systems. I'm focused on building innovative cross-platform solutions and continuously expanding my skills. My goal is to grow as a developer and contribute to impactful projects in the tech industry.
+          </motion.p>
+
+          <motion.div
+            className="flex items-center gap-x-5 mt-10 lg:mt-14"
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.8, duration: 1 }}
+          >
+            <motion.a
+              href="mailto:aditya.kumar25025@gmail.com"
+              className="bg-white p-2 lg:p-3 rounded border-2 border-black"
+              whileHover={{ scale: 1.1, backgroundColor: "#000", color: "#fff" }}
+              whileTap={{ scale: 0.9 }}
+            >
+              <BiLogoGmail className="w-4 h-4 lg:w-5 lg:h-5" />
+            </motion.a>
+            <motion.a
+              href="https://www.linkedin.com/in/25-aditya-kumar"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="bg-white p-2 lg:p-3 rounded border-2 border-black"
+              whileHover={{ scale: 1.1, backgroundColor: "#000", color: "#fff" }}
+              whileTap={{ scale: 0.9 }}
+            >
+              <IoLogoLinkedin className="w-4 h-4 lg:w-5 lg:h-5" />
+            </motion.a>
+            <motion.a
+              href="https://leetcode.com/Adi025/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="bg-white p-2 lg:p-3 rounded border-2 border-black"
+              whileHover={{ scale: 1.1, backgroundColor: "#000", color: "#fff" }}
+              whileTap={{ scale: 0.9 }}
+            >
+              <img src={leetcodeLogo} alt="LeetCode" className="w-4 h-4 lg:w-5 lg:h-5" />
+            </motion.a>
+            <motion.a
+              href="https://github.com/Aditya002500"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="bg-white p-2 lg:p-3 rounded border-2 border-black"
+              whileHover={{ scale: 1.1, backgroundColor: "#000", color: "#fff" }}
+              whileTap={{ scale: 0.9 }}
+            >
+              <BsGithub className="w-4 h-4 lg:w-5 lg:h-5" />
+            </motion.a>
+          </motion.div>
+        </motion.div>
+
+        <motion.div
+          className="lg:w-[55%] w-full"
+          initial={{ opacity: 0, x: 50 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 1, ease: "easeInOut" }}
+        >
+          <img className="h-full w-full" src="/assets/hero-vector.svg" alt="Hero Vector" />
+        </motion.div>
+      </div>
+    </div>
+  );
+}