add contact & footer

portfolio/index.html

@@ -16,7 +16,7 @@
                 id="profile-picture"
             />
             <h1 class="name tooltip" data-tooltip="zyqunix / Fabio / Laetitia / fentboiswag / монгол / 192.168.2.217">zyqunix / Fabio</h1>
-			<div class="time" id="time"> </div>
+			<div class="time tooltip" id="time"> </div>
 			<div class="age tooltip" id="age" data-tooltip="December 13th, 2008"></div>
             <div class="hobbies">
                 Coding, Listening to Music, Reverse Engineering, Playing Counter-Strike
@@ -30,13 +30,42 @@
                 <div id="activity-name"></div>
             </div>
         </div>
+
         <div class="languages cards">
-			<h2>Languages</h2>
+			<h2 class="card-header">Languages</h2>
 		</div>
+
 		<div class="skills cards" id="skills-div">
-			<h2>Skills</h2>
+			<h2 class="card-header">Skills</h2>
+		</div>
+
+		<div class="contact cards">
+			<h2 class="card-header">Contact</h2>
+			<a class="contact-item github-contact" href="https://github.com/zyqunix" target="_blank">
+				<img class="image" src="https://raw.githubusercontent.com/zyqunix/devicon/404c165ff8d0b7eda226ec5eb66fdfc64f5f381f/icons/github/github-original.svg">
+				<span class="contact-name">GitHub</span>
+			</a>
+			<a class="contact-item instagram-contact" href="https://instagram.com/192.168.2.217" target="_blank">
+				<img class="image" src="https://raw.githubusercontent.com/zyqunix/simple-icons/725d82d3e0d7feb029b84fb3ccaec2f5ec1e5fb5/icons/instagram.svg">
+				<span class="contact-name">Instagram</span>
+			</a>
+			<a class="contact-item twitter-contact" href="https://x.com/real_zyqunix" target="_blank">
+				<img class="image" src="https://raw.githubusercontent.com/zyqunix/devicon/45338f81bcadf23bb3160d0ea4e15d5fcd706d15/icons/twitter/twitter-original.svg">
+				<span class="contact-name">Twitter</span>
+			</a>
+			<a class="contact-item youtube-contact" href="https://github.com/zyqunix" target="_blank">
+				<img class="image" src="https://raw.githubusercontent.com/zyqunix/simple-icons/7caa6bae5f54b0cfd0d82da3fa293674d408ab44/icons/youtube.svg">
+				<span class="contact-name">YouTube</span>
+			</a>
 		</div>
 
         <script src="index.js"></script>
+		
+		<footer class="cards">
+			<p>© 2025 zyqunix. All rights reserved.</p>
+			<p>❤️ This website is open-source on <a href="https://github.com/zyqunix/tools" target="_blank">GitHub</a>.</p>
+			<p>✨ Inspired by <a href="https://vmohammad.dev" target="_blank">vMohammad's Portfolio</a>.</p>
+			<p>❤️ Made with love by zyqunix in Germany.</p>
+		</footer>
     </body>
 </html>

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');

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;
+    }
+}