diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 99 |
1 files changed, 99 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..5a7ac62 --- /dev/null +++ b/index.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Collin Williams</title> + + <link rel="stylesheet" href="style.css"> + <style> + body { + align-items: center; + } + + .content { + width: 47ch; + } + + 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; + text-decoration: none; + transition: color 0.1s ease; + } + + .card:hover { + color: #4DA3FF; + } + </style> + </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> + <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> + <a class="card" href="./writing.html">Writing</a> + </div> + </div> + </body> +</html> |