Portfolio Project — Part 2 ⚙

/* In CSS */
html { scroll-behavior: smooth; }

// Highlight active nav link based on scroll position
const sections = document.querySelectorAll('section');
const navLinks = document.querySelectorAll('.nav-links a');

window.addEventListener('scroll', () => {
  let current = '';
  sections.forEach(section => {
    if (window.scrollY >= section.offsetTop - 100) {
      current = section.getAttribute('id');
    }
  });
  navLinks.forEach(link => {
    link.classList.remove('active');
    if (link.getAttribute('href') === '#' + current) {
      link.classList.add('active');
    }
  });
});

const menuBtn = document.getElementById('menu-btn');
const navLinks = document.getElementById('nav-links');

menuBtn.addEventListener('click', () => {
  navLinks.classList.toggle('open');
  menuBtn.textContent = navLinks.classList.contains('open') ? 'X' : '&#9776';
});

.nav-links { display: none; }
.nav-links.open { display: flex; flex-direction: column; }
@media (min-width: 768px) {
  .nav-links { display: flex; }
  #menu-btn { display: none; }
}

// Animate elements as they enter the viewport
const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
      }
    });
  }, { threshold: 0.1 }
);

document.querySelectorAll('.fade-in').forEach(el => {
  observer.observe(el);
});

.fade-in { opacity: 0; transform: translateY(30px); transition: all 0.7s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }