Erik Fehér

commit bf9c8104e92359864b396f3af53a9162aa7a2711 Author: Erik Fehér Date: Tue Oct 21 22:14:37 2025 +0200 Base of personal website diff --git a/index.html b/index.html new file mode 100644 index 0000000..806dfaf --- /dev/null +++ b/index.html @@ -0,0 +1,86 @@ + + + + + + + + Erik Fehér + + +

+ ABOUT +

Hello! I'm Erik Fehér, a passionate software developer with a knack for creating innovative solutions. With a background in computer science and years of experience in the tech industry, I specialize in building web applications that are both user-friendly and efficient. When I'm not coding, you can find me exploring the latest tech trends or contributing to open-source projects. Let's connect and create something amazing together!

+ +

+ CONTACT +

+ +

+ SOCIALS +

+ +

+ EXPERIENCE +

+ +

+ SKILLS +

+ +

+ + + + \ No newline at end of file diff --git a/public/cozy1.jpg b/public/cozy1.jpg new file mode 100644 index 0000000..7bd4700 Binary files /dev/null and b/public/cozy1.jpg differ diff --git a/public/cozy2.jpg b/public/cozy2.jpg new file mode 100644 index 0000000..d97b3f9 Binary files /dev/null and b/public/cozy2.jpg differ diff --git a/public/cozy3.png b/public/cozy3.png new file mode 100644 index 0000000..bda17bc Binary files /dev/null and b/public/cozy3.png differ diff --git a/public/cozy4.png b/public/cozy4.png new file mode 100644 index 0000000..58bf708 Binary files /dev/null and b/public/cozy4.png differ diff --git a/public/cozy5.png b/public/cozy5.png new file mode 100644 index 0000000..a6691fb Binary files /dev/null and b/public/cozy5.png differ diff --git a/script.js b/script.js new file mode 100644 index 0000000..3dd5651 --- /dev/null +++ b/script.js @@ -0,0 +1,23 @@ +function init() { + const cards = document.getElementsByClassName('card-wrapper'); + + console.log(cards[0]); // Logs the first card-wrapper elementű + for (let i = 0; i < cards.length; i++) { + cards[i].addEventListener('click', function() { + for (let j = 0; j < cards.length; j++) { + if (j === i) { + cards[j].classList.remove('hidden'); + cards[j].classList.add('active'); + cards[j].getElementsByClassName('content-wrapper')[0].classList.add('visible'); + continue; + } + cards[j].getElementsByClassName('content-wrapper')[0].classList.remove('visible'); + cards[j].classList.add('hidden'); + cards[j].classList.remove('active'); + } + }); + } + +} + +init(); \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..95d53d2 --- /dev/null +++ b/styles.css @@ -0,0 +1,114 @@ +@import url('https://fonts.googleapis.com/css2?family=BBH+Sans+Bogle&display=swap'); + +:root { + --card-gap: 6px; + --background-color: #1b1b1b; + --text-color: #fff; + --label-height: 60px; + + font-family: "BBH Sans Bogle", sans-serif; + font-weight: 400; + font-style: normal; +} + +html, body { + background: var(--background-color); + margin: 0; + padding: 0; + overflow-y: hidden; /* Hide vertical scrollbar */ + overflow-x: hidden; /* Hide horizontal scrollbar */ + height: 100dvh; +} + +#container { + display: flex; + justify-content: space-around; + align-items: center; + gap: var(--card-gap); + margin: var(--card-gap); +} + +.card-image { + filter: grayscale(100%) brightness(80%); + transform: translateY(0); + transition: 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); +} + +.card { + height: calc(100dvh - (2 * var(--card-gap))); + overflow: hidden; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + cursor: pointer; +} + +.card-wrapper { + overflow: hidden; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + cursor: pointer; + transition: 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); +} + +.card-label { + position: relative; + bottom: calc(-1 * var(--label-height / 2)); + display: flex; + align-items: center; + background-color: var(--background-color); + color: var(--text-color); + height: var(--label-height); + width: 100%; + filter: grayscale(0%) brightness(100%); + transform: translateY(0); + transition: 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); + font-size: 32px; + padding-left: 30px; +} + +.card-wrapper:hover .card .card-image { + filter: grayscale(0%) brightness(110%); + transform: translateY(-30px); +} + +.card-wrapper:hover .card-label { + transform: translateY(calc(-1 * var(--label-height))); +} + +.hidden { + width: calc(100% / 10); +} + +.active .card-label { + transform: translateY(0) !important; +} + +.active .card .card-image { + filter: grayscale(0%) brightness(110%) !important; + transform: translateY(0) !important; +} + +.content-container { + display: block; + position: relative; + border: 1px solid #fff; + max-width: 100%; + height: calc(100dvh - (2 * var(--card-gap))); + top: calc(-1 * (100dvh - (2 * var(--card-gap))) - var(--label-height)); +} + +.content-wrapper { + display: block; + opacity: 0; + transition: 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); +} + +.visible { + display: block !important; + opacity: 1 !important; +} \ No newline at end of file