Improved the data and SOMe of the UI of mltiple components.

Author: arpitkumar2004

TODO.md

@@ -0,0 +1,7 @@
+# TODO: Improve Mobile Navbar UX
+
+- [x] Step 1: Add smooth animations for menu open/close transitions.
+- [x] Step 2: Improve button styling with better visual feedback (hover, active states).
+- [x] Step 3: Add overlay background when menu is open for better focus.
+- [x] Step 4: Enhance accessibility with better focus management.
+- [x] Step 5: Add swipe gestures or better touch interactions if needed.

package-lock.json

@@ -13,17 +13,21 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@studio-freight/lenis": "^1.0.42",
     "clsx": "^2.1.1",
     "emailjs-com": "^3.2.0",
     "framer-motion": "^11.18.2",
+    "gsap": "^3.13.0",
+    "lenis": "^1.3.11",
     "lucide-react": "^0.344.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.51.0",
     "react-icons": "^5.5.0",
     "react-intersection-observer": "^9.8.1",
     "react-router-dom": "^6.22.3",
-    "react-syntax-highlighter": "^15.5.0"
+    "react-syntax-highlighter": "^15.5.0",
+    "react-tooltip": "^5.30.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.1",

package.json

@@ -11,19 +11,27 @@ import ProjectDetail from './pages/ProjectDetail';
 import Contact from './pages/Contact';
 import RequestCV from './pages/RequestCV';
 import AboutMe from './pages/aboutme';
