first commit

1 files changed, 63 insertions, 0 deletions

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
new file mode 100644
index 0000000..8cb0e78
--- /dev/null
+++ b/src/components/Navbar.jsx
@@ -0,0 +1,63 @@
+import { motion } from "framer-motion";
+
+const fadeInUp = {
+  initial: { opacity: 0, y: 20 },
+  animate: { opacity: 1, y: 0 },
+  transition: { duration: 0.6 },
+};
+
+const staggerContainer = {
+  animate: {
+    transition: {
+      staggerChildren: 0.1,
+    },
+  },
+};
+
+export const Navbar = () => {
+  return (
+    <motion.nav
+      className="navbar"
+      initial={{ y: -100 }}
+      animate={{ y: 0 }}
+      transition={{ duration: 0.6, ease: "easeOut" }}
+    >
+      <motion.div
+        className="logo"
+        whileHover={{ scale: 1.05 }}
+        whileTap={{ scale: 0.95 }}
+      >
+        Portfolio
+      </motion.div>
+
+      <motion.ul
+        className="nav-links"
+        variants={staggerContainer}
+        initial="initial"
+        animate="animate"
+      >
+        <motion.li
+          variants={fadeInUp}
+          whileHover={{ scale: 1.1 }}
+          whileTap={{ scale: 0.95 }}
+        >
+          <a href="#home"> Home</a>
+        </motion.li>
+        <motion.li
+          variants={fadeInUp}
+          whileHover={{ scale: 1.1 }}
+          whileTap={{ scale: 0.95 }}
+        >
+          <a href="#projects"> Projects</a>
+        </motion.li>
+        <motion.li
+          variants={fadeInUp}
+          whileHover={{ scale: 1.1 }}
+          whileTap={{ scale: 0.95 }}
+        >
+          <a href="#contact"> Contact</a>
+        </motion.li>
+      </motion.ul>
+    </motion.nav>
+  );
+};