- 
+
Erik Feher
-
+
+
+ Erik Feher
+
+
+ About
+
+
+
+ 
+
+
+
+
@@ -41,8 +51,21 @@
@@ -58,8 +81,21 @@
@@ -75,8 +111,21 @@
@@ -92,8 +141,20 @@
diff --git a/public/close.svg b/public/close.svg
index a77d295..9f18ba0 100644
--- a/public/close.svg
+++ b/public/close.svg
@@ -1,7 +1,15 @@
-
+
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/script.js b/script.js
index 68a45aa..1dfbd75 100644
--- a/script.js
+++ b/script.js
@@ -1,9 +1,15 @@
-function init() {
- const cards = document.getElementsByClassName('card-wrapper');
+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;
+ }
+ 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++;
}
- }, 10000);
+ 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();
\ No newline at end of file
diff --git a/styles.css b/styles.css
index f0dcbe8..2f5dd18 100644
--- a/styles.css
+++ b/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);
}
-
+
+ Erik Feher
-
+
+
+
+
+ Erik Feher
+
+
+ CONTACT
+
+
+
+
+
+
+
+
+
-
+
+ Erik Feher
-
+
+
+
+
+ Erik Feher
+
+
+ SOCIALS
+
+
+
+
+
+
+
+
+
-
+
+ Erik Feher
-
+
+
+
+
+ Erik Feher
+
+
+ EXPERIENCE
+
+
+
+
+
+
+
+
+
-
+
+ Erik Feher
-
+
+
+
+
+ Erik Feher
+
+
+ SKILLS
+
+
+
+
+
+
+