From 9f504647fc08332566f5f95f4128fe595a717b06 Mon Sep 17 00:00:00 2001
From: Yashraj Nayak <yashrajnayak@github.com>
Date: Wed, 29 Jan 2025 19:23:23 +0530
Subject: [PATCH] Animation removed

---
 scripts.js | 31 ++++++++-----------------------
 styles.css | 43 ++++---------------------------------------
 2 files changed, 12 insertions(+), 62 deletions(-)

diff --git a/scripts.js b/scripts.js
index 276e39d..2d36619 100644
--- a/scripts.js
+++ b/scripts.js
@@ -57,29 +57,14 @@ document.addEventListener('DOMContentLoaded', () => {
             // Wait for all images to load
             const loadedImages = await Promise.all(imageLoadPromises);
 
-            // Create rows and add images
-            for (let i = 0; i < 3; i++) {
-                const row = document.createElement('div');
-                row.className = `mosaic-row mosaic-row-${i + 1}`;
-                
-                // Create a sequence of 6 images (3 original + 3 duplicates) for seamless loop
-                const rowImages = [];
-                for (let j = 0; j < 3; j++) {
-                    const imgIndex = i * 3 + j;
-                    const newImg = document.createElement('img');
-                    newImg.src = loadedImages[imgIndex].src;
-                    newImg.className = 'mosaic-image';
-                    newImg.alt = '';
-                    rowImages.push(newImg);
-                }
-                
-                // Add original images plus duplicates for seamless loop
-                [...rowImages, ...rowImages].forEach(img => {
-                    row.appendChild(img.cloneNode(true));
-                });
-                
-                mosaicContainer.appendChild(row);
-            }
+            // Create 9 image elements in a grid
+            loadedImages.forEach((img, i) => {
+                const newImg = document.createElement('img');
+                newImg.src = img.src;
+                newImg.className = 'mosaic-image';
+                newImg.alt = '';
+                mosaicContainer.appendChild(newImg);
+            });
 
             // Show the mosaic after everything is ready
             requestAnimationFrame(() => {
diff --git a/styles.css b/styles.css
index 00db263..f602ba7 100644
--- a/styles.css
+++ b/styles.css
@@ -27,7 +27,9 @@
 }
 
 .background-mosaic.initialized {
-    display: block;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(3, 1fr);
     opacity: 1;
 }
 
@@ -44,46 +46,9 @@
 }
 
 .mosaic-image {
-    width: 33.33%;
+    width: 100%;
     height: 100%;
     object-fit: cover;
-    flex-shrink: 0;
-}
-
-/* Update animation keyframes for seamless looping */
-@keyframes slideRight {
-    0% {
-        transform: translateX(0);
-    }
-    100% {
-        transform: translateX(-100%);
-    }
-}
-
-@keyframes slideLeft {
-    0% {
-        transform: translateX(-100%);
-    }
-    100% {
-        transform: translateX(0);
-    }
-}
-
-/* Update the mosaic row styles */
-.mosaic-row {
-    width: 100%;
-    height: 33.33vh;
-    display: flex;
-    position: relative;
-    overflow: hidden;
-}
-
-.mosaic-row-1, .mosaic-row-3 {
-    animation: slideRight 60s linear infinite;
-}
-
-.mosaic-row-2 {
-    animation: slideLeft 60s linear infinite;
 }
 
 body {