this is a commit

scripts.js

@@ -0,0 +1,50 @@
+// Intersection observer for reveal-on-scroll
+(() => {
+  const onIntersect = (entries, obs) => {
+    entries.forEach(e => {
+      if (e.isIntersecting) {
+        e.target.classList.add('is-visible');
+        obs.unobserve(e.target);
+      }
+    })
+  }
+
+  const observer = new IntersectionObserver(onIntersect, {threshold: 0.12});
+  document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
+
+  // Hero parallax effect
+  const hero = document.querySelector('.hero');
+  const heroTitle = document.querySelector('.hero-title');
+  let latestScroll = 0;
+  const onScroll = () => {
+    latestScroll = window.scrollY;
+    requestAnimationFrame(() => {
+      const s = latestScroll * 0.12;
+      if (heroTitle) heroTitle.style.transform = `translateY(${s}px)`;
+    });
+  }
+  window.addEventListener('scroll', onScroll, {passive:true});
+
+  // Simple 3D tilt for photo cards on mouse move
+  function bindTilt(card){
+    const rect = card.getBoundingClientRect();
+    const inner = card.querySelector('.photo-placeholder');
+    function onMove(e){
+      const x = (e.clientX - rect.left) / rect.width - 0.5;
+      const y = (e.clientY - rect.top) / rect.height - 0.5;
+      const rx = (-y) * 6; const ry = x * 6;
+      card.style.transform = `perspective(600px) rotateX(${rx}deg) rotateY(${ry}deg) translateY(-6px)`;
+      inner.style.filter = `brightness(1.02)`;
+    }
+    function onLeave(){
+      card.style.transform = '';
+      inner.style.filter = '';
+    }
+    card.addEventListener('mousemove', onMove);
+    card.addEventListener('mouseleave', onLeave);
+    card.addEventListener('touchstart', onLeave);
+  }
+  document.querySelectorAll('.photo-card').forEach(c => bindTilt(c));
+
+  // Image insertion is handled by editing the project pages and placing <img> tags.
+})();