From 2465084be4fe15f9337a1baa5ea91ceae4ff1631 Mon Sep 17 00:00:00 2001 From: mattkae Date: Fri, 26 Aug 2022 08:51:17 -0400 Subject: Removed the carousel --- index.css | 77 +++++++++++++++++--------------------------------------------- index.html | 53 +++++++++++++++++++----------------------- index.js | 67 +++++------------------------------------------------- 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 @@ -
- +
+
+ +
+ Me in front of my desktop, circa August 2021. +
+
+
+ +
+ Hanging with my dog named Rizzy, circa May 2020. +
+
+
+ +
+ Hanging with my friends, circa July 2019. +
+
+
+
+

About Me

-

-

- -

- 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 emcc 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(); -- cgit v1.2.1