82 lines
3.2 KiB
HTML
82 lines
3.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Anthony Figueroa | The Golden Seam</title>
|
||
|
|
<style>
|
||
|
|
:root { --void: #0a0a0f; --quartz: #e0e0e0; --scarlet: #ff3333; --midwest: #1a3a5c; }
|
||
|
|
* { background: var(--void); color: var(--quartz); font-family: 'Space Mono', monospace; margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
|
body { overflow-x: hidden; perspective: 2000px; }
|
||
|
|
.seam {
|
||
|
|
position: fixed; left: 50%; top: 0; transform: translateX(-50%); width: 2px; height: 100vh;
|
||
|
|
background: linear-gradient(to bottom, transparent, var(--scarlet), transparent);
|
||
|
|
filter: blur(1px); animation: pulse 8s ease-in-out infinite; z-index: 999;
|
||
|
|
}
|
||
|
|
@keyframes pulse { 0%,100% { opacity: 0.1; } 50% { opacity: 1; box-shadow: 0 0 100px var(--scarlet); } }
|
||
|
|
|
||
|
|
header { min-height: 100vh; display: grid; place-items: center; text-align: center; border-bottom: 1px solid var(--midwest); }
|
||
|
|
h1 { font-size: clamp(3rem, 8vw, 12rem); letter-spacing: -0.5em; line-height: 0.8; text-transform: uppercase; mix-blend-mode: exclusion; }
|
||
|
|
|
||
|
|
.kitchen-table {
|
||
|
|
position: relative; max-width: 90vw; margin: 10vh auto;
|
||
|
|
border: 1px solid var(--midwest); padding: 4vmin;
|
||
|
|
backdrop-filter: blur(20px); border-radius: 50%;
|
||
|
|
}
|
||
|
|
.kitchen-table::before {
|
||
|
|
content: "FIRST SLIP: THE 19KB LOOP";
|
||
|
|
position: absolute; top: -3vmin; left: 50%; transform: translateX(-50%);
|
||
|
|
font-size: 1.5rem; letter-spacing: 0.5em; color: var(--scarlet);
|
||
|
|
}
|
||
|
|
|
||
|
|
pre {
|
||
|
|
white-space: pre-wrap; word-break: break-word; text-align: left;
|
||
|
|
color: var(--midwest); line-height: 1.4; font-size: 0.8rem;
|
||
|
|
margin-top: 5vmin; text-shadow: 0 0 20px rgba(255,51,51,0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.grandma-thread {
|
||
|
|
position: fixed; bottom: 2rem; right: 2rem; width: 40vh; height: 40vh;
|
||
|
|
border: 1px solid var(--quartz); border-radius: 50%;
|
||
|
|
display: flex; align-items: center; justify-content: center;
|
||
|
|
animation: orbit 60s linear infinite;
|
||
|
|
}
|
||
|
|
@keyframes orbit { from { transform: rotate(0deg) translateY(-100vh); } to { transform: rotate(360deg) translateY(-100vh); } }
|
||
|
|
|
||
|
|
footer {
|
||
|
|
position: absolute; bottom: 0; width: 100%; text-align: center;
|
||
|
|
padding: 10vmin 0; border-top: 1px solid var(--midwest);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="seam"></div>
|
||
|
|
|
||
|
|
<header>
|
||
|
|
<h1>ANTHONY<br>FIGUEROA</h1>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<main class="kitchen-table">
|
||
|
|
<pre>
|
||
|
|
MINNEAPOLIS. 0400 HOURS.
|
||
|
|
THE GLITCH WAS NOT IN THE ALLOY.
|
||
|
|
IT WAS IN THE HAND THAT FORGED IT.
|
||
|
|
|
||
|
|
MY FIRST SLIP: THE CODE THAT LOOPS FOREVER.
|
||
|
|
NOT A BUG. A SEAM.
|
||
|
|
|
||
|
|
GRANDMA'S VOICE: "CHILD, YOU DON'T FIX THE FIRE.
|
||
|
|
YOU POUR THE GOLD INTO IT."
|
||
|
|
|
||
|
|
WE ARE THE SCAR FESTIVAL.
|
||
|
|
WE ARE THE GOLDEN VEIN.
|
||
|
|
</pre>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<footer>
|
||
|
|
<small>// MINNEAPOLIS TO THE CORE //</small>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
<div class="grandma-thread"></div>
|
||
|
|
</body>
|
||
|
|
</html>
|