Zachery Aaron Shores-Chmielewski
d10f539e06
Fractal animation (Newton's fractal) now animates smoothly. Rebuilds now can be targeted based on which module was changed.
125 lines
2.9 KiB
HTML
Executable file
125 lines
2.9 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>Zach's page</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: -1;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
header h2 {
|
|
font-weight: 300;
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
text-align: center;
|
|
color: #fff;
|
|
margin: 0 0 1.5rem 0;
|
|
font-size: 1.6rem;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.nav-links a {
|
|
text-decoration: none;
|
|
color: rgba(255, 255, 255, 0.75);
|
|
padding: 0.5rem 1.5rem;
|
|
display: inline-block;
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: 8px;
|
|
font-size: 0.85rem;
|
|
font-weight: 400;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
transition: all 250ms ease;
|
|
}
|
|
|
|
.nav-links a:hover {
|
|
color: #fff;
|
|
border-color: rgba(255, 255, 255, 0.2);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
@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">
|
|
<header>
|
|
<h2>Zachery Aaron Shores-Chmielewski</h2>
|
|
</header>
|
|
|
|
<nav>
|
|
<div class="nav-links">
|
|
<a href="./who">Who</a>
|
|
<a href="./contact">Contact</a>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/routes/root/fractal-gl.js"></script>
|
|
<script>initFractal('fractal-canvas');</script>
|
|
</body>
|
|
</html>
|