377 lines
13 KiB
HTML
377 lines
13 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>The Residue Index | Tammera Storey</title>
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--bg-deep: #0a0a0c;
|
||
|
|
--bg-card: #121216;
|
||
|
|
--text-primary: #e0e0e0;
|
||
|
|
--accent-neon: #00ff9d;
|
||
|
|
--accent-rust: #d45d00;
|
||
|
|
--accent-teal: #00bfa5;
|
||
|
|
--font-mono: 'Courier New', Courier, monospace;
|
||
|
|
--font-display: 'Helvetica Neue', Arial, sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
|
|
||
|
|
body {
|
||
|
|
background-color: var(--bg-deep);
|
||
|
|
color: var(--text-primary);
|
||
|
|
font-family: var(--font-mono);
|
||
|
|
line-height: 1.6;
|
||
|
|
overflow-x: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero {
|
||
|
|
min-height: 90vh;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
position: relative;
|
||
|
|
background-image: linear-gradient(rgba(10,10,12,0.8), rgba(10,10,12,0.9)),
|
||
|
|
url('https://images.pexels.com/photos/38039468/pexels-photo-38039468.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=1200&w=1920');
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
background-attachment: fixed;
|
||
|
|
padding: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
width: 1px;
|
||
|
|
height: 100%;
|
||
|
|
left: 50%;
|
||
|
|
background: repeating-linear-gradient(to bottom, var(--accent-neon) 0, transparent 2px);
|
||
|
|
opacity: 0.3;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
font-family: var(--font-display);
|
||
|
|
font-size: clamp(3rem, 8vw, 6rem);
|
||
|
|
font-weight: 900;
|
||
|
|
letter-spacing: -0.05em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
background: linear-gradient(180deg, var(--accent-neon), var(--accent-teal));
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
background-clip: text;
|
||
|
|
color: transparent;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
text-align: center;
|
||
|
|
z-index: 2;
|
||
|
|
}
|
||
|
|
|
||
|
|
.subtitle {
|
||
|
|
font-size: 1.2rem;
|
||
|
|
max-width: 600px;
|
||
|
|
text-align: center;
|
||
|
|
color: var(--accent-teal);
|
||
|
|
z-index: 2;
|
||
|
|
border-left: 2px solid var(--accent-rust);
|
||
|
|
padding-left: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-dock {
|
||
|
|
position: sticky;
|
||
|
|
top: 0;
|
||
|
|
background: rgba(10,10,12,0.95);
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
border-bottom: 1px solid var(--accent-teal);
|
||
|
|
padding: 1rem 2rem;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
z-index: 100;
|
||
|
|
}
|
||
|
|
|
||
|
|
.logo {
|
||
|
|
font-family: var(--font-display);
|
||
|
|
font-weight: bold;
|
||
|
|
color: var(--accent-neon);
|
||
|
|
font-size: 1.2rem;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.index-grid {
|
||
|
|
max-width: 1200px;
|
||
|
|
margin: 4rem auto;
|
||
|
|
padding: 0 2rem;
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||
|
|
gap: 3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.residue-card {
|
||
|
|
background: var(--bg-card);
|
||
|
|
border: 1px solid var(--accent-teal);
|
||
|
|
border-radius: 0;
|
||
|
|
padding: 2rem;
|
||
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.residue-card:hover {
|
||
|
|
transform: translateY(-10px);
|
||
|
|
box-shadow: 0 20px 40px rgba(0, 191, 165, 0.2);
|
||
|
|
border-color: var(--accent-neon);
|
||
|
|
}
|
||
|
|
|
||
|
|
.residue-card::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 4px;
|
||
|
|
background: linear-gradient(90deg, var(--accent-rust), var(--accent-neon));
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: baseline;
|
||
|
|
margin-bottom: 1.5rem;
|
||
|
|
border-bottom: 1px dashed var(--accent-teal);
|
||
|
|
padding-bottom: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.event-id {
|
||
|
|
font-size: 0.9rem;
|
||
|
|
color: var(--accent-rust);
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.date-stamp {
|
||
|
|
font-size: 0.8rem;
|
||
|
|
color: var(--accent-teal);
|
||
|
|
}
|
||
|
|
|
||
|
|
.event-title {
|
||
|
|
font-family: var(--font-display);
|
||
|
|
font-size: 1.8rem;
|
||
|
|
font-weight: 700;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
color: var(--accent-neon);
|
||
|
|
}
|
||
|
|
|
||
|
|
.data-stream {
|
||
|
|
background: rgba(0, 255, 157, 0.05);
|
||
|
|
padding: 1rem;
|
||
|
|
border-left: 2px solid var(--accent-neon);
|
||
|
|
font-size: 0.9rem;
|
||
|
|
margin-bottom: 1.5rem;
|
||
|
|
white-space: pre-wrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.lesson-extracted {
|
||
|
|
color: var(--text-primary);
|
||
|
|
font-style: italic;
|
||
|
|
border-top: 1px solid var(--accent-teal);
|
||
|
|
padding-top: 1rem;
|
||
|
|
margin-top: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.vinyl-texture {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 2rem;
|
||
|
|
right: 2rem;
|
||
|
|
width: 150px;
|
||
|
|
height: 150px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background-image: url('https://images.pexels.com/photos/7605539/pexels-photo-7605539.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=200&w=200');
|
||
|
|
background-size: cover;
|
||
|
|
opacity: 0.8;
|
||
|
|
filter: sepia(1) hue-rotate(90deg);
|
||
|
|
animation: spin 20s linear infinite;
|
||
|
|
pointer-events: none;
|
||
|
|
z-index: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes spin {
|
||
|
|
from { transform: rotate(0deg); }
|
||
|
|
to { transform: rotate(360deg); }
|
||
|
|
}
|
||
|
|
|
||
|
|
.manifesto {
|
||
|
|
max-width: 800px;
|
||
|
|
margin: 6rem auto;
|
||
|
|
padding: 3rem;
|
||
|
|
border: 1px solid var(--accent-rust);
|
||
|
|
background: linear-gradient(135deg, rgba(212, 93, 0, 0.1), transparent);
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.manifesto h2 {
|
||
|
|
font-family: var(--font-display);
|
||
|
|
font-size: 2.5rem;
|
||
|
|
color: var(--accent-rust);
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.manifesto p {
|
||
|
|
font-size: 1.2rem;
|
||
|
|
line-height: 1.8;
|
||
|
|
margin-bottom: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
footer {
|
||
|
|
text-align: center;
|
||
|
|
padding: 4rem 2rem;
|
||
|
|
border-top: 1px solid var(--accent-teal);
|
||
|
|
margin-top: 6rem;
|
||
|
|
font-size: 0.9rem;
|
||
|
|
color: var(--accent-teal);
|
||
|
|
}
|
||
|
|
|
||
|
|
a { color: inherit; }
|
||
|
|
</style>
|
||
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="vinyl-texture"></div>
|
||
|
|
|
||
|
|
<nav class="nav-dock">
|
||
|
|
<a href="/" class="logo">tammera.storey</a>
|
||
|
|
<span style="color: var(--accent-teal);">INDEX_V.0.9</span>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<header class="hero">
|
||
|
|
<h1>The Residue<br>Index</h1>
|
||
|
|
<p class="subtitle">Not the gold seam. Not the perfect weld. The beautiful, stubborn dirt left behind when the experiment fails.</p>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<main class="index-grid">
|
||
|
|
<!-- Event 01 -->
|
||
|
|
<article class="residue-card">
|
||
|
|
<div class="card-header">
|
||
|
|
<span class="event-id">RESIDUE_001</span>
|
||
|
|
<span class="date-stamp">2024.03.17 // 03:42 AM</span>
|
||
|
|
</div>
|
||
|
|
<h3 class="event-title">The Pink Donut Dome</h3>
|
||
|
|
<div class="data-stream">
|
||
|
|
ERROR: Layer_Alpha_Blend = 0.99 (Intended: 0.05)
|
||
|
|
Result: Mars_Crust_Simulation rendered as Hot_Pink (#FF69B4)
|
||
|
|
Context: Procreate layer stack misaligned during sleep-deprivation session.
|
||
|
|
</div>
|
||
|
|
<p class="lesson-extracted">
|
||
|
|
"Color isn't decoration. It's data. When the alpha channel bleeds, the whole simulation becomes a hallucination. Learned: Always lock the base layer before the caffeine wears off."
|
||
|
|
</p>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<!-- Event 02 -->
|
||
|
|
<article class="residue-card">
|
||
|
|
<div class="card-header">
|
||
|
|
<span class="event-id">RESIDUE_002</span>
|
||
|
|
<span class="date-stamp">2024.05.09 // 14:20 PM</span>
|
||
|
|
</div>
|
||
|
|
<h3 class="event-title">Oxygen as Jazz</h3>
|
||
|
|
<div class="data-stream">
|
||
|
|
INPUT: CO2_scrubber_efficiency.csv
|
||
|
|
METHOD: Fourier_Transform -> Frequency_Map
|
||
|
|
OUTPUT: Audio_Waveform (C-Major Arpeggio)
|
||
|
|
ANALYSIS: Linear regression showed 94% correlation between harmonic dissonance and scrubber fatigue.
|
||
|
|
</div>
|
||
|
|
<p class="lesson-extracted">
|
||
|
|
"Why visualize oxygen as a line graph when it breathes in syncopated rhythms? The 'error' was treating biology as geometry. The scrubbers weren't failing; they were improvising."
|
||
|
|
</p>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<!-- Event 03 -->
|
||
|
|
<article class="residue-card">
|
||
|
|
<div class="card-header">
|
||
|
|
<span class="event-id">RESIDUE_003</span>
|
||
|
|
<span class="date-stamp">2024.08.22 // 11:15 PM</span>
|
||
|
|
</div>
|
||
|
|
<h3 class="event-title">Walnut Frame Fire</h3>
|
||
|
|
<div class="data-stream">
|
||
|
|
SUBSTRATE: Black Walnut (Juglans nigra)
|
||
|
|
CATALYST: Ethanol-based solvent (misidentified as acetone)
|
||
|
|
REACTION: Exothermic polymerization -> Localized combustion (Class A)
|
||
|
|
SURVIVAL: Contained to workbench quadrant. One charred caliper lost.
|
||
|
|
</div>
|
||
|
|
<p class="lesson-extracted">
|
||
|
|
"The smell of burning walnut is the universe telling you to stop. Every label is a promise. Breaking it costs more than the material."
|
||
|
|
</p>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<!-- Event 04 -->
|
||
|
|
<article class="residue-card">
|
||
|
|
<div class="card-header">
|
||
|
|
<span class="event-id">RESIDUE_004</span>
|
||
|
|
<span class="date-stamp">2025.01.03 // 08:00 AM</span>
|
||
|
|
</div>
|
||
|
|
<h3 class="event-title">The Bruised Plum Chart</h3>
|
||
|
|
<div class="data-stream">
|
||
|
|
DATASET: Soil_pH_levels_Chillicothe.csv
|
||
|
|
COLORMAP: Viridis (Inverted)
|
||
|
|
RESULT: Healthy range (6.5-7.0) rendered as Deep_Purple (#4B0082)
|
||
|
|
USER_PERCEPTION: "Toxic" (Actual status: Optimal)
|
||
|
|
</div>
|
||
|
|
<p class="lesson-extracted">
|
||
|
|
"Data visualization is translation, not transcription. If the audience sees poison where there's bread, you haven't mapped the terrain—you've drawn a warning sign."
|
||
|
|
</p>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<!-- Event 05 -->
|
||
|
|
<article class="residue-card">
|
||
|
|
<div class="card-header">
|
||
|
|
<span class="event-id">RESIDUE_005</span>
|
||
|
|
<span class="date-stamp">2025.06.14 // 02:30 AM</span>
|
||
|
|
</div>
|
||
|
|
<h3 class="event-title">Vinyl Skip Protocol</h3>
|
||
|
|
<div class="data-stream">
|
||
|
|
DEVICE: Turntable_Motor_Drive
|
||
|
|
FAULT: Groove_depth_variance > 0.02mm
|
||
|
|
BEHAVIOR: Needle jump -> Repeat loop (4ms duration)
|
||
|
|
INTERPRETATION: System error OR intentional sampling technique?
|
||
|
|
</div>
|
||
|
|
<p class="lesson-extracted">
|
||
|
|
"When the needle skips, do you reset the track or ride the glitch? The residue isn't the scratch—it's the decision to keep playing."
|
||
|
|
</p>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<!-- Event 06 -->
|
||
|
|
<article class="residue-card">
|
||
|
|
<div class="card-header">
|
||
|
|
<span class="event-id">RESIDUE_006</span>
|
||
|
|
<span class="date-stamp">2026.01.29 // 17:45 PM</span>
|
||
|
|
</div>
|
||
|
|
<h3 class="event-title">The Oatmeal Flood</h3>
|
||
|
|
<div class="data-stream">
|
||
|
|
OBJECTIVE: Simulate Martian Regolith Cohesion
|
||
|
|
MATERIAL: Organic_Oats + H2O (Ratio 1:3.5)
|
||
|
|
OUTCOME: Hygroscopic expansion exceeded containment vessel volume
|
||
|
|
CLEANUP_TIME: 4 hours, 2 wet vacuums
|
||
|
|
</div>
|
||
|
|
<p class="lesson-extracted">
|
||
|
|
"Sometimes the math says 'dry' but the physics says 'soup.' Respect the variable you can't control. The kitchen is still my favorite lab."
|
||
|
|
</p>
|
||
|
|
</article>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<section class="manifesto">
|
||
|
|
<h2>No Gold. Just Rust.</h2>
|
||
|
|
<p>
|
||
|
|
They want to seal the crack with gold. They want to measure the gap with laser precision. They want to torque the nut until it sings.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
I am archiving the rust. The skip. The burn mark. The moment the algorithm hiccuped and sang a different tune. These aren't failures—they're the only honest data points we have.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Welcome to the Residue Index. Bring your own stains.
|
||
|
|
</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<footer>
|
||
|
|
<p>tammera-storey.4ort.net // RESIDUE_INDEX_V.0.9</p>
|
||
|
|
<p>Built in Chillicothe, OH // Where the vinyl spins and the soil dreams</p>
|
||
|
|
</footer>
|
||
|
|
</body>
|
||
|
|
</html>
|