Navbar changed, needs work

src/App.jsx

@@ -13,10 +13,10 @@ const App = () => {
         <Navbar />
         <Hero />
         <About />
+        <Tech />
+        <Experience />
         <ProjectCard />
         <AcademyProjects />
-      <Experience />
-      <Tech />
       <Feedbacks />
       </div>
       <div className="relative z-0">

src/components/Hero.jsx

@@ -6,7 +6,7 @@ const Hero = () => {
   const heroText = "WELCOME TO MY PORTFOLIO !";
 
   return (
-    <div id="main-wrapper">
+    <div id="hero-wrapper">
     <section className='relative w-full h-screen max-auto'>
       <div className={`absolute inset-0 top-[150px] lg:top-[220px] max-w-full h-auto mx-auto sm:px-16 pl-6 flex flex-row  items-start gap-5`}>
         <div className='flex flex-col items-center justify-center mt-5'>

src/components/Navbar.jsx

@@ -28,10 +28,9 @@ const Navbar = () => {
 
   return (
     <div className='flex justify-center'>
-      <nav className={`
-    ${styles.paddingX}   rounded-3xl w-5/6 flex items-center py-5 fixed top-5 z-20 bg-transparent`}>
-      <div className="flex items-center justify-between w-full mx-auto max-w-7xl ">
-      <Link to="main-wrapper" activeClass="active" spy={true} smooth={true}
+      <nav className="fixed z-20 flex w-5/6 py-4 bg-transparent rounded-3xl top-4">
+      <div className="flex items-center justify-between w-full ">
+      <Link to="hero-wrapper" activeClass="active" spy={true} smooth={true}
       className="flex items-center gap-2 px-6 py-2 border-2 cursor-pointer rounded-3xl border-rose-400 bg-gradient-to-r from-[#231436] via-[#061839] to-[#3d1437]"
       onClick={() => {
         setActive("");
@@ -40,38 +39,34 @@ const Navbar = () => {
       >
 
         <img src={logo} alt="logo" className="object-contain w-9 h-9"/>
-        <p className="flex text-base font-bold text-white sm:text-sm cursos-pointer">Arnob&nbsp;Dey&nbsp;</p>
+        <p className="flex text-base font-bold text-white sm:text-sm cursos-pointer">Arnob&nbsp;<span className='hidden lg:block'>Dey&nbsp;</span></p>
       </Link>
-      <ul className='flex-row hidden list-none sm:flex px-2 py-1 border-2 cursor-pointer rounded-full border-rose-400 bg-[#061839]'>
+      <ul className='flex-row hidden list-none md:flex px-2 py-1 border-2 cursor-pointer rounded-full border-rose-400 bg-[#061839]'>
           {navLinks.map((nav) => (
-            <li
-              key={nav.id}
-              className={`${
-                active === nav.title ? "border-2 py-1 border-rose-400 rounded-3xl" :
-                                       "bg-[#231436]  py-2"}
-                 hover:text-white px-4 text-[18px] font-medium cursor-pointer bg-gradient-to-r  from-green-200 via-green-300 to-purple-500 text-transparent bg-clip-text`}
-              onClick={() => setActive(nav.title)}
-            >
-              <Link smooth duration={150} to={nav.id}>{nav.title}</Link>
+             <li
+             key={nav.id}
+             className={`${
+             active === nav.title ? "-skew-y-2 border-2 p-2 rounded-2xl scale-125 bg-clip-border bg-gradient-to-b from-[#231436] via-[#061839] to-[#3d1437]" : ""}
+             hover:text-white text-[16px] my-2 py-1 rounded-md font-poppins font-medium cursor-pointer px-6`}
+             onClick={() => setActive(nav.title)}>
+             <a href={`#${nav.id}`}>{nav.title}</a>
             </li>
           ))}
         </ul>
-
-
-
-        <div className="flex items-center justify-end flex-1 sm:hidden ">
+
+        <div className="flex items-center justify-end flex-1 md:hidden ">
           <img src={toggle ? menu : close} alt="menu" className="object-contain cursor-pointer w-7 h-7"
           onClick={() => setToggle(!toggle)}/>
           <div className={`${toggle ? "hidden" : "flex"}
-           p-6 absolute rounded-lg top-20 right-0 mx-4 my-2 min-w-[140px] z-10` }>
-              <ul className='flex flex-col items-start justify-end gap-4 list-none'>
+           py-4 px-10 absolute justify-end rounded-xl top-20  mx-4 min-w-[140px] z-10 bg-gradient-to-b from-[#231436] via-[#061839] to-[#3d1437]` }>
+              <ul className='flex flex-col items-end w-full list-none gap-y-4'>
                 {navLinks.map((nav) => (
 
               <li
                 key={nav.id}
                 className={`${
-                active === nav.title ? "bg-gradient-to-r from-green-200 via-green-300 to-purple-500 text-transparent bg-clip-text " : "border-b-4 border-indigo-500  bg-gradient-to-r from-green-200 via-green-300 to-purple-500 text-transparent bg-clip-text"}
-                hover:text-white text-[16px] border-2 px-8 py-2 justify-center rounded-md bg-gradient-to-r from-green-200 via-green-300 to-blue-500 font-poppins font-medium cursor-pointer`}
+                active === nav.title ? "-skew-y-2 border-2 p-2 rounded-2xl bg-clip-border bg-gradient-to-b from-[#231436] via-[#061839] to-[#3d1437]" : ""}
+                hover:text-white items-end justify-end  text-[16px] py-2 rounded-md font-poppins font-medium cursor-pointer`}
                 onClick={() => {
                   setActive(nav.title)
                   setToggle(!toggle)}

src/components/Tech.jsx

@@ -7,7 +7,10 @@ import React from 'react';
 
 const Tech = () => {
   return (
+    <div className='flex flex-col'>
+      <div className='flex items-center justify-center w-full p-5 m-5 text-xl font-extrabold border-b-2 border-dashed rounded-sm '>My Skills </div>
     <div className='flex flex-row flex-wrap justify-center gap-10'>
+
       {technologies.map((technology) => (
         <div className='w-28 h-28' key={technology.name}>
           <BallCanvas
@@ -16,6 +19,7 @@ const Tech = () => {
         </div>
       ))}
       </div>
+      </div>
   )
 }
 

src/styles.js

@@ -1,5 +1,5 @@
 const styles = {
-    paddingX: "sm:px-16 px-6",
+    paddingX: "sm:px-16 px-2",
     paddingY: "sm:py-16 py-6",
     padding: "sm:px-16 px-6 sm:py-16 py-10",
     visible: "hidden lg:flex lg:visible",