summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--index.css77
-rw-r--r--index.html53
-rw-r--r--index.js67
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();
generated by cgit v1.2.1 (git 2.18.0) at 2024-11-22 07:12:17 +0000