Add files via upload

Author: JohnDev19

index.html

@@ -0,0 +1,222 @@
+/*--================================================
+/    Name: Zuid - Creative Portfolio
+/    Developer: JohnDev19
+/    GitHub: https://github.com/JohnDev19/
+/    License: MIT
+/    Last Update: December 2024
+=====================================================    
+/    Description:
+/    Zuid is a creative portfolio website designed to showcase the work of a digital designer and developer
+=====================================================    
+/    Technologies Used:
+/    - HTML5
+/    - CSS3
+/    - JavaScript
+/    - AOS (Animate On Scroll)
+/    - Swiper.js for sliders
+/    - Font Awesome for icons
+/    - Google Fonts for typography
+=================================================== */
+document.addEventListener('DOMContentLoaded', () => {
+  const hamburger = document.querySelector('.hamburger');
+  const navMenu = document.querySelector('.nav-menu');
+  const navbar = document.querySelector('.navbar');
+
+  hamburger.addEventListener('click', () => {
+    hamburger.classList.toggle('active');
+    navMenu.classList.toggle('active');
+
+    if (navMenu.classList.contains('active')) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'auto';
+    }
+  });
+
+  navMenu.querySelectorAll('a').forEach(link => {
+    link.addEventListener('click', () => {
+      hamburger.classList.remove('active');
+      navMenu.classList.remove('active');
+      document.body.style.overflow = 'auto';
+    });
+  });
+
+  window.addEventListener('scroll',
+    () => {
+      if (window.scrollY > 100) {
+        navbar.classList.add('scrolled');
+      } else {
+        navbar.classList.remove('scrolled');
+      }
+    });
+
+  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function (e) {
+      e.preventDefault();
+
+      const targetId = this.getAttribute('href');
+      const targetElement = document.querySelector(targetId);
+
+      if (targetElement) {
+        targetElement.scrollIntoView({
+          behavior: 'smooth',
+          block: 'start'
+        });
+      }
+    });
+  });
+
+  const observerOptions = {
+    root: null,
+    rootMargin: '0px',
+    threshold: 0.1
+  };
+
+  const fadeInObserver = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('fade-in');
+      }
+    });
+  }, observerOptions);
+
+  document.querySelectorAll('.section').forEach(section => {
+    fadeInObserver.observe(section);
+  });
+
+  const subscribeForm = document.querySelector('.subscribe-form');
+  if (subscribeForm) {
+    subscribeForm.addEventListener('submit', (e) => {
+      e.preventDefault();
+      const emailInput = subscribeForm.querySelector('input[type="email"]');
+
+      if (emailInput.value && emailInput.value.includes('@')) {
+        alert('Thank you for subscribing!');
+        emailInput.value = '';
+      } else {
+        alert('Please enter a valid email address.');
+      }
+    });
+  }
+});
+
+const styleSheet = document.createElement('style');
+styleSheet.textContent = `
+.section {
+opacity: 0;
+transform: translateY(20px);
+transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+}
+.section.fade-in {
+opacity: 1;
+transform: translateY(0);
+}
+`;
+document.head.appendChild(styleSheet);
+
+document.addEventListener('DOMContentLoaded', () => {
+  const filterBtns = document.querySelectorAll('.filter-btn');
+  const portfolioItems = document.querySelectorAll('.portfolio-item');
+
+  filterBtns.forEach(btn => {
+    btn.addEventListener('click', () => {
+
+      filterBtns.forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+
+      const filter = btn.getAttribute('data-filter');
+
+      portfolioItems.forEach(item => {
+        const category = item.getAttribute('data-category');
+
+        if (filter === 'all' || category === filter) {
+          item.style.display = 'block';
+          item.style.opacity = 0;
+          item.style.transform = 'scale(0.9)';
+          setTimeout(() => {
+            item.style.opacity = 1;
+            item.style.transform = 'scale(1)';
+          }, 50);
+        } else {
+          item.style.display = 'none';
+        }
+      });
+    });
+  });
+});
+
+document.addEventListener('DOMContentLoaded', () => {
+  const scrollArrow = document.querySelector('.scroll-arrow');
+
+  scrollArrow.addEventListener('click', (e) => {
+    e.preventDefault();
+    const aboutSection = document.getElementById('about');
+
+    aboutSection.scrollIntoView({
+      behavior: 'smooth',
+      block: 'start'
+    });
+  });
+});
+
+document.addEventListener('DOMContentLoaded', () => {
+  const goToTopBtn = document.getElementById('goToTopBtn');
+
+  function debounce(func, wait = 10, immediate = true) {
+    let timeout;
+    return function() {
+      const context = this, args = arguments;
+      const later = function() {
+        timeout = null;
+        if (!immediate) func.apply(context, args);
+      };
+      const callNow = immediate && !timeout;
+      clearTimeout(timeout);
+      timeout = setTimeout(later, wait);
+      if (callNow) func.apply(context, args);
+    };
+  }
+
+  window.addEventListener('scroll', debounce(() => {
+    if (window.pageYOffset > 300) {
+      goToTopBtn.classList.add('show');
+    } else {
+      goToTopBtn.classList.remove('show');
+    }
+  }));
+
+  goToTopBtn.addEventListener('click', () => {
+    const startPosition = window.pageYOffset;
+    const startTime = performance.now();
+    const duration = 1000;
+
+    function animation(currentTime) {
+      const elapsed = currentTime - startTime;
+      const progress = Math.min(elapsed / duration,
+        1);
+      const easeInOutCubic = progress < 0.5
+      ? 4 * progress ** 3: 1 - ((-2 * progress + 2) ** 3) / 2;
+
+      window.scrollTo(0,
+        startPosition * (1 - progress));
+      if (elapsed < duration) requestAnimationFrame(animation);
+    }
+
+    requestAnimationFrame(animation);
+  });
+});
+
+document.addEventListener('DOMContentLoaded', () => {
+  const progressBar = document.createElement('div');
+  progressBar.id = 'scroll-progress';
+  document.body.appendChild(progressBar);
+
+  window.addEventListener('scroll',
+    () => {
+      const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+      const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+      const scrolled = (winScroll / height) * 100;
+
+      progressBar.style.width = `${scrolled}%`;
+    });
+});