SteelTech/profilePage
1
1
Fork 0
forked from creations/profilePage
Code Pull requests Activity

add css kv var, move away from ssr ( multiple queries ), remove colors kv var, add option to disable logging per route

Browse source
This commit is contained in:
creations 2025-04-25 21:20:08 -04:00
parent bd680ab607
commit 3b6c68c25d
Signed by: creations
GPG key ID: 8F553AA4320FC711
18 changed files with 571 additions and 667 deletions
Download patch file Download diff file Expand all files Collapse all files

112
public/js/stars.js
View file

@ -1,67 +1,65 @@
document.addEventListener("DOMContentLoaded", () => {
const container = document.createElement("div");
container.style.position = "fixed";
container.style.top = "0";
container.style.left = "0";
container.style.width = "100vw";
container.style.height = "100vh";
container.style.pointerEvents = "none";
container.style.overflow = "hidden";
container.style.zIndex = "9999";
document.body.appendChild(container);
const container = document.createElement("div");
container.style.position = "fixed";
container.style.top = "0";
container.style.left = "0";
container.style.width = "100vw";
container.style.height = "100vh";
container.style.pointerEvents = "none";
container.style.overflow = "hidden";
container.style.zIndex = "9999";
document.body.appendChild(container);
for (let i = 0; i < 60; i++) {
const star = document.createElement("div");
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`;
container.appendChild(star);
}
for (let i = 0; i < 60; i++) {
const star = document.createElement("div");
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`;
container.appendChild(star);
}
function createShootingStar() {
const star = document.createElement("div");
star.classList.add("shooting-star");
function createShootingStar() {
const star = document.createElement("div");
star.classList.add("shooting-star");
let x = Math.random() * window.innerWidth * 0.8;
let y = Math.random() * window.innerHeight * 0.3;
const angle = (Math.random() * Math.PI) / 6 + Math.PI / 8;
const speed = 10;
const totalFrames = 60;
let x = Math.random() * window.innerWidth * 0.8;
let y = Math.random() * window.innerHeight * 0.3;
const angle = (Math.random() * Math.PI) / 6 + Math.PI / 8;
const speed = 10;
const totalFrames = 60;
const deg = angle * (180 / Math.PI);
const deg = angle * (180 / Math.PI);
star.style.left = `${x}px`;
star.style.top = `${y}px`;
star.style.transform = `rotate(${deg}deg)`;
container.appendChild(star);
let frame = 0;
function animate() {
x += Math.cos(angle) * speed;
y += Math.sin(angle) * speed;
star.style.left = `${x}px`;
star.style.top = `${y}px`;
star.style.transform = `rotate(${deg}deg)`;
star.style.opacity = `${1 - frame / totalFrames}`;
container.appendChild(star);
let frame = 0;
function animate() {
x += Math.cos(angle) * speed;
y += Math.sin(angle) * speed;
star.style.left = `${x}px`;
star.style.top = `${y}px`;
star.style.opacity = `${1 - frame / totalFrames}`;
frame++;
if (frame < totalFrames) {
requestAnimationFrame(animate);
} else {
container.removeChild(star);
}
frame++;
if (frame < totalFrames) {
requestAnimationFrame(animate);
} else {
container.removeChild(star);
}
animate();
}
setInterval(() => {
if (Math.random() < 0.3) createShootingStar();
}, 1000);
});
animate();
}
setInterval(() => {
if (Math.random() < 0.3) createShootingStar();
}, 1000);