Add files via upload

New scripts - Portfolio V4

js/matchHeight.js

@@ -0,0 +1,10 @@
+$(document).ready(function () {
+    function matchHeight() {
+        const imgRowHeight = $('.prototype-img').height();
+        $('.single-img').css('height', imgRowHeight + 'px');
+    }
+
+    $(window).on('resize', matchHeight);
+
+    matchHeight();
+});

js/nav.js

@@ -0,0 +1,28 @@
+$(document).ready(function () {
+    // Mobile nav bar
+    const nav = $('.nav');
+    const toggle = $('.toggle');
+    const navOverlay = $('.nav-overlay');
+    let lastScrollTop = 0;
+
+    toggle.click(function () {
+        $(this).toggleClass("active");
+        navOverlay.toggleClass("open");
+    });
+
+    // Function to close nav overlay
+    function closeNavOverlay() {
+        toggle.removeClass("active");
+        navOverlay.removeClass("open");
+    }
+
+    // Nav scroll fade and close on scroll
+    $(window).scroll(function () {
+        let scrollTop = $(this).scrollTop();
+        nav.toggleClass('fade-out', scrollTop > lastScrollTop);
+        lastScrollTop = scrollTop;
+
+        // Close nav overlay on scroll
+        closeNavOverlay();
+    });
+});

js/scroll.js

@@ -0,0 +1,14 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('show');
+            } else {
+                entry.target.classList.remove('show');
+            }
+        });
+    }, { threshold: 0.6 });
+
+    const hiddenElements = document.querySelectorAll('.hidden');
+    hiddenElements.forEach((el) => observer.observe(el));
+});

js/top.js

@@ -0,0 +1,14 @@
+$(document).ready(function () {
+    const jumpTopBtn = $('.jump-top');
+
+    // Jump to top
+    $(window).scroll(function () {
+        jumpTopBtn.toggle($(this).scrollTop() > 100);
+    });
+
+    jumpTopBtn.click(function () {
+        $('html, body').animate({
+            scrollTop: 0
+        }, "slow");
+    });
+});

js/topMargin.js

@@ -0,0 +1,16 @@
+// Function to set top margin for elements
+function setTopMargin(targetClass) {
+    const navHeight = $('.nav').outerHeight();
+    const totalMargin = (targetClass === '.hero') ? navHeight + 32 : navHeight;
+    $(targetClass).css('margin-top', totalMargin + 'px');
+}
+
+// Function to handle resizing and initial setup
+function handleResize() {
+    setTopMargin('.hero');
+    setTopMargin('.banner');
+}
+
+// Call handleResize on document ready and window resize
+$(document).ready(handleResize);
+$(window).resize(handleResize);

js/zoom.js

@@ -0,0 +1,26 @@
+$(document).ready(function () {
+    const zoomable = $('.zoomable');
+
+    zoomable.click(function () {
+        $(this).toggleClass("zoomed");
+        const img = $(this).find("img");
+        if ($(this).hasClass("zoomed")) {
+            img.css("transform");
+        } else {
+            img.removeAttr("style");
+        }
+    });
+
+    $(window).resize(function () {
+        if (!zoomable.hasClass("zoomed")) {
+            zoomable.find("img").removeAttr("style");
+        }
+    });
+
+    $(window).scroll(function () {
+        if (zoomable.hasClass("zoomed")) {
+            zoomable.removeClass("zoomed");
+            zoomable.find("img").removeAttr("style");
+        }
+    });
+});