diff --git a/assets/css/style.css b/assets/css/style.css index c41bfdb..0eb12cf 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -29,8 +29,6 @@ strong { .info { margin-top: 50px; - max-width: 600px; - width: 100%; } #profile-picture { @@ -451,6 +449,11 @@ a[class^="software-item tooltip"]::after { .stat-img { width: 100%; } + .skill-item, + .contact-item, + .software-item { + padding: 10px; + } a > img { height: 25px; } @@ -500,6 +503,11 @@ 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); } @@ -764,7 +772,7 @@ br { } #badges { - display: inline-flex; + display: flex; padding: 3px; background-color: var(--surface0); border: 2px solid var(--surface1); @@ -773,21 +781,8 @@ 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; -} diff --git a/assets/js/clouds.js b/assets/js/clouds.js deleted file mode 100644 index 32b7105..0000000 --- a/assets/js/clouds.js +++ /dev/null @@ -1,57 +0,0 @@ -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 cddc16d..f056c0b 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&lang=en`); + const response = await fetch(`https://wttr.in/${query}?format=%t | %C`); const data = await response.text(); target.innerText = data; return data; @@ -355,39 +355,16 @@ typeWriter(); fetchSong(); const weather = await fetchWeather(); -weather.toLowerCase(); -let deco = document.createElement("script"); - -if (weather.includes("rain")) { +if (weather && weather.includes("rain")) { + const deco = document.createElement("script"); 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; diff --git a/assets/js/rain.js b/assets/js/rain.js index 1efd37a..1e51d6e 100644 --- a/assets/js/rain.js +++ b/assets/js/rain.js @@ -5,7 +5,6 @@ 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 e8d9794..4d3e755 100644 --- a/assets/js/snow.js +++ b/assets/js/snow.js @@ -5,7 +5,6 @@ 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 27cc3fa..6fff4eb 100644 --- a/assets/js/stars.js +++ b/assets/js/stars.js @@ -7,7 +7,6 @@ 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 deleted file mode 100644 index 46663fe..0000000 --- a/assets/js/sun.js +++ /dev/null @@ -1,48 +0,0 @@ -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 07794b6..e4a1e63 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,6 @@
-