<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Marwan Koleilat Portfolio</title>
  <link rel="stylesheet" href="main_page.css" />
</head>
<body>
  <header>
    <div class="header-content">
      <h1>Marwan Koleilat</h1>
      <p>Computer Science Student</p>
    </div>
  </header>

  <main>
    <section id="projects">
      <h2>Projects</h2>
      <div class="projects-grid">
        <a href="animation/videoAnimation.html" class="project-card">Animation</a>
        <a href="Canvas/canvas.html" class="project-card">Canvas</a>
        <a href="canvis/canvis.html" class="project-card">Canvis</a>
        <a href="content-form/content-form.html" class="project-card">Content Form</a>
        <a href="data-visualization/data-visualization.html" class="project-card">Data Visualization</a>
        <a href="PWA/pwa.html" class="project-card">PWA</a>
        <a href="video-lab/video-lab.html" class="project-card">Video Lab</a>
        <a href="resume/resume.html" class="project-card">Resume</a>
      </div>
    </section>

    <section id="contact">
      <h2>Contact</h2>
      <p>Email: <a href="mailto:Marwan.koleilat96@bcmail.cuny.edu">Marwan.koleilat96@bcmail.cuny.edu</a></p>
      <p>Phone: <a href="tel:+19295140335">(929) 514-0335</a></p>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 Marwan Koleilat. All rights reserved.</p>
  </footer>
</body>
</html>

<script>
  // Intersection Observer for scroll animations
  const sections = document.querySelectorAll('section');
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
      }
    });
  }, { threshold: 0.1 });
  
  sections.forEach(section => {
    observer.observe(section);
  });
  
  // Scroll progress indicator
  window.addEventListener('scroll', () => {
    const scrollProgress = document.createElement('div');
    scrollProgress.className = 'scroll-progress';
    document.body.appendChild(scrollProgress);
    
    const scrollTop = document.documentElement.scrollTop;
    const scrollHeight = document.documentElement.scrollHeight;
    const clientHeight = document.documentElement.clientHeight;
    const scrollPercentage = (scrollTop / (scrollHeight - clientHeight)) * 100;
    scrollProgress.style.width = scrollPercentage + '%';
    
    // Back to top button
    const backToTop = document.createElement('button');
    backToTop.className = 'back-to-top';
    backToTop.innerHTML = '↑';
    document.body.appendChild(backToTop);
    
    if (scrollTop > 300) {
      backToTop.classList.add('visible');
    } else {
      backToTop.classList.remove('visible');
    }
    
    backToTop.addEventListener('click', () => {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    });
  });
  
  // Project card hover effects
  const projectCards = document.querySelectorAll('.project-card');
  projectCards.forEach(card => {
    card.addEventListener('mouseenter', () => {
      card.style.transform = 'translateY(-5px)';
      card.style.boxShadow = '0 10px 20px rgba(0, 0, 0, 0.1)';
    });
    
    card.addEventListener('mouseleave', () => {
      card.style.transform = '';
      card.style.boxShadow = '';
    });
  });
  </script>