From 01bb5c12d20a8628778e4a4bab530eab5285db16 Mon Sep 17 00:00:00 2001 From: zyqunix Date: Sat, 1 Mar 2025 00:07:40 +0100 Subject: [PATCH] add contact & footer --- portfolio/index.html | 37 +++++++++-- portfolio/index.js | 6 +- portfolio/style.css | 148 ++++++++++++++++++++++++++++++++++++++++--- 3 files changed, 177 insertions(+), 14 deletions(-) diff --git a/portfolio/index.html b/portfolio/index.html index 5802a2f..be803e4 100644 --- a/portfolio/index.html +++ b/portfolio/index.html @@ -15,8 +15,8 @@ alt="Profile Picture" id="profile-picture" /> -

zyqunix / Fabio

-
+

zyqunix / Fabio

+
Coding, Listening to Music, Reverse Engineering, Playing Counter-Strike @@ -30,13 +30,42 @@
+
-

Languages

+

Languages

+
-

Skills

+

Skills

+
+ +
+

Contact

+ + + GitHub + + + + Instagram + + + + + YouTube +
+ + diff --git a/portfolio/index.js b/portfolio/index.js index 79afac8..a9f366a 100644 --- a/portfolio/index.js +++ b/portfolio/index.js @@ -1,6 +1,8 @@ const timeElem = document.getElementById('time'); const timezone = 'Europe/Berlin'; +timeElem.setAttribute('data-tooltip',timezone); + function getTime(timezone) { const now = new Date(); return now.toLocaleString("en-US", { @@ -88,7 +90,7 @@ function generateLanguageCards(languagesData) { namePercentContainer.classList.add('name-percent-container'); const languageImage = document.createElement('img'); - languageImage.classList.add('language-image'); + languageImage.classList.add('image'); languageImage.src = language.img; const languageName = document.createElement('div'); @@ -127,7 +129,7 @@ function generateSkillCards(skillData) { skillItem.target = '_blank'; const skillImage = document.createElement('img'); - skillImage.classList.add('skill-image'); + skillImage.classList.add('image'); skillImage.src = skill.img; const skillName = document.createElement('span'); diff --git a/portfolio/style.css b/portfolio/style.css index 939a5d3..277549f 100644 --- a/portfolio/style.css +++ b/portfolio/style.css @@ -57,7 +57,7 @@ strong { .hobbies { margin-top: 10px; font-size: 16px; - color: #bbbbbb; + color: #cccccc; } .cards { @@ -69,7 +69,7 @@ strong { text-align: left; } -div[class*="cards"]:last-of-type { +footer { margin-bottom: 50px !important; } @@ -100,7 +100,8 @@ div[class*="cards"]:last-of-type { width: 36px; } -.languages { +.languages, +.contact { margin-top: 30px; width: 100%; } @@ -132,7 +133,7 @@ div[class*="cards"]:last-of-type { width: 100%; } -.language-item img.language-image { +div[class="name-percent-container"] > img.image { width: 30px; height: 20px; border-radius: 2px; @@ -263,15 +264,37 @@ a[class="skill-item tooltip"]::after { margin: 0 20px; } +.contact-item { + text-decoration: none; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + background-color: #3b3b3b; + padding: 15px; + border-radius: 8px; + transition: background-color 0.3s, transform 0.2s; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); + text-align: center; + margin: 10px; +} + .skill-item:hover { background-color: #4d4d4d; transform: translateY(-5px); } -.skill-image { +.skill-item:hover .skill-name { + color: #ffffff; +} + +.skill-item > .image { + margin-bottom: 10px; +} + +.image { height: 50px; border-radius: 5px; - margin-bottom: 10px; } .skill-name { @@ -279,20 +302,64 @@ a[class="skill-item tooltip"]::after { color: #aaaaaa; } -#skills-div > h2 { +.contact-name { + font-size: 16px; + color: #efefef; + margin-left: 10px; +} + +.card-header { color: white; text-align: left; width: 100%; grid-column: span 2; } +.contact-item:hover { + transform: translateY(-5px); +} + +.github-contact { + background-color: #040404; +} + +.github-contact:hover { + background-color: #080808; +} + +.instagram-contact { + background-color: #c13584; +} + +.instagram-contact:hover { + background-color: #d44190; +} + +.twitter-contact { + background-color: #1da1f2; +} + +.twitter-contact:hover { + background-color: #33b2ff; +} + +.youtube-contact { + background-color: #e03535; +} + +.youtube-contact:hover { + background-color: #ff4444; +} + + @media (max-width: 768px) { .language-item { width: 150px; margin: 10px; } - .language-item img.language-image { + .language-item img.image { + height: 1px; width: 25px; height: 17px; } @@ -305,3 +372,68 @@ a[class="skill-item tooltip"]::after { font-size: 14px; } } + +@media (max-width: 600px) { + .cards { + width: 90% !important; + padding: 15px; + } + + .name { + font-size: 20px; + } + + .time, .age, .hobbies { + font-size: 16px; + } + + #profile-picture { + width: 120px; + height: 120px; + } + + #skills-div:not(#skills-div > h2) { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .language-item { + width: 100%; + } + + .skill-item { + margin: 0 10px; + padding: 10px; + } + + .contact-item { + padding: 10px; + } +} + +@media (max-width: 400px) { + .name { + font-size: 18px; + } + + .time, .age, .hobbies { + font-size: 14px; + } + + #profile-picture { + width: 100px; + height: 100px; + } + + .cards { + width: 100% !important; + padding: 10px; + } + + .skill-item { + padding: 8px; + } + + .contact-item { + padding: 8px; + } +}