fix badges width

assets/css/style.css

@@ -29,6 +29,8 @@ strong {
 
 .info {
     margin-top: 50px;
+    max-width: 600px;
+    width: 100%;
 }
 
 #profile-picture {
@@ -449,11 +451,6 @@ a[class^="software-item tooltip"]::after {
     .stat-img {
         width: 100%;
     }
-    .skill-item,
-    .contact-item,
-    .software-item {
-        padding: 10px;
-    }
     a > img {
         height: 25px;
     }
@@ -503,11 +500,6 @@ a[class^="software-item tooltip"]::after {
         max-width: 80% !important;
         padding: 10px;
     }
-    .skill-item,
-    .contact-item,
-    .software-item {
-        padding: 8px;
-    }
     a > img {
         transform: scale(0.75);
     }
@@ -772,7 +764,7 @@ br {
 }
 
 #badges {
-	display: flex;
+	display: inline-flex;
 	padding: 3px;
 	background-color: var(--surface0);
 	border: 2px solid var(--surface1);
@@ -781,8 +773,21 @@ br {
 	gap: 3px;
 	border-radius: 8px;
 	margin-bottom: 10px;
+    max-width: 600px;
 }
 
 #badges > img {
 	border-radius: 50%;
 }
+
+#show-deco {
+	position: absolute;
+	top: 20px;
+	right: 20px;
+	background-color: var(--surface0);
+	color: var(--text);
+	border: 2px solid var(--surface1);
+	border-radius: 4px;
+	cursor: pointer;
+	z-index: 10000;
+}

assets/js/clouds.js

@@ -0,0 +1,57 @@
+const cloudContainer = document.createElement("div");
+cloudContainer.style.position = "fixed";
+cloudContainer.style.top = "0";
+cloudContainer.style.left = "0";
+cloudContainer.style.width = "100vw";
+cloudContainer.style.height = "150px";
+cloudContainer.style.pointerEvents = "none";
+cloudContainer.style.zIndex = "9999";
+cloudContainer.style.background = "transparent";
+cloudContainer.style.backdropFilter = "none";
+cloudContainer.id = "deco";
+document.body.appendChild(cloudContainer);
+
+const maxClouds = 20;
+const clouds = [];
+
+const createCloud = () => {
+	if (clouds.length >= maxClouds) return;
+
+	const cloud = document.createElement("div");
+	cloud.style.position = "absolute";
+	const size = Math.random() * 80 + 100;
+	cloud.style.width = `${size}px`;
+	cloud.style.height = `${size * 0.6}px`;
+	cloud.style.background = "rgba(255, 255, 255, 0.3)";
+	cloud.style.borderRadius = `${Math.random() * 51}%`;
+	cloud.style.filter = "blur(10px)";
+	cloud.style.backdropFilter = "blur(10px)";
+
+	cloud.x = -size;
+	cloud.y = Math.random() * 50;
+	cloud.speed = Math.random() * 0.3 + 0.1;
+
+	cloud.style.left = `${cloud.x}px`;
+	cloud.style.top = `${cloud.y}px`;
+
+	clouds.push(cloud);
+	cloudContainer.appendChild(cloud);
+};
+
+setInterval(createCloud, 1000);
+
+function updateClouds() {
+	clouds.forEach((cloud, index) => {
+		cloud.x += cloud.speed;
+		cloud.style.left = `${cloud.x}px`;
+
+		if (cloud.x > window.innerWidth) {
+			cloudContainer.removeChild(cloud);
+			clouds.splice(index, 1);
+		}
+	});
+
+	requestAnimationFrame(updateClouds);
+}
+
+updateClouds();

assets/js/index.js

