change some stuff

portfolio/index.html

@@ -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>

portfolio/index.js

@@ -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();
+    });
+});

portfolio/style.css

@@ -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),
+	.stat-img {
-	.software:not(.software > h2) {
-        grid-template-columns: repeat(1, minmax(0, 1fr));
-    }
-
-    .language-item {
         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;
 }
+