optimization

js/gallery.js

@@ -4,22 +4,37 @@ document.addEventListener('DOMContentLoaded', () => {
   const container = document.getElementById('gallery-container');
   const lightbox = document.getElementById('lightbox');
   const lightboxImg = document.getElementById('lightbox-img');
+  const lightboxVideo = document.getElementById('lightbox-video');
 
   if (!container || !lightbox) return;
 
+  // Animated GIFs are served as MP4 (a few % of the size), so those
+  // open in the <video>; everything else in the <img>.
   const openLightbox = (src) => {
-    lightboxImg.src = src;
+    const isVideo = src.endsWith('.mp4');
+    lightboxImg.style.display = isVideo ? 'none' : 'block';
+    lightboxVideo.style.display = isVideo ? 'block' : 'none';
+    if (isVideo) {
+      lightboxVideo.src = src;
+      lightboxVideo.play().catch(() => {});
+    } else {
+      lightboxImg.src = src;
+    }
     lightbox.style.display = 'block';
   };
 
   const closeLightbox = () => {
     lightbox.style.display = 'none';
-    lightboxImg.src = ''; // Clear source to stop GIFs
+    lightboxImg.removeAttribute('src');
+    // Stop playback and any download still in progress
+    lightboxVideo.pause();
+    lightboxVideo.removeAttribute('src');
+    lightboxVideo.load();
   };
 
-  // Close on the X, on a click outside the image, or with Escape
+  // Close on the X, on a click outside the media, or with Escape
   lightbox.addEventListener('click', (e) => {
-    if (e.target !== lightboxImg) closeLightbox();
+    if (e.target !== lightboxImg && e.target !== lightboxVideo) closeLightbox();
   });
   document.addEventListener('keydown', (e) => {
     if (e.key === 'Escape' && lightbox.style.display === 'block') closeLightbox();

js/tabs.js

@@ -9,7 +9,7 @@ document.addEventListener('DOMContentLoaded', () => {
   // ── Map URL path → tab id ──────────────────────────────
   function pathToTab(path) {
     const slug = path.replace(/^\/+|\/+$/g, '') || 'about';
-    const valid = ['about', 'gallery', 'bucketlist', 'yuukabot', 'calendar'];
+    const valid = ['about', 'gallery', 'bucketlist', 'yuukabot', 'calendar', 'services'];
     // backward compat: old /ahmet links
     if (slug === 'ahmet') return 'bucketlist';
     return valid.includes(slug) ? slug : 'about';
@@ -22,11 +22,12 @@ document.addEventListener('DOMContentLoaded', () => {
   // ── Swap background videos + top-bar theme ────────────
   const topLine = document.getElementById('top-line');
 
-  // map tab id → its dedicated video element (null = use main)
+  // map tab id → its dedicated video element (unlisted = use main)
   const tabVideos = {
     calendar: calVideo,
     bucketlist: bucketlistVideo,
-    yuukabot: botVideo
+    yuukabot: botVideo,
+    services: botVideo
   };
 
   function setBgForTab(tabId) {
@@ -60,18 +61,23 @@ document.addEventListener('DOMContentLoaded', () => {
     setBgForTab(tabId);
   }
 
+  function setUrl(method, tabId) {
+    if (window.location.protocol === 'file:') return;
+    history[method]({ tab: tabId }, '', tabToPath(tabId) + window.location.search);
+  }
+
   // ── Navigate to a tab (updates URL + shows it) ────────
   function navigateTo(tabId) {
     showTab(tabId);
     window.scrollTo(0, 0);
-    history.pushState({ tab: tabId }, '', tabToPath(tabId));
+    setUrl('pushState', tabId);
   }
 
   // ── Initial load: show tab from URL ────────────────────
   // (also normalises unknown / legacy paths like /ahmet in the address bar)
   const initialTab = pathToTab(window.location.pathname);
   showTab(initialTab);
-  history.replaceState({ tab: initialTab }, '', tabToPath(initialTab) + window.location.search);
+  setUrl('replaceState', initialTab);
 
   // ── Tab button clicks ──────────────────────────────────
   const buttons = document.querySelectorAll('#top-line button');