Add new animation, add close button, add back button

index.html

@@ -19,8 +19,18 @@
             <div class="content-container">
                 <div class="content-wrapper">
                     <div class="header">
+                        <div class="header-left">
                             <div class="brand">Erik Feher</div>
-                        <img class="close" src="./public/next.svg"/>
+                        </div>
+                        <div class="header-center">
+                            <div class="brand">About</div>
+                        </div>
+                        <div class="header-right">
+                            <div class="control-button close">
+                                <img class="close-svg" src="./public/close.svg"/>
+                            </div>
+                            <img class="next control-button" src="./public/next.svg"/>
+                        </div>
                     </div>
                     <div class="card-content">
                         <div id="card-content-container">
@@ -41,8 +51,21 @@
             <div class="content-container">
                 <div class="content-wrapper">
                     <div class="header">
+                        <div class="header-left">
+                            <img class="back control-button" src="./public/next.svg"/>
                             <div class="brand">Erik Feher</div>
-                        <img class="close" src="./public/next.svg"/>
+                        </div>
+                        <div class="header-center">
+                            <div class="brand">CONTACT</div>
+                        </div>
+                        <div class="header-right">
+                            <div class="control-button close">
+                                <img class="close-svg" src="./public/close.svg"/>
+                            </div>
+                            <img class="next control-button" src="./public/next.svg"/>
+                        </div>
+                    </div>
+                    <div class="card-content">
                     </div>
                 </div>
             </div>
@@ -58,8 +81,21 @@
             <div class="content-container">
                 <div class="content-wrapper">
                     <div class="header">
+                        <div class="header-left">
+                            <img class="back control-button" src="./public/next.svg"/>
                             <div class="brand">Erik Feher</div>
-                        <img class="close" src="./public/next.svg"/>
+                        </div>
+                        <div class="header-center">
+                            <div class="brand">SOCIALS</div>
+                        </div>
+                        <div class="header-right">
+                            <div class="control-button close">
+                                <img class="close-svg" src="./public/close.svg"/>
+                            </div>
+                            <img class="next control-button" src="./public/next.svg"/>
+                        </div>
+                    </div>
+                    <div class="card-content">
                     </div>
                 </div>
             </div>
@@ -75,8 +111,21 @@
             <div class="content-container">
                 <div class="content-wrapper">
                     <div class="header">
+                        <div class="header-left">
+                            <img class="back control-button" src="./public/next.svg"/>
                             <div class="brand">Erik Feher</div>
-                        <img class="close" src="./public/next.svg"/>
+                        </div>
+                        <div class="header-center">
+                            <div class="brand">EXPERIENCE</div>
+                        </div>
+                        <div class="header-right">
+                            <div class="control-button close">
+                                <img class="close-svg" src="./public/close.svg"/>
+                            </div>
+                            <img class="next control-button" src="./public/next.svg"/>
+                        </div>
+                    </div>
+                    <div class="card-content">
                     </div>
                 </div>
             </div>
@@ -92,8 +141,20 @@
             <div class="content-container">
                 <div class="content-wrapper">
                     <div class="header">
+                        <div class="header-left">
+                            <img class="back control-button" src="./public/next.svg"/>
                             <div class="brand">Erik Feher</div>
-                        <img class="close" src="./public/next.svg"/>
+                        </div>
+                        <div class="header-center">
+                            <div class="brand">SKILLS</div>
+                        </div>
+                        <div class="header-right">
+                            <div class="control-button close">
+                                <img class="close-svg" src="./public/close.svg"/>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card-content">
                     </div>
                 </div>
             </div>

public/close.svg

@@ -1,7 +1,15 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff">
+<svg fill="#ffffff" width="800px" height="800px" viewBox="0 0 52 52" data-name="Layer 1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff">
+
 <g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
 <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
-
+
+<g id="SVGRepo_iconCarrier">
+
+<path d="M28.94,26,51.39,3.55A2.08,2.08,0,0,0,48.45.61L26,23.06,3.55.61A2.08,2.08,0,0,0,.61,3.55L23.06,26,.61,48.45A2.08,2.08,0,0,0,2.08,52a2.05,2.05,0,0,0,1.47-.61L26,28.94,48.45,51.39a2.08,2.08,0,0,0,2.94-2.94Z"/>
+
+</g>
+
 </svg>

script.js

@@ -1,9 +1,15 @@
-function init() {
+let currentCard = -1;
 const cards = document.getElementsByClassName('card-wrapper');
+let idleTime = 0;
 
+function init() {
     for (let i = 0; i < cards.length; i++) {
         const cardListener = cards[i].getElementsByClassName('card-listener')[0];
         cardListener.addEventListener('click', () => openCard(cards, i));
+        document.body.addEventListener('mouseover', () => {
+            idleTime = Date.now();
+            console.log('User active, resetting idle timer.');
+        });
     }
 
 }
@@ -14,6 +20,7 @@ function openCard(cards, i) {
             cards[j].classList.remove('hidden');
             cards[j].classList.add('active');
             cards[j].getElementsByClassName('content-wrapper')[0].classList.add('visible');
+            currentCard = j;
             continue;
         }
         cards[j].getElementsByClassName('content-wrapper')[0].classList.remove('visible');
@@ -22,6 +29,18 @@ function openCard(cards, i) {
     }
 }
 
