fix rain,snow,stars, activity title

public/css/index.css

@@ -350,6 +350,14 @@ ul {
 	margin: 0;
 }
 
+.activities-section .activity-block-header {
+	margin: 1rem 0 .5rem;
+	font-size: 2rem;
+	font-weight: 600;
+
+	text-align: center;
+}
+
 .activities {
 	display: flex;
 	flex-direction: column;

public/js/index.js

@@ -501,7 +501,7 @@ async function updatePresence(data) {
 		});
 
 	const activityList = document.querySelector(".activities");
-	const activitiesTitle = document.querySelector(".activity-header");
+	const activitiesTitle = document.querySelector(".activity-block-header");
 
 	if (activityList && activitiesTitle) {
 		if (filtered?.length) {

public/js/rain.js

@@ -25,24 +25,29 @@ const getRaindropColor = () => {
 
 const createRaindrop = () => {
 	if (raindrops.length >= maxRaindrops) {
-		const oldestRaindrop = raindrops.shift();
+		const oldest = raindrops.shift();
-		rainContainer.removeChild(oldestRaindrop);
+		rainContainer.removeChild(oldest);
 	}
 
 	const raindrop = document.createElement("div");
 	raindrop.classList.add("raindrop");
 	raindrop.style.position = "absolute";
+	const height = Math.random() * 10 + 10;
 	raindrop.style.width = "2px";
-	raindrop.style.height = `${Math.random() * 10 + 10}px`;
+	raindrop.style.height = `${height}px`;
 	raindrop.style.background = getRaindropColor();
 	raindrop.style.borderRadius = "1px";
-	raindrop.style.left = `${Math.random() * window.innerWidth}px`;
-	raindrop.style.top = `-${raindrop.style.height}`;
 	raindrop.style.opacity = Math.random() * 0.5 + 0.3;
+
+	raindrop.x = Math.random() * window.innerWidth;
+	raindrop.y = -height;
 	raindrop.speed = Math.random() * 6 + 4;
 	raindrop.directionX = (Math.random() - 0.5) * 0.2;
 	raindrop.directionY = Math.random() * 0.5 + 0.8;
 
+	raindrop.style.left = `${raindrop.x}px`;
+	raindrop.style.top = `${raindrop.y}px`;
+
 	raindrops.push(raindrop);
 	rainContainer.appendChild(raindrop);
 };
@@ -51,23 +56,29 @@ setInterval(createRaindrop, 50);
 
 function updateRaindrops() {
 	raindrops.forEach((raindrop, index) => {
-		const rect = raindrop.getBoundingClientRect();
+		const height = Number.parseFloat(raindrop.style.height);
 
-		raindrop.style.left = `${rect.left + raindrop.directionX * raindrop.speed}px`;
+		raindrop.x += raindrop.directionX * raindrop.speed;
-		raindrop.style.top = `${rect.top + raindrop.directionY * raindrop.speed}px`;
+		raindrop.y += raindrop.directionY * raindrop.speed;
 
-		if (rect.top + rect.height >= window.innerHeight) {
+		raindrop.style.left = `${raindrop.x}px`;
+		raindrop.style.top = `${raindrop.y}px`;
+
+		if (raindrop.y > window.innerHeight) {
 			rainContainer.removeChild(raindrop);
 			raindrops.splice(index, 1);
+			return;
 		}
 
 		if (
-			rect.left > window.innerWidth ||
+			raindrop.x > window.innerWidth ||
-			rect.top > window.innerHeight ||
+			raindrop.y > window.innerHeight ||
-			rect.left < 0
+			raindrop.x < 0
 		) {
-			raindrop.style.left = `${Math.random() * window.innerWidth}px`;
+			raindrop.x = Math.random() * window.innerWidth;
-			raindrop.style.top = `-${raindrop.style.height}`;
+			raindrop.y = -height;
+			raindrop.style.left = `${raindrop.x}px`;
+			raindrop.style.top = `${raindrop.y}px`;
 		}
 	});
 

public/js/snow.js

@@ -25,17 +25,22 @@ const createSnowflake = () => {
 	const snowflake = document.createElement("div");
 	snowflake.classList.add("snowflake");
 	snowflake.style.position = "absolute";
-	snowflake.style.width = `${Math.random() * 3 + 2}px`;
+	const size = Math.random() * 3 + 2;
-	snowflake.style.height = snowflake.style.width;
+	snowflake.style.width = `${size}px`;
+	snowflake.style.height = `${size}px`;
 	snowflake.style.background = "white";
 	snowflake.style.borderRadius = "50%";
 	snowflake.style.opacity = Math.random();
-	snowflake.style.left = `${Math.random() * window.innerWidth}px`;
+
-	snowflake.style.top = `-${snowflake.style.height}`;
+	snowflake.x = Math.random() * window.innerWidth;
+	snowflake.y = -size;
 	snowflake.speed = Math.random() * 3 + 2;
 	snowflake.directionX = (Math.random() - 0.5) * 0.5;
 	snowflake.directionY = Math.random() * 0.5 + 0.5;
 
+	snowflake.style.left = `${snowflake.x}px`;
+	snowflake.style.top = `${snowflake.y}px`;
+
 	snowflakes.push(snowflake);
 	snowContainer.appendChild(snowflake);
 };
@@ -44,10 +49,12 @@ setInterval(createSnowflake, 80);
 
 function updateSnowflakes() {
 	snowflakes.forEach((snowflake, index) => {
-		const rect = snowflake.getBoundingClientRect();
+		const size = Number.parseFloat(snowflake.style.width);
+		const centerX = snowflake.x + size / 2;
+		const centerY = snowflake.y + size / 2;
 
-		const dx = rect.left + rect.width / 2 - mouse.x;
+		const dx = centerX - mouse.x;
-		const dy = rect.top + rect.height / 2 - mouse.y;
+		const dy = centerY - mouse.y;
 		const distance = Math.sqrt(dx * dx + dy * dy);
 
 		if (distance < 30) {
@@ -58,21 +65,27 @@ function updateSnowflakes() {
 			snowflake.directionY += (Math.random() - 0.5) * 0.01;
 		}
 
-		snowflake.style.left = `${rect.left + snowflake.directionX * snowflake.speed}px`;
+		snowflake.x += snowflake.directionX * snowflake.speed;
-		snowflake.style.top = `${rect.top + snowflake.directionY * snowflake.speed}px`;
+		snowflake.y += snowflake.directionY * snowflake.speed;
 
-		if (rect.top + rect.height >= window.innerHeight) {
+		snowflake.style.left = `${snowflake.x}px`;
+		snowflake.style.top = `${snowflake.y}px`;
+
+		if (snowflake.y > window.innerHeight) {
 			snowContainer.removeChild(snowflake);
 			snowflakes.splice(index, 1);
+			return;
 		}
 
 		if (
-			rect.left > window.innerWidth ||
+			snowflake.x > window.innerWidth ||
-			rect.top > window.innerHeight ||
+			snowflake.y > window.innerHeight ||
-			rect.left < 0
+			snowflake.x < 0
 		) {
-			snowflake.style.left = `${Math.random() * window.innerWidth}px`;
+			snowflake.x = Math.random() * window.innerWidth;
-			snowflake.style.top = `-${snowflake.style.height}`;
+			snowflake.y = -size;
+			snowflake.style.left = `${snowflake.x}px`;
+			snowflake.style.top = `${snowflake.y}px`;
 		}
 	});
 

public/js/stars.js

@@ -11,48 +11,46 @@ document.body.appendChild(container);
 
 for (let i = 0; i < 60; i++) {
 	const star = document.createElement("div");
+	star.className = "star";
 	const size = Math.random() * 2 + 1;
-	star.style.position = "absolute";
 	star.style.width = `${size}px`;
 	star.style.height = `${size}px`;
-	star.style.background = "white";
-	star.style.borderRadius = "50%";
 	star.style.opacity = Math.random();
 	star.style.top = `${Math.random() * 100}vh`;
 	star.style.left = `${Math.random() * 100}vw`;
-	star.style.animation = `twinkle ${Math.random() * 3 + 2}s infinite alternate ease-in-out`;
+	star.style.animationDuration = `${Math.random() * 3 + 2}s`;
 	container.appendChild(star);
 }
 
 function createShootingStar() {
 	const star = document.createElement("div");
-	star.classList.add("shooting-star");
+	star.className = "shooting-star";
 
-	let x = Math.random() * window.innerWidth * 0.8;
+	star.x = Math.random() * window.innerWidth * 0.8;
-	let y = Math.random() * window.innerHeight * 0.3;
+	star.y = Math.random() * window.innerHeight * 0.3;
 	const angle = (Math.random() * Math.PI) / 6 + Math.PI / 8;
 	const speed = 10;
 	const totalFrames = 60;
+	let frame = 0;
 
 	const deg = angle * (180 / Math.PI);
-	star.style.left = `${x}px`;
+	star.style.left = `${star.x}px`;
-	star.style.top = `${y}px`;
+	star.style.top = `${star.y}px`;
 	star.style.transform = `rotate(${deg}deg)`;
 
 	container.appendChild(star);
 
-	let frame = 0;
 	function animate() {
-		x += Math.cos(angle) * speed;
+		star.x += Math.cos(angle) * speed;
-		y += Math.sin(angle) * speed;
+		star.y += Math.sin(angle) * speed;
-		star.style.left = `${x}px`;
+		star.style.left = `${star.x}px`;
-		star.style.top = `${y}px`;
+		star.style.top = `${star.y}px`;
 		star.style.opacity = `${1 - frame / totalFrames}`;
 
 		frame++;
 		if (frame < totalFrames) {
 			requestAnimationFrame(animate);
-		} else {
+		} else if (star.parentNode === container) {
 			container.removeChild(star);
 		}
 	}

src/views/index.html

@@ -53,7 +53,7 @@
 			<section id="badges" class="badges hidden" aria-label="User Badges"></section>
 
 			<section aria-label="Discord Activities" class="activities-section">
-				<h2 class="activity-header hidden">Activities</h2>
+				<h2 class="activity-block-header hidden">Activities</h2>
 				<ul class="activities"></ul>
 			</section>