Closes #590 feat: Enhance Navbar & UI for Better User Experience

scripts/main.js

@@ -20,17 +20,83 @@ $(document).ready(function () {
     }
 });
 
-// Select all mobile nav links
+// Enhanced navbar functionality with active page highlighting
+document.addEventListener('DOMContentLoaded', function() {
+  // Select all nav links
   const navLinks = document.querySelectorAll('.navbar-nav .nav-item a');
   const navToggle = document.getElementById('nav-toggle');
 
+  // Function to set active nav link based on current section
+  function setActiveNavLink() {
+    const sections = document.querySelectorAll('section[id]');
+    const scrollPos = window.scrollY + 100;
+
+    sections.forEach(section => {
+      const sectionTop = section.offsetTop;
+      const sectionHeight = section.offsetHeight;
+      const sectionId = section.getAttribute('id');
+
+      if (scrollPos >= sectionTop && scrollPos < sectionTop + sectionHeight) {
+        // Remove active class from all links
+        navLinks.forEach(link => link.classList.remove('active'));
+
+        // Add active class to corresponding nav link
+        const activeLink = document.querySelector(`.navbar-nav .nav-item a[href="#${sectionId}"]`);
+        if (activeLink) {
+          activeLink.classList.add('active');
+        }
+      }
+    });
+  }
+
+  // Set active link on scroll
+  window.addEventListener('scroll', setActiveNavLink);
+
+  // Set active link on page load
+  setActiveNavLink();
+
+  // Handle mobile nav link clicks
   navLinks.forEach(link => {
-    link.addEventListener('click', () => {
-      // Uncheck the checkbox when any link is clicked
-      if (navToggle.checked) {
+    link.addEventListener('click', (e) => {
+      // Close mobile menu if open
+      if (navToggle && navToggle.checked) {
         navToggle.checked = false;
       }
+
+      // Smooth scroll to section
+      const targetId = link.getAttribute('href');
+      if (targetId && targetId.startsWith('#')) {
+        e.preventDefault();
+        const targetSection = document.querySelector(targetId);
+        if (targetSection) {
+          targetSection.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start'
+          });
+        }
+      }
     });
+  });
+
+  // Enhanced navbar scroll effect
+  const navbar = document.querySelector('.navbar');
+  let lastScrollTop = 0;
+
+  window.addEventListener('scroll', () => {
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+    if (scrollTop > 100) {
+      navbar.style.background = 'rgba(255, 255, 255, 0.95)';
+      navbar.style.backdropFilter = 'blur(10px)';
+      navbar.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)';
+    } else {
+      navbar.style.background = '#ffffff';
+      navbar.style.backdropFilter = 'none';
+      navbar.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
+    }
+
+    lastScrollTop = scrollTop;
+  });
 });
 
 

styles.css

@@ -300,24 +300,86 @@ body {
   transition: all 0.3s ease;
 }
 
+/* Enhanced button styles with modern design */
 .btn-primary,
 .btn-secondary {
   color: #fff;
+  border: none;
+  border-radius: 8px;
+  font-weight: 600;
+  font-size: 1rem;
+  padding: 0.75rem 1.5rem;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
 }
+
 .btn-primary {
-  background: #2563eb;
+  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
+  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
 }
-.btn-secondary {
-  background: #64748b;
+
+.btn-primary:hover {
+  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
+  color: #fff;
 }
 
+.btn-primary:active {
+  transform: translateY(0);
+  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
+}
 
-.btn-primary:hover {
-  background: #1e40af;
+.btn-secondary {
+  background: linear-gradient(135deg, #64748b 0%, #475569 100%);
+  box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
 }
 
 .btn-secondary:hover {
-  background: #475569;
+  background: linear-gradient(135deg, #475569 0%, #334155 100%);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(100, 116, 139, 0.4);
+  color: #fff;
+}
+
+.btn-secondary:active {
+  transform: translateY(0);
+  box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
+}
+
+/* Button ripple effect */
+.btn-primary::before,
+.btn-secondary::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.3);
+  transition: width 0.6s, height 0.6s;
+  transform: translate(-50%, -50%);
+  z-index: 0;
+}
+
+.btn-primary:active::before,
+.btn-secondary:active::before {
+  width: 300px;
+  height: 300px;
+}
+
+.btn-primary > *,
+.btn-secondary > * {
+  position: relative;
+  z-index: 1;
 }
 
 /* Code Window */