Practice Questions — Project: Build an Interactive Portfolio Website

// CSS:
// .skill-fill { width: 0; transition: width 1s ease; }

const observer = new IntersectionObserver(function(entries) {
  entries.forEach(function(entry) {
    if (entry.isIntersecting) {
      entry.target.querySelectorAll('.skill-fill').forEach(function(bar) {
        bar.style.width = bar.dataset.width + '%';
      });
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.2 });

observer.observe(document.querySelector('.skills-grid'));

const testimonials = [
  { name: 'Priya', role: 'Student', quote: 'Aarav built an amazing website for our school project!' },
  { name: 'Mr. Sharma', role: 'Teacher', quote: 'Impressive skills for a 16-year-old developer.' },
  { name: 'Rohan', role: 'Classmate', quote: 'He taught me JavaScript in just one week!' }
];
let current = 0;

function showTestimonial(index) {
  const el = document.getElementById('testimonialContent');
  el.style.opacity = 0;
  setTimeout(function() {
    el.innerHTML = '<p>"' + testimonials[index].quote + '"</p><strong>' + testimonials[index].name + '</strong><span> - ' + testimonials[index].role + '</span>';
    el.style.opacity = 1;
  }, 300);
}

setInterval(function() {
  current = (current + 1) % testimonials.length;
  showTestimonial(current);
}, 4000);

document.getElementById('prevBtn').addEventListener('click', function() {
  current = (current - 1 + testimonials.length) % testimonials.length;
  showTestimonial(current);
});

document.getElementById('nextBtn').addEventListener('click', function() {
  current = (current + 1) % testimonials.length;
  showTestimonial(current);
});

const posts = [
  { title: 'Getting Started with JS', date: '2026-04-01', excerpt: 'Learn the basics of JavaScript...' },
  { title: 'CSS Grid Layout', date: '2026-03-15', excerpt: 'Master CSS Grid for layouts...' },
  { title: 'DOM Manipulation', date: '2026-03-01', excerpt: 'How to change HTML with JS...' },
  { title: 'Async JavaScript', date: '2026-02-15', excerpt: 'Understanding promises...' },
  { title: 'Building APIs', date: '2026-02-01', excerpt: 'Create your own REST API...' },
  { title: 'React Basics', date: '2026-01-15', excerpt: 'Introduction to React...' }
];
let shown = 0;
const perPage = 3;

function loadMore() {
  const grid = document.getElementById('blogGrid');
  const batch = posts.slice(shown, shown + perPage);
  batch.forEach(function(post) {
    const card = document.createElement('div');
    card.classList.add('blog-card');
    card.innerHTML = '<h3>' + post.title + '</h3><time>' + post.date + '</time><p>' + post.excerpt + '</p><a href="#">Read More</a>';
    grid.appendChild(card);
  });
  shown += batch.length;
  if (shown >= posts.length) {
    document.getElementById('loadMoreBtn').style.display = 'none';
  }
}

document.getElementById('loadMoreBtn').addEventListener('click', loadMore);
loadMore();

document.getElementById('projectSearch').addEventListener('input', function() {
  const query = this.value.toLowerCase().trim();
  const grid = document.getElementById('projectsGrid');
  grid.innerHTML = '';
  const matching = projects.filter(function(p) {
    return p.title.toLowerCase().includes(query) || p.desc.toLowerCase().includes(query);
  });
  matching.forEach(function(p) {
    const card = document.createElement('div');
    card.classList.add('project-card');
    card.innerHTML = '<h3>' + p.title + '</h3><p>' + p.desc + '</p>';
    grid.appendChild(card);
  });
});

function animateCounter(element, target, duration) {
  let current = 0;
  const increment = target / (duration / 16);
  const timer = setInterval(function() {
    current += increment;
    if (current >= target) {
      current = target;
      clearInterval(timer);
    }
    element.textContent = Math.floor(current);
  }, 16);
}

const statsObserver = new IntersectionObserver(function(entries) {
  entries.forEach(function(entry) {
    if (entry.isIntersecting) {
      entry.target.querySelectorAll('.counter').forEach(function(el) {
        animateCounter(el, parseInt(el.dataset.target), 1500);
      });
      statsObserver.unobserve(entry.target);
    }
  });
}, { threshold: 0.3 });

statsObserver.observe(document.querySelector('.stats-section'));

function showModal(project) {
  const overlay = document.createElement('div');
  overlay.classList.add('modal-overlay');
  overlay.innerHTML = '<div class="modal-content">' +
    '<button class="modal-close">X</button>' +
    '<h2>' + project.title + '</h2>' +
    '<p>' + project.desc + '</p>' +
    '<div class="tech-tags">' + project.tech.map(function(t) { return '<span class="tag">' + t + '</span>'; }).join('') + '</div>' +
    '<div class="modal-links">' +
    '<a href="#" class="btn btn-primary">Live Demo</a>' +
    '<a href="#" class="btn btn-outline">Source Code</a>' +
    '</div></div>';

  document.body.appendChild(overlay);
  requestAnimationFrame(function() { overlay.classList.add('visible'); });

  overlay.querySelector('.modal-close').addEventListener('click', function() {
    overlay.classList.remove('visible');
    setTimeout(function() { overlay.remove(); }, 300);
  });
  overlay.addEventListener('click', function(e) {
    if (e.target === overlay) {
      overlay.classList.remove('visible');
      setTimeout(function() { overlay.remove(); }, 300);
    }
  });
}

// Attach to project cards
document.getElementById('projectsGrid').addEventListener('click', function(e) {
  const card = e.target.closest('.project-card');
  if (card) {
    const title = card.querySelector('h3').textContent;
    const project = projects.find(function(p) { return p.title === title; });
    if (project) showModal(project);
  }
});