Removed the carousel

3 files changed, 50 insertions, 147 deletions

diff --git a/index.css b/index.css
index d237608..cb8290e 100644
--- a/index.css
+++ b/index.css
@@ -23,10 +23,9 @@ header > h1 {
 }
 
 header > nav {	
-    padding-top: 0.5rem;
-    padding-bottom: 1rem;
+    margin-top: 0.5rem;
+    margin-bottom: 1rem;
     padding-left: 0.25rem;
-    border-bottom: 1px solid lightgray;
 }
 
 header > nav > ul {
@@ -50,6 +49,7 @@ header > nav > ul a {
 
 header > nav > ul a:hover {
 	opacity: 0.7;
+	text-decoration: underline;
 }
 
 h2 {
@@ -61,7 +61,7 @@ section {
 }
 
 p {
-    text-align: center;
+    text-align: left;
 }
 
 section a {
@@ -72,78 +72,43 @@ section a:hover {
     opacity: 0.7;
 }
 
-/* Carousel styling */
-#carousel {
-    width: 100%;
-    position: relative;
-    overflow: hidden;
-    padding-top: 1rem;
-    padding-bottom: 1rem;
-}
-
-#carousel > button {
-    position: absolute;
-    top: calc(50% - 8rem);
-    font-size: 12rem;
-    border: none;
-    background-color: transparent;
-}
-
-#carousel > button:hover {
-    opacity: 0.5;
-    cursor: pointer;
-}
-
-#carousel_left {
-    visibility: hidden;
-    left: 0;
-}
-
-#carousel_right {
-    visibility: hidden;
-    right: 0;
-}
-
+/* Image styling */
 #image_container {
-    padding-left: calc(50% - 120px);
     display: flex;
     flex-direction: row;
-    height: 100%;
-    transition: all 100ms linear;
-    opacity: 0;
+    transition: transform 100ms ease-in-out;
+	flex: 0 1 auto;
+	width: 100%;
+	overflow: auto;
+	justify-content: center;
 }
 
-#image_container .carousel_image {
+#image_container .image_item {
     width: 240px;
-    transition: opacity 100ms linear;
+    transition: opacity 100ms ease-in-out;
     padding: 0;
     margin: 0;
     padding-right: 12px;
     cursor: pointer;
     position: relative;
-    opacity: 0;
 }
 
-#image_container .carousel_image:hover::after {
-    position: absolute;
-    top: calc(50% - 6rem);
-    left: calc(50% - 3rem);
-    font-size: 6rem;
-    color: white;
-    content: "\26F6";
+#image_container .image_item:hover > img {
+	border: 2px solid rgba(0, 0, 0, 0.7);
 }
 
