diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 73 |
1 files changed, 12 insertions, 61 deletions
@@ -10,85 +10,36 @@ body { align-items: center; } - + .content { width: 47ch; + z-index: 2; } - - h1 { - text-align: center; - } - - #bg { - position: fixed; - inset: 0; - pointer-events: none; - } - - .star { - position: absolute; - width: 3px; - height: 3px; - border-radius: 50%; - background: white; - box-shadow: 0 0 4px white; - } - + .cards { display: flex; flex-direction: row; justify-content: space-around; width: 100%; } - + .card { font-family: 'Roboto Mono'; - color: white; + font-weight: 450; + color: #e6e6e6; text-decoration: none; transition: color 0.1s ease; - } - - .card:hover { - color: #4DA3FF; + + &:hover { + color: #4DA3FF; + } } </style> + <script src="stars.js"></script> </head> <body> - <div id="bg"></div> - <script> - const bg = document.querySelector("#bg"); - for (let i = 0; i < 100; i++) { - const star = document.createElement("div"); - star.classList.add("star"); - - star.x = Math.random() * window.innerWidth; - star.y = Math.random() * window.innerHeight; - - star.vx = (Math.random() - 0.5) * 0.1; - star.vy = (Math.random() - 0.5) * 0.1; - - star.style.left = `${star.x}px`; - star.style.top = `${star.y}px`; - - bg.appendChild(star); - } - - function animate() { - for (const s of bg.children) { - s.x += s.vx; - s.y += s.vy; - - s.style.left = `${s.x}px`; - s.style.top = `${s.y}px`; - } - - requestAnimationFrame(animate); - } - - animate(); - </script> <div class="content"> - <h1>Collin Williams</h1> + <h1 style="text-align: center;">Collin Williams</h1> <div class="cards"> <a class="card" href="https://bsky.app/profile/cwilliams1221.bsky.social">Bluesky</a> <a class="card" href="https://tangled.org/cwilliams1221.bsky.social">Tangled</a> |