feat: Enhance ProjectDetail and Projects pages with improved layout, new components, and better user experience

- Refactored ProjectDetail component to include a sidebar with project details and a main content area for project overview, objectives, and results.
- Added a modal for image previews in ProjectDetail.
- Implemented a new InfoSection component for better organization of project information.
- Updated Projects page with improved filter controls, active filters display, and enhanced no results view.
- Added clear filters functionality and improved layout options for project cards.
- Introduced ResearchComponent to showcase research interests with animations and expandable sections.
- Created AboutMe page with a structured layout and animations for better presentation of personal information and skills.
- Updated RequestCV page to enhance form submission experience and added status messages for user feedback.

Author: arpitkumar2004

.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.env

package-lock.json

@@ -13,6 +13,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
     "emailjs-com": "^3.2.0",
     "framer-motion": "^11.18.2",
     "lucide-react": "^0.344.0",

package.json

@@ -10,6 +10,8 @@ import Projects from './pages/Projects';
 import ProjectDetail from './pages/ProjectDetail';
 import Contact from './pages/Contact';
 import RequestCV from './pages/RequestCV';
+import AboutMe from './pages/aboutme';
+
 
 const ScrollToTop = () => {
   const { pathname } = useLocation();
@@ -34,6 +36,8 @@ function App() {
             <Route path="/projects/:id" element={<ProjectDetail />} />
             <Route path="/contact" element={<Contact />} />
             <Route path="/request-cv" element={<RequestCV />} />
+            <Route path="/aboutme" element={<AboutMe />} />
+
           </Routes>
         </main>
         <Footer />

src/App.tsx

@@ -1,41 +1,85 @@
 import React from 'react';
-import { Github, Linkedin, Twitter } from 'lucide-react';
+import { Github, Linkedin, Twitter, Mail, MapPin } from 'lucide-react';
 
 const Footer: React.FC = () => {
   return (
-    <footer className="bg-gray-800 text-white py-8">
+    <footer className="bg-gray-800 text-white py-10">
       <div className="container mx-auto px-4">
-        <div className="flex flex-col md:flex-row justify-between items-center">
+        <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-8">
+          {/* Left: About/Contact */}
+          <div className="mb-4 md:mb-0 max-w-xs">
+            <h3 className="font-bold text-lg mb-2">Arpit Kumar</h3>
+            <p className="text-gray-300 text-sm mb-2">
+              Data Science &amp; ML enthusist passionate about building impactful solutions with data and AI.
+            </p>
+            <div className="flex items-center text-gray-400 text-xs mb-1">
+              <Mail size={16} className="mr-2" />
+              <a href="mailto:arpitkumar2004@gmail.com" className="hover:text-blue-400">kumararpit17773@gmail.com</a>
+            </div>
+            <div className="flex items-center text-gray-400 text-xs">
+              <MapPin size={16} className="mr-2" />
+              <span>Lucknow, Uttar Pradesh, India</span>
+            </div>
+          </div>
+          {/* Center: Quick Links */}
           <div className="mb-4 md:mb-0">
-            <p>&copy; 2024 Arpit Kumar. All rights reserved.</p>
+            <h4 className="font-semibold mb-2 text-base">Quick Links</h4>
+            <ul className="space-y-1 text-sm text-gray-300">
+              <li>
+                <a href="/" className="hover:text-blue-400">Home</a>
+              </li>
+              <li>
+                <a href="/#projects" className="hover:text-blue-400">Projects</a>
+              </li>
+              <li>
+                <a href="/#aboutme" className="hover:text-blue-400">About Me</a>
+              </li>
+              <li>
+                <a href="/#contact" className="hover:text-blue-400">Contact</a>
+              </li>
+              <li>
+                <a href="/#request-cv" className="hover:text-blue-400">Resume</a>
+              </li>
+            </ul>
           </div>
-          <div className="flex space-x-4">
-            <a
-              href="https://github.com/arpitkumar2004"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="hover:text-blue-400"
-            >
-              <Github size={24} />
-            </a>
-            <a
-              href="https://www.linkedin.com/in/arpit-kumar-shivam/"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="hover:text-blue-400"
-            >
-              <Linkedin size={24} />
-            </a>
-            <a
-              href="https://twitter.com/yourusername"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="hover:text-blue-400"
-            >
-              <Twitter size={24} />
-            </a>
+          {/* Right: Socials */}
+          <div>
+            <h4 className="font-semibold mb-2 text-base">Connect Via</h4>
+            <div className="flex space-x-4">
+              <a
+                href="https://github.com/arpitkumar2004"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="hover:text-blue-400"
+                aria-label="GitHub"
+              >
+                <Github size={24} />
+              </a>
+              <a
+                href="https://www.linkedin.com/in/arpit-kumar-shivam/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="hover:text-blue-400"
+                aria-label="LinkedIn"
+              >
+                <Linkedin size={24} />
+              </a>
+              <a
+                href="https://twitter.com/yourusername"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="hover:text-blue-400"
+                aria-label="Twitter"
+              >
+                <Twitter size={24} />
+              </a>
+            </div>
           </div>
         </div>
+        {/* Bottom: Copyright */}
+        <div className="mt-8 border-t border-gray-700 pt-4 text-center text-xs text-gray-400">
+          &copy; 2025 Arpit Kumar. All rights reserved. | Built with React &amp; Tailwind CSS
+        </div>
       </div>
     </footer>
   );