erik/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add new animation, add close button, add back button
All checks were successful
Deploy new version of the application / Deploy Application (push) Successful in 3s
Details

Browse Source
This commit is contained in:
Erik Fehér
2025-10-23 16:54:54 +02:00
parent 5c42665c8f
commit d97e432695
4 changed files with 282 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
index.html
View File

@@ -19,8 +19,18 @@
<div class="content-container">
<div class="content-wrapper">
<div class="header">
<div class="brand">Erik Feher</div>
<img class="close" src="./public/next.svg"/>
<div class="header-left">
<div class="brand">Erik Feher</div>
</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="brand">Erik Feher</div>
<img class="close" src="./public/next.svg"/>
<div class="header-left">
<img class="back control-button" src="./public/next.svg"/>
<div class="brand">Erik Feher</div>
</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="brand">Erik Feher</div>
<img class="close" src="./public/next.svg"/>
<div class="header-left">
<img class="back control-button" src="./public/next.svg"/>
<div class="brand">Erik Feher</div>
</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="brand">Erik Feher</div>
<img class="close" src="./public/next.svg"/>
<div class="header-left">
<img class="back control-button" src="./public/next.svg"/>
<div class="brand">Erik Feher</div>
</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="brand">Erik Feher</div>
<img class="close" src="./public/next.svg"/>
<div class="header-left">
<img class="back control-button" src="./public/next.svg"/>
<div class="brand">Erik Feher</div>
</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>

18
public/close.svg
View File

@@ -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">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 726 B

145
script.js
View File

@@ -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();

77
styles.css
View File

@@ -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);
}