zyqunix/pages
1
0
Fork 0
mirror of https://github.com/zyqunix/tools.git synced 2025-07-06 06:20:30 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

change some stuff

Browse source
This commit is contained in:
zyqunix 2025-04-10 21:18:20 +02:00
parent 89232b55cb
commit 4fb79a1d68
No known key found for this signature in database
GPG key ID: 134A8DEEA83B80E6
3 changed files with 58 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

14
portfolio/index.html
View file

@ -15,9 +15,9 @@
alt="Profile Picture"
id="profile-picture"
/>
<h1 class="name tooltip" data-tooltip="zyqunix / Fabio / Laetitia / fentboiswag / монгол / 192.168.2.217">zyqunix / Fabio</h1>
<h1 class="name tooltip" data-tooltip="zyqunix / Fabio / Laetitia / fentboiswag / монгол / 192.168.2.217">zyqunix</h1>
<div class="time tooltip" id="time"> </div>
<div class="age tooltip" id="age" data-tooltip="December 13th, 2008"></div>
<div class="age tooltip" id="age" data-tooltip="December 13th"></div>
<div class="hobbies">
Coding, Listening to Music, Reverse Engineering, Playing Counter-Strike
</div>
@ -42,7 +42,7 @@
<div class="stats cards">
<h2>Coding Stats</h2>
<p>Since January 5th, 2025</p>
<img src="https://github-readme-stats.vercel.app/api/wakatime?username=zyqunix&theme=transparent&hide_border=true&layout=compact">
<img class="stat-img" src="https://github-readme-stats.vercel.app/api/wakatime?username=zyqunix&theme=transparent&hide_border=true&layout=compact">
</div>
<div class="contact cards">
@ -83,6 +83,14 @@
<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/5/5f/Windows_logo_-_2012.svg">
<span class="software-name">Windows 10</span>
</a>
<a class="software-item" href="https://github.com/Floorp-Projects/Floorp" target="_blank">
<img class="image" src="https://raw.githubusercontent.com/Floorp-Projects/Floorp/refs/heads/ESR128/browser/branding/official/content/about-logo.svg">
<span class="software-name">Floorp</span>
</a>
<a class="software-item" href="https://codeberg.org/librewolf" target="_blank">
<img class="image" src="https://librewolf.net/icon.svg">
<span class="software-name">LibreWolf</span>
</a>
<a class="software-item tooltip" data-tooltip="Used to make my Minecraft Mod" href="https://www.jetbrains.com/idea" target="_blank">
<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/9/9c/IntelliJ_IDEA_Icon.svg">
<span class="software-name">IntelliJ IDEA</span>

33
portfolio/index.js
View file

@ -152,4 +152,35 @@ fetch('lang.json')
fetch('skills.json')
.then(response => response.json())
.then(generateSkillCards)
.catch(error => console.error('Error fetching skills.json', error))
.catch(error => console.error('Error fetching skills.json', error));
document.querySelectorAll('.tooltip').forEach(elem => {
elem.addEventListener('mouseenter', () => {
const tooltipText = elem.getAttribute('data-tooltip');
if (!tooltipText) return;
const dummy = document.createElement('div');
dummy.style.position = 'absolute';
dummy.style.visibility = 'hidden';
dummy.style.whiteSpace = 'nowrap';
dummy.style.padding = '5px 10px';
dummy.style.fontSize = '14px';
dummy.innerText = tooltipText;
document.body.appendChild(dummy);
const elemRect = elem.getBoundingClientRect();
const tipRect = dummy.getBoundingClientRect();
const leftEdge = elemRect.left + (elemRect.width / 2) - (tipRect.width / 2);
const rightEdge = elemRect.left + (elemRect.width / 2) + (tipRect.width / 2);
elem.classList.remove('slide-left', 'slide-right');
if (rightEdge > window.innerWidth) {
elem.classList.add('slide-left');
} else if (leftEdge < 0) {
elem.classList.add('slide-right');
}
dummy.remove();
});
});

24
portfolio/style.css
View file

@ -251,6 +251,14 @@ a[class^="software-item tooltip"]::after {
visibility: visible;
}
.tooltip.slide-left::after {
transform: translateX(-100%);
}
.tooltip.slide-right::after {
transform: translateX(0%);
}
@keyframes shimmer {
0% {
background-position: 100% 0;
@ -323,6 +331,10 @@ a[class^="software-item tooltip"]::after {
margin: 10px;
}
.software > .software-item:last-child {
grid-column: 1 / -1;
}
.skill-item:hover,
.software-item:hover {
background-color: #4d4d4d;
@ -422,7 +434,6 @@ a[class^="software-item tooltip"]::after {
@media (max-width: 768px) {
.language-item {
width: 150px;
margin: 10px;
}
@ -460,19 +471,13 @@ a[class^="software-item tooltip"]::after {
height: 120px;
}
#skills-div:not(#skills-div > h2),
.software:not(.software > h2) {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.language-item {
.stat-img {
width: 100%;
}
.skill-item,
.skill-item,
.contact-item,
.software-item {
margin: 0 10px;
padding: 10px;
}
}
@ -515,3 +520,4 @@ div[class="stats cards"] > p {
text-align: left;
color: #AAAAAA;
}