@@ -282,7 +282,7 @@ async function fetchWeather(location) {
     const query = location ? location : "Munich";
 
     try {
-        const response = await fetch(`https://wttr.in/${query}?format=%t | %C`);
+        const response = await fetch(`https://wttr.in/${query}?format=%t | %C&lang=en`);
         const data = await response.text();
         target.innerText = data;
         return data;
@@ -355,16 +355,39 @@ typeWriter();
 fetchSong();
 
 const weather = await fetchWeather();
+weather.toLowerCase();
 
-if (weather && weather.includes("rain")) {
-	const deco = document.createElement("script");
+let deco = document.createElement("script");
+
+if (weather.includes("rain")) {
 	deco.src = "/assets/js/rain.js";
 	document.body.appendChild(deco);
+
 } else if (weather.includes("snow")) {
-	const deco = document.createElement("script");
 	deco.src = "/assets/js/snow.js";
 	document.body.appendChild(deco);
-} 
+
+} else if (weather.includes("cloud")) {
+	deco.src = "/assets/js/clouds.js";
+	document.body.appendChild(deco);
+} else {
+	deco.src = "/assets/js/sun.js";
+	document.body.appendChild(deco);
+}
+
+let decoShowing = true;
+
+function toggleDeco() {
+	decoShowing = !decoShowing;
+
+	const decoElem = document.querySelector("#deco");
+	decoElem.style.display = `${decoShowing ? "block" : "none"}`;
+
+	const btn = document.querySelector("#show-deco")
+	btn.innerHTML = `${decoShowing ? "Hide Decoration" : "Show Decoration"}`
+}
+
+document.querySelector("#show-deco").addEventListener("click", toggleDeco);
 
 let countdown = 60;
 

assets/js/rain.js

@@ -5,6 +5,7 @@ rainContainer.style.left = "0";
 rainContainer.style.width = "100vw";
 rainContainer.style.height = "100vh";
 rainContainer.style.pointerEvents = "none";
+rainContainer.id = "deco";
 document.body.appendChild(rainContainer);
 
 const maxRaindrops = 100;

assets/js/snow.js

@@ -5,6 +5,7 @@ snowContainer.style.left = "0";
 snowContainer.style.width = "100vw";
 snowContainer.style.height = "100vh";
 snowContainer.style.pointerEvents = "none";
+snowContainer.id = "deco";
 document.body.appendChild(snowContainer);
 
 const maxSnowflakes = 60;

assets/js/stars.js

@@ -7,6 +7,7 @@ container.style.height = "100vh";
 container.style.pointerEvents = "none";
 container.style.overflow = "hidden";
 container.style.zIndex = "9999";
+container.id = "deco";
 document.body.appendChild(container);
 
 for (let i = 0; i < 60; i++) {

assets/js/sun.js

@@ -0,0 +1,48 @@
+const sun = document.createElement("div");
+sun.style.position = "fixed";
+sun.style.top = "50px";
+sun.style.left = "50px";
+sun.style.width = "100px";
+sun.style.height = "100px";
+sun.style.borderRadius = "50%";
+sun.style.boxShadow = "0 0 30px 10px rgba(255, 223, 0, 0.7)";
+sun.style.pointerEvents = "none";
+sun.style.zIndex = "10000";
+sun.id = "deco";
+document.body.appendChild(sun);
+
+
+
+let angle = 0;
+
+function updateSunColor() {
+  const hour = new Date().getHours();
+  let colors;
+  let glowColor;
+
+  if (hour >= 6 && hour < 12) {
+    colors = ['#FFDF00', '#FFF8B0', '#FFDF00'];
+    glowColor = 'rgba(255, 223, 0, 0.6)';
+  } else if (hour >= 12 && hour < 18) {
+    colors = ['#FF8C00', '#FFC271', '#FF8C00'];
+    glowColor = 'rgba(255, 140, 0, 0.6)';
+  } else if (hour >= 18 && hour < 20) {
+    colors = ['#FF4500', '#FF8866', '#FF4500'];
+    glowColor = 'rgba(255, 69, 0, 0.6)';
+  } else {
+    colors = ['#A9CCE3', '#D6E6F2', '#A9CCE3'];
+    glowColor = 'rgba(169, 204, 227, 0.4)';
+  }
+
+  angle = (angle + 0.4) % 360;
+
+  sun.style.background = `radial-gradient(circle at center, ${colors[1]} 0%, ${colors[0]} 60%, ${colors[2]} 100%)`;
+  sun.style.transform = `rotate(${angle}deg)`;
+  sun.style.boxShadow = `0 0 40px 15px ${glowColor}`;
+}
+
+setInterval(updateSunColor, 30);
+
+
+updateSunColor();
+setInterval(updateSunColor, 60 * 1000);

index.html

@@ -11,6 +11,7 @@
     	<script src="https://app.rybbit.io/api/script.js" data-site-id="1005" defer ></script>
     </head>
     <body>
+		<button id="show-deco">Hide Decoration</button>
         <div class="info" id="Info">
             <img alt="Profile Picture" id="profile-picture" src="https://cdn.discordapp.com/embed/avatars/0.png"/>
 			<h1 class="name"><a target="_blank" id="username">zyqunix</a></h1>

spacewaves/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Space Waves</title>
+
+	<style>
+		body {
+			height: 100vh;
+			width: 100vw;
+			margin: 0;
+		}
+		iframe {
+			height: 100%;
+			width: 100%;
+			margin: 0;
+			border: none;
+		}
+	</style>
+</head>
+<body>
+	<iframe role="none" sandbox="allow-scripts allow-same-origin allow-pointer-lock allow-popups allow-forms allow-top-navigation" src="https://crazygames.cdn.msnfun.com/9nm5764dbppg/v6/index.html?msstart_sdk_init=eyJwYXJlbnRPcmlnaW4iOiJodHRwczovL3d3dy5tc24uY29tIiwiY2xpZW50SWQiOiIzNzgzQzgzQTMxOUY2N0JGMzM4N0RFMjUzMEZDNjZFQiIsImxvY2FsZSI6ImVuLXhsIiwiZW50cnlQb2ludElkIjoiIn0"></iframe>	
+</body>
+</html>