even more improvements
This commit is contained in:
parent
6aa3fbd265
commit
92237f747c
@ -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;
|
||||||
|
@ -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;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user