From b1388b40b138e4440cda121b8044b26ae35759ef Mon Sep 17 00:00:00 2001
From: Matthew Kosarek <mattkae@protonmail.com>
Date: Tue, 5 Oct 2021 07:23:29 -0400
Subject: Minified images and added better scroll code to the canvas

---
 images/dog_and_me-min.jpg | Bin 0 -> 719525 bytes
 images/friends-min.jpg    | Bin 0 -> 1078187 bytes
 images/portrait-min.jpg   | Bin 0 -> 897904 bytes
 index.css                 |   3 ---
 index.html                |   6 +++---
 index.js                  |   5 +++--
 6 files changed, 6 insertions(+), 8 deletions(-)
 create mode 100644 images/dog_and_me-min.jpg
 create mode 100644 images/friends-min.jpg
 create mode 100644 images/portrait-min.jpg

diff --git a/images/dog_and_me-min.jpg b/images/dog_and_me-min.jpg
new file mode 100644
index 0000000..984996c
Binary files /dev/null and b/images/dog_and_me-min.jpg differ
diff --git a/images/friends-min.jpg b/images/friends-min.jpg
new file mode 100644
index 0000000..2f39ff6
Binary files /dev/null and b/images/friends-min.jpg differ
diff --git a/images/portrait-min.jpg b/images/portrait-min.jpg
new file mode 100644
index 0000000..391267f
Binary files /dev/null and b/images/portrait-min.jpg differ
diff --git a/index.css b/index.css
index 32bd838..69187fe 100644
--- a/index.css
+++ b/index.css
@@ -72,9 +72,7 @@ header > nav > ul a:hover {
 /* Carousel styling */
 #carousel {
     width: 100%;
-    height: 360px;
     position: relative;
-	overflow: hidden;
 }
 
 #carousel > button {
@@ -100,7 +98,6 @@ header > nav > ul a:hover {
 }
 
 #image_container {
-    position: absolute;
     width: 100%;
     display: flex;
     flex-direction: row;
diff --git a/index.html b/index.html
index cb90b2d..a85ca65 100644
--- a/index.html
+++ b/index.html
@@ -28,19 +28,19 @@
         <div id='carousel'>
           <div id='image_container'>
             <figure class='carousel_image'>
-              <img src='images/portrait.jpg' />
+              <img src='images/portrait-min.jpg' />
               <figcaption>
                 Me in front of my desktop, circa August 2021.
               </figcaption>
             </figure>
             <figure class='carousel_image'>
-              <img src='images/dog_and_me.jpg' />
+              <img src='images/dog_and_me-min.jpg' />
               <figcaption>
                 Hanging with my dog named Rizzy, circa May 2020.
               </figcaption>
             </figure>
             <figure class='carousel_image'>
-              <img src='images/friends.jpg' />
+              <img src='images/friends-min.jpg' />
               <figcaption>
                 Hanging with my friends, circa July 2019.
               </figcaption>
diff --git a/index.js b/index.js
index 4d29466..3397c30 100644
--- a/index.js
+++ b/index.js
@@ -36,7 +36,9 @@ function runCarousel() {
     }
 
     function updateCarousel() {
-        var children = imageContainer.children;
+        var children = imageContainer.children,
+            selectedChildPosition = -imageContainer.children[carouselPosition].offsetLeft + 240;
+        imageContainer.style.transform = 'translate(' + selectedChildPosition + 'px, 0)';
         for (var i = 0; i < children.length; i++) {
             var image = children[i];
             if (i !== carouselPosition) {
@@ -52,7 +54,6 @@ function runCarousel() {
             }
         }
 
-        imageContainer.style.left = 'calc(' + (-carouselPosition * 252) + 'px + 50% - 120px)';
         rightButton.style.visibility = (carouselPosition === numImages - 1) ? 'hidden' : 'visible';
         leftButton.style.visibility = (carouselPosition === 0) ? 'hidden' : 'visible';
     }
-- 
cgit v1.2.1