Edit A Media Query For About Section

src/jquery/plugins.js

@@ -1,39 +1,9 @@
 /** @format */
 
 $(() => {
-  // // ! Animation For All Buttons
-  // $(".default-btn, .default-btn-one, .default-btn-two")
-  //   .on("mouseenter", function (e) {
-  //     var parentOffset = $(this).offset(),
-  //       relX = e.pageX - parentOffset.left,
-  //       relY = e.pageY - parentOffset.top;
-  //     $(this).find("span").css({ top: relY, left: relX });
-  //   })
-  //   .on("mouseout", function (e) {
-  //     var parentOffset = $(this).offset(),
-  //       relX = e.pageX - parentOffset.left,
-  //       relY = e.pageY - parentOffset.top;
-  //     $(this).find("span").css({ top: relY, left: relX });
-  //   });
-
-  // // ! For A Portfolio Images
-  // var portfolioIsotope = $(".protfolio-container").isotope({
-  //   itemSelector: ".data",
-  // });
-  // $(".portfolio .buttons button").on("click", function () {
-  //   $(".portfolio .buttons button").removeClass("active");
-  //   $(this).addClass("active");
-  //   portfolioIsotope.isotope({
-  //     filter: $(this).data("filter"),
-  //   });
-  // });
-
   // // !Start A WOW Plugins
   // new WOW().init();
 
-  // // !Preloader Area
-  // $(".preloader").addClass("preloader-deactivate");
-
   // !Start A VanillaTilt Plugins
   VanillaTilt.init(document.querySelectorAll("[data-tilt]"), {
     max: 25,
@@ -119,39 +89,23 @@ $(() => {
     toggleParticles();
   });
 
-  function toggleContainer() {
-    if ($(window).width() < 1200) {
-      $(".container").removeClass("container").addClass("container-fluid");
-    } else {
-      $(".container-fluid")
-        .removeClass("container-fluid")
-        .addClass("container");
-    }
-  }
-
-  // Run on load
-  toggleContainer();
-
-  // Run on window resize
-  $(window).on("resize", function () {
-    toggleContainer();
-  });
-
-  $(".links ul li").on("click", function () {
-    // Get the href attribute of the clicked item's anchor tag
-    const targetSection = $(this).find("a").attr("href");
-
-    // Trigger the simulated click for the portfolio section when it's shown
-    if (targetSection === "#portfolio") {
-      setTimeout(() => {
-        const allButton = document.querySelector(".buttons button.all");
-        if (allButton) {
-          allButton.classList.add("active");
-          allButton.click();
-        }
-      }, 10);
-    }
-  });
+  // function toggleContainer() {
+  //   if ($(window).width() < 1200) {
+  //     $(".container").removeClass("container").addClass("container-fluid");
+  //   } else {
+  //     $(".container-fluid")
+  //       .removeClass("container-fluid")
+  //       .addClass("container");
+  //   }
+  // }
+
+  // // Run on load
+  // toggleContainer();
+
+  // // Run on window resize
+  // $(window).on("resize", function () {
+  //   toggleContainer();
+  // });
 
   var portfolioIsotope;
 
@@ -206,68 +160,15 @@ $(() => {
     $("#file-chosen").text(fileName);
   });
 
-  // $(".cooking").on("scroll", function () {
-  //   const container = $(this); // The scrolling container
-
-  //   $(".block").each(function () {
-  //     const blockTop = $(this).position().top; // Position relative to the container
-  //     const blockHeight = $(this).outerHeight();
-
-  //     // Check if the block is in the visible range of the container
-  //     if (container.scrollTop() > $(this).offset().top) {
-  //       const blockID = $(this).attr("id");
-  //       console.log("Visible Block:", blockID);
-
-  //       // Remove 'active' class from all navigation links
-  //       $(".header a").parent().removeClass("active");
-
-  //       // Add 'active' class to the corresponding navigation link
-  //       $(".header li a[data-scroll='" + blockID + "']")
-  //         .parent()
-  //         .addClass("active");
-  //     }
-  //   });
-  // });
-
-  const $cursor = $("#cursor");
-  const $hoverElements = $("a");
-
-  // Update cursor position on mouse move
-  $(document).on("mousemove", function (e) {
-    if ($cursor.length) {
-      gsap.to($cursor, {
-        x: e.clientX,
-        y: e.clientY,
-        opacity: 1,
-        duration: 0.3,
-        ease: "power2.out",
-      });
-    }
-  });
-
-  // Add hover effects for specified elements
-  $hoverElements.on("mouseenter", function () {
-    if ($cursor.length) {
-      $cursor.addClass("hovered");
-      gsap.to($cursor, {
-        scale: 2,
-        opacity: 0,
-        duration: 0.3,
-        ease: "power2.out",
-      });
-    }
-  });
-
-  $hoverElements.on("mouseleave", function () {
-    if ($cursor.length) {
-      $cursor.removeClass("hovered");
-      gsap.to($cursor, {
-        scale: 1,
-        opacity: 1,
-        duration: 0.3,
-        ease: "power2.out",
-      });
-    }
+  // Attach click event to all <li> elements inside .links
+  $(".links li a").on("click", function () {
+    // Remove 'active' class from all <li> elements
+    $(this)
+      .addClass("active")
+      .parent()
+      .siblings()
+      .find("a")
+      .removeClass("active");
   });
 });
 
@@ -340,68 +241,20 @@ const timer = setInterval(() => {
 })(jQuery);
 
 /*----------------------------------------------
-2. Cursor
+3. Smooth Scroll
 ----------------------------------------------*/
 // (function ($) {
 //   "use strict";
 
-//   const $cursor = $("#cursor");
-//   const $hoverElements = $("a");
-
-//   // Update cursor position on mouse move
-//   $(document).on("mousemove", function (e) {
-//     if ($cursor.length) {
-//       gsap.to($cursor, {
-//         x: e.clientX,
-//         y: e.clientY,
-//         opacity: 1,
-//         duration: 0.3,
-//         ease: "power2.out",
-//       });
-//     }
-//   });
+//   const lenis = new Lenis();
 
-//   // Add hover effects for specified elements
-//   $hoverElements.on("mouseenter", function () {
-//     if ($cursor.length) {
-//       $cursor.addClass("hovered");
-//       gsap.to($cursor, {
-//         scale: 2,
-//         opacity: 0,
-//         duration: 0.3,
-//         ease: "power2.out",
-//       });
-//     }
+//   lenis.on("scroll", function () {
+//     ScrollTrigger.update();
 //   });
 
-//   $hoverElements.on("mouseleave", function () {
-//     if ($cursor.length) {
-//       $cursor.removeClass("hovered");
-//       gsap.to($cursor, {
-//         scale: 1,
-//         opacity: 1,
-//         duration: 0.3,
-//         ease: "power2.out",
-//       });
-//     }
+//   gsap.ticker.add(function (time) {
+//     lenis.raf(time * 1000);
 //   });
-// })(jQuery);
 
-/*----------------------------------------------
-3. Smooth Scroll
-----------------------------------------------*/
-(function ($) {
-  "use strict";
-
-  const lenis = new Lenis();
-
-  lenis.on("scroll", function () {
-    ScrollTrigger.update();
-  });
-
-  gsap.ticker.add(function (time) {
-    lenis.raf(time * 1000);
-  });
-
-  gsap.ticker.lagSmoothing(0);
-})(jQuery);
+//   gsap.ticker.lagSmoothing(0);
+// })(jQuery);

src/pug/blocks/about.pug

@@ -8,27 +8,27 @@
       |  years old, I specialize in creating dynamic, user-friendly web experiences using HTML, CSS, JavaScript, Sass, and Bootstrap. I focus on blending creativity with functionality, ensuring that every project is both visually compelling and optimized for performance. Driven by a love for innovation, I continually refine my skills to stay ahead of industry trends. Whether it’s building responsive layouts, improving UI, or exploring new technologies, I aim to create impactful digital solutions. As a detail-oriented problem solver, I thrive in both team and solo projects, and I’m committed to contributing to the future of web development. Let’s connect and bring ideas to life through design and technology!
     .details
       ul.row
-        li.col-lg-6.col-md-12
+        li.col-lg-6.col-md-12.col-sm-12
           span Name:
           span Ahmed Allam
-        li.col-lg-6.col-md-12
+        li.col-lg-6.col-md-12.col-sm-12
           span Age:
           span#year 20
-        li.col-lg-6.col-md-12
+        li.col-lg-6.col-md-12.col-sm-12
           span Country:
           span Egypt
-        li.col-lg-6.col-md-12
+        li.col-lg-6.col-md-12.col-sm-12
           span Job:
           span Web Developer
-        li.col-lg-6.col-md-12
+        li.col-lg-6.col-md-12.col-sm-12
           span Phone:
           span 
             a(href="https://wa.me/201200555290" target="_blank").line-effect +20 120 055 5290
-        li.col-lg-6.col-md-12
+        li.col-lg-6.col-md-12.col-sm-12
           span Email:
           span 
             a(href="mailto:[email protected]?subject=Potential%20Collaboration&body=I%20would%20like%20to%20discuss%20your%20latest%20projects%20and%20explore%20how%20we%20can%20work%20together.").line-effect [email protected]
-        li.col-lg-6.col-md-12
+        li.col-lg-6.col-md-12.col-sm-12
           span Freelance:
           span Available
       ._button

src/pug/blocks/aside.pug

@@ -3,7 +3,7 @@
     h1.header-logo Allam
   .links 
     ul
-      li.homes.active: a(href="#home" data-scroll="home") Home
+      li.homes: a(href="#home" data-scroll="home").active Home
       li.abouts: a(href="#about" data-scroll="about") About
       li.services: a(href="#services" data-scroll="services") Services
       li.portfolio: a(href="#portfolio" data-scroll="portfolio") Portfolio

src/pug/blocks/header.pug

@@ -1,29 +1,29 @@
 ul.dmenu.scroll-nav.d-flex
   li
-    a.scroll-to.active(href="#home" data-scroll="home")
+    a(href="#home" data-scroll="home")
       span Home
       img(src="assets/images/icons/home.png" alt="" loading="lazy")
   li
-    a.scroll-to(href="#about" data-scroll="about")
+    a(href="#about" data-scroll="about")
       span About
       img(src="assets/images/icons/user.png" alt="" loading="lazy")
   li
-    a.scroll-to(href="#services" data-scroll="services")
+    a(href="#services" data-scroll="services")
       span Services
       img(src="assets/images/icons/support.png" alt="" loading="lazy")
   li
-    a.scroll-to(href="#portfolio" data-scroll="portfolio")
+    a(href="#portfolio" data-scroll="portfolio")
       span Portfolio
       img(src="assets/images/icons/portfolio.png" alt="" loading="lazy")
   li
-    a.scroll-to(href="#certificates" data-scroll="certificates")
+    a(href="#certificates" data-scroll="certificates")
       span Certificates
       img(src="assets/images/icons/certificate.png" alt="" loading="lazy")
   li
-    a.scroll-to(href="#blog" data-scroll="blog")
+    a(href="#blog" data-scroll="blog")
       span Blog
       img(src="assets/images/icons/blog.png" alt="" loading="lazy")
   li
-    a.scroll-to(href="#contact" data-scroll="contact")
+    a(href="#contact" data-scroll="contact")
       span Contact
       img(src="assets/images/icons/contact.png" alt="" loading="lazy")