+import { useLenis } from './hooks/useLenis';
 
 
 const ScrollToTop = () => {
   const { pathname } = useLocation();
+  const lenis = useLenis();
 
   useEffect(() => {
-    window.scrollTo(0, 0);
-  }, [pathname]);
+    if (lenis) {
+      lenis.scrollTo(0, { immediate: true });
+    } else {
+      window.scrollTo(0, 0);
+    }
+  }, [pathname, lenis]);
 
   return null;
 };
 
 function App() {
+  useLenis(); // Initialize Lenis for smooth scrolling
+
   return (
     <Router>
       <ScrollToTop />

src/App.tsx

@@ -25,12 +25,11 @@ const educationData: EducationItem[] = [
         id: 1,
         institution: "Indian Institute of Technology, Kharagpur",
         location: "Kharagpur, West Bengal, India",
-        degree: "Integrated Dual Degree in Chemical Engineering",
+        degree: "Integrated Dual Degree (B.Tech + M.Tech) in Chemical Engineering",
         duration: "2022 - 2027",
         description: [
-            "Specialized in Chemical Engineering with a focus on process design and optimization.",
-            "Completed coursework in advanced mathematics, thermodynamics, and data analysis.",
-            "Engaged in research projects related to machine learning applications in chemical processes."
+            "Focused on process design, simulation, and optimization, applying chemical engineering principles to industrial-scale systems.",
+            "Research Experience: Worked on projects integrating machine learning with chemical process modeling, including simulation-based optimization and predictive analytics for process efficiency."
         ],
         gpa: "8.46/10",
         link: "https://www.iitkgp.ac.in/"

src/components/Education.tsx

@@ -72,7 +72,7 @@ const experiences: ExperienceItem[] = [
   },
   {
     id: 4,
-    company: "Students' Branding and Relations Cell",
+    company: "Students' Branding and Relations Cell, IIT Kharagpur",
     link: "https://sbrc.iitkgp.ac.in",
     location: "IIT Kharagpur, Kharagpur, West Bengal",
     totalDuration: "Feb 2023 - Feb 2024",
@@ -85,7 +85,7 @@ const companyIcons: Record<string, JSX.Element> = {
   "Developers' Society, IIT-Kharagpur": <img src={devsocLogo} alt="Developers' Society logo" className="w-10 h-11 rounded-full" />,
   "Public Policy and Governance Society, IIT-Kharagpur": <img src={ppgsLogo} alt="Public Policy and Governance Society logo" className="w-10 h-10 rounded-full" />,
   "Chemical Engineering Association, IIT-Kharagpur": <img src={cheaLogo} alt="Chemical Engineering Association logo" className="w-10 h-10 rounded-full" />,
-  "Students' Branding and Relations Cell": <img src={sbrcLogo} alt="Students' Branding and Relations Cell logo" className="w-10 h-10 rounded-full" />,
+  "Students' Branding and Relations Cell, IIT Kharagpur": <img src={sbrcLogo} alt="Students' Branding and Relations Cell logo" className="w-10 h-10 rounded-full" />,
 };
 
 // const skillIcons: Record<string, JSX.Element> = {

src/components/Experience.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Link, useLocation } from 'react-router-dom';
-import { Menu, X } from 'lucide-react';
 import clsx from 'clsx';
 
 const navLinks = [
@@ -94,33 +93,54 @@ const Header: React.FC = () => {
 
           <button
             onClick={toggleMenu}
-            className="md:hidden z-50"
+            className="md:hidden z-50 p-2 rounded-md hover:bg-gray-100 active:bg-gray-200 transition-colors duration-200"
             aria-expanded={isMenuOpen}
             aria-controls="mobile-menu"
             aria-label={isMenuOpen ? 'Close navigation menu' : 'Open navigation menu'}
           >
-            {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
+            <div className="relative w-6 h-6 flex flex-col justify-center items-center">
+              <span className={`block h-0.5 w-6 bg-gray-600 transform transition duration-300 ease-in-out ${isMenuOpen ? 'rotate-45 translate-y-1' : '-translate-y-1'}`}></span>
+              <span className={`block h-0.5 w-6 bg-gray-600 transform transition duration-300 ease-in-out ${isMenuOpen ? 'opacity-0' : 'opacity-100'}`}></span>
+              <span className={`block h-0.5 w-6 bg-gray-600 transform transition duration-300 ease-in-out ${isMenuOpen ? '-rotate-45 -translate-y-1' : 'translate-y-1'}`}></span>
+            </div>
           </button>
         </div>
 
-        {/* Mobile menu remains the same */}
+        {/* Mobile menu with improved UX */}
+        {isMenuOpen && (
+          <div
+            className="md:hidden fixed inset-0 bg-black/60 backdrop-blur-md z-40 transition-all duration-500"
+            onClick={() => setIsMenuOpen(false)}
+          />
+        )}
         <div
           id="mobile-menu"
           className={clsx(
-            'md:hidden fixed top-0 left-0 w-full bg-white transition-transform duration-300 ease-in-out',
-            { 'translate-x-0': isMenuOpen, '-translate-x-full': !isMenuOpen }
+            'md:hidden fixed top-0 left-0 w-full h-screen bg-gradient-to-b from-white to-gray-50 transition-all duration-500 ease-out z-50',
+            {
+              'translate-x-0 opacity-100': isMenuOpen,
+              '-translate-x-full opacity-0': !isMenuOpen
+            }
           )}
         >
-          <nav className="flex flex-col items-center justify-center h-screen space-y-8">
-            {navLinks.map((link) => (
-              <Link key={link.href} to={link.href} className="text-2xl text-gray-800">
+          <nav className="flex flex-col items-center justify-center h-full space-y-10 px-4">
+            {navLinks.map((link, index) => (
+              <Link
+                key={link.href}
+                to={link.href}
+                className="text-3xl font-medium text-gray-800 hover:text-blue-600 transition-all duration-300 transform hover:scale-110 hover:-translate-y-1"
+                style={{
+                  animationDelay: `${index * 150}ms`,
+                  animation: isMenuOpen ? 'slideInFromLeft 0.4s ease-out forwards' : 'none'
+                }}
+              >
                 {link.label}
               </Link>
             ))}
             {/* <a
               href="/request-cv"
               // download
-              className="text-2xl bg-blue-600 text-white px-6 py-3 rounded-lg"
+              className="text-2xl bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
             >
               Download CV
             </a> */}

src/components/Header.tsx

@@ -24,7 +24,7 @@ const ProjectCard: React.FC<ProjectCardProps> = ({
   title,
   description,
   image,
-  tags,
+  tag,
   githubLink,
   articleLink,
   liveDemoLink,