From 0936decd2b911e2439c377826d07aa68f3a5b206 Mon Sep 17 00:00:00 2001 From: zyqunix <117040076+zyqunix@users.noreply.github.com> Date: Fri, 4 Jul 2025 16:39:46 +0200 Subject: [PATCH 1/4] add spacewaves --- spacewaves/index.html | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 spacewaves/index.html diff --git a/spacewaves/index.html b/spacewaves/index.html new file mode 100644 index 0000000..9819822 --- /dev/null +++ b/spacewaves/index.html @@ -0,0 +1,25 @@ + + + + + + Space Waves + + + + + + + From 75cf3558209d8140e5a8dc24ca273e010517fbc2 Mon Sep 17 00:00:00 2001 From: zyqunix <117040076+zyqunix@users.noreply.github.com> Date: Fri, 4 Jul 2025 17:28:15 +0200 Subject: [PATCH 2/4] fix some stuff --- assets/css/style.css | 22 +++++++++-------- assets/js/clouds.js | 57 ++++++++++++++++++++++++++++++++++++++++++++ assets/js/index.js | 33 +++++++++++++++++++++---- assets/js/rain.js | 1 + assets/js/snow.js | 1 + assets/js/stars.js | 1 + assets/js/sun.js | 48 +++++++++++++++++++++++++++++++++++++ index.html | 1 + 8 files changed, 149 insertions(+), 15 deletions(-) create mode 100644 assets/js/clouds.js create mode 100644 assets/js/sun.js diff --git a/assets/css/style.css b/assets/css/style.css index 0eb12cf..b77ee55 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -449,11 +449,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 +498,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); } @@ -786,3 +776,15 @@ br { #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; +} diff --git a/assets/js/clouds.js b/assets/js/clouds.js new file mode 100644 index 0000000..32b7105 --- /dev/null +++ b/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(); diff --git a/assets/js/index.js b/assets/js/index.js index f056c0b..63f8158 100644 --- a/assets/js/index.js +++ b/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("coud")) { + 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; diff --git a/assets/js/rain.js b/assets/js/rain.js index 1e51d6e..1efd37a 100644 --- a/assets/js/rain.js +++ b/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; diff --git a/assets/js/snow.js b/assets/js/snow.js index 4d3e755..e8d9794 100644 --- a/assets/js/snow.js +++ b/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; diff --git a/assets/js/stars.js b/assets/js/stars.js index 6fff4eb..27cc3fa 100644 --- a/assets/js/stars.js +++ b/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++) { diff --git a/assets/js/sun.js b/assets/js/sun.js new file mode 100644 index 0000000..46663fe --- /dev/null +++ b/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); diff --git a/index.html b/index.html index e4a1e63..07794b6 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,7 @@ +
Profile Picture

zyqunix

From 93d598bc9e9ce716028108ffb99c54f6bb99eb04 Mon Sep 17 00:00:00 2001 From: zyqunix <117040076+zyqunix@users.noreply.github.com> Date: Fri, 4 Jul 2025 19:59:59 +0200 Subject: [PATCH 3/4] Update index.js --- assets/js/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/index.js b/assets/js/index.js index 63f8158..cddc16d 100644 --- a/assets/js/index.js +++ b/assets/js/index.js @@ -367,7 +367,7 @@ if (weather.includes("rain")) { deco.src = "/assets/js/snow.js"; document.body.appendChild(deco); -} else if (weather.includes("coud")) { +} else if (weather.includes("cloud")) { deco.src = "/assets/js/clouds.js"; document.body.appendChild(deco); } else { From 754f291fd0267659de75f3fe097ac686e8067934 Mon Sep 17 00:00:00 2001 From: zyqunix Date: Fri, 4 Jul 2025 20:05:59 +0200 Subject: [PATCH 4/4] fix badges width --- assets/css/style.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/assets/css/style.css b/assets/css/style.css index b77ee55..c41bfdb 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -29,6 +29,8 @@ strong { .info { margin-top: 50px; + max-width: 600px; + width: 100%; } #profile-picture { @@ -762,7 +764,7 @@ br { } #badges { - display: flex; + display: inline-flex; padding: 3px; background-color: var(--surface0); border: 2px solid var(--surface1); @@ -771,6 +773,7 @@ br { gap: 3px; border-radius: 8px; margin-bottom: 10px; + max-width: 600px; } #badges > img {