Update main.js

Portfolio1/main.js

@@ -1,5 +1,17 @@
+// Function to handle smooth scrolling
+function smoothScroll(target) {
+  const targetElement = document.querySelector(target);
+  if (targetElement) {
+    window.scrollTo({
+      top: targetElement.offsetTop - header.offsetHeight,
+      behavior: 'smooth',
+    });
+  }
+}
+
 const header = document.querySelector('header');
 const sections = document.querySelectorAll('section');
+const navItems = document.querySelectorAll('.navlist a');
 
 // Function to add or remove the "sticky" class based on scroll position
 function toggleStickyHeader() {
@@ -14,7 +26,22 @@ function toggleStickyHeader() {
 }
 
 window.addEventListener('scroll', toggleStickyHeader);
-window.addEventListener('resize', toggleStickyHeader); // In case the sections' positions change on window resize
+window.addEventListener('resize', toggleStickyHeader);
+
+// Function to handle smooth scrolling when links are clicked
+navItems.forEach((item) => {
+  item.addEventListener('click', (e) => {
+    e.preventDefault();
+
+    const target = item.getAttribute('href');
+    navList.classList.remove('active'); // Close the mobile menu if open
+    menuIcon.classList.remove('active');
+
+    // Smooth scroll to the target section
+    smoothScroll(target);
+  });
+});
+
 
 
 const menuIcon = document.getElementById('menu-icon');