+function nextCard() {
+    if (currentCard === -1) return;
+    const nextIndex = (currentCard + 1) % cards.length;
+    openCard(cards, nextIndex);
+}
+
+function previousCard() {
+    if (currentCard === -1) return;
+    const previousIndex = (currentCard - 1 + cards.length) % cards.length;
+    openCard(cards, previousIndex);
+}
+
 function addInProgress() {
     if (window.location.href.indexOf('127.0.0.1') === -1) {
         const warning = document.createElement('div');
@@ -34,34 +53,85 @@ function addInProgress() {
     }
 }
 
-function nextPage() {
-    const nextButtons = document.getElementsByClassName('close');
-    const cards = document.getElementsByClassName('card-wrapper');
+function switchPage() {
+    const nextButtons = document.getElementsByClassName('next');
+    const backButtons = document.getElementsByClassName('back');
 
     for (let i = 0; i < nextButtons.length; i++) {
         nextButtons[i].addEventListener('click', function() {
 
-            cards[(i+1) % nextButtons.length].classList.remove('hidden');
-            cards[(i+1) % nextButtons.length].classList.add('active');
-            cards[(i+1) % nextButtons.length].getElementsByClassName('content-wrapper')[0].classList.add('visible');
+            cards[i + 1].classList.remove('hidden');
+            cards[i + 1].classList.add('active');
+            cards[i + 1].getElementsByClassName('content-wrapper')[0].classList.add('visible');
+            currentCard = i + 1;
 
             cards[i].getElementsByClassName('content-wrapper')[0].classList.remove('visible');
             cards[i].classList.add('hidden');
             cards[i].classList.remove('active');
         });
     }
+
+    for(let i = backButtons.length - 1; i >= 0; i--) {
+        backButtons[i].addEventListener('click', function() {
+
+            cards[i].classList.remove('hidden');
+            cards[i].classList.add('active');
+            cards[i].getElementsByClassName('content-wrapper')[0].classList.add('visible');
+            currentCard = i;
+
+            cards[i + 1].getElementsByClassName('content-wrapper')[0].classList.remove('visible');
+            cards[i + 1].classList.add('hidden');
+            cards[i + 1].classList.remove('active');
+        });
+    }
+}
+
+function close() {
+    for (let i = 0; i < cards.length; i++) {
+        cards[i].getElementsByClassName('content-wrapper')[0].classList.remove('visible');
+        cards[i].classList.remove('hidden');
+        cards[i].classList.remove('active');
+    }
+    currentCard = -1;
+}
+
+function closeEventListeners() {
+    const closeButtons = document.getElementsByClassName('close');
+    for (let i = 0; i < closeButtons.length; i++) {
+        closeButtons[i].addEventListener('click', close);
+    }
 }
 
 function idle() {
-    let idleTime = 61;
-    const cards = document.getElementsByClassName('card-wrapper');
     let cardIndex = 0;
+    let lastUpdate = 0;
     setInterval(function() {
-        idleTime+=2;
-        if (idleTime > 60) {
-            openCard(cards, cardIndex++ % cards.length);
+        const idleTimeElapsed = (Date.now() - idleTime) / 1000;
+        if (idleTimeElapsed > 3) {
+            for (let i = 0; i < cards.length; i++) {
+                if(cards[i].classList.contains('active')) return;
             }
-    }, 10000);
+            const animationTimeElapsed = (Date.now() - lastUpdate) / 1000;
+            if (animationTimeElapsed < 2.5) return;
+            lastUpdate = Date.now();
+            for (let i = 0; i < cards.length; i++) {
+                if (i === cardIndex % cards.length) {
+                    cards[i].getElementsByClassName('card-image')[0].classList.add('card-image-idle-animation');
+                    cards[i].getElementsByClassName('card-label')[0].classList.add('card-label-idle-animation');
+                } else {
+                    cards[i].getElementsByClassName('card-image')[0].classList.remove('card-image-idle-animation');
+                    cards[i].getElementsByClassName('card-label')[0].classList.remove('card-label-idle-animation');
+                }
+            }
+            cardIndex++;
+        }
+        else {
+            for (let i = 0; i < cards.length; i++) {
+                cards[i].getElementsByClassName('card-image')[0].classList.remove('card-image-idle-animation');
+                cards[i].getElementsByClassName('card-label')[0].classList.remove('card-label-idle-animation');
+            }
+        }
+    }, 100);
 
     document.onclick = document.onm = function() {
         console.log('User active, resetting idle timer.');
@@ -69,8 +139,53 @@ function idle() {
     };
 }
 
+document.onkeydown = (event) => {
+    idleTime = 0;
+    if (event.key === "Escape") {
+        close();
+        return;
+    }
+    if (event.key === "ArrowRight") {
+        if (currentCard === -1) return;
+        if (currentCard === cards.length - 1) return;
+        nextCard();
+        return;
+    }
+    if (event.key === "ArrowLeft") {
+        if (currentCard <= 0) return;
+        previousCard();
+        return;
+    }
+    if (event.key === "1") {
+        openCard(cards, 0);
+        return;
+    }
+    if (event.key === "2") {
+        openCard(cards, 1);
+        return;
+    }
+    if (event.key === "3") {
+        openCard(cards, 2);
+        return;
+    }
+    if (event.key === "4") {
+        openCard(cards, 3);
+        return;
+    }
+    if (event.key === "5") {
+        openCard(cards, 4);
+        return;
+    }
+}
+
+window.mouseover = () => {
+    idleTime = 0;
+    console.log('User active, resetting idle timer.');
+}
+
 
 addInProgress();
 init();
-nextPage();
+closeEventListeners();
+switchPage();
 idle();

styles.css

@@ -3,7 +3,7 @@
 :root {
     --card-gap: 6px;
     --background-color: #1b1b1b;
-    --text-color: #fff;
+    --text-color: #ffffff;
     --label-height: 60px;
     --header-height: 50px;
     --base-border-radius: 7px;
@@ -13,6 +13,7 @@
     --content-wrap-padding: 16px;
     --header-margin-bottom: 20px;
     --content-container-height: calc(100dvh - (2 * var(--card-gap)));
+    --card-switch-duration: 0.8s;
 
     font-family: "BBH Sans Bogle", sans-serif;
     font-weight: 400;
@@ -49,12 +50,17 @@ html, body {
     align-items: center;
     gap: var(--card-gap);
     margin: var(--card-gap);
+    transition: var(--card-switch-duration) cubic-bezier(0.455, 0.03, 0.515, 0.955);
+}
+
+#container:has(.hidden) {
+    gap: 0;
 }
 
 .card-image {
     filter: grayscale(100%) brightness(80%);
     transform: translateY(0);
-    transition: 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+    transition: 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955);
     object-fit: cover;
     width: 100%;
     height: 100%;
@@ -80,7 +86,7 @@ html, body {
     width: 100%;
     height: 100%;
     cursor: pointer;
-    transition: 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+    transition: var(--card-switch-duration) cubic-bezier(0.455, 0.03, 0.515, 0.955);
 }
 
 .card-label {
@@ -94,7 +100,7 @@ html, body {
     width: 100%;
     filter: grayscale(0%) brightness(100%);
     transform: translateY(0);
-    transition: 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+    transition: var(--card-switch-duration) cubic-bezier(0.455, 0.03, 0.515, 0.955);
     font-size: 32px;
     padding-left: 30px;
 }
@@ -108,8 +114,17 @@ html, body {
     transform: translateY(calc(-1 * var(--label-height)));
 }
 
+.card-image-idle-animation {
+    filter: grayscale(0%) brightness(110%);
+    transform: translateY(-30px);
+}
+
+.card-label-idle-animation {
+    transform: translateY(calc(-1 * var(--label-height)));
+}
+
 .hidden {
-    width: calc(100% / 10);
+    width: 0;
 }
 
 .active .card-label {
@@ -146,12 +161,13 @@ html, body {
 .visible {
     display: block !important;
     opacity: 1 !important;
-    transition-delay: 0.5s !important;
+    transition-delay: var(--card-switch-duration) !important;
     transition: 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
 }
 
 .header {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
     justify-content: space-between;
     align-items: center;
     font-size: 48px;
@@ -159,6 +175,26 @@ html, body {
     height: var(--header-height);
 }
 
+.header-left {
+    display: flex;
+    gap: 16px;
+    justify-content: left;
+}
+
+.header-right {
+    display: flex;
+    gap: 16px;
+    justify-content: right;
+    align-items: center;
+    width: 100%;
+}
+
+.header-center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 .brand {
     font-size: 24px;
     display: flex;
@@ -167,13 +203,13 @@ html, body {
     padding: 10px;
     background-color: var(--base-content-background-color);
     box-shadow: var(--base-box-shadow);
-    color: #ffffff;
+    color: var(--text-color);
     backdrop-filter: var(--base-blur);
     border-radius: var(--base-border-radius);
     
 }
 
-.close {
+.control-button {
     cursor: pointer;
     width: 48px;
     background-color: var(--base-content-background-color);
@@ -183,7 +219,28 @@ html, body {
     transition: 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
 }
 
-.close:hover {
+.close-svg {
+    width: 24px !important;
+}
+
+.close {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 42px;
+    height: 42px;
+    border: 3px solid white;
+}
+
+.back {
+    transform: rotate(180deg) scale(1);
+}
+
+.back:hover {
+    transform: rotate(180deg) scale(1.1) !important;
+}
+
+.control-button:hover {
     transform: scale(1.1);
 }