even more improvements

This commit is contained in:
Ludwig Lehnert 2025-04-14 22:20:49 +02:00
parent 6aa3fbd265
commit 92237f747c
2 changed files with 21 additions and 11 deletions

View File

@ -2,8 +2,8 @@
<style> <style>
:global(html, body) { :global(html, body) {
width: 100%; min-width: 100%;
height: 100%; min-height: 100%;
} }
:global(*) { :global(*) {
@ -13,7 +13,12 @@
} }
:global(body) { :global(body) {
background: linear-gradient(135deg, #1e1e2f, #252547); background: linear-gradient(
135deg,
#1e1e2f 0,
#252547 100vh,
#252547 100%
);
} }
:global(main) { :global(main) {
@ -21,7 +26,7 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
min-height: 100vh; min-height: 80vh;
color: white; color: white;
font-family: "Inter", sans-serif; font-family: "Inter", sans-serif;
text-align: center; text-align: center;

View File

@ -24,9 +24,9 @@
star.classList.add("star"); star.classList.add("star");
star.style.width = `${sizes[i]}vw`; star.style.width = `${sizes[i]}vw`;
star.style.position = "fixed"; star.style.position = "absolute";
star.style.left = `${100 * x}%`; star.style.left = `${100 * x}vw`;
star.style.top = `${100 * y}%`; star.style.top = `${100 * y}vh`;
return star; return star;
}); });
@ -56,7 +56,7 @@
if (Math.random() < 0.05) lidx = chooseRandom(indices); if (Math.random() < 0.05) lidx = chooseRandom(indices);
let iter = 0; let iter = 0;
while (iter++ < 1000) { while (iter++ < 300) {
const nidx = chooseRandom(indices); const nidx = chooseRandom(indices);
if (lidx === nidx) continue; if (lidx === nidx) continue;
@ -77,8 +77,11 @@
); );
lidx = nidx; lidx = nidx;
break; return;
} }
// nothing found -> choose next random
lidx = chooseRandom(indices);
}, 650); }, 650);
document.getElementById("stars")?.append(...stars); document.getElementById("stars")?.append(...stars);
@ -157,10 +160,10 @@
<svg <svg
id="stars-lines" id="stars-lines"
aria-hidden="true" aria-hidden="true"
style="position: fixed; left: 0; top: 0; height: 100%; width: 100%; z-index: 0;" style="position: absolute; left: 0; top: 0; height: 100%; width: 100%; z-index: 0;"
></svg> ></svg>
<div id="stars" style="position: fixed; left: 0; top: 0; z-index: 2;"></div> <div id="stars" style="position: absolute; left: 0; top: 0; z-index: 2;"></div>
<main style="position: relative; z-index: 1;"> <main style="position: relative; z-index: 1;">
<h1>Hey, I'm Ludwig 🚀</h1> <h1>Hey, I'm Ludwig 🚀</h1>
@ -190,6 +193,8 @@
</div> </div>
</main> </main>
<!-- <div style="height: 1000px;"></div> -->
<style> <style>
h1 { h1 {
font-size: 3.5rem; font-size: 3.5rem;