-.carousel_image > figcaption {
+.image_item > figcaption {
     font-size: 10px;
     font-style: italic;
 }
 
-.carousel_image > img {
+.image_item > img {
     width: inherit;
-    border-radius: 2px;
+    border-radius: 3px;
+	border: 2px solid rgba(0, 0, 0, 0.3);
 }
 
-.carousel_image_expanded_container {
+.image_item_expanded_container {
     position: fixed;
     width: 100vw;
     height: 100vh;
@@ -155,7 +120,7 @@ section a:hover {
     z-index: 1000;
 }
 
-.carousel_image_expanded_container > .carousel_image {
+.image_item_expanded_container > .image_item {
     width: 35vw;
     opacity: 1.0 !important;
 }
@@ -267,7 +232,7 @@ only screen and (max-width:960px) {
         padding-bottom: 2rem !important;
     }
 
-    .carousel_image_expanded_container > .carousel_image {
+    .image_item_expanded_container > .image_item {
         width: 80vw;
     }
 
diff --git a/index.html b/index.html
index ea1eb15..647d95b 100644
--- a/index.html
+++ b/index.html
@@ -24,37 +24,30 @@
           </ul>
         </nav>
     </header>
-    <section id='landing_page'>
-
+    <section id='image_container'>
+      <figure class='image_item'>
+        <img src='images/portrait-min.jpg' />
+        <figcaption>
+          Me in front of my desktop, circa August 2021.
+        </figcaption>
+      </figure>
+      <figure class='image_item'>
+        <img src='images/dog_and_me-min.jpg' />
+        <figcaption>
+          Hanging with my dog named Rizzy, circa May 2020.
+        </figcaption>
+      </figure>
+      <figure class='image_item'>
+        <img src='images/friends-min.jpg' />
+        <figcaption>
+          Hanging with my friends, circa July 2019.
+        </figcaption>
+      </figure> 
+    </section>
+	<section>
+	  <h2>About Me</h2>
       <p>
-        <div id='carousel'>
-          <div id='image_container'>
-            <figure class='carousel_image'>
-              <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-min.jpg' />
-              <figcaption>
-                Hanging with my dog named Rizzy, circa May 2020.
-              </figcaption>
-            </figure>
-            <figure class='carousel_image'>
-              <img src='images/friends-min.jpg' />
-              <figcaption>
-                Hanging with my friends, circa July 2019.
-              </figcaption>
-            </figure>
-          </div>
-          <button id='carousel_left'>&#8592;</button>
-          <button id='carousel_right'>&#8594;</button>
-        </div>
-      </p>
-      
-      <p style='padding-left: 2rem; padding-right: 2rem;'>
-        Hello! My name is Matthew Kosarek.
+        My name is Matthew Kosarek.
 		I am a computer programmer from northern New Jersey and I currently live and work in Montreal, Quebec.
 		I keep my CV up to date on this website, and I also provide some links to some extracurriculars that I am up to.
 		In my spare time, I build some graphics scenes in C++/OpenGL, compile them via <code>emcc</code> and post them here as "themes".
diff --git a/index.js b/index.js
index fd949b7..fa6dddd 100644
--- a/index.js
+++ b/index.js
@@ -3,39 +3,15 @@ function main() {
     var themeSelector = document.getElementById('theme_selector');
     themeSelector.classList.remove('hidden');
 
-    runCarousel();
+    imageCallbacks();
 }
 
-function runCarousel() {
-    var carouselContainer = document.getElementById("carousel"),
-        imageContainer = document.getElementById('image_container'),
-        leftButton = document.getElementById('carousel_left'),
-        rightButton = document.getElementById('carousel_right');
-
-    // Carousel logic
-    var carouselPosition = 0,
-        numImages = imageContainer.children.length;
-
-    function onCarouselRight() {
-        carouselPosition = (carouselPosition + 1);
-
-        if (carouselPosition === numImages) {
-            carouselPosition = 0;
-        }
-        updateCarousel();
-    }
-
-    function onCarouselLeft() {
-        carouselPosition = (carouselPosition - 1);
-        if (carouselPosition < 0) {
-            carouselPosition = numImages - 1;
-        }
-        updateCarousel();
-    }
-
+function imageCallbacks() {
+  const imageContainer = document.getElementById('image_container');
+  
     function onImageClicked() {
         var background = document.createElement('div'); // 
-        background.classList.add('carousel_image_expanded_container');
+        background.classList.add('image_item_expanded_container');
         var clone = this.cloneNode(true);
         clone.classList.add('expanded');
         background.append(clone);
@@ -50,44 +26,13 @@ function runCarousel() {
             var image = imageList[i];
             image.addEventListener('click', onImageClicked);
         }
-    }
-
-    function updateCarousel() {
-        var selectedChildPosition = -(carouselPosition * 240);
-        imageContainer.style.transform = 'translate(' + selectedChildPosition + 'px, 0)';
-        for (var i = 0; i < numImages; i++) {
-            var image = imageList[i];
-            if (i !== carouselPosition) {
-                if (i === (carouselPosition - 1) % numImages) {
-                    image.style.opacity = 0.3;
-                } else if (i !== 0 && i === (carouselPosition + 1) % numImages) {
-                    image.style.opacity = 0.3;
-                } else {
-                    image.style.opacity = 0;
-                }
-            } else {
-                image.style.opacity = 1;
-            }
-
-            image.style.pointerEvents = image.style.opacity > 0 ? 'all' : 'none';
-        }
-
-        rightButton.style.visibility = (carouselPosition === numImages - 1) ? 'hidden' : 'visible';
-        leftButton.style.visibility = (carouselPosition === 0) ? 'hidden' : 'visible';
-    }
+    } 
 
     // -- Set up on image clicked
     var imageList = imageContainer.children,
         numImages = imageContainer.children.length;
 
     setImageClicked();
-    updateCarousel();
-
-    leftButton.addEventListener('click', onCarouselLeft);
-    rightButton.addEventListener('click', onCarouselRight);
-
-    // -- Fade in the container
-    imageContainer.style.opacity = '1';
 }
 
 main();