add contact & footer
This commit is contained in:
zyqunix
parent
88eb5e317d
commit
01bb5c12d2
3 changed files with 177 additions and 14 deletions
|
|
@ -15,8 +15,8 @@
|
|||
alt="Profile Picture"
|
||||
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>
|
||||
<h1 class="name tooltip" data-tooltip="zyqunix / Fabio / Laetitia / fentboiswag / монгол / 192.168.2.217">zyqunix / Fabio</h1>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue