This is my old site!
If you see this link in one of my profiles or somewhere else, please let me know so I can replace it with the new one o7
const grid = document.getElementById("marchGrid"); // Tile layout: S = square, W = wide, T = tall const tileLayout = [ "S","T","S", "S","W","S", "T","W","S", "S","W","S", "T","S","S", "S","W","T", "S","S","S", "S","T","S", "W","S","S", "S","S","W", "S" ]; const autoSpeeds = [4000,5000,6000]; // --- TILE DATA: images + links per tile --- const tilesData = [ { images: ["https://picsum.photos/800/800?random=1a","https://picsum.photos/800/800?random=1b","https://picsum.photos/800/800?random=1c"], links: ["https://example.com/1a","https://example.com/1b","https://example.com/1c"] }, { images: ["https://picsum.photos/800/800?random=2a","https://picsum.photos/800/800?random=2b","https://picsum.photos/800/800?random=2c"], links: ["https://example.com/2a","https://example.com/2b","https://example.com/2c"] }, { images: ["https://picsum.photos/800/800?random=3a","https://picsum.photos/800/800?random=3b","https://picsum.photos/800/800?random=3c"], links: ["https://example.com/3a","https://example.com/3b","https://example.com/3c"] }, { images: ["https://picsum.photos/800/800?random=4a","https://picsum.photos/800/800?random=4b","https://picsum.photos/800/800?random=4c"], links: ["https://example.com/4a","https://example.com/4b","https://example.com/4c"] }, { images: ["https://i.imgur.com/VfBnnOq.png"], links: ["https://example.com/5a","https://example.com/5b","https://example.com/5c"] }, { images: ["https://picsum.photos/800/800?random=6a","https://picsum.photos/800/800?random=6b","https://picsum.photos/800/800?random=6c"], links: ["https://example.com/6a","https://example.com/6b","https://example.com/6c"] }, { images: ["https://picsum.photos/800/800?random=7a","https://picsum.photos/800/800?random=7b","https://picsum.photos/800/800?random=7c"], links: ["https://example.com/7a","https://example.com/7b","https://example.com/7c"] }, { images: ["https://picsum.photos/800/800?random=8a","https://picsum.photos/800/800?random=8b","https://picsum.photos/800/800?random=8c"], links: ["https://example.com/8a","https://example.com/8b","https://example.com/8c"] }, { images: ["https://picsum.photos/800/800?random=9a","https://picsum.photos/800/800?random=9b","https://picsum.photos/800/800?random=9c"], links: ["https://example.com/9a","https://example.com/9b","https://example.com/9c"] }, { images: ["https://picsum.photos/800/800?random=10a","https://picsum.photos/800/800?random=10b","https://picsum.photos/800/800?random=10c"], links: ["https://example.com/10a","https://example.com/10b","https://example.com/10c"] }, { images: ["https://picsum.photos/800/800?random=11a","https://picsum.photos/800/800?random=11b","https://picsum.photos/800/800?random=11c"], links: ["https://example.com/11a","https://example.com/11b","https://example.com/11c"] }, { images: ["https://picsum.photos/800/800?random=12a","https://picsum.photos/800/800?random=12b","https://picsum.photos/800/800?random=12c"], links: ["https://example.com/12a","https://example.com/12b","https://example.com/12c"] }, { images: ["https://picsum.photos/800/800?random=13a","https://picsum.photos/800/800?random=13b","https://picsum.photos/800/800?random=13c"], links: ["https://example.com/13a","https://example.com/13b","https://example.com/13c"] }, { images: ["https://picsum.photos/800/800?random=14a","https://picsum.photos/800/800?random=14b","https://picsum.photos/800/800?random=14c"], links: ["https://example.com/14a","https://example.com/14b","https://example.com/14c"] }, { images: ["https://picsum.photos/800/800?random=15a","https://picsum.photos/800/800?random=15b","https://picsum.photos/800/800?random=15c"], links: ["https://example.com/15a","https://example.com/15b","https://example.com/15c"] }, { images: ["https://picsum.photos/800/800?random=16a","https://picsum.photos/800/800?random=16b","https://picsum.photos/800/800?random=16c"], links: ["https://example.com/16a","https://example.com/16b","https://example.com/16c"] }, { images: ["https://picsum.photos/800/800?random=17a","https://picsum.photos/800/800?random=17b","https://picsum.photos/800/800?random=17c"], links: ["https://example.com/17a","https://example.com/17b","https://example.com/17c"] }, { images: ["https://picsum.photos/800/800?random=18a","https://picsum.photos/800/800?random=18b","https://picsum.photos/800/800?random=18c"], links: ["https://example.com/18a","https://example.com/18b","https://example.com/18c"] }, { images: ["https://picsum.photos/800/800?random=19a","https://picsum.photos/800/800?random=19b","https://picsum.photos/800/800?random=19c"], links: ["https://example.com/19a","https://example.com/19b","https://example.com/19c"] }, { images: ["https://picsum.photos/800/800?random=20a","https://picsum.photos/800/800?random=20b","https://picsum.photos/800/800?random=20c"], links: ["https://example.com/20a","https://example.com/20b","https://example.com/20c"] }, { images: ["https://picsum.photos/800/800?random=21a","https://picsum.photos/800/800?random=21b","https://picsum.photos/800/800?random=21c"], links: ["https://example.com/21a","https://example.com/21b","https://example.com/21c"] }, { images: ["https://picsum.photos/800/800?random=22a","https://picsum.photos/800/800?random=22b","https://picsum.photos/800/800?random=22c"], links: ["https://example.com/22a","https://example.com/22b","https://example.com/22c"] }, { images: ["https://picsum.photos/800/800?random=23a","https://picsum.photos/800/800?random=23b","https://picsum.photos/800/800?random=23c"], links: ["https://example.com/23a","https://example.com/23b","https://example.com/23c"] }, { images: ["https://picsum.photos/800/800?random=24a","https://picsum.photos/800/800?random=24b","https://picsum.photos/800/800?random=24c"], links: ["https://example.com/24a","https://example.com/24b","https://example.com/24c"] }, { images: ["https://picsum.photos/800/800?random=25a","https://picsum.photos/800/800?random=25b","https://picsum.photos/800/800?random=25c"], links: ["https://example.com/25a","https://example.com/25b","https://example.com/25c"] }, { images: ["https://picsum.photos/800/800?random=26a","https://picsum.photos/800/800?random=26b","https://picsum.photos/800/800?random=26c"], links: ["https://example.com/26a","https://example.com/26b","https://example.com/26c"] }, { images: ["https://picsum.photos/800/800?random=27a","https://picsum.photos/800/800?random=27b","https://picsum.photos/800/800?random=27c"], links: ["https://example.com/27a","https://example.com/27b","https://example.com/27c"] }, { images: ["https://picsum.photos/800/800?random=28a","https://picsum.photos/800/800?random=28b","https://picsum.photos/800/800?random=28c"], links: ["https://example.com/28a","https://example.com/28b","https://example.com/28c"] }, { images: ["https://picsum.photos/800/800?random=29a","https://picsum.photos/800/800?random=29b","https://picsum.photos/800/800?random=29c"], links: ["https://example.com/29a","https://example.com/29b","https://example.com/29c"] }, { images: ["https://picsum.photos/800/800?random=30a","https://picsum.photos/800/800?random=30b","https://picsum.photos/800/800?random=30c"], links: ["https://example.com/30a","https://example.com/30b","https://example.com/30c"] }, { images: ["https://picsum.photos/800/800?random=31a","https://picsum.photos/800/800?random=31b","https://picsum.photos/800/800?random=31c"], links: ["https://example.com/31a","https://example.com/31b","https://example.com/31c"] } ]; // --- CREATE TILES --- tileLayout.forEach((type,i)=>{ const tile = document.createElement("div"); const typeClass = type==="S"?"square":type==="W"?"wide":"tall"; tile.className = "tile "+typeClass; // Number box const number = document.createElement("div"); number.className="number"; tile.appendChild(number); // Slide track const track = document.createElement("div"); track.className="track"; const images = tilesData[i].images; const links = tilesData[i].links; images.forEach((src,index)=>{ const slide = document.createElement("div"); slide.className="slide"; slide.innerHTML = "![]("+src+")
"; // Make clickable slide.addEventListener("click", ()=> { window.open(links[index], "_blank"); }); track.appendChild(slide); }); // Clone first slide for seamless loop const firstClone = track.firstElementChild.cloneNode(true); firstClone.addEventListener("click", ()=> { window.open(links[0], "_blank"); }); track.appendChild(firstClone); tile.appendChild(track); // Arrow controls const controls = document.createElement("div"); controls.className="controls"; controls.innerHTML=""; tile.appendChild(controls); // Slide logic let index = 0; const total = images.length; let interval; function goSlide(i){ index=i; track.style.transition="transform 0.3s ease-in-out"; track.style.transform = `translateX(-${index*100}%)`; if(index>=total){ setTimeout(()=>{ track.style.transition="none"; track.style.transform = "translateX(0%)"; index=0; },310); } } function startAuto(){ interval = setInterval(()=>{ goSlide(index+1); }, autoSpeeds[i%3]); } function stopAuto(){ clearInterval(interval); } controls.children[0].onclick = ()=>{ stopAuto(); goSlide(index-1<0? total-1:index-1); } controls.children[1].onclick = ()=>{ stopAuto(); goSlide(index+1); } startAuto(); grid.appendChild(tile); }); // Number tiles left-to-right function renumberTiles(){ const tiles = Array.from(grid.querySelectorAll(".tile")); tiles.sort((a,b)=>{ if(a.offsetTop === b.offsetTop) return a.offsetLeft - b.offsetLeft; return a.offsetTop - b.offsetTop; }); tiles.forEach((tile,i)=>{ const num = tile.querySelector(".number"); num.textContent = String(i+1).padStart(2,"0"); }); } window.addEventListener("load", renumberTiles); window.addEventListener("resize", renumberTiles); 