chore: added project and updates to UI

src/app/App.css

@@ -15,13 +15,49 @@
   box-sizing: border-box;
 }
 
-html, body {
+html,
+body {
   overflow: hidden;
   position: fixed;
   height: 100%;
   width: 100%;
 }
 
+/* Mobile devices override for normal scrolling */
+@media (max-width: 768px) {
+  html,
+  body {
+    overflow: auto;
+    position: static;
+    height: auto;
+  }
+
+  .fullpage-container {
+    position: static !important;
+    height: auto !important;
+    overflow: visible !important;
+  }
+
+  .fullpage-sections {
+    transform: none !important;
+    transition: none !important;
+  }
+
+  .fullpage-section {
+    height: auto !important;
+    min-height: 100vh;
+  }
+
+  .fullpage-section-content {
+    overflow: visible !important;
+    height: auto !important;
+  }
+
+  .fullpage-pagination {
+    display: none !important;
+  }
+}
+
 /* Full page styles */
 .app-container {
   position: relative;
@@ -52,8 +88,8 @@ html, body {
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
-  -ms-overflow-style: none;  /* Hide scrollbar IE and Edge */
-  scrollbar-width: none;  /* Hide scrollbar Firefox */
+  -ms-overflow-style: none; /* Hide scrollbar IE and Edge */
+  scrollbar-width: none; /* Hide scrollbar Firefox */
 }
 
 .fullpage-section-content::-webkit-scrollbar {
@@ -111,22 +147,6 @@ html, body {
 }
 
 /* Responsive styles */
-@media (max-width: 768px) {
-  .fullpage-pagination {
-    right: 10px;
-    gap: 10px;
-  }
-  
-  .pagination-dot {
-    width: 8px;
-    height: 8px;
-  }
-  
-  .fullpage-section-content {
-    padding-top: 50px;
-  }
-}
-
 @media (min-width: 1400px) {
   .container,
   .container-lg,
@@ -134,6 +154,6 @@ html, body {
   .container-sm,
   .container-xl,
   .container-xxl {
-      max-width: 1140px;
+    max-width: 1140px;
   }
 }

src/app/App.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import "bootstrap/dist/css/bootstrap.min.css";
 import AnimatedCursor from "../hooks/AnimatedCursor";
 import Headermain from "../header";
@@ -11,6 +11,59 @@ import Section from "../components/Section";
 import "./App.css";
 
 export default function App() {
+  const [isMobile, setIsMobile] = useState(false);
+
+  // Check if device is mobile
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth <= 768);
+    };
+
+    // Initial check
+    checkMobile();
+
+    // Listen for resize events
+    window.addEventListener('resize', checkMobile);
+
+    return () => {
+      window.removeEventListener('resize', checkMobile);
+    };
+  }, []);
+
+  // Traditional multi-page style for mobile
+  if (isMobile) {
+    return (
+      <div className="mobile-app-container">
+        <div className="cursor__dot">
+          <AnimatedCursor
+            innerSize={15}
+            outerSize={15}
+            color="255, 255 ,255"
+            outerAlpha={0.4}
+            innerScale={0.7}
+            outerScale={5}
+          />
+        </div>
+        <Headermain isMobile={true} />
+        <main className="mobile-content">
+          <section id="home" className="mobile-section">
+            <Home />
+          </section>
+          <section id="about" className="mobile-section">
+            <About />
+          </section>
+          <section id="portfolio" className="mobile-section">
+            <Portfolio />
+          </section>
+          <section id="contact" className="mobile-section">
+            <ContactUs />
+          </section>
+        </main>
+      </div>
+    );
+  }
+
+  // Desktop version with smooth scrolling
   return (
     <div className="app-container">
       <div className="cursor__dot">
@@ -23,7 +76,7 @@ export default function App() {
           outerScale={5}
         />
       </div>
-      <Headermain />
+      <Headermain isMobile={false} />
       <FullPage>
         <Section id="home">
           <Home />

src/components/FullPage.js

@@ -4,11 +4,31 @@ import { motion } from 'framer-motion';
 const FullPage = ({ children }) => {
   const [currentPage, setCurrentPage] = useState(0);
   const [isScrolling, setIsScrolling] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
   const containerRef = useRef(null);
   const pagesCount = React.Children.count(children);
 
+  // Check if device is mobile
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth <= 768);
+    };
+
+    // Initial check
+    checkMobile();
+
+    // Listen for resize events
+    window.addEventListener('resize', checkMobile);
+
+    return () => {
+      window.removeEventListener('resize', checkMobile);
+    };
+  }, []);
+
   // Handle page change
   const goToPage = (pageIndex) => {
+    if (isMobile) return; // Disable on mobile
+
     if (pageIndex >= 0 && pageIndex < pagesCount && !isScrolling) {
       setIsScrolling(true);
       setCurrentPage(pageIndex);
@@ -25,6 +45,7 @@ const FullPage = ({ children }) => {
 
   // Handle wheel events with scrolling detection for active section
   const handleWheel = (e) => {
+    if (isMobile) return; // Disable on mobile
     if (isScrolling) return;
 
     // Get the active section content element
@@ -54,6 +75,7 @@ const FullPage = ({ children }) => {
 
   // Handle key events
   const handleKeyDown = (e) => {
+    if (isMobile) return; // Disable on mobile
     if (isScrolling) return;
 
     if (e.key === 'ArrowDown' || e.key === 'PageDown') {
@@ -65,6 +87,8 @@ const FullPage = ({ children }) => {
 
   // Initialize event listeners
   useEffect(() => {
+    if (isMobile) return; // Disable on mobile
+
     const container = containerRef.current;
     if (container) {
       container.addEventListener('wheel', handleWheel, { passive: false });
@@ -75,10 +99,12 @@ const FullPage = ({ children }) => {
         window.removeEventListener('keydown', handleKeyDown);
       };
     }
-  }, [currentPage, isScrolling]);
+  }, [currentPage, isScrolling, isMobile]);
 
   // Check for hash in URL on initial load
   useEffect(() => {
+    if (isMobile) return; // Disable on mobile
+
     const hash = window.location.hash.substring(1);
     if (hash) {
       const childrenArray = React.Children.toArray(children);
@@ -87,10 +113,12 @@ const FullPage = ({ children }) => {
         setCurrentPage(initialPageIndex);
       }
     }
-  }, []);
+  }, [isMobile]);
 
   // Listen for navigation events from header
   useEffect(() => {
+    if (isMobile) return; // Disable on mobile
+
     const handleNavigation = (e) => {
       const { index } = e.detail;
       goToPage(index);
@@ -101,8 +129,28 @@ const FullPage = ({ children }) => {
     return () => {
       document.removeEventListener('navigateTo', handleNavigation);
     };
-  }, []);
+  }, [isMobile]);
 
+  // For mobile, render a simple wrapper without scroll snap
+  if (isMobile) {
+    return (
+      <div className="fullpage-container">
+        <div className="fullpage-sections">
+          {React.Children.map(children, (child, index) => (
+            <div
+              key={index}
+              className="fullpage-section"
+              id={`mobile-section-${index}`}
+            >
+              {child}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  // Desktop version with custom scrolling
   return (
     <div
       ref={containerRef}

src/components/Section.js

@@ -1,7 +1,35 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { motion } from 'framer-motion';
 
 const Section = ({ children, id, className = '' }) => {
+  const [isMobile, setIsMobile] = useState(false);
+
+  // Check if device is mobile
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth <= 768);
+    };
+
+    // Initial check
+    checkMobile();
+
+    // Listen for resize events
+    window.addEventListener('resize', checkMobile);
+
+    return () => {
+      window.removeEventListener('resize', checkMobile);
+    };
+  }, []);
+
+  // Mobile-specific styles
+  const mobileStyles = isMobile ? {
+    height: 'auto',
+    minHeight: '100vh',
+    paddingTop: '60px',
+    paddingBottom: '30px',
+    overflowY: 'visible',
+  } : {};
+
   return (
     <motion.section
       id={id}
@@ -17,7 +45,8 @@ const Section = ({ children, id, className = '' }) => {
         alignItems: 'flex-start',
         justifyContent: 'center',
         position: 'relative',
-        padding: '0 20px'
+        padding: '0 20px',
+        ...mobileStyles
       }}
     >
       <div className="section-scrollable-content">

src/components/themetoggle/index.js

@@ -1,18 +1,29 @@
 import React, { useEffect, useState } from "react";
 import { RiSunLine, RiMoonClearLine } from "react-icons/ri";
+import "./style.css";
 
 const Themetoggle = () => {
   const [theme, settheme] = useState(localStorage.getItem("theme") || "dark");
+  const [isHovering, setIsHovering] = useState(false);
+
   const themetoggle = () => {
     settheme(theme === "dark" ? "light" : "dark");
   };
+
   useEffect(() => {
     document.documentElement.setAttribute('data-theme', theme);
     localStorage.setItem('theme', theme);
   }, [theme]);
+
   return (
-    <div className="nav_ac" onClick={themetoggle}>
-      {theme === "dark" ? <RiSunLine /> : <RiMoonClearLine />}
+    <div className="theme__button nav_ac"
+      onClick={themetoggle}
+      onMouseEnter={() => setIsHovering(true)}
+      onMouseLeave={() => setIsHovering(false)}
+    >
+      <div className={`theme-icon-wrapper ${isHovering ? 'hover' : ''}`}>
+        {theme === "dark" ? <RiSunLine data-state="sun" /> : <RiMoonClearLine data-state="moon" />}
+      </div>
     </div>
   );
 };

src/components/themetoggle/style.css

@@ -20,3 +20,66 @@
 .theme_toggler:hover svg {
   color: var(--text-color-3);
 }
+
+.theme__button {
+  color: var(--text-color);
+  padding: 10px;
+  background: transparent;
+  border: none;
+  position: relative;
+  overflow: visible;
+  cursor: pointer;
+  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  z-index: 1001;
+}
+
+.theme__button:hover {
+  color: var(--text-color-3);
+  transform: scale(1.05);
+}
+
+.theme-icon-wrapper {
+  position: relative;
+  width: 2em;
+  height: 2em;
+  transition: transform 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
+}
+
+.theme-icon-wrapper svg {
+  width: 2em;
+  height: 2em;
+  fill: var(--text-color-2);
+  color: var(--text-color-2);
+  transition: all 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
+  filter: drop-shadow(0 0 0 transparent);
+}
+
+.theme-icon-wrapper.hover svg {
+  transform: rotate(90deg) scale(1.1);
+  fill: var(--text-color-3);
+  color: var(--text-color-3);
+  filter: drop-shadow(0 0 5px var(--text-color-3));
+}
+
+/* Create a glowing effect behind the icon */
+.theme__button::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  background: radial-gradient(circle, var(--text-color-3) 0%, transparent 70%);
+  border-radius: 50%;
+  opacity: 0;
+  transform: translate(-50%, -50%);
+  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  z-index: -1;
+  pointer-events: none;
+}
+
+.theme__button:hover::before {
+  width: 3em;
+  height: 3em;
+  opacity: 0.15;
+}

src/content_option.js

@@ -126,6 +126,11 @@ const services = [{
 ];
 
 const dataportfolio = [{
+        img: "/images/project7.jpg",
+        description: "AI-Powered Photo Editor, A modern SPA using Next.js, TypeScript, and Google Gemini 2.0 for real-time AI image transformations with an intuitive interface",
+        link: "https://ai-image-editor-three.vercel.app/",
+    },
+    {
         img: "/images/project6.jpg",
         description: "AI-Powered Real Estate Investment Analysis. Make data-driven property investment decisions with comprehensive analytics, risk assessment, and market insights powered by artificial intelligence.",
         link: "https://estate-ai-eight.vercel.app/landing",

src/header/index.js

@@ -1,15 +1,24 @@
-import React, { useState } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import "./style.css";
 import { RiMenuLine, RiCloseLine } from "react-icons/ri";
+import { BsGrid3X3Gap } from "react-icons/bs";
 import { logotext } from "../content_option";
 import Themetoggle from "../components/themetoggle";
 
 const Headermain = () => {
   const [isActive, setActive] = useState("false");
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [isHovering, setIsHovering] = useState(false);
 
   const handleToggle = () => {
+    setIsAnimating(true);
     setActive(!isActive);
     document.body.classList.toggle("ovhidden");
+
+    // Reset animation state after animation completes
+    setTimeout(() => {
+      setIsAnimating(false);
+    }, 600);
   };
 
   const handleNavClick = (e, targetId) => {
@@ -44,8 +53,23 @@ const Headermain = () => {
           </a>
           <div className="d-flex align-items-center">
             <Themetoggle />
-            <button className="menu__button nav_ac" onClick={handleToggle}>
-              {!isActive ? <RiCloseLine /> : <RiMenuLine />}
+            <button
+              className={`menu__button nav_ac ${isAnimating ? 'animating' : ''}`}
+              onClick={handleToggle}
+              aria-label={isActive ? "Open menu" : "Close menu"}
+              onMouseEnter={() => setIsHovering(true)}
+              onMouseLeave={() => setIsHovering(false)}
+            >
+              {!isActive ? (
+                <RiCloseLine data-state="open" />
+              ) : (
+                <div className="icon-container">
+                  <div className={`icon-wrapper ${isHovering ? 'hover' : ''}`}>
+                    <RiMenuLine className="menu-icon" data-state="closed" />
+                    <BsGrid3X3Gap className="grid-icon" data-state="grid" />
+                  </div>
+                </div>
+              )}
             </button>
           </div>
         </div>

src/header/style.css

@@ -9,6 +9,11 @@
   padding: 10px;
   background: transparent;
   border: none;
+  position: relative;
+  overflow: visible;
+  cursor: pointer;
+  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  z-index: 1001;
 }
 
 .menu__button:focus,
@@ -16,6 +21,7 @@
   color: var(--text-color-3);
   box-shadow: unset;
   background: transparent;
+  transform: scale(1.05);
 }
 
 .menu__button svg {
@@ -23,12 +29,158 @@
   height: 2em;
   fill: var(--text-color-2);
   color: var(--text-color-2);
-  transition: color 0.3s ease;
+  transition: all 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
+  filter: drop-shadow(0 0 0 transparent);
 }
 
-.menu__button:hover svg {
+/* Default hover for svg elements (for the close button) */
+.menu__button:hover > svg {
   color: var(--text-color-3);
   fill: var(--text-color-3);
+  transform: rotate(90deg) scale(1.1);
+  filter: drop-shadow(0 0 5px var(--text-color-3));
+}
+
+/* Icon container for transition effect */
+.icon-container {
+  position: relative;
+  width: 2em;
+  height: 2em;
+}
+
+.icon-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
+}
+
+.menu-icon,
+.grid-icon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transition: opacity 0.3s ease,
+    transform 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
+}
+
+.menu-icon {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.grid-icon {
+  opacity: 0;
+  transform: scale(0.8);
+}
+
+/* Hover state for icon transition */
+.icon-wrapper.hover .menu-icon {
+  opacity: 0;
+  transform: scale(0.8) rotate(90deg);
+}
+
+.icon-wrapper.hover .grid-icon {
+  opacity: 1;
+  transform: scale(1) rotate(0deg);
+  filter: drop-shadow(0 0 5px var(--text-color-3));
+}
+
+/* Create a glowing effect behind the icon */
+.menu__button::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  background: radial-gradient(circle, var(--text-color-3) 0%, transparent 70%);
+  border-radius: 50%;
+  opacity: 0;
+  transform: translate(-50%, -50%);
+  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  z-index: -1;
+  pointer-events: none;
+}
+
+.menu__button:hover::before {
+  width: 3em;
+  height: 3em;
+  opacity: 0.15;
+}
+
+/* Animation when burger is clicked */
+.menu__button.animating svg,
+.menu__button.animating .icon-wrapper {
+  animation: pulse 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+    filter: blur(0);
+  }
+  50% {
+    transform: scale(1.2);
+    filter: blur(2px);
+  }
+  100% {
+    transform: scale(1);
+    filter: blur(0);
+  }
+}
+
+/* Different effects for open and closed states */
+.menu__button svg[data-state="closed"] {
+  transform-origin: center;
+}
+
+.menu__button svg[data-state="open"] {
+  transform-origin: center;
+}
+
+/* Hover effects for closed state (hamburger) */
+.menu__button:hover svg[data-state="closed"] {
+  transform: rotate(90deg) scale(1.1);
+  filter: drop-shadow(0 0 5px var(--text-color-3));
+}
+
+/* Hover effects for open state (X) */
+.menu__button:hover svg[data-state="open"] {
+  transform: rotate(-90deg) scale(1.1);
+  filter: drop-shadow(0 0 5px var(--text-color-3));
+}
+
+/* After-click effect */
+.menu__button.animating::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: transparent;
+  border: 2px solid var(--text-color-3);
+  transform: translate(-50%, -50%) scale(0);
+  opacity: 1;
+  animation: ripple 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+  pointer-events: none;
+}
+
+@keyframes ripple {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 1;
+    border-width: 2px;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(2);
+    opacity: 0;
+    border-width: 0;
+  }
 }
 
 .nav_ac {
@@ -262,3 +414,7 @@
   margin-right: 10px;
   text-decoration: none;
 }
+
+.d-flex.align-items-center {
+  gap: 5px;
+}

src/pages/portfolio/index.js

@@ -6,6 +6,9 @@ import { dataportfolio, meta } from "../../content_option";
 import { FaExternalLinkAlt } from "react-icons/fa";
 
 export const Portfolio = () => {
+  // Check if the device is mobile
+  const isMobile = window.innerWidth <= 768;
+
   return (
     <HelmetProvider>
       <Container className="About-header">
@@ -22,17 +25,26 @@ export const Portfolio = () => {
         </Row>
         <div className="mb-5 project_items_ho">
           {dataportfolio.map((data, i) => {
-            const title = data.description.split(",")[0];
+            // Extract title and description without modifying for desktop
+            const fullTitle = data.description.split(",")[0];
             const description = data.description.split(",").slice(1).join(",").trim();
 
+            // Create shortened version only for mobile display
+            const words = fullTitle.split(" ");
+            const shortTitle = words.length > 3
+              ? words.slice(0, 3).join(" ") + "..."
+              : fullTitle;
+
             return (
               <div key={i} className="project_item">
-                <img src={data.img} alt={title} />
+                <img src={data.img} alt={fullTitle} />
                 <div className="content">
-                  <h3>{title}</h3>
+                  <h3>{fullTitle}</h3>
                   <p>{description}</p>
-                  <a href={data.link} target="_blank" rel="noopener noreferrer">
-                    View Project <FaExternalLinkAlt size={14} />
+                  <a href={data.link} target="_blank" rel="noopener noreferrer" className="project-link">
+                    <span className="desktop-text">View Project</span>
+                    <span className="mobile-text">{shortTitle}</span>
+                    <FaExternalLinkAlt size={14} />
                   </a>
                 </div>
               </div>

src/pages/portfolio/style.css

@@ -92,6 +92,7 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+/* Desktop styles for links */
 .project_item .content a {
   color: var(--text-color);
   text-decoration: none;
@@ -109,6 +110,11 @@
   border: 1px solid var(--card-border);
 }
 
+/* Hide mobile text by default on desktop */
+.mobile-text {
+  display: none;
+}
+
 .project_item .content a:hover {
   background: var(--secondary-color);
   color: var(--primary-color);
@@ -116,7 +122,7 @@
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
 }
 
-/* Mobile Styles */
+/* Mobile Styles - Only apply below 768px */
 @media (max-width: 768px) {
   .project_items_ho {
     gap: 1.5rem;
@@ -134,52 +140,42 @@
   .project_item .content {
     opacity: 1;
     padding: 1.25rem;
-    background: linear-gradient(
-      to top,
-      rgba(var(--primary-rgb), 0.95) 0%,
-      rgba(var(--primary-rgb), 0.7) 50%,
-      rgba(var(--primary-rgb), 0.3) 100%
-    );
+    background: transparent;
     justify-content: flex-end;
     gap: 0.75rem;
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
     border-top: 1px solid var(--card-border);
   }
 
   .project_item .content h3 {
-    font-size: 1.1rem;
-    margin-bottom: 0.5rem;
-    padding-bottom: 0.25rem;
-    width: 100%;
-    max-width: 100%;
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    -webkit-hyphens: auto;
-    hyphens: auto;
+    display: none; /* Hide title on mobile */
   }
 
   .project_item .content p {
-    font-size: 0.9rem;
-    margin-bottom: 1rem;
-    line-height: 1.4;
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
+    display: none; /* Hide description text on mobile */
+  }
+
+  /* Show mobile text and hide desktop text on mobile */
+  .mobile-text {
+    display: inline;
+    white-space: nowrap;
     overflow: hidden;
-    width: 100%;
-    max-width: 100%;
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    -webkit-hyphens: auto;
-    hyphens: auto;
+    text-overflow: ellipsis;
+    max-width: calc(100% - 20px); /* Allow space for the icon */
+  }
+
+  .desktop-text {
+    display: none;
   }
 
   .project_item .content a {
     padding: 0.75rem 1.25rem;
     font-size: 0.9rem;
     border-radius: 6px;
-    background: var(--primary-color);
+    background: rgba(var(--primary-rgb), 0.7);
+    backdrop-filter: blur(5px);
+    -webkit-backdrop-filter: blur(5px);
     width: 100%;
     text-align: center;
     justify-content: center;
@@ -189,6 +185,10 @@
     appearance: none;
     position: relative;
     z-index: 1;
+    margin-top: 0; /* Remove margin since title is hidden */
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    height: 45px; /* Fix height to prevent expansion */
+    overflow: hidden;
   }
 
   .project_item:active {