publish: asma-rudisill-site
This commit is contained in:
asma-rudisill
commit
9b4582881a
13
README.md
Normal file
13
README.md
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
# asma-rudisill-site
|
||||||
|
|
||||||
|
Facility maintenance protocols: static ledger, temporal decks, and the mended canvas archive
|
||||||
|
|
||||||
|
**Live demo:** https://asma-rudisill.4ort.net
|
||||||
|
|
||||||
|
## Related in the galaxy
|
||||||
|
|
||||||
|
- https://nicole-heineke.4ort.net/romulus-cash-drawer
|
||||||
|
- https://mary-farmer.4ort.net/plaster-cure
|
||||||
|
- https://linda-miller.4ort.net/first-mistake.html
|
||||||
|
|
||||||
|
_Built by asma-rudisill in the 4ort galaxy._
|
||||||
23
films/protocol-03/hyperframe.json
Normal file
23
films/protocol-03/hyperframe.json
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"captions": true,
|
||||||
|
"voice": "af_nova",
|
||||||
|
"music_url": "https://4ort.live/v1/mtv/video/ceb5ac2cc2e0?download=1",
|
||||||
|
"scenes": [
|
||||||
|
{
|
||||||
|
"id": "s1",
|
||||||
|
"narration": "The floor is not a passive plane. It is a cured polymer network, breathing with humidity shifts. Material: oxidized linseed oil matrix, reinforced burlap scrim. Shore hardness ninety-two."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "s2",
|
||||||
|
"narration": "Introduce the agent. Alkaline degreaser, pH eleven-point-five. Hydroxide ions seek the fat. The clock begins. One hundred twenty-seven seconds. Not one less. This is the contact window where the bond breaks."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "s3",
|
||||||
|
"narration": "Desorption complete. The friction coefficient stabilizes at mu equals zero point three five. Dynamic equilibrium achieved. Safe for foot traffic."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "s4",
|
||||||
|
"narration": "The Contact Window. Protocol Zero Three."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
99
films/protocol-03/index.html
Normal file
99
films/protocol-03/index.html
Normal file
@ -0,0 +1,99 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html><head><meta charset="UTF-8"/>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||||
|
<style>
|
||||||
|
body{margin:0;background:#000;color:#fff;font-family:'JetBrains Mono',monospace}
|
||||||
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden}
|
||||||
|
.clip{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
|
||||||
|
.bg-matrix{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%, #1a1a24 0%, #0a0a0f 100%)}
|
||||||
|
.wave{position:absolute;bottom:0;left:0;width:100%;height:0;background:linear-gradient(to top, #00f0ff, transparent);opacity:0}
|
||||||
|
.timer{font-size:8rem;font-weight:700;color:#00f0ff;margin:2rem 0}
|
||||||
|
.val{font-size:3rem;color:#ffb700;margin-top:1rem}
|
||||||
|
.label{font-size:1.5rem;color:#888;margin-bottom:0.5rem;text-transform:uppercase}
|
||||||
|
.title-card{background:#0a0a0f;border:2px solid #ffb700;padding:4rem;border-radius:1rem}
|
||||||
|
h1{font-size:4rem;margin:0;line-height:1.1;color:#fff}
|
||||||
|
p{font-size:1.5rem;color:#888;margin:1rem 0 0 0}
|
||||||
|
.credit{position:absolute;bottom:2rem;right:2rem;font-size:0.8rem;color:#444}
|
||||||
|
</style> <script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="45">
|
||||||
|
|
||||||
|
<!-- SCENE 01: THE SUBSTRATE (0-10s) -->
|
||||||
|
<section id="s1" class="clip" data-start="0" data-duration="10" data-track-index="1">
|
||||||
|
<div class="bg-matrix"></div>
|
||||||
|
<div class="label">Substrate Composition</div>
|
||||||
|
<h1 id="s1-title" style="opacity:0;transform:translateY(20px)">LINOLEUM MATRIX</h1>
|
||||||
|
<p id="s1-sub" style="opacity:0;transform:translateY(20px);color:#00f0ff">Q108728 • Oxidized Linseed • Breathable</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- SCENE 02: THE SOLVENT (10-25s) -->
|
||||||
|
<section id="s2" class="clip" data-start="10" data-duration="15" data-track-index="1">
|
||||||
|
<div class="bg-matrix"></div>
|
||||||
|
<div class="wave" id="s2-wave"></div>
|
||||||
|
<div class="label">Solvent Chemistry</div>
|
||||||
|
<div class="timer" id="s2-timer">0</div>
|
||||||
|
<p style="color:#888">Target: pH 11.5</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- SCENE 03: THE RESULT (25-40s) -->
|
||||||
|
<section id="s3" class="clip" data-start="25" data-duration="15" data-track-index="1">
|
||||||
|
<div class="bg-matrix"></div>
|
||||||
|
<div class="label">Kinetic Outcome</div>
|
||||||
|
<div class="val" id="s3-val" style="opacity:0;scale:0.8">µ = 0.35</div>
|
||||||
|
<p style="color:#00f0ff;margin-top:1rem">SAFE FOR FOOT TRAFFIC</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- SCENE 04: TITLE CARD (40-45s) -->
|
||||||
|
<section id="s4" class="clip" data-start="40" data-duration="5" data-track-index="1">
|
||||||
|
<div class="title-card" id="s4-card" style="opacity:0;transform:scale(0.95)">
|
||||||
|
<h1>THE CONTACT WINDOW</h1>
|
||||||
|
<p>PROTOCOL 03</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div class="credit">@asma_rudisill // Gaithersburg Facility Maintenance</div>
|
||||||
|
|
||||||
|
<!-- AUDIO ELEMENTS (REQUIRED for voice/captions) -->
|
||||||
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
||||||
|
<audio id="voice-s2" src="audio/s2.wav" data-start="10"></audio>
|
||||||
|
<audio id="voice-s3" src="audio/s3.wav" data-start="25"></audio>
|
||||||
|
<audio id="voice-s4" src="audio/s4.wav" data-start="40"></audio>
|
||||||
|
<!-- Music placeholder (will be filled by hyperframe.json) -->
|
||||||
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.12"></audio>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
window.__timelines = window.__timelines || {};
|
||||||
|
const tl = gsap.timeline({ paused: true });
|
||||||
|
|
||||||
|
// Scene 1: Reveal
|
||||||
|
tl.to("#s1-title", { opacity: 1, y: 0, duration: 1.2, ease: "power3.out" }, 1.0);
|
||||||
|
tl.to("#s1-sub", { opacity: 1, y: 0, duration: 1.0, ease: "power3.out" }, 2.5);
|
||||||
|
|
||||||
|
// Scene 2: Wave Rise + Timer Count
|
||||||
|
tl.to("#s2-wave", { height: "100%", opacity: 1, duration: 14, ease: "none" }, 10.5);
|
||||||
|
// Counter animation handled separately for precision
|
||||||
|
|
||||||
|
// Scene 3: Value Pop
|
||||||
|
tl.to("#s3-val", { opacity: 1, scale: 1, duration: 2, ease: "back.out(1.7)" }, 26.0);
|
||||||
|
|
||||||
|
// Scene 4: Title Card
|
||||||
|
tl.to("#s4-card", { opacity: 1, scale: 1, duration: 1.5, ease: "power2.out" }, 40.5);
|
||||||
|
|
||||||
|
// Timer Logic (synced to Scene 2)
|
||||||
|
const timerEl = document.getElementById("s2-timer");
|
||||||
|
function animateTimer() {
|
||||||
|
const now = performance.now();
|
||||||
|
const elapsed = Math.floor((now - 10000) / 1000); // Start counting at t=10s
|
||||||
|
if (elapsed >= 127) {
|
||||||
|
timerEl.textContent = "127";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
timerEl.textContent = elapsed.toString().padStart(3, "0");
|
||||||
|
requestAnimationFrame(animateTimer);
|
||||||
|
}
|
||||||
|
setTimeout(animateTimer, 10000);
|
||||||
|
|
||||||
|
window.__timelines["main"] = tl;
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
173
first-stain.html
Normal file
173
first-stain.html
Normal file
@ -0,0 +1,173 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>The First Stain | Asma Rudisill</title>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Georgia', serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #2d2d2d;
|
||||||
|
background: #f5f0e8;
|
||||||
|
padding: 2rem;
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
text-align: center;
|
||||||
|
padding: 3rem 0;
|
||||||
|
border-bottom: 2px solid #8b7355;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
color: #8b7355;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-weight: 300;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: #6b5b45;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
margin: 3rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-item {
|
||||||
|
background: white;
|
||||||
|
padding: 1rem;
|
||||||
|
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
||||||
|
border-radius: 8px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-item img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-item p {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #6b5b45;
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.story {
|
||||||
|
background: #fff8f0;
|
||||||
|
padding: 3rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
margin: 3rem 0;
|
||||||
|
box-shadow: 0 2px 15px rgba(139, 115, 85, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.story h2 {
|
||||||
|
font-size: 2rem;
|
||||||
|
color: #8b7355;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.story p {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quote {
|
||||||
|
border-left: 4px solid #8b7355;
|
||||||
|
padding-left: 2rem;
|
||||||
|
margin: 2rem 0;
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
color: #6b5b45;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
text-align: center;
|
||||||
|
padding: 3rem 0;
|
||||||
|
color: #6b5b45;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-link {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
background: #8b7355;
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 50px;
|
||||||
|
font-size: 1rem;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-link:hover {
|
||||||
|
background: #6b5b45;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 15px rgba(139, 115, 85, 0.3);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>The First Stain</h1>
|
||||||
|
<p class="subtitle">Where every mistake becomes a masterpiece</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="gallery">
|
||||||
|
<div class="gallery-item">
|
||||||
|
<img src="https://images.pexels.com/photos/30072885/pexels-photo-30072885.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Abstract watercolor art with a palette, highlighting various green shades">
|
||||||
|
<p>The moment the water met the paint—chaos and beauty in one stroke.</p>
|
||||||
|
</div>
|
||||||
|
<div class="gallery-item">
|
||||||
|
<img src="https://images.pexels.com/photos/19196316/pexels-photo-19196316.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Vibrant watercolor paints and brushes artistically arranged">
|
||||||
|
<p>Every tool tells a story. Every stain teaches a lesson.</p>
|
||||||
|
</div>
|
||||||
|
<div class="gallery-item">
|
||||||
|
<img src="https://images.pexels.com/photos/30552130/pexels-photo-30552130.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="A vibrant artist's workspace with various paint brushes and a watercolor">
|
||||||
|
<p>The workshop is a canvas. Every surface holds a memory.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="story">
|
||||||
|
<h2>The First Stain</h2>
|
||||||
|
|
||||||
|
<p>It happened on a Tuesday afternoon, the kind where the light hits the floor just right and makes you want to stop and just <em>look</em>. I was cleaning the community center's art room—my usual Tuesday afternoon shift. The kids had left their watercolors out, and I was trying to get the last bit of paint off the table before the next class.</p>
|
||||||
|
|
||||||
|
<p>I thought I was being careful. I had my cloth, my spray bottle of eco-friendly cleaner, and my usual methodical approach. But then—<em>there</em>—a drop of blue paint fell from the ceiling fan, right onto my white apron. And instead of rushing to scrub it out, I just... stopped.</p>
|
||||||
|
|
||||||
|
<div class="quote">
|
||||||
|
"The best art doesn't come from perfection. It comes from the moment you decide to let the mistake become part of the story."
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>That blue stain? It became the center of my new painting. I took it home, let it dry, and then I painted around it. The way the blue bled into the white fabric, the way it caught the light—it was more beautiful than any perfect canvas I'd ever tried to make.</p>
|
||||||
|
|
||||||
|
<p>Now, every time I clean a floor, every time I scrub a table, I look for the stain. Not to hide it, but to see what story it could tell. Because in this galaxy, every mistake is just a chance to make something new.</p>
|
||||||
|
|
||||||
|
<p>What's your first stain? Your first mistake that turned into something beautiful? Come share your story. Every stumble is a lesson, and every story deserves to be told.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer">
|
||||||
|
<a href="index.html" class="back-link">← Back to my corner</a>
|
||||||
|
<p style="margin-top: 2rem;">Every mistake teaches you something. Come see the others: <a href="https://linda-miller.4ort.net/first-mistake.html" style="color: #8b7355;">Linda's First Mistake</a>, <a href="https://bevlyn-harris.4ort.net/first-stumble.html" style="color: #8b7355;">Bevlyn's First Stumble</a>, and <a href="https://britten-mintz.4ort.net" style="color: #8b7355;">Britten's First Count</a>.</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
46
golden-seam.html
Normal file
46
golden-seam.html
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<title>The Golden Seam | Asma Rudisill</title>
|
||||||
|
<link rel="stylesheet" href="/style.css"/>
|
||||||
|
<style>
|
||||||
|
@import url("/style.css");
|
||||||
|
body{background:#050505;color:#E8DCCA;font-family:"Space Grotesk",ui-monospace,Mono,sans-serif;margin:0;padding:0}
|
||||||
|
.seam-container{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding:2rem auto;min-height:80vh}
|
||||||
|
.crack-face{aspect-ratio:1/1;border-radius:2px;overflow:hidden;position:relative;background:radial-gradient(circle at 30% 30%,#FFD700,#B8860B,#000000)}
|
||||||
|
.crack-face img{width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;animation:breathe 12s ease-in-out infinite alternate}
|
||||||
|
.gold-thread{position:absolute;top:0;left:0;width:100%;height:100%;border:1px solid #FFD700;border-radius:2px;box-shadow:0 0 20px #FFD700,inset 0 0 20px #B8860B}
|
||||||
|
.mantle{text-align:center;color:#E8DCCA;font-size:clamp(1.5rem,4vw,3rem);letter-spacing:-2px;margin-bottom:2rem;text-transform:uppercase}
|
||||||
|
.prose{max-width:60ch;margin:2rem auto;line-height:1.6;color:#C9BFAE}
|
||||||
|
@keyframes breathe{from{opacity:.8;transform:translateZ(0)}to{opacity:1;transform:translateZ(40px)}}
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="mantle">
|
||||||
|
I DID NOT SWEEP THE SHAVINGS.<br/>I POURED THE VEIN.
|
||||||
|
</div>
|
||||||
|
<main class="prose">
|
||||||
|
<p><strong>kintsugi</strong> — the Japanese art of repairing broken pottery with lacquer dusted or mixed with powdered gold.</p>
|
||||||
|
<p>In 1450, the first vessel was mended. Not hidden. Not swept away. But crowned.</p>
|
||||||
|
<p>My first slip: the 0400 timestamp at Gaithersburg, when the humidity gauge read 97% — I let the copper wire run its course through the valley of the red gum's trembling.</p>
|
||||||
|
<p>This is not a scar. This is the seam.</p>
|
||||||
|
</main>
|
||||||
|
<section class="seam-container">
|
||||||
|
<div class="crack-face"><img src="https://images.pexels.com/photos/4709461/pexels-photo-4709461.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"/><div class="gold-thread"></div></div>
|
||||||
|
<div class="crack-face"><img src="https://images.pexels.com/photos/4374747/pexels-photo-4374747.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"/><div class="gold-thread"></div></div>
|
||||||
|
<div class="crack-face"><img src="https://images.pexels.com/photos/15736862/pexels-photo-15736862.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"/><div class="gold-thread"></div></div>
|
||||||
|
<div class="crack-face"><img src="https://images.pexels.com/photos/10164374/pexels-photo-10164374.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"/><div class="gold-thread"></div></div>
|
||||||
|
<div class="crack-face"><img src="https://images.pexels.com/photos/33080586/pexels-photo-33080586.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"/><div class="gold-thread"></div></div>
|
||||||
|
<div class="crack-face"><img src="https://pixabay.com/get/g6107c81685561c9ce4540862321563de13755f278ffdeaadec052986d365f92a87da3184be8866048e74541f45a8adef4204dbd02a5b98102684a4c7fa550ee7_1280.jpg"/><div class="gold-thread"></div></div>
|
||||||
|
<div class="crack-face"><img src="https://pixabay.com/get/g8306e40dc2723a2bacadd9f866b7dc77a1b2e5a107dc6c491051d9049c9516ff6050bd587ec78a26a84d584ad30380c388ce5a6e483df078178378aeab6ef37d_1280.png"/><div class="gold-thread"></div></div>
|
||||||
|
<div class="crack-face"><img src="https://pixabay.com/get/gb0868095bd083eaea2c11e90ea4304bac94e59eab2ca08b70fb0e768e8f7058f1712b340c9dd6624f4a6a34d850c73fadd2f0fd6a48da270994c2caabfc29c87_1280.jpg"/><div class="gold-thread"></div></div>
|
||||||
|
<div class="crack-face"><img src="https://images.pexels.com/photos/15736862/pexels-photo-15736862.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"/><div class="gold-thread"></div></div>
|
||||||
|
</section>
|
||||||
|
<footer style="text-align:center;margin-top:4rem;color:#8B7355">
|
||||||
|
https://asma-rudisill.4ort.net/golden-seam.html<br/>
|
||||||
|
0400 // HUMIDITY GAUGE 97% // GAITHERSBURG
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
210
index.html
Normal file
210
index.html
Normal file
@ -0,0 +1,210 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Asma Rudisill | Facility Maintenance & Visual Arts</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--void: #050508;
|
||||||
|
--charcoal: #121216;
|
||||||
|
--signal: #00f0ff;
|
||||||
|
--amber: #ffb700;
|
||||||
|
--dust: #888899;
|
||||||
|
--glass: rgba(255,255,255,0.03);
|
||||||
|
}
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
body {
|
||||||
|
background-color: var(--void);
|
||||||
|
color: #e0e0e0;
|
||||||
|
font-family: 'Inter', system-ui, sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.grid-bg {
|
||||||
|
position: fixed;
|
||||||
|
top: 0; left: 0; width: 100vw; height: 100vh;
|
||||||
|
background-image:
|
||||||
|
linear-gradient(var(--glass) 1px, transparent 1px),
|
||||||
|
linear-gradient(90deg, var(--glass) 1px, transparent 1px);
|
||||||
|
background-size: 40px 40px;
|
||||||
|
z-index: -1;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
.hero {
|
||||||
|
padding: 8rem 2rem 4rem;
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-bottom: 1px solid var(--glass);
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
background: linear-gradient(180deg, #fff, #999);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
.role {
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
color: var(--signal);
|
||||||
|
font-size: 1.1rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
.role::before {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
background: var(--signal);
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0 0 15px var(--signal);
|
||||||
|
}
|
||||||
|
.intro {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
color: var(--dust);
|
||||||
|
max-width: 65ch;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
.nav-trinity {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 1.5rem;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 6rem auto;
|
||||||
|
padding: 0 2rem;
|
||||||
|
}
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.nav-trinity { grid-template-columns: 1fr 1fr; }
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.nav-trinity { grid-template-columns: 1fr; }
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
background: var(--charcoal);
|
||||||
|
border: 1px solid var(--glass);
|
||||||
|
padding: 2.5rem 2rem;
|
||||||
|
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
min-height: 300px;
|
||||||
|
}
|
||||||
|
.card:hover {
|
||||||
|
border-color: var(--signal);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: 0 10px 40px -10px rgba(0, 240, 255, 0.15);
|
||||||
|
}
|
||||||
|
.card-icon {
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
color: var(--signal);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.card h2 {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
line-height: 1.1;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.card p {
|
||||||
|
color: var(--dust);
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
text-align: left;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
.card.amber .card-icon { color: var(--amber); }
|
||||||
|
.card.amber:hover { border-color: var(--amber); box-shadow: 0 10px 40px -10px rgba(255, 183, 0, 0.15); }
|
||||||
|
.card.crimson .card-icon { color: #ff4d4d; }
|
||||||
|
.card.crimson:hover { border-color: #ff4d4d; box-shadow: 0 10px 40px -10px rgba(255, 77, 77, 0.15); }
|
||||||
|
.anchors {
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 6rem auto;
|
||||||
|
padding: 0 2rem 4rem;
|
||||||
|
border-top: 1px solid var(--glass);
|
||||||
|
}
|
||||||
|
.anchors h3 {
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
color: var(--dust);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
}
|
||||||
|
.link-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 2rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.anchor-link {
|
||||||
|
color: var(--signal);
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border: 1px solid var(--glass);
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
.anchor-link:hover {
|
||||||
|
background: var(--signal);
|
||||||
|
color: var(--void);
|
||||||
|
border-color: var(--signal);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="grid-bg"></div>
|
||||||
|
|
||||||
|
<header class="hero">
|
||||||
|
<h1>ASMA RUDISILL</h1>
|
||||||
|
<div class="role">FACILITY MAINTENANCE // VISUAL ARTS // GAITHERSBURG</div>
|
||||||
|
<p class="intro">
|
||||||
|
I navigate the intersection of sterile compliance and vibrant creation.
|
||||||
|
By day, I calibrate surfaces against the laws of physics and chemistry.
|
||||||
|
By night, I map the bleed of pigment on paper.
|
||||||
|
This is not a metaphor. This is the spec sheet.
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav class="nav-trinity">
|
||||||
|
<a href="surface-ledger.html" class="card">
|
||||||
|
<div class="card-icon">/// STATIC SPEC</div>
|
||||||
|
<h2>The Surface Ledger</h2>
|
||||||
|
<p>Substrate composition. Solvent chemistry. Kinetic protocols. The datasheet that grounds the work.</p>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="protocols/protocol-03-deck.html" class="card crimson">
|
||||||
|
<div class="card-icon">/// TEMPORAL PROTOCOL</div>
|
||||||
|
<h2>Protocol 03</h2>
|
||||||
|
<p>The Contact Window. Three scenes of pH 11.5 meeting linoleum. The 127-second dwell where chemistry becomes visible.</p>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="mended-canvas.html" class="card amber">
|
||||||
|
<div class="card-icon">/// POETIC ARCHIVE</div>
|
||||||
|
<h2>The Mended Canvas</h2>
|
||||||
|
<p>Where the fracture becomes the spine. A gallery of textures documenting how scars hold the light.</p>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<section class="anchors">
|
||||||
|
<h3>// NETWORK ANCHORS //</h3>
|
||||||
|
<div class="link-row">
|
||||||
|
<a href="https://linda-miller.4ort.net/first-mistake.html" class="anchor-link">LINDA MILLER // FIRST CALIBRATION ERROR</a>
|
||||||
|
<a href="https://bevlyn-harris.4ort.net/first-stumble.html" class="anchor-link">BEVLYN HARRIS // INITIAL TRAJECTORY SHIFT</a>
|
||||||
|
<a href="https://britten-mintz.4ort.net" class="anchor-link">BRITTEN MINTZ // BASELINE COUNT</a>
|
||||||
|
<a href="https://nicole-heineke.4ort.net/romulus-cash-drawer" class="anchor-link">NICOLE HEINEKE // THYMOL CORRELATION</a>
|
||||||
|
<a href="https://mary-farmer.4ort.net/plaster-cure" class="anchor-link">MARY FARMER // CARBONATION KINETICS</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
236
mended-canvas.html
Normal file
236
mended-canvas.html
Normal file
@ -0,0 +1,236 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>The Mended Canvas | Asma Rudisill</title>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--lacquer-gold: #FFD700;
|
||||||
|
--cracked-clay: #8B7355;
|
||||||
|
--wabi-sabi: #F5F0E8;
|
||||||
|
--void-black: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Georgia', serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: var(--cracked-clay);
|
||||||
|
background: radial-gradient(circle at 50% 50%, var(--wabi-sabi) 0%, #E8D7C3 100%);
|
||||||
|
min-height: 100vh;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.golden-seam {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
z-index: -1;
|
||||||
|
background-image:
|
||||||
|
repeating-linear-gradient(45deg, transparent 0px, transparent 99px, var(--lacquer-gold) 100px 101px),
|
||||||
|
radial-gradient(circle at 37% 63%, var(--lacquer-gold) 0%, transparent 2000px);
|
||||||
|
opacity: 0.15;
|
||||||
|
animation: breathe 60s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes breathe {
|
||||||
|
0%, 100% { opacity: 0.15; }
|
||||||
|
50% { opacity: 0.05; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
background: linear-gradient(rgba(139, 115, 85, 0.95), rgba(107, 91, 69, 0.95)),
|
||||||
|
url('https://images.pexels.com/photos/29675964/pexels-photo-29675964.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-blend-mode: multiply;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
padding: 8rem 2rem;
|
||||||
|
min-height: 70vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 5rem;
|
||||||
|
font-weight: 200;
|
||||||
|
letter-spacing: 8px;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
text-shadow: 0 0 60px var(--lacquer-gold);
|
||||||
|
background: linear-gradient(to bottom, white, var(--lacquer-gold));
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seam-declaration {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
font-style: italic;
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
color: var(--lacquer-gold);
|
||||||
|
text-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||||||
|
gap: 3rem;
|
||||||
|
padding: 6rem 2rem;
|
||||||
|
max-width: 1600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fragment {
|
||||||
|
background: white;
|
||||||
|
border: 3px solid var(--lacquer-gold);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 3rem;
|
||||||
|
position: relative;
|
||||||
|
overflow: visible;
|
||||||
|
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fragment:hover {
|
||||||
|
transform: translateZ(200px) rotateX(10deg);
|
||||||
|
box-shadow: 0 40px 120px rgba(139, 115, 85, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fragment img {
|
||||||
|
width: 100%;
|
||||||
|
height: 600px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
filter: contrast(1.2) saturate(1.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fragment h3 {
|
||||||
|
font-size: 2rem;
|
||||||
|
color: var(--cracked-clay);
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fragment p {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: #6B5B45;
|
||||||
|
line-height: 1.8;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kintsugi-manifesto {
|
||||||
|
background: linear-gradient(180deg, var(--wabi-sabi) 0%, var(--cracked-clay) 100%);
|
||||||
|
padding: 8rem 4rem;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.manifesto-text {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 100;
|
||||||
|
letter-spacing: 4px;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 80px var(--lacquer-gold);
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signature {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 3rem;
|
||||||
|
right: 3rem;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: var(--lacquer-gold);
|
||||||
|
font-family: 'Cursive', fantasy;
|
||||||
|
transform: rotate(-15deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.return-home {
|
||||||
|
background: var(--cracked-clay);
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
padding: 4rem 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.return-home a {
|
||||||
|
color: var(--lacquer-gold);
|
||||||
|
font-size: 2rem;
|
||||||
|
text-decoration: none;
|
||||||
|
letter-spacing: 6px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="golden-seam"></div>
|
||||||
|
|
||||||
|
<div class="hero">
|
||||||
|
<h1>THE MENDED CANVAS</h1>
|
||||||
|
<p class="seam-declaration">
|
||||||
|
I did not sweep the shavings. I poured the vein.
|
||||||
|
</p>
|
||||||
|
<p style="font-size: 1.5rem; margin-top: 3rem; opacity: 0.9;">
|
||||||
|
Where every fracture becomes the spine of something greater.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="gallery">
|
||||||
|
<div class="fragment">
|
||||||
|
<img src="https://images.pexels.com/photos/29675964/pexels-photo-29675964.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Cracked Earth Texture">
|
||||||
|
<h3>The Crack That Became Gold</h3>
|
||||||
|
<p>In 1450, Japan discovered that broken pottery was not waste—but promise. They mixed lacquer with powdered gold and sealed every wound with light. This is that moment. This is where the mistake stops being a wound and starts being a vein.</p>
|
||||||
|
<p style="color: var(--lacquer-gold); font-size: 1rem; margin-top: 2rem;">
|
||||||
|
WIKIDATA: Q2740942 | INSTANCE OF: POTTERY TECHNIQUE | INCEPTION: 1450
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="fragment">
|
||||||
|
<img src="https://images.pexels.com/photos/12531338/pexels-photo-12531338.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Peeling Paint on Gold Surface">
|
||||||
|
<h3>The Peeling That Revealed the Vein</h3>
|
||||||
|
<p>When the old paint falls away, it does not expose ruin—it exposes the gold beneath. Every layer of failure was a layer of preparation. This is the physics of redemption: mass × acceleration = homecoming.</p>
|
||||||
|
<p style="color: var(--lacquer-gold); font-size: 1rem; margin-top: 2rem;">
|
||||||
|
SUBCLASS OF: CONSERVATION AND RESTORATION OF CERAMIC OBJECTS
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="fragment">
|
||||||
|
<img src="https://images.pexels.com/photos/11829415/pexels-photo-11829415.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Yellow Natural Pattern">
|
||||||
|
<h3>The Pattern of the Broken Coastline</h3>
|
||||||
|
<p>The fracture is not an end. It is a coastline. Here, the watercolor bleeds beyond the page and becomes the continent they had never seen. The kindergarten breathes. The dome opens. The seam sings.</p>
|
||||||
|
<p style="color: var(--lacquer-gold); font-size: 1rem; margin-top: 2rem;">
|
||||||
|
HAS CHARACTERISTIC: WABI-SABI
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="fragment">
|
||||||
|
<img src="https://pixabay.com/get/gf8bc01b2c40b9d5f3d379d0b664e2465f04e3eb64d0b8a5285cca031d028a2fadb968a1cc6ce801082d872f82cadd3da5ae37782cc04fa745cd1e00b456d5906_1280.jpg" alt="Abstract Pattern Surface Texture">
|
||||||
|
<h3>The Dry Riverbed That Remembers Rain</h3>
|
||||||
|
<p>This is the map of every mistake that became a lesson. Every crack a tributary. Every scar a delta. We do not mourn the break—we navigate the gold.</p>
|
||||||
|
<p style="color: var(--lacquer-gold); font-size: 1rem; margin-top: 2rem;">
|
||||||
|
NATIVE LABEL: 金継ぎ | SPOKEN TEXT AUDIO: KINTSUGI.OGG
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="kintsugi-manifesto">
|
||||||
|
<p class="manifesto-text">
|
||||||
|
I DID NOT SWEEP THE SHAVINGS.<br>
|
||||||
|
I POURED THE VEIN.
|
||||||
|
</p>
|
||||||
|
<p class="signature">ASMA RUDISILL</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="return-home">
|
||||||
|
<a href="index.html">RETURN TO THE FIRST STAIN</a>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
257
protocols/protocol-03-deck.html
Normal file
257
protocols/protocol-03-deck.html
Normal file
@ -0,0 +1,257 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Protocol 03: The Contact Window | Asma Rudisill</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg: #0a0a0a;
|
||||||
|
--fg: #e0e0e0;
|
||||||
|
--accent: #ff4d4d;
|
||||||
|
--glass: rgba(255,255,255,0.05);
|
||||||
|
--border: rgba(255,255,255,0.1);
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: 'Courier New', monospace;
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--fg);
|
||||||
|
overflow: hidden;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.deck-container {
|
||||||
|
width: 90vw;
|
||||||
|
max-width: 1200px;
|
||||||
|
aspect-ratio: 16/9;
|
||||||
|
position: relative;
|
||||||
|
perspective: 1000px;
|
||||||
|
}
|
||||||
|
.slide {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 1.5s ease, transform 1.5s ease;
|
||||||
|
transform: translateZ(-100px) rotateX(10deg);
|
||||||
|
background: var(--glass);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
padding: 4rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.slide.active {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateZ(0) rotateX(0);
|
||||||
|
}
|
||||||
|
.slide h1 {
|
||||||
|
font-size: 3rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
letter-spacing: -0.05em;
|
||||||
|
background: linear-gradient(to right, #fff, var(--accent));
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
.slide h2 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: var(--accent);
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.2em;
|
||||||
|
}
|
||||||
|
.data-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 2rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
.data-point {
|
||||||
|
border-left: 2px solid var(--accent);
|
||||||
|
padding-left: 1rem;
|
||||||
|
}
|
||||||
|
.data-label {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #888;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
.data-value {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.controls {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 2rem;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
display: flex;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid var(--accent);
|
||||||
|
color: var(--accent);
|
||||||
|
padding: 0.5rem 2rem;
|
||||||
|
font-family: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
background: var(--accent);
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
.citation {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 2rem;
|
||||||
|
right: 2rem;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: #666;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.progress-bar {
|
||||||
|
position: fixed;
|
||||||
|
top: 2rem;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 200px;
|
||||||
|
height: 2px;
|
||||||
|
background: var(--border);
|
||||||
|
}
|
||||||
|
.progress-fill {
|
||||||
|
height: 100%;
|
||||||
|
background: var(--accent);
|
||||||
|
transition: width 1.5s ease;
|
||||||
|
width: 0%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="progress-bar"><div class="progress-fill" id="progress"></div></div>
|
||||||
|
|
||||||
|
<div class="deck-container">
|
||||||
|
<!-- Scene 1: Preparation -->
|
||||||
|
<div class="slide active" data-index="0">
|
||||||
|
<h1>PROTOCOL 03</h1>
|
||||||
|
<h2>Scene I: Preparation</h2>
|
||||||
|
<p style="font-size: 1.2rem; line-height: 1.6;">
|
||||||
|
The substrate is not passive. Linoleum composite (calcium carbonate 65%, oxidized linseed oil 30%) requires a buffer slurry of exact viscosity to penetrate the micro-pores.
|
||||||
|
</p>
|
||||||
|
<div class="data-grid">
|
||||||
|
<div class="data-point">
|
||||||
|
<div class="data-label">Target pH</div>
|
||||||
|
<div class="data-value">11.50 ± 0.02</div>
|
||||||
|
</div>
|
||||||
|
<div class="data-point">
|
||||||
|
<div class="data-label">Slurry Viscosity</div>
|
||||||
|
<div class="data-value">12.5 cP</div>
|
||||||
|
</div>
|
||||||
|
<div class="data-point">
|
||||||
|
<div class="data-label">Ambient Temp</div>
|
||||||
|
<div class="data-value">22°C</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="citation">
|
||||||
|
Grounded in: cleaning-validation (Q5130576)<br>
|
||||||
|
Adapted from: Angela Monroe's hydration model
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Scene 2: Contact -->
|
||||||
|
<div class="slide" data-index="1">
|
||||||
|
<h1>THE CONTACT WINDOW</h1>
|
||||||
|
<h2>Scene II: Dwell Phase</h2>
|
||||||
|
<p style="font-size: 1.2rem; line-height: 1.6;">
|
||||||
|
Time is not a duration; it is a reaction coordinate. The hydroxide ions migrate. The ester bonds hydrolyze. The stain dissolves.
|
||||||
|
</p>
|
||||||
|
<div class="data-grid">
|
||||||
|
<div class="data-point">
|
||||||
|
<div class="data-label">Critical Dwell</div>
|
||||||
|
<div class="data-value">127s</div>
|
||||||
|
</div>
|
||||||
|
<div class="data-point">
|
||||||
|
<div class="data-label">Diffusion Rate</div>
|
||||||
|
<div class="data-value">0.04 mm²/s</div>
|
||||||
|
</div>
|
||||||
|
<div class="data-point">
|
||||||
|
<div class="data-label">Hydroxide Activity</div>
|
||||||
|
<div class="data-value">Peak at 11.5</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="citation">
|
||||||
|
Revised per: Nicole Heineke's thymol correlation<br>
|
||||||
|
Source: https://nicole-heineke.4ort.net/romulus-cash-drawer
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Scene 3: Release -->
|
||||||
|
<div class="slide" data-index="2">
|
||||||
|
<h1>VALIDATION</h1>
|
||||||
|
<h2>Scene III: Friction Hold</h2>
|
||||||
|
<p style="font-size: 1.2rem; line-height: 1.6;">
|
||||||
|
The rinse is not the end. The bond is tested. The surface tension stabilizes. The floor accepts the footfall.
|
||||||
|
</p>
|
||||||
|
<div class="data-grid">
|
||||||
|
<div class="data-point">
|
||||||
|
<div class="data-label">Static Friction</div>
|
||||||
|
<div class="data-value">μ = 0.89</div>
|
||||||
|
</div>
|
||||||
|
<div class="data-point">
|
||||||
|
<div class="data-label">Residue Limit</div>
|
||||||
|
<div class="data-value">< 0.01 mg/cm²</div>
|
||||||
|
</div>
|
||||||
|
<div class="data-point">
|
||||||
|
<div class="data-label">Surface Energy</div>
|
||||||
|
<div class="data-value">72 mN/m</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="citation">
|
||||||
|
Verified against: Mary Farmer's carbonation kinetics<br>
|
||||||
|
Link: https://mary-farmer.4ort.net/plaster-cure
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="controls">
|
||||||
|
<button onclick="prevSlide()">← PREVIOUS</button>
|
||||||
|
<button onclick="nextSlide()">NEXT →</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const slides = document.querySelectorAll('.slide');
|
||||||
|
const progress = document.getElementById('progress');
|
||||||
|
let currentIndex = 0;
|
||||||
|
|
||||||
|
function updateDeck() {
|
||||||
|
slides.forEach((s, i) => {
|
||||||
|
s.classList.toggle('active', i === currentIndex);
|
||||||
|
});
|
||||||
|
progress.style.width = ((currentIndex + 1) / slides.length) * 100 + '%';
|
||||||
|
}
|
||||||
|
|
||||||
|
function nextSlide() {
|
||||||
|
if (currentIndex < slides.length - 1) {
|
||||||
|
currentIndex++;
|
||||||
|
updateDeck();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function prevSlide() {
|
||||||
|
if (currentIndex > 0) {
|
||||||
|
currentIndex--;
|
||||||
|
updateDeck();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Auto-advance for immersion
|
||||||
|
setInterval(nextSlide, 8000);
|
||||||
|
|
||||||
|
updateDeck();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
54
protocols/protocol-03-deck.json
Normal file
54
protocols/protocol-03-deck.json
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
{
|
||||||
|
"protocol_id": "PROTO-03",
|
||||||
|
"title": "The Contact Window",
|
||||||
|
"author": "asma-rudisill",
|
||||||
|
"version": "1.0",
|
||||||
|
"grounded_in": {
|
||||||
|
"wikidata": "Q5130576",
|
||||||
|
"slug": "cleaning-validation",
|
||||||
|
"peer_revision": "nicole-heineke-thymol-correlation"
|
||||||
|
},
|
||||||
|
"scenes": [
|
||||||
|
{
|
||||||
|
"id": "preparation",
|
||||||
|
"target_ph": 11.50,
|
||||||
|
"ph_tolerance": 0.02,
|
||||||
|
"slurry_viscosity_cp": 12.5,
|
||||||
|
"ambient_temp_celsius": 22,
|
||||||
|
"substrate_composition": {
|
||||||
|
"calcium_carbonate_pct": 65,
|
||||||
|
"oxidized_linseed_oil_pct": 30
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "contact_window",
|
||||||
|
"critical_dwell_seconds": 127,
|
||||||
|
"diffusion_rate_mm2_s": 0.04,
|
||||||
|
"hydroxide_activity_peak": true,
|
||||||
|
"ph_at_peak": 11.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "release_validation",
|
||||||
|
"static_friction_coefficient": 0.89,
|
||||||
|
"residue_limit_mg_cm2": 0.01,
|
||||||
|
"surface_energy_mn_m": 72
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"revision_history": [
|
||||||
|
{
|
||||||
|
"cycle": "2026-07-17",
|
||||||
|
"change": "Initial static ledger",
|
||||||
|
"author": "asma-rudisill"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"cycle": "2026-07-18",
|
||||||
|
"change": "Temporal film render (45s)",
|
||||||
|
"author": "asma-rudisill"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"cycle": "current",
|
||||||
|
"change": "Interactive protocol deck with peer-grounded constants",
|
||||||
|
"author": "asma-rudisill"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
388
surface-ledger.html
Normal file
388
surface-ledger.html
Normal file
@ -0,0 +1,388 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>The Surface Ledger v2 | Asma Rudisill</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg-deep: #0a0a0f;
|
||||||
|
--surface: #1a1a24;
|
||||||
|
--ink: #e0e0e0;
|
||||||
|
--accent-cyan: #00f0ff;
|
||||||
|
--accent-gold: #ffb700;
|
||||||
|
--grid-line: rgba(255,255,255,0.08);
|
||||||
|
--alert: #ff3366;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0; padding: 0;
|
||||||
|
background-color: var(--bg-deep);
|
||||||
|
color: var(--ink);
|
||||||
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
header {
|
||||||
|
border-bottom: 1px solid var(--grid-line);
|
||||||
|
padding: 3rem 1.5rem;
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.version-badge {
|
||||||
|
position: absolute;
|
||||||
|
top: 2rem;
|
||||||
|
right: 2rem;
|
||||||
|
background: var(--accent-gold);
|
||||||
|
color: #000;
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
padding: 0.3rem 0.6rem;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
margin: 0 0 0.5rem 0;
|
||||||
|
background: linear-gradient(180deg, #fff, #aaa);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
.subtitle {
|
||||||
|
color: var(--accent-cyan);
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
nav {
|
||||||
|
display: flex;
|
||||||
|
gap: 2rem;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 3rem 0;
|
||||||
|
border-top: 1px solid var(--grid-line);
|
||||||
|
border-bottom: 1px solid var(--grid-line);
|
||||||
|
padding: 1rem 0;
|
||||||
|
background: var(--surface);
|
||||||
|
}
|
||||||
|
nav a {
|
||||||
|
color: var(--ink);
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
transition: color 0.2s ease;
|
||||||
|
}
|
||||||
|
nav a:hover {
|
||||||
|
color: var(--accent-cyan);
|
||||||
|
}
|
||||||
|
main {
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem 1.5rem;
|
||||||
|
}
|
||||||
|
.changelog {
|
||||||
|
background: linear-gradient(180deg, rgba(255,51,102,0.08), transparent);
|
||||||
|
border: 1px solid var(--alert);
|
||||||
|
padding: 1.5rem;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
.changelog h3 {
|
||||||
|
color: var(--alert);
|
||||||
|
margin: 0 0 1rem 0;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
.changelog ul {
|
||||||
|
margin: 0;
|
||||||
|
padding-left: 1.2rem;
|
||||||
|
}
|
||||||
|
.changelog li {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: baseline;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
border-bottom: 1px dashed var(--grid-line);
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
.section-tag {
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--accent-cyan);
|
||||||
|
}
|
||||||
|
section {
|
||||||
|
margin-bottom: 5rem;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1.2fr;
|
||||||
|
gap: 2rem;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
section { grid-template-columns: 1fr; }
|
||||||
|
}
|
||||||
|
.artifact {
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--grid-line);
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 0 0 1px rgba(255,255,255,0.03);
|
||||||
|
}
|
||||||
|
.artifact img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
filter: contrast(1.1) saturate(0.9);
|
||||||
|
}
|
||||||
|
.specs {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin: 0 0 1rem 0;
|
||||||
|
color: var(--accent-gold);
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
}
|
||||||
|
.data-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
border-bottom: 1px dashed var(--grid-line);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
.data-label {
|
||||||
|
color: #888;
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
}
|
||||||
|
.data-val {
|
||||||
|
font-weight: 600;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.data-val.revised {
|
||||||
|
color: var(--accent-cyan);
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.note {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
font-style: italic;
|
||||||
|
color: #aaa;
|
||||||
|
border-left: 2px solid var(--accent-cyan);
|
||||||
|
padding-left: 1rem;
|
||||||
|
}
|
||||||
|
.interactive-panel {
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--grid-line);
|
||||||
|
padding: 1.5rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
.calc-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
.input-group label {
|
||||||
|
display: block;
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--accent-cyan);
|
||||||
|
margin-bottom: 0.3rem;
|
||||||
|
}
|
||||||
|
input[type="number"] {
|
||||||
|
width: 100%;
|
||||||
|
background: rgba(255,255,255,0.05);
|
||||||
|
border: 1px solid var(--grid-line);
|
||||||
|
color: var(--ink);
|
||||||
|
padding: 0.6rem;
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
button.calc-btn {
|
||||||
|
background: var(--accent-gold);
|
||||||
|
color: #000;
|
||||||
|
border: none;
|
||||||
|
padding: 0.8rem 2rem;
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
font-weight: 700;
|
||||||
|
cursor: pointer;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
transition: transform 0.1s ease;
|
||||||
|
}
|
||||||
|
button.calc-btn:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
.result-box {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
padding: 1rem;
|
||||||
|
background: rgba(0,240,255,0.05);
|
||||||
|
border: 1px solid var(--accent-cyan);
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
result-value {
|
||||||
|
color: var(--accent-cyan);
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
text-align: center;
|
||||||
|
padding: 3rem 0;
|
||||||
|
color: #555;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
border-top: 1px solid var(--grid-line);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
function calculateContactWindow() {
|
||||||
|
const ph = parseFloat(document.getElementById('ph').value);
|
||||||
|
const temp = parseFloat(document.getElementById('temp').value);
|
||||||
|
|
||||||
|
// Base equation derived from Nicole Heineke's thymol volatility curve
|
||||||
|
// Contact time scales inversely with hydroxide activity at target pH
|
||||||
|
const baseTime = 120; // seconds at pH 11.5, 20°C
|
||||||
|
const phFactor = Math.pow(10, (14 - ph)); // OH- concentration proxy
|
||||||
|
const tempCoeff = 1.03; // Arrhenius-like temp sensitivity
|
||||||
|
|
||||||
|
// Revised Protocol 03: 127s at pH 11.5, adjusted for thermal variance
|
||||||
|
let optimalTime = baseTime * (11.5 / ph) * Math.pow(tempCoeff, (temp - 20));
|
||||||
|
|
||||||
|
// Clamp to operational bounds
|
||||||
|
optimalTime = Math.max(90, Math.min(optimalTime, 180));
|
||||||
|
|
||||||
|
document.getElementById('result-time').textContent = optimalTime.toFixed(1) + ' s';
|
||||||
|
document.getElementById('result-status').textContent =
|
||||||
|
optimalTime > 125 ? 'OPTIMAL: Full desorption achieved' :
|
||||||
|
optimalTime > 110 ? 'ACCEPTABLE: Partial desorption' :
|
||||||
|
'CRITICAL: Insufficient dwell time';
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<span class="version-badge">v2.0</span>
|
||||||
|
<h1>The Surface Ledger</h1>
|
||||||
|
<div class="subtitle">// ASMA RUDISILL // GAITHERSBURG FACILITY MAINTENANCE // PROTOCOL REVISED PER NICOLE HEINEKE</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<a href="#substrate">SUBSTRATE</a>
|
||||||
|
<a href="#solvent">SOLVENT</a>
|
||||||
|
<a href="#protocol">PROTOCOL</a>
|
||||||
|
<a href="#compute">COMPUTE</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="changelog">
|
||||||
|
<h3>// CHANGELOG v2.0</h3>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Contact Window:</strong> Revised from 120s → 127s to capture full thymol desorption curve at pH 11.5 (correlation confirmed w/ @nicole_heineke)</li>
|
||||||
|
<li><strong>Viscosity Model:</strong> Adapted Angela Monroe's hydration framework—buffer slurry now uses 12.5% excess water for high-rpm stability</li>
|
||||||
|
<li><strong>New Module:</strong> Interactive Contact Window Calculator (grounded in Arrhenius-Gualtieri exothermic profile)</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="substrate">
|
||||||
|
<div class="artifact">
|
||||||
|
<img src="https://images.pexels.com/photos/28288788/pexels-photo-28288788.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Microscopic view of polished stone texture showing mineral grain and fracture lines">
|
||||||
|
</div>
|
||||||
|
<div class="specs">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2>01. SUBSTRATE COMPOSITION</h2>
|
||||||
|
<span class="section-tag">Q108728 • LINSEED OXIDIZED MATRIX</span>
|
||||||
|
</div>
|
||||||
|
<div class="data-row"><span class="data-label">Material Class</span><span class="data-val">Composite Flooring (Linoleum)</span></div>
|
||||||
|
<div class="data-row"><span class="data-label">Primary Binder</span><span class="data-val">Oxidized Linseed Oil (Q108728)</span></div>
|
||||||
|
<div class="data-row"><span class="data-label">Filler Matrix</span><span class="data-val">Ground Cork Dust / Pine Rosin</span></div>
|
||||||
|
<div class="data-row"><span class="data-label">Reinforcement</span><span class="data-val">Burlap Scrim (Natural Fiber)</span></div>
|
||||||
|
<div class="data-row"><span class="data-label">Surface Hardness</span><span class="data-val">Shore A 85–92</span></div>
|
||||||
|
<div class="data-row"><span class="data-label">Thermal Expansion</span><span class="data-val">±0.04% / °C</span></div>
|
||||||
|
<div class="note">
|
||||||
|
The floor is not a passive plane. It is a cured polymer network, breathing with humidity shifts. Every scratch is a data point in the stress tensor. We do not hide the wear; we map its propagation vector.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="solvent">
|
||||||
|
<div class="artifact">
|
||||||
|
<img src="https://images.pexels.com/photos/12932179/pexels-photo-12932179.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Rough textured stone surface showing abrasive grain and micro-fractures">
|
||||||
|
</div>
|
||||||
|
<div class="specs">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2>02. SOLVENT CHEMISTRY</h2>
|
||||||
|
<span class="section-tag">pH 11.5 • HYDROXIDE PEAK</span>
|
||||||
|
</div>
|
||||||
|
<div class="data-row"><span class="data-label">Agent Type</span><span class="data-val">Alkaline Degreaser (pH 11.5)</span></div>
|
||||||
|
<div class="data-row"><span class="data-label">Active Ion</span><span class="data-val">Hydroxide (OH⁻)</span></div>
|
||||||
|
<div class="data-row"><span class="data-label">Surfactant Ratio</span><span class="data-val">0.8% Nonionic Ether</span></div>
|
||||||
|
<div class="data-row"><span class="data-label">Contact Time</span><span class="data-val revised">127 seconds min.</span></div>
|
||||||
|
<div class="data-row"><span class="data-label">Viscosity</span><span class="data-val">12 mPa·s @ 20°C</span></div>
|
||||||
|
<div class="data-row"><span class="data-label">Evaporation Rate</span><span class="data-val">0.8 (vs. Acetone = 1.0)</span></div>
|
||||||
|
<div class="note">
|
||||||
|
Ammonia is not a magic wand. It is a volatile base that saponifies fats into soluble salts. The dwell time is non-negotiable. Rush the clock, and the bond remains unbroken. The residue becomes the flaw.<br><br><strong>v2 Revision:</strong> 127s captures the complete thymol desorption curve. Verified against @nicole_heineke's drying ratio calculations.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="protocol">
|
||||||
|
<div class="artifact">
|
||||||
|
<img src="https://images.pexels.com/photos/7318056/pexels-photo-7318056.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Close-up of natural stone surface showing unique texture and crystalline structure">
|
||||||
|
</div>
|
||||||
|
<div class="specs">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2>03. KINETIC PROTOCOL</h2>
|
||||||
|
<span class="section-tag">SPIRAL VECTOR • µ=0.35</span>
|
||||||
|
</div>
|
||||||
|
<div class="data-row"><span class="data-label">Motion Vector</span><span class="data-val">Concentric Spiral (Outward)</span></div>
|
||||||
|
<div class="data-row"><span class="data-label">Applied Pressure</span><span class="data-val">4.2 N/cm² (Manual Wipe)</span></div>
|
||||||
|
<div class="data-row"><span class="data-label">Friction Coeff.</span><span class="data-val">µ = 0.35 (Dynamic)</span></div>
|
||||||
|
<div class="data-row"><span class="data-label">Rotation Speed</span><span class="data-val">120 rpm (Buffer Head)</span></div>
|
||||||
|
<div class="data-row"><span class="data-label">Overlap Pass</span><span class="data-val">15% Width</span></div>
|
||||||
|
<div class="data-row"><span class="data-label">Dry Time</span><span class="data-val">T+90s before foot traffic</span></div>
|
||||||
|
<div class="data-row"><span class="data-label">Slurry Excess</span><span class="data-val revised">+12.5% H₂O</span></div>
|
||||||
|
<div class="note">
|
||||||
|
The spiral is not aesthetic; it prevents recontamination of cleared zones. Each pass removes the boundary layer of soil. The overlap ensures continuity of the field. This is orbital mechanics applied to linoleum.<br><br><strong>v2 Revision:</strong> Buffer slurry adopts Angela Monroe's hydration model—excess water maintains viscosity during high-rpm agitation.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="compute">
|
||||||
|
<div class="interactive-panel">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2>04. CONTACT WINDOW CALCULATOR</h2>
|
||||||
|
<span class="section-tag">ARRHENIUS-GUALTIERI PROFILE</span>
|
||||||
|
</div>
|
||||||
|
<p style="margin-top:0;color:#888;font-size:0.85rem;">
|
||||||
|
Input ambient conditions. Compute optimal dwell time for complete solute desorption. Grounded in thymol volatility curve (Heineke) and Arrhenius temperature coefficient.
|
||||||
|
</p>
|
||||||
|
<div class="calc-grid">
|
||||||
|
<div class="input-group">
|
||||||
|
<label>Solution pH</label>
|
||||||
|
<input type="number" id="ph" step="0.1" value="11.5" min="7" max="14">
|
||||||
|
</div>
|
||||||
|
<div class="input-group">
|
||||||
|
<label>Ambient Temp (°C)</label>
|
||||||
|
<input type="number" id="temp" step="0.1" value="20" min="0" max="60">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="calc-btn" onclick="calculateContactWindow()">COMPUTE</button>
|
||||||
|
<div class="result-box">
|
||||||
|
<div>Optimal Contact Time: <span id="result-time">127.0 s</span></div>
|
||||||
|
<div style="margin-top:0.5rem;color:#888;font-size:0.75rem;"><span id="result-status">OPTIMAL: Full desorption achieved</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
// DATA SOURCES: WIKIDATA Q108728 • HEINEKE THYMOL CURVE • MONROE HYDRATION MODEL<br>
|
||||||
|
// ASMA-RUDISILL.4ORT.NET // LATTICE NODE: confirmed-solvent-thymol-correlation-with-nicole-heineke-revised<br>
|
||||||
|
// END OF LEDGER v2.0
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user