'init'

public/js/skybox.js

@@ -0,0 +1,51 @@
+const box = document.getElementById('project-container-gallery')
+let x, y
+
+function init(){
+	x = 0
+	y = 0
+	AnimateSkybox()
+}
+
+function AnimateSkybox(){
+	x += 1
+
+	box.style.backgroundPosition = x + "px " + y + "px"
+	requestAnimationFrame(AnimateSkybox) 
+}
+
+// Wait for the DOM to fully load
+document.addEventListener("DOMContentLoaded", function() {
+    // Get all gallery images
+    const galleryImages = document.querySelectorAll("#image-gallery .gallery-image");
+    // Get the focused image container and the focused image
+    const focusedImageContainer = document.getElementById("focused-image-container");
+    const focusedImage = document.querySelector(".focused-image");
+    // Get the gallery container
+    const galleryContainer = document.getElementById("image-gallery");
+    // Get the close button
+    const closeButton = document.getElementById("close-button");
+
+    // Add click event listeners to each gallery image
+    galleryImages.forEach(image => {
+        image.addEventListener("click", function() {
+            // Hide the gallery
+            galleryContainer.style.display = "none";
+            // Update the src of the focused image to the src of the clicked image
+            focusedImage.src = this.src;
+            // Show the focused image container
+            focusedImageContainer.style.display = "flex";
+        });
+    });
+
+    // Add click event listener to the close button
+    closeButton.addEventListener("click", function() {
+        // Hide the focused image container
+        focusedImageContainer.style.display = "none";
+        // Show the gallery
+        galleryContainer.style.display = "flex";
+    });
+});
+
+
+init()