Zachery Aaron Shores-Chmielewski
d10f539e06
Fractal animation (Newton's fractal) now animates smoothly. Rebuilds now can be targeted based on which module was changed.
114 lines
2.5 KiB
HTML
Executable file
114 lines
2.5 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Who</title>
|
|
<style>
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
background: #060a10;
|
|
}
|
|
|
|
#fractal-canvas {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 0;
|
|
}
|
|
|
|
.content-overlay {
|
|
position: relative;
|
|
z-index: 1;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
animation: fadeInUp 800ms ease 300ms both;
|
|
}
|
|
|
|
.glass-card {
|
|
background: rgba(10, 14, 20, 0.55);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: 16px;
|
|
padding: 2.5rem 3rem;
|
|
text-align: center;
|
|
min-width: 250px;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.glass-card h2 {
|
|
color: #fff;
|
|
margin: 0 0 1rem 0;
|
|
font-weight: 300;
|
|
font-size: 1.6rem;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
.glass-card p {
|
|
margin: 0.5rem 0;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.back-link {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.back-link a {
|
|
text-decoration: none;
|
|
color: rgba(255, 255, 255, 0.4);
|
|
font-size: 0.8rem;
|
|
letter-spacing: 0.04em;
|
|
transition: color 250ms ease;
|
|
}
|
|
|
|
.back-link a:hover {
|
|
color: rgba(255, 255, 255, 0.7);
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(12px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="fractal-canvas"></canvas>
|
|
|
|
<div class="content-overlay">
|
|
<div class="glass-card">
|
|
<h2>Who</h2>
|
|
<p>No one in particular :)</p>
|
|
<p>I'll write more later...</p>
|
|
</div>
|
|
|
|
<nav class="back-link">
|
|
<a href="/">back to home</a>
|
|
</nav>
|
|
</div>
|
|
|
|
<script src="/routes/root/fractal-gl.js"></script>
|
|
<script>initFractal('fractal-canvas');</script>
|
|
</body>
|
|
</html>
|