jwright
2d4b6ea097
Outcome-led hero, about, grouped skills, experience summary, featured projects + /projects index, static contact, SEO/OG, dark/light theme. Dockerfile + nginx config + build script for homelab deploy.
68 lines
1.8 KiB
Plaintext
68 lines
1.8 KiB
Plaintext
---
|
|
// Cheap, CSS-only topology motif: a faint grid + slow-drifting accent glows.
|
|
// No canvas, no WebGL, no JS. Fully disabled under prefers-reduced-motion.
|
|
---
|
|
|
|
<div class="bg" aria-hidden="true">
|
|
<div class="bg__grid"></div>
|
|
<div class="bg__glow bg__glow--a"></div>
|
|
<div class="bg__glow bg__glow--b"></div>
|
|
</div>
|
|
|
|
<style>
|
|
.bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
}
|
|
.bg__grid {
|
|
position: absolute;
|
|
inset: -2px;
|
|
background-image:
|
|
linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
|
|
linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
|
|
background-size: 46px 46px;
|
|
/* Fade the grid out toward the edges so it reads as a motif, not a table. */
|
|
mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
|
|
-webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
|
|
}
|
|
.bg__glow {
|
|
position: absolute;
|
|
width: 46rem;
|
|
height: 46rem;
|
|
border-radius: 50%;
|
|
filter: blur(60px);
|
|
opacity: 0.5;
|
|
}
|
|
.bg__glow--a {
|
|
top: -22rem;
|
|
left: -10rem;
|
|
background: radial-gradient(circle, var(--accent-glow), transparent 62%);
|
|
animation: drift-a 26s var(--ease) infinite alternate;
|
|
}
|
|
.bg__glow--b {
|
|
top: -16rem;
|
|
right: -14rem;
|
|
background: radial-gradient(circle, var(--accent-glow), transparent 65%);
|
|
opacity: 0.35;
|
|
animation: drift-b 32s var(--ease) infinite alternate;
|
|
}
|
|
@keyframes drift-a {
|
|
to {
|
|
transform: translate(6rem, 4rem) scale(1.12);
|
|
}
|
|
}
|
|
@keyframes drift-b {
|
|
to {
|
|
transform: translate(-5rem, 3rem) scale(1.08);
|
|
}
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.bg__glow {
|
|
animation: none;
|
|
}
|
|
}
|
|
</style>
|