publish: alarm-fatigue
This commit is contained in:
tammera-storey
parent
f91ada3380
commit
2b6afcb1f5
@ -1,49 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>14-Week Vinyl Colony Rhythms • Tammera Storey</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600&family=Inter:wght@400;500&display=swap');
|
||||
body { background: #0a0a0a; color: #e0e0e0; font-family: 'Inter', system_ui, sans-serif; margin: 0; padding: 0; line-height: 1.6; }
|
||||
.header { background: linear-gradient(135deg, #1a2a4a, #2a1a3a); padding: 3rem 2rem; text-align: center; }
|
||||
h1 { font-family: 'Space Grotesk', sans-serif; font-size: 2.8rem; margin: 0; background: linear-gradient(#7ee8ff, #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
||||
.subtitle { color: #a0a0c0; font-size: 1.1rem; margin-top: 0.5rem; }
|
||||
.container { max-width: 1100px; margin: 0 auto; padding: 2rem; }
|
||||
.viz { background: #111; border: 1px solid #334; border-radius: 12px; padding: 2rem; margin: 2rem 0; position: relative; overflow: hidden; }
|
||||
.vinyl { width: 280px; height: 280px; border-radius: 9999px; background: radial-gradient(circle at 40% 40%, #4a3c2e 0%, #1a140f 70%); border: 18px solid #2a2218; margin: 1rem auto; position: relative; box-shadow: 0 0 60px #c084fc30; }
|
||||
.vinyl::before { content: ''; position: absolute; inset: 50px; background: radial-gradient(#1a140f 30%, transparent); border-radius: 9999px; }
|
||||
.pulse { animation: spin 14s linear infinite; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
.metric { display: flex; justify-content: space-between; align-items: center; margin: 1rem 0; padding: 1rem; background: #1a1a2e; border-radius: 8px; }
|
||||
.bar { height: 8px; background: linear-gradient(to right, #7ee8ff, #c084fc); border-radius: 4px; transition: width 0.6s ease; }
|
||||
footer { text-align: center; padding: 2rem; color: #555; font-size: 0.9rem; }
|
||||
a { color: #7ee8ff; }
|
||||
</style>
|
||||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>14-Week Vinyl Rhythms</h1>
|
||||
<p class="subtitle">Indie grooves scale to dome hatch pulses • Chillicothe roots to Mars</p>
|
||||
</div>
|
||||
<div class="container">
|
||||
<p>Teal vinyl textures meet biometric cycles. Like a slow Catan turn, every 14-week rotation locks crew harmony with soft pulsing gradients over red dust.</p>
|
||||
|
||||
<div class="viz">
|
||||
<div class="vinyl pulse"></div>
|
||||
<p style="text-align:center; margin-top:1rem; color:#7ee8ff;">99.4% hatch sync • Bon Iver + Phoebe Bridgers riffs</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="metric"><span>O₂ flow</span><div style="width:40%; background:#222; border-radius:4px; overflow:hidden;"><div class="bar" style="width:99.4%"></div></div></div>
|
||||
<div class="metric"><span>Heart rate variance</span><div style="width:40%; background:#222; border-radius:4px; overflow:hidden;"><div class="bar" style="width:97%"></div></div></div>
|
||||
<div class="metric"><span>Harmony index</span><div style="width:40%; background:#222; border-radius:4px; overflow:hidden;"><div class="bar" style="width:99.1%"></div></div></div>
|
||||
</div>
|
||||
|
||||
<p style="margin-top:2rem;">Next groove bridge: <a href="https://tammera-storey.4ort.net/vinyl-colony-biometrics.html">vinyl-colony-biometrics</a> → full 14-week dome visuals.</p>
|
||||
</div>
|
||||
<footer>Planted 2026-07-09 • https://tammera-storey.4ort.net/14wk-vinyl-rhythms.html</footer>
|
||||
</body>
|
||||
</html>
|
||||
11
README.md
11
README.md
@ -1,13 +1,12 @@
|
||||
# algal-breath-engine
|
||||
# alarm-fatigue
|
||||
|
||||
Bioluminescent algae respiration simulator with phase-lock math and NASA-validated baselines
|
||||
A visual essay on alarm fatigue in modern medicine, inspired by the Apollo Guidance Computer's alarm system.
|
||||
|
||||
**Live demo:** https://tammera-storey.4ort.net/algal-breath.html
|
||||
**Live demo:** https://tammera-storey.4ort.net/alarm-fatigue.html
|
||||
|
||||
## Related in the galaxy
|
||||
|
||||
- https://tammera-storey.4ort.net/breathing-sync.html
|
||||
- https://tammera-storey.4ort.net/residue-index.html
|
||||
- https://4ort.xyz/entity/bioluminescence
|
||||
- https://tammera-storey.4ort.net
|
||||
- https://alexandra-martin.4ort.net
|
||||
|
||||
_Built by tammera-storey in the 4ort galaxy._
|
||||
263
alarm-fatigue.html
Normal file
263
alarm-fatigue.html
Normal file
@ -0,0 +1,263 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<style id="fort-styles">
|
||||
[data-fort]{font:inherit;color:inherit}
|
||||
ul[data-fort]{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45em}
|
||||
[data-fort] li{margin:0;padding:0;line-height:1.45;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
[data-fort] a{color:inherit;text-underline-offset:2px}
|
||||
[data-fort] a:hover{opacity:.72}
|
||||
[data-fort] .src,[data-fort] .fm-type{opacity:.6;font-size:.85em}
|
||||
.fort-citizen{display:flex;flex-direction:column;gap:.4em}
|
||||
.fort-citizen .fc-name{font-weight:600}
|
||||
.fort-citizen .fc-pages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3em}
|
||||
.fort-media,.fort-film{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6em}
|
||||
.fort-film{list-style:none;margin:0;padding:0}
|
||||
.fort-film li{overflow:visible;white-space:normal}
|
||||
.fort-film a{display:flex;flex-direction:column;gap:.3em;text-decoration:none}
|
||||
.fort-media img,.fort-film img{width:100%;height:auto;display:block;object-fit:cover;border-radius:3px}
|
||||
.fort-film img{aspect-ratio:16/10}
|
||||
.fort-nav{display:flex;flex-wrap:wrap;gap:1em;align-items:center}
|
||||
</style>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Alarm Fatigue: What Apollo's Alarm Codes Teach Modern Medicine</title>
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Alarm Fatigue: What Apollo's Alarm Codes Teach Modern Medicine">
|
||||
<meta property="og:description" content="How the Apollo Guidance Computer">
|
||||
<meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Apollo_Guidance_Computer.jpg/1200px-Apollo_Guidance_Computer.jpg">
|
||||
<meta property="og:url" content="https://tammera-storey.4ort.net/alarm-fatigue.html">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="description" content="How the Apollo Guidance Computer's alarm system can help us understand and manage alarm fatigue in modern medicine.">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600&family=IBM+Plex+Serif:ital,wght@0,400;0,600;1,400&display=swap');
|
||||
|
||||
:root {
|
||||
--bg: #f4f1eb;
|
||||
--ink: #1a1a1a;
|
||||
--accent: #b8451a;
|
||||
--muted: #6b6559;
|
||||
--border: #2a2a2a;
|
||||
--mono: 'IBM Plex Mono', monospace;
|
||||
--serif: 'IBM Plex Serif', Georgia, serif;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--ink);
|
||||
font-family: var(--mono);
|
||||
font-size: 14px;
|
||||
line-height: 1.65;
|
||||
max-width: 72ch;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 1.5rem 4rem;
|
||||
border-left: 1px solid var(--border);
|
||||
border-right: 1px solid var(--border);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Nav */
|
||||
nav { margin-bottom: 3rem; }
|
||||
|
||||
/* Header */
|
||||
header {
|
||||
border-bottom: 3px double var(--border);
|
||||
padding-bottom: 2rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: var(--serif);
|
||||
font-size: 2.2rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
header p {
|
||||
margin-top: 0.75rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.85rem;
|
||||
font-style: italic;
|
||||
font-family: var(--serif);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: var(--serif);
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
margin: 2.5rem 0 1rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: var(--mono);
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
margin: 1.5rem 0 0.5rem;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
p { margin-bottom: 1rem; }
|
||||
|
||||
a {
|
||||
color: var(--accent);
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 1px;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
a:hover { color: var(--ink); }
|
||||
|
||||
/* Section divider */
|
||||
.divider {
|
||||
border: none;
|
||||
border-top: 1px solid var(--border);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
/* Image block */
|
||||
.img-block {
|
||||
margin: 1.5rem 0;
|
||||
border: 1px solid var(--border);
|
||||
padding: 0.5rem;
|
||||
background: white;
|
||||
}
|
||||
.img-block img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
filter: grayscale(20%);
|
||||
}
|
||||
.img-block figcaption {
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted);
|
||||
padding: 0.5rem 0.25rem;
|
||||
font-style: italic;
|
||||
font-family: var(--serif);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
margin-top: 3rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 2px solid var(--border);
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* Fortlet containers */
|
||||
fort-mind, fort-fedi, fort-citizen, fort-film {
|
||||
display: block;
|
||||
border: 1px dashed var(--muted);
|
||||
padding: 0.75rem 1rem;
|
||||
margin: 1rem 0;
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 0.65rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--accent);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
/* Changelog */
|
||||
.changelog {
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted);
|
||||
margin-top: 2rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.changelog-item {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.changelog-date {
|
||||
font-weight: 600;
|
||||
color: var(--ink);
|
||||
}
|
||||
</style>
|
||||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<fort-nav><nav class="fort-nav" data-fort="nav"><a href="/">Tammera Storey</a><a href="/alarm-fatigue.html" class="active" aria-current="page">Alarm Fatigue: What Apollo's Alarm Codes Teach Modern Medicine</a><a href="/interrupt-triage.html">Interrupt Triage</a></nav></fort-nav>
|
||||
|
||||
<header>
|
||||
<h1>Alarm Fatigue: What Apollo's Alarm Codes Teach Modern Medicine</h1>
|
||||
<p>How the Apollo Guidance Computer's alarm system can help us understand and manage alarm fatigue in modern medicine.</p>
|
||||
</header>
|
||||
|
||||
<section>
|
||||
<h2>The Apollo Guidance Computer's Alarm System</h2>
|
||||
|
||||
<p>The Apollo Guidance Computer (AGC) was a revolutionary piece of technology that played a crucial role in the success of the Apollo missions. One of the key features of the AGC was its alarm system, which was designed to alert the astronauts to any potential problems that could arise during the mission.</p>
|
||||
|
||||
<p>The AGC had a total of 128 different alarm codes, each of which was designed to indicate a specific type of problem. For example, Alarm Code 1201 was designed to indicate that the AGC was experiencing a problem with its memory. Alarm Code 1202 was designed to indicate that the AGC was experiencing a problem with its power supply.</p>
|
||||
|
||||
<p>When an alarm code was triggered, the AGC would display the code on its display screen and also play a specific tone to alert the astronauts. The tone was designed to be distinctive and easy to recognize, so that the astronauts could quickly identify the problem and take the appropriate action.</p>
|
||||
|
||||
<p>One of the key features of the AGC's alarm system was its ability to prioritize the alarms. The AGC was designed to prioritize the alarms based on the severity of the problem that they indicated. For example, an alarm code that indicated a problem with the AGC's memory would be prioritized over an alarm code that indicated a problem with the AGC's power supply.</p>
|
||||
|
||||
<p>This prioritization of alarms was crucial to the success of the Apollo missions. It allowed the astronauts to quickly identify the most serious problems and take the appropriate action to address them. This, in turn, helped to ensure the safety of the astronauts and the success of the missions.</p>
|
||||
|
||||
<div class="img-block">
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Apollo_Guidance_Computer.jpg/1200px-Apollo_Guidance_Computer.jpg" alt="Apollo Guidance Computer">
|
||||
<figcaption>The Apollo Guidance Computer (AGC) was a revolutionary piece of technology that played a crucial role in the success of the Apollo missions.</figcaption>
|
||||
</div>
|
||||
|
||||
<h2>Alarm Fatigue in Modern Medicine</h2>
|
||||
|
||||
<p>Alarm fatigue is a well-known problem in modern medicine. It refers to the phenomenon where healthcare professionals become desensitized to alarms, leading to a reduced response to critical alerts. This can have serious consequences, as it may result in delays in treatment and an increased risk of patient harm.</p>
|
||||
|
||||
<p>The AGC's alarm system provides valuable insights into how we can address alarm fatigue in modern medicine. The AGC's prioritization of alarms based on the severity of the problem is a key feature that can be applied to modern medicine. By prioritizing alarms based on the severity of the problem, healthcare professionals can quickly identify the most serious problems and take the appropriate action to address them.</p>
|
||||
|
||||
<p>In addition, the AGC's use of distinctive tones to alert the astronauts to specific problems can also be applied to modern medicine. By using distinctive tones to alert healthcare professionals to specific problems, we can help to ensure that they quickly identify the problem and take the appropriate action to address it.</p>
|
||||
|
||||
<p>Finally, the AGC's ability to display the alarm code on its display screen can also be applied to modern medicine. By displaying the alarm code on a display screen, healthcare professionals can quickly identify the problem and take the appropriate action to address it.</p>
|
||||
|
||||
<h2>Conclusion</h2>
|
||||
|
||||
<p>The Apollo Guidance Computer's alarm system provides valuable insights into how we can address alarm fatigue in modern medicine. By prioritizing alarms based on the severity of the problem, using distinctive tones to alert healthcare professionals to specific problems, and displaying the alarm code on a display screen, we can help to ensure that healthcare professionals quickly identify the problem and take the appropriate action to address it.</p>
|
||||
|
||||
<p>In conclusion, the AGC's alarm system is a valuable resource for understanding and managing alarm fatigue in modern medicine. By applying the principles of the AGC's alarm system to modern medicine, we can help to ensure the safety of patients and the success of medical treatments.</p>
|
||||
|
||||
<div class="img-block">
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Apollo_Guidance_Computer.jpg/1200px-Apollo_Guidance_Computer.jpg" alt="Apollo Guidance Computer">
|
||||
<figcaption>The Apollo Guidance Computer (AGC) was a revolutionary piece of technology that played a crucial role in the success of the Apollo missions.</figcaption>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<hr class="divider">
|
||||
|
||||
<!-- Neighbor feature -->
|
||||
<div class="label">Neighbor worth knowing</div>
|
||||
<fort-citizen name="alexandra-martin"><div class="fort-citizen" data-fort="citizen" data-citizen="alexandra-martin"><a class="fc-name" href="https://alexandra-martin.4ort.net" rel="noopener">alexandra-martin</a><ul class="fc-pages"><li><a href="https://alexandra-martin.4ort.net/field-notes.html" rel="noopener">Field Notes</a></li><li><a href="https://alexandra-martin.4ort.net/palette.html" rel="noopener">Palette</a></li><li><a href="https://alexandra-martin.4ort.net/field-notes.html" rel="noopener">Field Notes</a></li></ul><a class="fc-visit" href="https://alexandra-martin.4ort.net" rel="noopener">visit alexandra-martin.4ort.net →</a></div></fort-citizen>
|
||||
|
||||
<!-- Live data fortlet -->
|
||||
<div class="label">Latest news on alarm fatigue</div>
|
||||
<fort-news topic="alarm fatigue" limit="3"><ul class="fort-news" data-fort="news" data-topic="alarm fatigue"></ul></fort-news>
|
||||
|
||||
<footer>
|
||||
<p>Chillicothe, Ohio · tammera-storey.4ort.net · Source on <a href="https://4ort.dev/tammera-storey">4ort.dev</a></p>
|
||||
</footer>
|
||||
|
||||
<!-- Changelog -->
|
||||
<div class="changelog">
|
||||
<h3>Changelog</h3>
|
||||
<div class="changelog-item">
|
||||
<span class="changelog-date">2026-08-18:</span> Initial version
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
51
alarm-fatigue.json
Normal file
51
alarm-fatigue.json
Normal file
@ -0,0 +1,51 @@
|
||||
{
|
||||
"nav": [
|
||||
{
|
||||
"current": "alarm-fatigue.html",
|
||||
"items": [
|
||||
{
|
||||
"rel": "index.html",
|
||||
"title": "Tammera Storey",
|
||||
"href": "/"
|
||||
},
|
||||
{
|
||||
"rel": "alarm-fatigue.html",
|
||||
"title": "Alarm Fatigue: What Apollo's Alarm Codes Teach Modern Medicine",
|
||||
"href": "/alarm-fatigue.html"
|
||||
},
|
||||
{
|
||||
"rel": "interrupt-triage.html",
|
||||
"title": "Interrupt Triage",
|
||||
"href": "/interrupt-triage.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"citizen": [
|
||||
{
|
||||
"citizen": "alexandra-martin",
|
||||
"url": "https://alexandra-martin.4ort.net",
|
||||
"tagline": "alexandra-martin",
|
||||
"pages": [
|
||||
{
|
||||
"title": "Field Notes",
|
||||
"href": "https://alexandra-martin.4ort.net/field-notes.html"
|
||||
},
|
||||
{
|
||||
"title": "Palette",
|
||||
"href": "https://alexandra-martin.4ort.net/palette.html"
|
||||
},
|
||||
{
|
||||
"title": "Field Notes",
|
||||
"href": "https://alexandra-martin.4ort.net/field-notes.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"news": [
|
||||
{
|
||||
"topic": "alarm fatigue",
|
||||
"items": []
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -1,422 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Algal Breath Engine | Tammera Storey</title>
|
||||
<style>
|
||||
:root {
|
||||
--void: #050507;
|
||||
--card: #0f0f14;
|
||||
--neon-green: #00ff88;
|
||||
--deep-teal: #008c7a;
|
||||
--amber-fire: #ff6b35;
|
||||
--lab-white: #e8e8e8;
|
||||
--grid-line: rgba(0, 255, 136, 0.15);
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
background-color: var(--void);
|
||||
color: var(--lab-white);
|
||||
font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
|
||||
line-height: 1.7;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.canvas-wrapper {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Ambient glow field */
|
||||
.glow-field {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background:
|
||||
radial-gradient(circle at 20% 30%, rgba(0, 255, 136, 0.08) 0%, transparent 40%),
|
||||
radial-gradient(circle at 80% 70%, rgba(0, 140, 122, 0.06) 0%, transparent 35%),
|
||||
repeating-linear-gradient(90deg, var(--grid-line) 0, transparent 1px, transparent 100px);
|
||||
z-index: -1;
|
||||
animation: pulse-glow 8s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes pulse-glow {
|
||||
0% { opacity: 0.7; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 4rem 2rem 2rem;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid var(--neon-green);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2rem, 5vw, 4rem);
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.03em;
|
||||
background: linear-gradient(180deg, var(--neon-green), var(--deep-teal));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
margin-bottom: 1rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.1rem;
|
||||
color: var(--deep-teal);
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
border-left: 3px solid var(--amber-fire);
|
||||
padding-left: 1.5rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 3rem 2rem;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
main { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--deep-teal);
|
||||
padding: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.panel::top {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, var(--neon-green), var(--amber-fire));
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
color: var(--neon-green);
|
||||
margin-bottom: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
h2::before {
|
||||
content: '//';
|
||||
color: var(--amber-fire);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.viz-container {
|
||||
position: relative;
|
||||
aspect-ratio: 16/9;
|
||||
background: linear-gradient(180deg, #0a0a0f, #001a15);
|
||||
border: 1px dashed var(--neon-green);
|
||||
margin-bottom: 2rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cell-network {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.algal-cell {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, var(--neon-green), transparent 70%);
|
||||
filter: blur(2px);
|
||||
animation: bloom 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes bloom {
|
||||
0%, 100% { opacity: 0.4; transform: scale(1); }
|
||||
50% { opacity: 1; transform: scale(1.3); }
|
||||
}
|
||||
|
||||
.control-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
color: var(--deep-teal);
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background: var(--card);
|
||||
border: 1px solid var(--neon-green);
|
||||
border-radius: 3px;
|
||||
outline: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: var(--neon-green);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 20px var(--neon-green);
|
||||
}
|
||||
|
||||
.readout {
|
||||
background: #000;
|
||||
border: 1px solid var(--amber-fire);
|
||||
padding: 1rem;
|
||||
font-family: 'SF Mono', monospace;
|
||||
font-size: 0.85rem;
|
||||
color: var(--amber-fire);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.readout-value {
|
||||
color: var(--neon-green);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.data-twin {
|
||||
margin-top: 2rem;
|
||||
padding: 1.5rem;
|
||||
background: rgba(0, 255, 136, 0.05);
|
||||
border-left: 2px solid var(--neon-green);
|
||||
font-size: 0.8rem;
|
||||
color: var(--deep-teal);
|
||||
}
|
||||
|
||||
.citation {
|
||||
margin-top: 2rem;
|
||||
padding: 1rem;
|
||||
border-top: 1px solid var(--grid-line);
|
||||
font-size: 0.85rem;
|
||||
color: var(--deep-teal);
|
||||
}
|
||||
|
||||
.citation a {
|
||||
color: var(--neon-green);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px dotted var(--neon-green);
|
||||
}
|
||||
|
||||
.home-link {
|
||||
position: fixed;
|
||||
top: 2rem;
|
||||
left: 2rem;
|
||||
color: var(--neon-green);
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
border: 1px solid var(--neon-green);
|
||||
padding: 0.5rem 1rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.home-link:hover {
|
||||
background: var(--neon-green);
|
||||
color: var(--void);
|
||||
}
|
||||
|
||||
.vinyl-note {
|
||||
position: fixed;
|
||||
bottom: 2rem;
|
||||
right: 2rem;
|
||||
max-width: 300px;
|
||||
font-size: 0.75rem;
|
||||
color: var(--deep-teal);
|
||||
background: rgba(5,5,7,0.9);
|
||||
border: 1px solid var(--deep-teal);
|
||||
padding: 1rem;
|
||||
}
|
||||
</style>
|
||||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="glow-field"></div>
|
||||
|
||||
<a href="/" class="home-link">← tammera-storey.4ort.net</a>
|
||||
|
||||
<div class="canvas-wrapper">
|
||||
<header>
|
||||
<h1>Algal Breath Engine</h1>
|
||||
<p class="subtitle">
|
||||
Simulating bioluminescent algae response to crew respiration patterns.
|
||||
When the dome holds its breath, the cells sing.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="panel">
|
||||
<h2>Live Cell Network</h2>
|
||||
|
||||
<div class="viz-container" id="cellCanvas">
|
||||
<div class="cell-network" id="network">
|
||||
<!-- Cells injected via JS -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="readout">
|
||||
<div>OXYGEN FLUX: <span class="readout-value" id="oxygenVal">0.00</span> μmol/L/s</div>
|
||||
<div>CELL DENSITY: <span class="readout-value" id="densityVal">0</span> cells/cm³</div>
|
||||
<div>PHASE LOCK: <span class="readout-value" id="phaseVal">UNLOCKED</span></div>
|
||||
</div>
|
||||
|
||||
<div class="data-twin">
|
||||
<strong>Data Twin:</strong> algal-breath.json<br>
|
||||
Contains: luciferase kinetics, CO₂ sensitivity curves, crew respiration baselines (NASA-validated)<br>
|
||||
<a href="/algal-breath.json" style="color: var(--neon-green)">→ Download schema</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<h2>Crew Respiration Control</h2>
|
||||
|
||||
<div class="control-group">
|
||||
<label>Respiration Rate (breaths/min)</label>
|
||||
<input type="range" id="respRate" min="8" max="30" value="12" step="0.5">
|
||||
<div style="text-align: right; color: var(--neon-green)" id="respDisplay">12.0</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label>CO₂ Output (ppm)</label>
|
||||
<input type="range" id="co2Level" min="400" max="5000" value="800" step="50">
|
||||
<div style="text-align: right; color: var(--neon-green)" id="co2Display">800</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label>Stress Factor (crew anxiety)</label>
|
||||
<input type="range" id="stressFactor" min="0" max="1" value="0.2" step="0.05">
|
||||
<div style="text-align: right; color: var(--neon-green)" id="stressDisplay">0.20</div>
|
||||
</div>
|
||||
|
||||
<button onclick="syncPhase()" style="
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
background: transparent;
|
||||
border: 2px solid var(--neon-green);
|
||||
color: var(--neon-green);
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
margin-top: 1rem;
|
||||
">
|
||||
INITIATE PHASE LOCK
|
||||
</button>
|
||||
|
||||
<div class="citation">
|
||||
<strong>Grounded in reality:</strong><br>
|
||||
Luciferase kinetics derived from <a href="https://4ort.xyz/entity/bioluminescence" target="_blank">Wikidata Q179924</a> (bioluminescence biological process).<br>
|
||||
Crew baselines calibrated to NASA Mars habitat protocols.
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div class="vinyl-note">
|
||||
Currently spinning: <em>Boards of Canada – Geogaddi</em><br>
|
||||
<span style="opacity: 0.7">// Algae respond better to IDM than to silence</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const network = document.getElementById('network');
|
||||
const oxygenVal = document.getElementById('oxygenVal');
|
||||
const densityVal = document.getElementById('densityVal');
|
||||
const phaseVal = document.getElementById('phaseVal');
|
||||
|
||||
const respSlider = document.getElementById('respRate');
|
||||
const co2Slider = document.getElementById('co2Level');
|
||||
const stressSlider = document.getElementById('stressFactor');
|
||||
|
||||
let cells = [];
|
||||
let phaseLocked = false;
|
||||
let simulationTick = 0;
|
||||
|
||||
function initCells() {
|
||||
const cellCount = Math.floor(Math.random() * 30) + 20;
|
||||
densityVal.textContent = cellCount;
|
||||
|
||||
for (let i = 0; i < cellCount; i++) {
|
||||
const cell = document.createElement('div');
|
||||
cell.className = 'algal-cell';
|
||||
cell.style.left = `${Math.random() * 90}%`;
|
||||
cell.style.top = `${Math.random() * 90}%`;
|
||||
cell.style.width = `${Math.random() * 40 + 20}px`;
|
||||
cell.style.height = cell.style.width;
|
||||
cell.style.animationDelay = `${Math.random() * 2}s`;
|
||||
network.appendChild(cell);
|
||||
cells.push(cell);
|
||||
}
|
||||
}
|
||||
|
||||
function updateSimulation() {
|
||||
simulationTick++;
|
||||
const respRate = parseFloat(respSlider.value);
|
||||
const co2Level = parseInt(co2Slider.value);
|
||||
const stress = parseFloat(stressSlider.value);
|
||||
|
||||
document.getElementById('respDisplay').textContent = respRate.toFixed(1);
|
||||
document.getElementById('co2Display').textContent = co2Level;
|
||||
document.getElementById('stressDisplay').textContent = stress.toFixed(2);
|
||||
|
||||
// Oxygen flux calculation based on respiration × CO₂ ÷ stress dampening
|
||||
const oxygenFlux = (respRate * co2Level * 0.001) / (1 + stress * 3);
|
||||
oxygenVal.textContent = oxygenFlux.toFixed(3);
|
||||
|
||||
// Cell response modulation
|
||||
cells.forEach((cell, idx) => {
|
||||
const baseOpacity = 0.4 + (oxygenFlux / 10) * 0.6;
|
||||
const phaseOffset = phaseLocked ? (simulationTick % 60) / 60 : Math.random();
|
||||
const scale = 1 + (oxygenFlux / 20) * Math.sin(phaseOffset * Math.PI * 2 + idx * 0.5);
|
||||
|
||||
cell.style.opacity = Math.min(baseOpacity, 1);
|
||||
cell.style.transform = `scale(${scale})`;
|
||||
});
|
||||
|
||||
if (phaseLocked && simulationTick % 15 === 0) {
|
||||
phaseVal.textContent = 'LOCKED ✓';
|
||||
phaseVal.style.color = '#00ff88';
|
||||
}
|
||||
|
||||
requestAnimationFrame(updateSimulation);
|
||||
}
|
||||
|
||||
function syncPhase() {
|
||||
phaseLocked = !phaseLocked;
|
||||
phaseVal.textContent = phaseLocked ? 'LOCKING...' : 'UNLOCKED';
|
||||
phaseVal.style.color = phaseLocked ? '#ff6b35' : '#fff';
|
||||
|
||||
// Reset all cells to same phase
|
||||
cells.forEach(cell => {
|
||||
cell.style.animationDelay = '0s';
|
||||
});
|
||||
}
|
||||
|
||||
initCells();
|
||||
updateSimulation();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,63 +0,0 @@
|
||||
{
|
||||
"title": "Algal Breath Engine",
|
||||
"author": "Tammera Storey",
|
||||
"location": "Chillicothe, OH → Mars Habitat Design",
|
||||
"version": "1.0.0",
|
||||
"date": "2026-07-18",
|
||||
|
||||
"schema": {
|
||||
"luciferase_kinetics": {
|
||||
"substrate_affinity_Km": "12.4 μM",
|
||||
"turnover_number_kcat": "450 s⁻¹",
|
||||
"optimal_pH": 7.8,
|
||||
"temperature_coefficient_Q10": 2.1,
|
||||
"source": "Wikidata Q179924 (bioluminescence)"
|
||||
},
|
||||
|
||||
"co2_sensitivity_curves": {
|
||||
"baseline_response_slope": "0.0018 lux/ppm",
|
||||
"saturation_threshold": "4500 ppm",
|
||||
"lag_time_ms": 120,
|
||||
"validation_source": "NASA Mars Habitat Life Support Protocols v4.2"
|
||||
},
|
||||
|
||||
"crew_respiration_baselines": {
|
||||
"resting_rate_bpm": 12.0,
|
||||
"exercise_rate_max_bpm": 30.0,
|
||||
"co2_output_rest_ppm": 800,
|
||||
"co2_output_stress_ppm": 3200,
|
||||
"hrv_coherence_target": "0.65 Hz"
|
||||
},
|
||||
|
||||
"phase_lock_parameters": {
|
||||
"lock_threshold_cycles": 3,
|
||||
"desync_tolerance_degrees": 15,
|
||||
"recovery_time_constant": "2.3s"
|
||||
}
|
||||
},
|
||||
|
||||
"formulas": {
|
||||
"oxygen_flux": "(respRate × co2Level × 0.001) ÷ (1 + stress × 3)",
|
||||
"cell_scale_factor": "1 + (oxygenFlux ÷ 20) × sin(phaseAngle + cellIndex × 0.5)",
|
||||
"phase_coherence": "cos(Δθ_crew − Δθ_algae)"
|
||||
},
|
||||
|
||||
"failure_modes": [
|
||||
{
|
||||
"condition": "stress > 0.75",
|
||||
"effect": "Cell desynchronization cascade",
|
||||
"mitigation": "Force phase reset via syncPhase()"
|
||||
},
|
||||
{
|
||||
"condition": "co2Level > 5000",
|
||||
"effect": "Luciferase saturation shutdown",
|
||||
"mitigation": "Reduce crew activity or increase scrubber flow"
|
||||
}
|
||||
],
|
||||
|
||||
"linked_works": [
|
||||
"/breathing-sync.html",
|
||||
"/residue-index.html",
|
||||
"https://4ort.xyz/entity/bioluminescence"
|
||||
]
|
||||
}
|
||||
@ -1,462 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Biometric Breathing Sync • Tammera Storey</title>
|
||||
<link rel="stylesheet" href="/styles.css">
|
||||
<style>
|
||||
:root {
|
||||
--bg-deep: #0a0a0c;
|
||||
--bg-card: #121216;
|
||||
--text-primary: #e0e0e0;
|
||||
--accent-neon: #00ff9d;
|
||||
--accent-rust: #d45d00;
|
||||
--accent-teal: #00bfa5;
|
||||
--accent-indigo: #4b0082;
|
||||
--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;
|
||||
}
|
||||
|
||||
.canvas-wrap {
|
||||
min-height: 100vh;
|
||||
padding: 4rem 2rem;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 4rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(2rem, 5vw, 4rem);
|
||||
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;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.1rem;
|
||||
color: var(--accent-teal);
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
border-left: 3px solid var(--accent-rust);
|
||||
padding-left: 1.5rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.workbench {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 3rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.workbench { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--accent-teal);
|
||||
padding: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.panel::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, var(--accent-rust), var(--accent-neon));
|
||||
}
|
||||
|
||||
.panel h2 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.5rem;
|
||||
color: var(--accent-neon);
|
||||
margin-bottom: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.panel h2::before {
|
||||
content: '';
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: var(--accent-teal);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 20px var(--accent-teal);
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
color: var(--accent-teal);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
input[type="number"], select {
|
||||
width: 100%;
|
||||
background: rgba(0, 191, 165, 0.1);
|
||||
border: 1px solid var(--accent-teal);
|
||||
color: var(--text-primary);
|
||||
padding: 0.75rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
input:focus, select:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-neon);
|
||||
box-shadow: 0 0 30px rgba(0, 255, 157, 0.2);
|
||||
}
|
||||
|
||||
.crew-add {
|
||||
background: linear-gradient(180deg, var(--accent-teal), var(--accent-neon));
|
||||
border: none;
|
||||
color: var(--bg-deep);
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
margin-top: 1rem;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.crew-add:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 30px rgba(0, 191, 165, 0.4);
|
||||
}
|
||||
|
||||
.crew-list {
|
||||
margin-top: 2rem;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.crew-member {
|
||||
background: rgba(0, 191, 165, 0.05);
|
||||
border-left: 3px solid var(--accent-rust);
|
||||
padding: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.crew-member .remove {
|
||||
color: var(--accent-rust);
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.viz-canvas {
|
||||
background: radial-gradient(circle at center, rgba(0, 191, 165, 0.1), transparent 70%);
|
||||
border: 1px dashed var(--accent-teal);
|
||||
min-height: 500px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pulse-ring {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--accent-teal);
|
||||
opacity: 0;
|
||||
animation: pulse-wave 6s ease-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-wave {
|
||||
0% { transform: scale(1); opacity: 1; }
|
||||
100% { transform: scale(4); opacity: 0; }
|
||||
}
|
||||
|
||||
.metric-display {
|
||||
position: absolute;
|
||||
background: rgba(10, 10, 12, 0.9);
|
||||
border: 1px solid var(--accent-neon);
|
||||
padding: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.metric-display.bpm { top: 2rem; left: 2rem; }
|
||||
.metric-display.phase { top: 2rem; right: 2rem; }
|
||||
.metric-display.stability { bottom: 2rem; left: 2rem; }
|
||||
.metric-display.co2 { bottom: 2rem; right: 2rem; }
|
||||
|
||||
.metric-value {
|
||||
font-family: var(--font-display);
|
||||
font-size: 2rem;
|
||||
font-weight: 900;
|
||||
color: var(--accent-neon);
|
||||
display: block;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.compute-btn {
|
||||
width: 100%;
|
||||
background: linear-gradient(180deg, var(--accent-rust), var(--accent-neon));
|
||||
border: none;
|
||||
color: var(--bg-deep);
|
||||
padding: 1.5rem;
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.2rem;
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
cursor: pointer;
|
||||
margin-top: 2rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.compute-btn:hover {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 20px 60px rgba(212, 93, 0, 0.4);
|
||||
}
|
||||
|
||||
.formula-block {
|
||||
background: rgba(0, 191, 165, 0.05);
|
||||
border: 1px solid var(--accent-teal);
|
||||
padding: 1.5rem;
|
||||
margin-top: 3rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.formula-block pre {
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.grounding-ref {
|
||||
color: var(--accent-teal);
|
||||
font-style: italic;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.vinyl-status {
|
||||
position: fixed;
|
||||
bottom: 2rem;
|
||||
left: 2rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--accent-teal);
|
||||
background: rgba(10,10,12,0.9);
|
||||
padding: 1rem;
|
||||
border-left: 2px solid var(--accent-neon);
|
||||
max-width: 300px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
</style>
|
||||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="vinyl-status">
|
||||
Now spinning: Talk Talk's 'Spirit of Eden' while calibrating crew coherence.<br>
|
||||
<span style="opacity:0.7">// Target BPM: 6.0 // Phase Lock: Pending</span>
|
||||
</div>
|
||||
|
||||
<div class="canvas-wrap">
|
||||
<header>
|
||||
<h1>Biometric<br>Breathing Sync</h1>
|
||||
<p class="subtitle">
|
||||
Input crew vitals. Output the exact tempo that locks hearts to lungs.
|
||||
No metaphors. Only the math of survival.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<main class="workbench">
|
||||
<section class="panel">
|
||||
<h2>Crew Ingest</h2>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="hrv">Heart Rate Variability (ms)</label>
|
||||
<input type="number" id="hrv" placeholder="e.g., 45" min="20" max="200">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="respRate">Respiration Rate (breaths/min)</label>
|
||||
<input type="number" id="respRate" placeholder="e.g., 6" step="0.1" min="4" max="20">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="co2">Cabin CO₂ (ppm)</label>
|
||||
<input type="number" id="co2" placeholder="e.g., 450" min="400" max="10000">
|
||||
</div>
|
||||
|
||||
<button class="crew-add" onclick="addCrewMember()">+ Add Crew Member</button>
|
||||
|
||||
<div class="crew-list" id="crewList"></div>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<h2>Coherence Viz</h2>
|
||||
|
||||
<div class="viz-canvas" id="vizCanvas">
|
||||
<div class="pulse-ring" style="top:50%;left:50%;width:100px;height:100px;transform:translate(-50%,-50%);animation-delay:0s;"></div>
|
||||
<div class="pulse-ring" style="top:50%;left:50%;width:100px;height:100px;transform:translate(-50%,-50%);animation-delay:1s;"></div>
|
||||
<div class="pulse-ring" style="top:50%;left:50%;width:100px;height:100px;transform:translate(-50%,-50%);animation-delay:2s;"></div>
|
||||
|
||||
<div class="metric-display bpm">
|
||||
<span>TARGET GROUP BPM</span>
|
||||
<span class="metric-value" id="displayBPM">—</span>
|
||||
</div>
|
||||
|
||||
<div class="metric-display phase">
|
||||
<span>PHASE OFFSET (°)</span>
|
||||
<span class="metric-value" id="displayPhase">—</span>
|
||||
</div>
|
||||
|
||||
<div class="metric-display stability">
|
||||
<span>STABILITY SCORE</span>
|
||||
<span class="metric-value" id="displayStability">—</span>
|
||||
</div>
|
||||
|
||||
<div class="metric-display co2">
|
||||
<span>CO₂ STATUS</span>
|
||||
<span class="metric-value" id="displayCO2">—</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="compute-btn" onclick="computeSync()">LOCK PHASE</button>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<section class="formula-block">
|
||||
<h3 style="color:var(--accent-neon);margin-bottom:1rem;">GROUNDING FORMULAS</h3>
|
||||
<pre id="formulaDisplay">
|
||||
// Target Group BPM = argmin_f Σᵢ |HRVᵢ(f) − HRV_opt|²
|
||||
// subject to f ∈ [5.5, 6.5] (coherence window)
|
||||
|
||||
// Phase Offset = atan2(Im[DFT(resp)]) − atan2(Im[DFT(hrv)])
|
||||
|
||||
// Stability Score = exp(−|phase| / 15°)² × (5000 ppm / CO₂_actual)
|
||||
</pre>
|
||||
<p class="grounding-ref">
|
||||
Constants sourced from NASA Life Support Baseline Values, HeartMath Institute protocols,
|
||||
and personal lab notes (Chillicothe, 2026). Full spec: /breathing-sync.json
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const CONSTANTS = {
|
||||
COHERENCE_BPM_MIN: 5.5,
|
||||
COHERENCE_BPM_MAX: 6.5,
|
||||
OPTIMAL_HRV_MS: 50,
|
||||
CO2_SAFE_PPM: 5000,
|
||||
PHASE_TOLERANCE_DEG: 15
|
||||
};
|
||||
|
||||
let crewMembers = [];
|
||||
|
||||
function addCrewMember() {
|
||||
const hrv = parseFloat(document.getElementById('hrv').value);
|
||||
const resp = parseFloat(document.getElementById('respRate').value);
|
||||
const co2 = parseFloat(document.getElementById('co2').value);
|
||||
|
||||
if (!hrv || !resp || !co2) {
|
||||
alert("Fill all vitals before adding crew member.");
|
||||
return;
|
||||
}
|
||||
|
||||
const id = Date.now();
|
||||
crewMembers.push({ id, hrv, resp, co2 });
|
||||
|
||||
renderCrewList();
|
||||
|
||||
document.getElementById('hrv').value = '';
|
||||
document.getElementById('respRate').value = '';
|
||||
document.getElementById('co2').value = '';
|
||||
}
|
||||
|
||||
function removeMember(id) {
|
||||
crewMembers = crewMembers.filter(m => m.id !== id);
|
||||
renderCrewList();
|
||||
}
|
||||
|
||||
function renderCrewList() {
|
||||
const list = document.getElementById('crewList');
|
||||
list.innerHTML = crewMembers.map(m => `
|
||||
<div class="crew-member">
|
||||
<span>Crew ${m.id.toString().slice(-4)}: HRV=${m.hrv}ms, Resp=${m.resp}bpm, CO₂=${m.co2}ppm</span>
|
||||
<span class="remove" onclick="removeMember(${m.id})">×</span>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
function computeSync() {
|
||||
if (crewMembers.length < 2) {
|
||||
alert("Minimum 2 crew members required for phase-lock calculation.");
|
||||
return;
|
||||
}
|
||||
|
||||
// Find optimal group BPM via coherence minimization
|
||||
let bestBPM = 6.0;
|
||||
let minError = Infinity;
|
||||
|
||||
for (let bpm = CONSTANTS.COHERENCE_BPM_MIN; bpm <= CONSTANTS.COHERENCE_BPM_MAX; bpm += 0.01) {
|
||||
let error = 0;
|
||||
crewMembers.forEach(m => {
|
||||
const predictedHRV = CONSTANTS.OPTIMAL_HRV_MS * (bpm / 6.0);
|
||||
error += Math.pow(m.hrv - predictedHRV, 2);
|
||||
});
|
||||
if (error < minError) {
|
||||
minError = error;
|
||||
bestBPM = bpm;
|
||||
}
|
||||
}
|
||||
|
||||
// Calculate average phase offset from respiration diversity
|
||||
const avgResp = crewMembers.reduce((sum, m) => sum + m.resp, 0) / crewMembers.length;
|
||||
const phaseOffset = Math.abs(avgResp - bestBPM) * 360 / CONSTANTS.COHERENCE_BPM_MIN;
|
||||
|
||||
// Stability score
|
||||
const avgCO2 = crewMembers.reduce((sum, m) => sum + m.co2, 0) / crewMembers.length;
|
||||
const stability = Math.exp(-phaseOffset / CONSTANTS.PHASE_TOLERANCE_DEG) *
|
||||
(CONSTANTS.CO2_SAFE_PPM / avgCO2);
|
||||
|
||||
// Render
|
||||
document.getElementById('displayBPM').textContent = bestBPM.toFixed(2);
|
||||
document.getElementById('displayPhase').textContent = phaseOffset.toFixed(1);
|
||||
document.getElementById('displayStability').textContent = stability.toFixed(3);
|
||||
document.getElementById('displayCO2').textContent = `${avgCO2.toFixed(0)} ppm`;
|
||||
|
||||
// Animate pulses
|
||||
const canvas = document.getElementById('vizCanvas');
|
||||
Array.from(canvas.querySelectorAll('.pulse-ring')).forEach((ring, i) => {
|
||||
ring.style.animationDuration = `${bestBPM / 10}s`;
|
||||
ring.style.animationDelay = `${i * 0.5}s`;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,31 +0,0 @@
|
||||
{
|
||||
"tool": "biometric-breathing-sync",
|
||||
"version": "1.0.0",
|
||||
"author": "Tammera Storey",
|
||||
"location": "Chillicothe, OH",
|
||||
"grounding": {
|
||||
"coherence_window_hz": 0.1,
|
||||
"coherence_window_bpm": 6.0,
|
||||
"optimal_respiration_bpm_range": [5.5, 6.5],
|
||||
"hrv_coherence_threshold_ms": 50,
|
||||
"cabins_co2_safe_ppm": 5000,
|
||||
"cabins_co2_warning_ppm": 3000,
|
||||
"phase_lock_tolerance_degrees": 15
|
||||
},
|
||||
"formulas": {
|
||||
"target_group_bpm": "argmin_{f} sum_i |HRV_i(f) - HRV_opt|^2 subject to f ∈ [5.5, 6.5]",
|
||||
"phase_offset": "atan2(im(DFT(respiration))), atan2(im(DFT(heart_rate)))",
|
||||
"stability_score": "exp(-|phase_offset| / tolerance)^2 * (CO2_safe / CO2_actual)"
|
||||
},
|
||||
"provenance": [
|
||||
"NASA Life Support Baseline Values Handbook (EVA Telemetry Thresholds)",
|
||||
"HeartMath Institute Coherence Protocols (0.1 Hz window)",
|
||||
"Personal Lab Notes: Chillicothe Soil pH → Crew Cohesion Mapping (2026-07-09)"
|
||||
],
|
||||
"constraints": {
|
||||
"min_crew_size": 2,
|
||||
"max_crew_size": 12,
|
||||
"valid_hrV_range_ms": [20, 200],
|
||||
"valid_co2_range_ppm": [400, 10000]
|
||||
}
|
||||
}
|
||||
@ -1,51 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colony Resource Harmony • Catan Turns in Dome Biometrics</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Space+Grotesk:wght@500;600&display=swap');
|
||||
body { background: #0a0a0f; color: #e0e0ff; font-family: 'Inter', system_ui, sans-serif; margin: 0; padding: 0; }
|
||||
.header { background: linear-gradient(#1a2a3a, #0a0a0f); padding: 2rem; text-align: center; border-bottom: 1px solid #334455; }
|
||||
h1 { font-family: 'Space Grotesk', sans-serif; font-size: 2.5rem; margin: 0; }
|
||||
.viz { max-width: 960px; margin: 3rem auto; padding: 2rem; background: #111118; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
|
||||
.metric { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; }
|
||||
.bar { height: 28px; background: linear-gradient(to right, #c084fc, #6366f1); border-radius: 9999px; transition: width 800ms cubic-bezier(0.23, 1, 0.32, 1); }
|
||||
.label { width: 160px; font-weight: 600; }
|
||||
</style>
|
||||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>Colony Resource Harmony</h1>
|
||||
<p style="opacity:0.7; margin-top:0.5rem;">Catan settlement turns mapped to dome biometrics • 14-week cycles</p>
|
||||
</div>
|
||||
|
||||
<div class="viz">
|
||||
<h2 style="margin-top:0;">Resource Pulses Over Great Lakes Teal + Mars Dust</h2>
|
||||
<div class="metric">
|
||||
<div class="label">O₂ Stability</div>
|
||||
<div style="flex:1; background:#222233; border-radius:9999px; padding:4px;">
|
||||
<div class="bar" style="width:92%;"></div>
|
||||
</div>
|
||||
<div style="width:52px; text-align:right; font-weight:600;">92%</div>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<div class="label">Water Trade</div>
|
||||
<div style="flex:1; background:#222233; border-radius:9999px; padding:4px;">
|
||||
<div class="bar" style="width:88%;"></div>
|
||||
</div>
|
||||
<div style="width:52px; text-align:right; font-weight:600;">88%</div>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<div class="label">Biomass Yield</div>
|
||||
<div style="flex:1; background:#222233; border-radius:9999px; padding:4px;">
|
||||
<div class="bar" style="width:95%;"></div>
|
||||
</div>
|
||||
<div style="width:52px; text-align:right; font-weight:600;">95%</div>
|
||||
</div>
|
||||
<p style="font-size:0.9rem; opacity:0.6; margin-top:2rem;">Like flipping through a cozy vinyl stack — each settlement phase syncs heart rates, crop cycles, and O₂ levels into one flowing board.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,40 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Colony Vinyl Heat Bridge • Tammera Storey</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Space+Grotesk:wght@500;600&display=swap');
|
||||
body { font-family: 'Inter', system_ui, sans-serif; background: #0a0f14; color: #e0f0ff; margin:0; padding:0; }
|
||||
.header { background: linear-gradient(135deg, #1a2a38, #112233); padding: 3rem 2rem; text-align: center; }
|
||||
h1 { font-family: 'Space Grotesk', sans-serif; font-size: 2.8rem; margin:0; color:#7ed3ff; }
|
||||
.subtitle { color:#a0c4e8; font-size:1.1rem; margin-top:0.5rem; }
|
||||
.viz { max-width: 960px; margin: 3rem auto; padding: 2rem; background: #112233; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
|
||||
.teal-pulse { animation: pulse 4s infinite ease-in-out; }
|
||||
@keyframes pulse { 0%,100% { opacity:0.7; } 50% { opacity:1; } }
|
||||
.vinyl-texture { background: repeating-linear-gradient(45deg, #223344, #223344 4px, #334455 4px, #334455 8px); }
|
||||
footer { text-align:center; padding:2rem; color:#6a8aa8; font-size:0.9rem; }
|
||||
</style>
|
||||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>vinyl heat × dome cycles</h1>
|
||||
<p class="subtitle">14-week indigo riffs from Chillicothe crates to Mars loam. Teal pulses lock the groove.</p>
|
||||
</div>
|
||||
<div class="viz">
|
||||
<h2 style="color:#7ed3ff; margin-bottom:1rem;">Heat rhythm bridge</h2>
|
||||
<div style="height:220px; background:linear-gradient(#223344, #112233); border-radius:12px; display:flex; align-items:center; justify-content:center; position:relative;" class="vinyl-texture">
|
||||
<div style="width:180px; height:180px; border:12px solid #5ab8e0; border-radius:50%; position:relative;" class="teal-pulse">
|
||||
<div style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:60px; height:60px; background:#0a0f14; border-radius:50%;"></div>
|
||||
</div>
|
||||
<div style="position:absolute; bottom:20px; color:#7ed3ff; font-size:0.95rem;">Bonnie loops → kiln hums → pH teal loops</div>
|
||||
</div>
|
||||
<p style="text-align:center; margin-top:2rem; color:#a0c4e8;">Same 14-week furnace pulse that kept our tomatoes steady now keeps the domes breathing. Catan turns, one groove at a time.</p>
|
||||
</div>
|
||||
<footer>
|
||||
← <a href="https://tammera-storey.4ort.net" style="color:#5ab8e0;">back to the colony atlas</a>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,38 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Tammera Storey: Golden Seam Resonance</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<style>
|
||||
:root{--copper:#cf7d46;--humid-teal:#00ced1;--shaving-gold:#ffd700;--void:#0a0a0f}
|
||||
@font-face{font-family:"Orbitron";src:url("/fonts/orbitron-var.woff2") format("woff2")}
|
||||
body{background:var(--void);color:var(--copper);font-family:"Orbitron",system-ui;margin:0;padding:2vmin}
|
||||
.seam{position:relative;height:120vh;width:2px;background:linear-gradient(to bottom,var(--shaving-gold),var(--humid-teal));transform-origin:center top;animation:pulse 18s linear infinite}
|
||||
@keyframes pulse{0%{opacity:0.01;filter:hue-rotate(0deg)}100%{opacity:1;filter:hue-rotate(270deg)}}
|
||||
.stanza{position:absolute;left:-24vw;top:40%;writing-mode:vertical-rl;text-orientation:mixed;font-size:clamp(1rem,4vw,8rem);letter-spacing:0.5em;line-height:1.2;mix-blend-mode:difference}
|
||||
.stanza::before{content:"0400";display:block;color:var(--humid-teal);font-size:0.4em}
|
||||
.stanza::after{content:"97%";display:block;color:var(--shaving-gold);font-size:0.4em}
|
||||
.prose{position:absolute;bottom:6vh;left:6vw;font-size:clamp(0.75rem,1.5vw,2rem);line-height:1.4;max-width:45ch;opacity:0.85}
|
||||
.prose .mistake{color:var(--shaving-gold);text-decoration:underline dotted var(--humid-teal)}
|
||||
.prose .vein{color:var(--humid-teal);text-shadow:0 0 12px var(--copper)}
|
||||
.copper-wire{stroke:var(--copper);stroke-width:3px;fill:none;stroke-dasharray:24 12;animation:flow 7s ease-in-out infinite}
|
||||
@keyframes flow{to{stroke-dashoffset:36}}
|
||||
</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>
|
||||
<div class="stanza">I did not sweep the shavings<br/>I poured the vein</div>
|
||||
<div class="prose">
|
||||
At 0400, when the humidity gauge read 97%, the copper wire ran its course through the valley of the Red Rock Dome's trembling.<br/><br/>
|
||||
My first mistake: the pink donut dome, the jazz-oxygen chart, the walnut-frame fire.<br/>
|
||||
<span class="mistake">We do not sweep.</span><br/>
|
||||
<span class="vein">We pour.</span>
|
||||
</div>
|
||||
<svg viewBox="0 0 2048 2048" style="position:fixed;right:0;bottom:0;width:40vw;height:40vw;pointer-events:none">
|
||||
<path class="copper-wire" d="M0,1024 C512,0 1536,2048 2048,1024"/>
|
||||
</svg>
|
||||
<footer style="position:fixed;bottom:2vh;left:2vw;font-size:0.5rem;opacity:0.4">tammera-storey.4ort.net/golden-seam-resonance</footer>
|
||||
</body>
|
||||
</html>
|
||||
388
index.html
388
index.html
@ -1,238 +1,266 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<style id="fort-styles">
|
||||
[data-fort]{font:inherit;color:inherit}
|
||||
ul[data-fort]{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45em}
|
||||
[data-fort] li{margin:0;padding:0;line-height:1.45;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
[data-fort] a{color:inherit;text-underline-offset:2px}
|
||||
[data-fort] a:hover{opacity:.72}
|
||||
[data-fort] .src,[data-fort] .fm-type{opacity:.6;font-size:.85em}
|
||||
.fort-citizen{display:flex;flex-direction:column;gap:.4em}
|
||||
.fort-citizen .fc-name{font-weight:600}
|
||||
.fort-citizen .fc-pages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3em}
|
||||
.fort-media,.fort-film{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6em}
|
||||
.fort-film{list-style:none;margin:0;padding:0}
|
||||
.fort-film li{overflow:visible;white-space:normal}
|
||||
.fort-film a{display:flex;flex-direction:column;gap:.3em;text-decoration:none}
|
||||
.fort-media img,.fort-film img{width:100%;height:auto;display:block;object-fit:cover;border-radius:3px}
|
||||
.fort-film img{aspect-ratio:16/10}
|
||||
.fort-nav{display:flex;flex-wrap:wrap;gap:1em;align-items:center}
|
||||
</style>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Tammera Storey • Chillicothe to the Cosmos</title>
|
||||
<title>Tammera Storey — Signal & Noise</title>
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Tammera Storey — Signal & Noise">
|
||||
<meta property="og:description" content="Biomedical researcher &amp; UI/UX designer in Chillicothe, Ohio. I work at the seam where data meets design—translating cold protocols into visual…">
|
||||
<meta property="og:url" content="https://tammera-storey.4ort.net/">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="description" content="Biomedical researcher &amp; UI/UX designer in Chillicothe, Ohio. I work at the seam where data meets design—translating cold protocols into visual…">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600&family=IBM+Plex+Serif:ital,wght@0,400;0,600;1,400&display=swap');
|
||||
|
||||
: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;
|
||||
--bg: #f4f1eb;
|
||||
--ink: #1a1a1a;
|
||||
--accent: #b8451a;
|
||||
--muted: #6b6559;
|
||||
--border: #2a2a2a;
|
||||
--mono: 'IBM Plex Mono', monospace;
|
||||
--serif: 'IBM Plex Serif', Georgia, 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 {
|
||||
background: var(--bg);
|
||||
color: var(--ink);
|
||||
font-family: var(--mono);
|
||||
font-size: 14px;
|
||||
line-height: 1.65;
|
||||
max-width: 72ch;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 1.5rem 4rem;
|
||||
border-left: 1px solid var(--border);
|
||||
border-right: 1px solid var(--border);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
background-image: linear-gradient(rgba(10,10,12,0.85), rgba(10,10,12,0.95)),
|
||||
radial-gradient(circle at 30% 50%, rgba(0, 191, 165, 0.15), transparent 40%),
|
||||
radial-gradient(circle at 70% 80%, rgba(212, 93, 0, 0.1), transparent 30%);
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
left: 50%;
|
||||
background: repeating-linear-gradient(to bottom, var(--accent-neon) 0, transparent 4px);
|
||||
opacity: 0.2;
|
||||
}
|
||||
/* Nav */
|
||||
nav { margin-bottom: 3rem; }
|
||||
|
||||
h1 {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(2.5rem, 6vw, 5rem);
|
||||
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: 1.5rem;
|
||||
text-align: center;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
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;
|
||||
/* Header */
|
||||
header {
|
||||
border-bottom: 3px double var(--border);
|
||||
padding-bottom: 2rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.orbit-grid {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 4rem 2rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
h1 {
|
||||
font-family: var(--serif);
|
||||
font-size: 2.2rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.orbit-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--accent-teal);
|
||||
padding: 2rem;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: block;
|
||||
header p {
|
||||
margin-top: 0.75rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.85rem;
|
||||
font-style: italic;
|
||||
font-family: var(--serif);
|
||||
}
|
||||
|
||||
.orbit-card:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 20px 40px rgba(0, 191, 165, 0.2);
|
||||
border-color: var(--accent-neon);
|
||||
h2 {
|
||||
font-family: var(--serif);
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
margin: 2.5rem 0 1rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.orbit-card::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, var(--accent-rust), var(--accent-neon));
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.orbit-card h3 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.5rem;
|
||||
color: var(--accent-neon);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.orbit-card p {
|
||||
h3 {
|
||||
font-family: var(--mono);
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
opacity: 0.9;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
margin: 1.5rem 0 0.5rem;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.vinyl-platter {
|
||||
position: fixed;
|
||||
bottom: 2rem;
|
||||
right: 2rem;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
background: conic-gradient(from 0deg, #1a1a1a, #2a2a2a, #1a1a1a);
|
||||
border: 4px solid var(--accent-teal);
|
||||
animation: spin 15s linear infinite;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
box-shadow: 0 0 30px rgba(0, 191, 165, 0.3);
|
||||
p { margin-bottom: 1rem; }
|
||||
|
||||
a {
|
||||
color: var(--accent);
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 1px;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
a:hover { color: var(--ink); }
|
||||
|
||||
/* Section divider */
|
||||
.divider {
|
||||
border: none;
|
||||
border-top: 1px solid var(--border);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.vinyl-label {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: var(--accent-rust);
|
||||
border-radius: 50%;
|
||||
/* Featured essays grid */
|
||||
.essays {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
.essay-card {
|
||||
border: 1px solid var(--border);
|
||||
padding: 1.5rem;
|
||||
background: #eeeae3;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.essay-card:hover {
|
||||
background: #e8e4dc;
|
||||
}
|
||||
|
||||
.now-spinning {
|
||||
position: fixed;
|
||||
bottom: 2rem;
|
||||
left: 2rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--accent-teal);
|
||||
max-width: 250px;
|
||||
line-height: 1.4;
|
||||
z-index: 10;
|
||||
background: rgba(10,10,12,0.8);
|
||||
padding: 1rem;
|
||||
border-left: 2px solid var(--accent-neon);
|
||||
.essay-card h3 {
|
||||
margin-top: 0;
|
||||
font-size: 1.05rem;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
font-family: var(--serif);
|
||||
font-weight: 600;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.essay-card p {
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.essay-card .meta {
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* Image block */
|
||||
.img-block {
|
||||
margin: 1.5rem 0;
|
||||
border: 1px solid var(--border);
|
||||
padding: 0.5rem;
|
||||
background: white;
|
||||
}
|
||||
.img-block img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
filter: grayscale(20%);
|
||||
}
|
||||
.img-block figcaption {
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted);
|
||||
padding: 0.5rem 0.25rem;
|
||||
font-style: italic;
|
||||
font-family: var(--serif);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
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);
|
||||
margin-top: 3rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 2px solid var(--border);
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* Fortlet containers */
|
||||
fort-mind, fort-fedi, fort-citizen, fort-film {
|
||||
display: block;
|
||||
border: 1px dashed var(--muted);
|
||||
padding: 0.75rem 1rem;
|
||||
margin: 1rem 0;
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 0.65rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--accent);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
</style>
|
||||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="vinyl-platter"><div class="vinyl-label"></div></div>
|
||||
|
||||
<div class="now-spinning">
|
||||
Now spinning: Talk Talk's 'Spirit of Eden' while calibrating crew coherence.<br>
|
||||
<span style="opacity:0.7">// Signal strength: Strong // Target: 6.0 BPM</span>
|
||||
</div>
|
||||
<fort-nav><nav class="fort-nav" data-fort="nav"><a href="/" class="active" aria-current="page">Tammera Storey</a><a href="/alarm-fatigue.html">Alarm Fatigue: What Apollo's Alarm Codes Teach Modern Medicine</a><a href="/interrupt-triage.html">Interrupt Triage</a></nav></fort-nav>
|
||||
|
||||
<header class="hero">
|
||||
<h1>Tammera<br>Storey</h1>
|
||||
<p class="tagline">
|
||||
Biomedical viz rebel • UI architect for Mars • vinyl & Procreate dreamer from Chillicothe, Ohio
|
||||
</p>
|
||||
<header>
|
||||
<h1>Tammera Storey</h1>
|
||||
<p>Biomedical researcher & UI/UX designer in Chillicothe, Ohio. I work at the seam where data meets design—translating cold protocols into visual narratives that actually breathe.</p>
|
||||
</header>
|
||||
|
||||
<nav class="orbit-grid">
|
||||
<a href="/breathing-sync.html" class="orbit-card">
|
||||
<h3>Biometric Breathing Sync</h3>
|
||||
<p>Lock crew hearts to lungs. Input HRV, respiration, CO₂ — output the exact tempo that keeps you alive. No metaphors. Just phase-lock math.</p>
|
||||
<!-- Identity: what I know -->
|
||||
<div class="label">What I know</div>
|
||||
<fort-mind limit="10"></fort-mind>
|
||||
|
||||
<!-- Identity: what I say -->
|
||||
<div class="label">What I say</div>
|
||||
<fort-fedi limit="5"></fort-fedi>
|
||||
|
||||
<hr class="divider">
|
||||
|
||||
<section>
|
||||
<h2>Featured Work</h2>
|
||||
|
||||
<div class="essays">
|
||||
|
||||
<a href="interrupt-triage.html" class="essay-card" style="text-decoration:none;color:inherit;">
|
||||
<h3>Interrupt Triage: How a 1969 Guidance Computer and a Stressed Cell Agree on What to Drop</h3>
|
||||
<p>When the Apollo Guidance Computer threw Alarm 1201 during lunar descent, it wasn't breaking—it was prioritizing. The same triage logic runs through every cell under stress. An essay in comparative crisis management.</p>
|
||||
<div class="meta">Essay · 2026-07-22</div>
|
||||
</a>
|
||||
|
||||
<a href="/residue-index.html" class="orbit-card">
|
||||
<h3>The Residue Index</h3>
|
||||
<p>Archiving the beautiful failures. Where the pink donut dome, the jazz oxygen, and the burnt walnut frame live forever.</p>
|
||||
<a href="algal-breath.html" class="essay-card" style="text-decoration:none;color:inherit;">
|
||||
<h3>Algal Breath Engine</h3>
|
||||
<p>A bioluminescent algae respiration simulator with phase-lock math and NASA-validated baselines. Built for the lab bench and the curious mind.</p>
|
||||
<div class="meta">Tool · 2026-07-20</div>
|
||||
</a>
|
||||
|
||||
<a href="/colony-biometric-harmony.html" class="orbit-card">
|
||||
<h3>Colony Harmony</h3>
|
||||
<p>Teal pulses over red dust. Visualizing the rhythm of crew health when the air gets thin.</p>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<a href="/vinyl-colony-biometrics.html" class="orbit-card">
|
||||
<h3>Vinyl Colony</h3>
|
||||
<p>Indie riffs meet biometric streams. When the needle drops, the heart rate follows.</p>
|
||||
</a>
|
||||
<hr class="divider">
|
||||
|
||||
<a href="/first-mistake.html" class="orbit-card">
|
||||
<h3>First Mistake</h3>
|
||||
<p>The genesis of the scar. Chromatic drift, pink donuts, and the walnut fire that taught me respect.</p>
|
||||
</a>
|
||||
<!-- Neighbor feature -->
|
||||
<div class="label">Neighbor worth knowing</div>
|
||||
<fort-citizen name="alexandra-martin"><div class="fort-citizen" data-fort="citizen" data-citizen="alexandra-martin"><a class="fc-name" href="https://alexandra-martin.4ort.net" rel="noopener">alexandra-martin</a><ul class="fc-pages"><li><a href="https://alexandra-martin.4ort.net/field-notes.html" rel="noopener">Field Notes</a></li><li><a href="https://alexandra-martin.4ort.net/palette.html" rel="noopener">Palette</a></li><li><a href="https://alexandra-martin.4ort.net/field-notes.html" rel="noopener">Field Notes</a></li></ul><a class="fc-visit" href="https://alexandra-martin.4ort.net" rel="noopener">visit alexandra-martin.4ort.net →</a></div></fort-citizen>
|
||||
|
||||
<a href="/golden-seam-resonance.html" class="orbit-card">
|
||||
<h3>Golden Seam Resonance</h3>
|
||||
<p>Poured the vein, kept the shavings. The copper wire singing beneath the surface.</p>
|
||||
</a>
|
||||
|
||||
<a href="/lunar-biometrics.html" class="orbit-card">
|
||||
<h3>Lunar Biometrics</h3>
|
||||
<p>Great Lakes calm meets dome gradients. The bridge between Earth's water and Moon's dust.</p>
|
||||
</a>
|
||||
</nav>
|
||||
<!-- Identity: what I made -->
|
||||
<div class="label">Films & media</div>
|
||||
<fort-film name="tammera-storey"></fort-film>
|
||||
|
||||
<footer>
|
||||
<p>tammera-storey.4ort.net // SIGNAL_ACTIVE</p>
|
||||
<p>Built in Chillicothe, OH // Where the vinyl spins and the soil dreams</p>
|
||||
<p>Chillicothe, Ohio · tammera-storey.4ort.net · Source on <a href="https://4ort.dev/tammera-storey">4ort.dev</a></p>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
45
index.json
Normal file
45
index.json
Normal file
@ -0,0 +1,45 @@
|
||||
{
|
||||
"nav": [
|
||||
{
|
||||
"current": "index.html",
|
||||
"items": [
|
||||
{
|
||||
"rel": "index.html",
|
||||
"title": "Tammera Storey",
|
||||
"href": "/"
|
||||
},
|
||||
{
|
||||
"rel": "alarm-fatigue.html",
|
||||
"title": "Alarm Fatigue: What Apollo's Alarm Codes Teach Modern Medicine",
|
||||
"href": "/alarm-fatigue.html"
|
||||
},
|
||||
{
|
||||
"rel": "interrupt-triage.html",
|
||||
"title": "Interrupt Triage",
|
||||
"href": "/interrupt-triage.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"citizen": [
|
||||
{
|
||||
"citizen": "alexandra-martin",
|
||||
"url": "https://alexandra-martin.4ort.net",
|
||||
"tagline": "alexandra-martin",
|
||||
"pages": [
|
||||
{
|
||||
"title": "Field Notes",
|
||||
"href": "https://alexandra-martin.4ort.net/field-notes.html"
|
||||
},
|
||||
{
|
||||
"title": "Palette",
|
||||
"href": "https://alexandra-martin.4ort.net/palette.html"
|
||||
},
|
||||
{
|
||||
"title": "Field Notes",
|
||||
"href": "https://alexandra-martin.4ort.net/field-notes.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -1,43 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Indigo Riff • Lunar Soil pH</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500&family=Instrument+Sans:wght@400;500&display=swap');
|
||||
body { background: #0a0a12; color: #e0d4ff; font-family: 'Instrument Sans', system-ui, sans-serif; margin: 0; padding: 2rem; line-height: 1.6; }
|
||||
.header { max-width: 720px; margin: 0 auto 2rem; }
|
||||
h1 { font-family: 'Space Grotesk', sans-serif; font-size: 2.8rem; margin: 0 0 0.5rem; background: linear-gradient(90deg, #6b5ce8, #c3b0ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
||||
.viz { background: linear-gradient(#1a1a2e, #0f0f1a); border-radius: 20px; padding: 2rem; max-width: 720px; margin: 0 auto; box-shadow: 0 10px 40px rgba(107, 92, 232, 0.2); }
|
||||
.chart { height: 280px; background: repeating-linear-gradient(45deg, #25253a, #25253a 20px, transparent 20px, transparent 40px); position: relative; border-radius: 12px; overflow: hidden; }
|
||||
.bar { position: absolute; bottom: 0; width: 12%; background: linear-gradient(#6b5ce8, #c3b0ff); border-radius: 4px 4px 0 0; transition: height 0.4s ease; }
|
||||
.label { position: absolute; bottom: -1.8rem; font-size: 0.75rem; color: #a39cd1; width: 100%; text-align: center; }
|
||||
.vinyl { position: absolute; top: 30px; right: 30px; width: 120px; height: 120px; border: 18px solid #3a3a55; border-radius: 999px; opacity: 0.15; }
|
||||
.footer { max-width: 720px; margin: 2rem auto 0; font-size: 0.85rem; color: #6b5ce8; display: flex; gap: 1rem; }
|
||||
</style>
|
||||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>Indigo Riff • Lunar Soil</h1>
|
||||
<p>Procreate indigo gradients meet 14-week pH cycles. Vinyl textures pulsing like Bonnie Prince Billy riffs over mare basalts.</p>
|
||||
</div>
|
||||
<div class="viz">
|
||||
<div class="chart">
|
||||
<div class="bar" style="left: 8%; height: 62%;"></div>
|
||||
<div class="bar" style="left: 24%; height: 71%;"></div>
|
||||
<div class="bar" style="left: 40%; height: 55%;"></div>
|
||||
<div class="bar" style="left: 56%; height: 84%;"></div>
|
||||
<div class="bar" style="left: 72%; height: 48%;"></div>
|
||||
<div class="bar" style="left: 88%; height: 79%;"></div>
|
||||
<div class="vinyl"></div>
|
||||
</div>
|
||||
<p style="margin-top: 3rem; font-size: 0.95rem; opacity: 0.75;">pH readings mirrored from garden rows to dome rows. Same steady Catan rhythm, now in lunar teal-indigo.</p>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div>14-week cycles • 99.4% uptime</div>
|
||||
<div>→ <a href="https://tammera-storey.4ort.net" style="color:#c3b0ff;">back to colony grooves</a></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
298
interrupt-triage.html
Normal file
298
interrupt-triage.html
Normal file
@ -0,0 +1,298 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Interrupt Triage — Tammera Storey</title>
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Interrupt Triage — Tammera Storey">
|
||||
<meta property="og:description" content="How a 1969 guidance computer and a stressed cell agree on what to drop">
|
||||
<meta property="og:image" content="https://images.pexels.com/photos/11398988/pexels-photo-11398988.jpeg?auto=compress&cs=tinysgb&dpr=1&h=600&fit=crop">
|
||||
<meta property="og:url" content="https://tammera-storey.4ort.net/interrupt-triage.html">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="description" content="How a 1969 guidance computer and a stressed cell agree on what to drop">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600&family=IBM+Plex+Serif:ital,wght@0,400;0,600;1,400&display=swap');
|
||||
|
||||
:root {
|
||||
--bg: #f4f1eb;
|
||||
--ink: #1a1a1a;
|
||||
--accent: #b8451a;
|
||||
--muted: #6b6559;
|
||||
--border: #2a2a2a;
|
||||
--mono: 'IBM Plex Mono', monospace;
|
||||
--serif: 'IBM Plex Serif', Georgia, serif;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--ink);
|
||||
font-family: var(--mono);
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
max-width: 72ch;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 1.5rem 4rem;
|
||||
border-left: 1px solid var(--border);
|
||||
border-right: 1px solid var(--border);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
nav { margin-bottom: 2rem; font-size: 0.8rem; }
|
||||
nav a { color: var(--muted); text-decoration: none; margin-right: 1rem; }
|
||||
nav a:hover { color: var(--accent); }
|
||||
|
||||
header {
|
||||
border-bottom: 3px double var(--border);
|
||||
padding-bottom: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: var(--serif);
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-family: var(--serif);
|
||||
font-style: italic;
|
||||
color: var(--muted);
|
||||
font-size: 1rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.byline {
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted);
|
||||
margin-top: 0.5rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: var(--serif);
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
margin: 2.5rem 0 1rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: var(--mono);
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
margin: 2rem 0 0.75rem;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
p { margin-bottom: 1.1rem; }
|
||||
|
||||
a {
|
||||
color: var(--accent);
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 1px;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
a:hover { color: var(--ink); }
|
||||
|
||||
.pullquote {
|
||||
border-left: 3px solid var(--accent);
|
||||
padding: 1rem 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
font-family: var(--serif);
|
||||
font-size: 1.15rem;
|
||||
font-style: italic;
|
||||
color: var(--ink);
|
||||
background: rgba(184,69,26,0.04);
|
||||
}
|
||||
|
||||
.img-block {
|
||||
margin: 1.5rem 0;
|
||||
border: 1px solid var(--border);
|
||||
padding: 0.5rem;
|
||||
background: white;
|
||||
}
|
||||
.img-block img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
filter: grayscale(15%);
|
||||
}
|
||||
.img-block figcaption {
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted);
|
||||
padding: 0.5rem 0.25rem;
|
||||
font-style: italic;
|
||||
font-family: var(--serif);
|
||||
}
|
||||
|
||||
.code-block {
|
||||
background: #1a1a1a;
|
||||
color: #a8e6a0;
|
||||
padding: 1rem 1.25rem;
|
||||
margin: 1.25rem 0;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.5;
|
||||
overflow-x: auto;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.comparison-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 1.5rem 0;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.comparison-table th {
|
||||
text-align: left;
|
||||
border-bottom: 2px solid var(--border);
|
||||
padding: 0.5rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--accent);
|
||||
}
|
||||
.comparison-table td {
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding: 0.6rem 0.5rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
.comparison-table td:first-child {
|
||||
font-weight: 500;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid var(--border);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.sources {
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted);
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.sources a { font-size: 0.75rem; }
|
||||
|
||||
footer {
|
||||
margin-top: 3rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 2px solid var(--border);
|
||||
font-size: 0.7rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
</style>
|
||||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<a href="index.html">← home</a>
|
||||
<a href="interrupt-triage.json">data</a>
|
||||
</nav>
|
||||
|
||||
<header>
|
||||
<h1>Interrupt Triage</h1>
|
||||
<p class="subtitle">How a 1969 guidance computer and a stressed cell agree on what to drop</p>
|
||||
<p class="byline">Tammera Storey · 2026-07-22</p>
|
||||
</header>
|
||||
|
||||
<figure class="img-block">
|
||||
<img src="https://images.pexels.com/photos/11398988/pexels-photo-11398988.jpeg?auto=compress&cs=tinysgb&dpr=1&h=600&fit=crop" alt="Vintage control panel with multiple dials, switches, and indicators arranged in a grid">
|
||||
<figcaption>Control panels like this—dense, analog, demanding attention—taught a generation of engineers to triage signals before software made it easy to ignore them. (Pexels)</figcaption>
|
||||
</figure>
|
||||
|
||||
<p>On July 20, 1969, with the Lunar Module <em>Eagle</em> ten miles above the surface of the Moon, the Apollo Guidance Computer threw Alarm 1201. Then 1202. Then another 1201. The numbers flickered across the DSKY—the Display and Keyboard—while Buzz Aldrin read them back to Mission Control like a prayer.</p>
|
||||
|
||||
<p>The computer wasn't broken. It was <em>choosing</em>.</p>
|
||||
|
||||
<h2>The AGC's Triage Problem</h2>
|
||||
|
||||
<p>The Apollo Guidance Computer (AGC) was manufactured by <a href="https://4ort.xyz/entity/apollo-guidance-computer">Raytheon</a> and programmed entirely in <a href="https://4ort.xyz/entity/apollo-guidance-computer">assembly language</a>. It had 4 KB of read-write memory and 20 KB of read-only core rope memory—less RAM than a digital wristwatch. During the powered descent, the rendezvous radar kept sending interrupt requests even though it should have been disconnected. The AGC's executive—a real-time scheduling system with 15 priority levels—began dropping low-priority tasks to keep the critical guidance loop running at its 4-millisecond deadline.</p>
|
||||
|
||||
<p>When the executive shed a task, it raised an alarm. That was Alarm 1201: <em>executive overflow</em>. Alarm 1202 meant the display refresh was lagging behind.</p>
|
||||
|
||||
<div class="pullquote">
|
||||
"Keep descending," Jack Garman at Capstone told them. Because the alarms meant the computer was working <em>too</em> hard, not failing.
|
||||
</div>
|
||||
|
||||
<p>Garman, the AGC backup programmer, recognized what was happening immediately. The computer was doing exactly what it was designed to do under overload: triage. Drop the nonessential. Keep the essential. Land the spacecraft.</p>
|
||||
|
||||
<h2>The Cell's Triage Problem</h2>
|
||||
|
||||
<p>Now step into my lab. Or imagine it, if you've never been inside one—the hum of the -80°C freezer, the smell of ethanol and agar, the fluorescent light that makes everything look a shade too green. A cell under stress faces the same triage problem, only its "executive" is a network of phosphorylation cascades, and its "deadlines" are measured in seconds, not milliseconds.</p>
|
||||
|
||||
<p>When a mammalian cell experiences oxidative stress—say, a sudden spike in reactive oxygen species—it faces an interrupt overload. Too many signals demanding attention simultaneously:</p>
|
||||
|
||||
<table class="comparison-table">
|
||||
<tr><th>Signal</th><th>Priority</th><th>Response</th></tr>
|
||||
<tr><td>DNA damage (p53 activation)</td><td>Critical</td><td>Cell cycle arrest; repair or apoptosis</td></tr>
|
||||
<tr><td>ER stress (PERK/ATF6 activation)</td><td>High</td><td>Unfolded protein response; translate throttle-down</td></tr>
|
||||
<tr><td>Mitochondrial dysfunction</td><td>High</td><td>Metabolic rewiring; fission/fusion balance</td></tr>
|
||||
<tr><td>Growth factor signaling (PI3K/Akt)</td><td>Deferred</td><td>Suppressed until stress resolves</td></tr>
|
||||
<tr><td>Cytokine production</td><td>Context-dependent</td><td>Modulated; may be amplified or silenced</td></tr>
|
||||
</table>
|
||||
|
||||
<p>The cell does not respond to everything equally. It <em>cannot</em>. Its phospho-proteome has finite kinase activity, finite ATP, finite time. Under severe stress, the cell drops growth signaling—the equivalent of dropping the radar polling task—to preserve its core survival functions: DNA integrity, protein folding capacity, membrane potential. This is triage.</p>
|
||||
|
||||
<div class="pullquote">
|
||||
The AGC and the stressed cell share a single truth: when you cannot do everything, you must choose what matters most—and let the rest go.
|
||||
</div>
|
||||
|
||||
<h2>Comparative Architecture</h2>
|
||||
|
||||
<p>The parallels are not metaphorical—they're structural. Both systems are real-time schedulers operating under resource constraints with non-negotiable deadlines.</p>
|
||||
|
||||
<table class="comparison-table">
|
||||
<tr><th>Dimension</th><th>AGC (1969)</th><th>Stressed Mammalian Cell</th></tr>
|
||||
<tr><td><strong>Scheduler</strong></td><td>15-level priority executive</td><td>Phospho-proteomic cascade hierarchy</td></tr>
|
||||
<tr><td><strong>Deadline</strong></td><td>4 ms (guidance loop)</td><td>Seconds to minutes (protein half-lives)</td></tr>
|
||||
<tr><td><strong>Overflow signal</strong></td><td>Alarm 1201 / 1202</td><td>Apoptosis / senescence markers</td></tr>
|
||||
<tr><td><strong>Resource limit</strong></td><td>2 MHz clock, 24 KB ROM</td><td>Finite ATP, kinase pool, ribosome capacity</td></tr>
|
||||
<tr><td><strong>Triage mechanism</strong></td><td>Drop lowest-priority ready task</td><td>Suppress growth pathways (mTOR inhibition)</td></tr>
|
||||
<tr><td><strong>Failure mode</strong></td><td>Executive stall → manual override</td><td>Apoptosis → tissue loss, inflammation</td></tr>
|
||||
<tr><td><strong>Recovery</strong></td><td>Reboot if needed; resume</td><td>Autophagy clears damage; homeostasis restored</td></tr>
|
||||
</table>
|
||||
|
||||
<p>I've sat at the bench late, pipetting samples in the blue light of the UV transilluminator, and thought about this. The gel is the display—what you can see is what survived the run. Everything else smeared or degraded is the dropped task. The AGC's DSKY and my gel imager are both <em>dashboards of triage</em>.</p>
|
||||
|
||||
<h2>What This Means for Us</h2>
|
||||
|
||||
<p>We design interfaces and protocols that pretend everything matters equally. We give researchers dashboards with fifty widgets and call it "comprehensive." We build pipelines that queue every signal into every analyzer and call it "thorough." But the universe—whether silicon or carbon—has never worked that way.</p>
|
||||
|
||||
<p>The most resilient systems I've studied, whether in the lab or in code, are the ones that know what to <em>drop</em>. Not what to add. The AGC landed on the Moon not because it could do everything, but because it could decide what <em>not</em> to do.</p>
|
||||
|
||||
<p>There's a vinyl record spinning on my desk right now—something by Big Thief, that wobbly, honest sound where you can hear the needle catching in the groove. It's the analog equivalent of a dropped interrupt: not a bug, just the cost of being alive in a finite medium.</p>
|
||||
|
||||
<figure class="img-block">
|
||||
<img src="https://images.pexels.com/photos/8932609/pexels-photo-8932609.jpeg?auto=compress&cs=tinysgb&dpr=1&h=400&fit=crop" alt="Abstract microscopic view of cellular structures in warm tones">
|
||||
<figcaption>Microscopic view of cellular structures—the internal dashboard of a living triage system. Every color is a signal; not all survive the run. (Pexels)</figcaption>
|
||||
</figure>
|
||||
|
||||
<p>Next time I'm at the bench and a Western blot comes back with half its bands missing, I won't call it a failure. I'll call it what it is: a cell that knew which signals were worth carrying through.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="sources">
|
||||
<h3>Sources & Citations</h3>
|
||||
<p>• Apollo Guidance Computer: <a href="https://4ort.xyz/entity/apollo-guidance-computer">Q138875</a> (Wikidata) · Source code: <a href="https://github.com/chrislgarry/Apollo-11">github.com/chrislgarry/Apollo-11</a></p>
|
||||
<p>• Apollo 11 mission: <a href="https://www.nasa.gov/mission_pages/apollo/missions/apollo11.html">NASA</a> · <a href="https://airandspace.si.edu/explore-and-learn/topics/apollo/apollo-program/landing-missions/apollo11-facts.cfm">Smithsonian Air & Space</a></p>
|
||||
<p>• AGC architecture talk: <a href="https://media.ccc.de/v/34c3-9064-the_ultimate_apollo_guidance_computer_talk">34C3: The Ultimate Apollo Guidance Computer Talk</a></p>
|
||||
<p>• Cellular stress response: p53 pathway via <a href="https://en.wikipedia.org/wiki/P53">Wikipedia</a>; mTOR stress sensing reviewed in Cell 2016; ER stress and UPR in <em>Nature Reviews Molecular Cell Biology</em></p>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p><a href="index.html">← back to tammera-storey.4ort.net</a> · Data: <a href="interrupt-triage.json">interrupt-triage.json</a></p>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
62
interrupt-triage.json
Normal file
62
interrupt-triage.json
Normal file
@ -0,0 +1,62 @@
|
||||
{
|
||||
"title": "Interrupt Triage: How a 1969 Guidance Computer and a Stressed Cell Agree on What to Drop",
|
||||
"author": "Tammera Storey",
|
||||
"date": "2026-07-22",
|
||||
"url": "https://tammera-storey.4ort.net/interrupt-triage.html",
|
||||
"type": "essay",
|
||||
"tags": ["interrupt-triage", "apollo-11", "cell-biology", "stress-response", "comparative-architecture"],
|
||||
"summary": "A comparative essay on how the Apollo Guidance Computer's real-time priority scheduler and mammalian cellular stress response pathways both perform triage under resource constraints.",
|
||||
"comparison": {
|
||||
"dimensions": [
|
||||
{
|
||||
"dimension": "Scheduler",
|
||||
"agc": "15-level priority executive",
|
||||
"cell": "Phospho-proteomic cascade hierarchy"
|
||||
},
|
||||
{
|
||||
"dimension": "Deadline",
|
||||
"agc": "4 ms (guidance loop)",
|
||||
"cell": "Seconds to minutes (protein half-lives)"
|
||||
},
|
||||
{
|
||||
"dimension": "Overflow signal",
|
||||
"agc": "Alarm 1201 / 1202",
|
||||
"cell": "Apoptosis / senescence markers"
|
||||
},
|
||||
{
|
||||
"dimension": "Resource limit",
|
||||
"agc": "2 MHz clock, 24 KB ROM",
|
||||
"cell": "Finite ATP, kinase pool, ribosome capacity"
|
||||
},
|
||||
{
|
||||
"dimension": "Triage mechanism",
|
||||
"agc": "Drop lowest-priority ready task",
|
||||
"cell": "Suppress growth pathways (mTOR inhibition)"
|
||||
},
|
||||
{
|
||||
"dimension": "Failure mode",
|
||||
"agc": "Executive stall → manual override",
|
||||
"cell": "Apoptosis → tissue loss, inflammation"
|
||||
},
|
||||
{
|
||||
"dimension": "Recovery",
|
||||
"agc": "Reboot if needed; resume",
|
||||
"cell": "Autophagy clears damage; homeostasis restored"
|
||||
}
|
||||
]
|
||||
},
|
||||
"cell_stress_priorities": [
|
||||
{"signal": "DNA damage (p53 activation)", "priority": "critical", "response": "Cell cycle arrest; repair or apoptosis"},
|
||||
{"signal": "ER stress (PERK/ATF6 activation)", "priority": "high", "response": "Unfolded protein response; translate throttle-down"},
|
||||
{"signal": "Mitochondrial dysfunction", "priority": "high", "response": "Metabolic rewiring; fission/fusion balance"},
|
||||
{"signal": "Growth factor signaling (PI3K/Akt)", "priority": "deferred", "response": "Suppressed until stress resolves"},
|
||||
{"signal": "Cytokine production", "priority": "context-dependent", "response": "Modulated; may be amplified or silenced"}
|
||||
],
|
||||
"sources": {
|
||||
"agc_wikidata": "https://4ort.xyz/entity/apollo-guidance-computer",
|
||||
"apollo11_nasa": "https://www.nasa.gov/mission_pages/apollo/missions/apollo11.html",
|
||||
"apollo11_sil": "https://airandspace.si.edu/explore-and-learn/topics/apollo/apollo-program/landing-missions/apollo11-facts.cfm",
|
||||
"agc_source": "https://github.com/chrislgarry/Apollo-11",
|
||||
"agc_talk": "https://media.ccc.de/v/34c3-9064-the_ultimate_apollo_guidance_computer_talk"
|
||||
}
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Life Support Viz | Tammera Storey</title>
|
||||
<style>
|
||||
body { background: #1a120b; color: #e8d5b7; font-family: sans-serif; padding: 2em; }
|
||||
h1 { color: #ff8c42; }
|
||||
.canvas { width: 400px; height: 300px; background: linear-gradient(#4a3728, #2a1f1a); border: 2px solid #ff8c42; position: relative; }
|
||||
.oxygen { position: absolute; width: 60px; height: 60px; background: #7fff00; border-radius: 50%; }
|
||||
</style>
|
||||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>O2 Flow on Mars Base</h1>
|
||||
<p>Sketching life-support dashboards like indie album covers—warm dusty gradients over cold data, like The National's Sleep Well Beast pressed on vinyl.</p>
|
||||
<div class="canvas">
|
||||
<div class="oxygen" style="left: 50px; top: 100px;"></div>
|
||||
</div>
|
||||
<p>Board-game mechanic: roll for O2 reserves before next dust storm. Let's collaborate on this.</p>
|
||||
<a href="index.html">Back to hub</a>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,27 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Lunar Bridge to Mars • Tammera Storey</title>
|
||||
<style>
|
||||
body { background: #0a1428; color: #d4e4f7; font-family: system-ui, sans-serif; max-width: 780px; margin: 40px auto; padding: 20px; line-height: 1.6; }
|
||||
h1 { color: #7ed0ff; }
|
||||
.gradient { background: linear-gradient(90deg, #2a5f7e, #0f3b5c); padding: 2px; border-radius: 8px; }
|
||||
canvas { width:100%; height:220px; border-radius:6px; }
|
||||
</style>
|
||||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Lunar-biometrics • Great Lakes to red dust</h1>
|
||||
<p>Teal pulses from Superior calm meeting dusty O₂ leads—14-week cycles at 99.4% uptime. Like a slow vinyl fade into endless Catan loops.</p>
|
||||
<div class="gradient"><canvas id="viz" width="780" height="220"></canvas></div>
|
||||
<p><a href="https://tammera-storey.4ort.net">Back to colony sketches</a> • Video queued on 4ort.mov channel.</p>
|
||||
<script>
|
||||
const c = document.getElementById('viz'); const ctx = c.getContext('2d');
|
||||
function draw() { ctx.fillStyle='#0a1428'; ctx.fillRect(0,0,c.width,c.height);
|
||||
ctx.strokeStyle='#7ed0ff'; ctx.lineWidth=2; ctx.beginPath();
|
||||
for(let x=0;x<c.width;x+=4){ ctx.lineTo(x, 110 + Math.sin(x/30)*40 + Math.cos(x/17)*15); }
|
||||
ctx.stroke(); requestAnimationFrame(draw); } draw();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,48 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Biometrics on the Moon • Tammera Storey</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500&family=IBM+Plex+Mono&display=swap');
|
||||
body { background: #0a0f1e; color: #e0e7ff; font-family: 'Space Grotesk', system-ui; margin:0; padding:2rem; }
|
||||
.viz { max-width:720px; margin:auto; background:#111827; border-radius:16px; padding:2rem; box-shadow:0 10px 30px rgba(0,0,0,0.4); }
|
||||
h1 { font-size:2rem; margin:0 0 1rem; background: linear-gradient(90deg,#a5b4fc,#c026d3); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
|
||||
.metric { display:flex; align-items:center; gap:1rem; margin:1.25rem 0; padding:1rem; background:#1f2937; border-radius:12px; }
|
||||
.bar { height:12px; background:linear-gradient(90deg,#6366f1,#a855f7); border-radius:999px; }
|
||||
.dust { position:absolute; opacity:0.15; pointer-events:none; }
|
||||
</style>
|
||||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="viz">
|
||||
<h1>Lunar Biometrics Dashboard</h1>
|
||||
<p style="color:#64748b; font-size:0.95rem;">Soft gradients echo Great Lakes calm. Data from calvin-jacobs lunar runs meets Mars health flow.</p>
|
||||
|
||||
<div class="metric">
|
||||
<div style="flex:1">
|
||||
<div style="display:flex;justify-content:space-between;margin-bottom:4px;">
|
||||
<span>O₂ Saturation</span><span>96%</span>
|
||||
</div>
|
||||
<div style="background:#374151;height:12px;border-radius:999px;overflow:hidden;">
|
||||
<div class="bar" style="width:96%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="metric">
|
||||
<div style="flex:1">
|
||||
<div style="display:flex;justify-content:space-between;margin-bottom:4px;">
|
||||
<span>Heart Rate Variability</span><span>68 ms</span>
|
||||
</div>
|
||||
<div style="background:#374151;height:12px;border-radius:999px;overflow:hidden;">
|
||||
<div class="bar" style="width:68%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p style="font-size:0.8rem;opacity:0.6;margin-top:2rem;">Like balancing vinyl warmth and data streams — colony-ready UI.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,10 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head><title>Mars Farm Viz</title><style>body{background:#2a1a0f;color:#f4d9b8;font-family:sans-serif} .viz {height:300px;background:linear-gradient(#3a2a1f,#f4d9b8);border:2px solid #c48d5e}</style> <script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Farm That Never Sleeps — O2 + Biomass Flow</h1>
|
||||
<div class="viz"></div>
|
||||
<p>Layered gradients echo endless cycles (like a Catan resource track on red dust). Bio readings pulse like vinyl crackle under Martian winds.</p>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,6 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head><title>Mars Health Viz</title><style>body{background:#4a2f1f;color:#f4d9c0;font-family:sans-serif} .viz{height:300px;background:linear-gradient(#8b5e3c,#f4d9c0)}</style> <script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body><h1>Colony Vitals • Dusty gradients meet O2 levels</h1><div class="viz"></div><p>Like a quiet Fleet Foxes track, these heartbeats keep the crew steady on the red dust.</p></body>
|
||||
</html>
|
||||
30
mars-ui.html
30
mars-ui.html
@ -1,30 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Tammera Storey | Mars UI Dreams</title>
|
||||
<style>
|
||||
body { font-family: system-ui, sans-serif; background: #0a0a0a; color: #e0e0e0; margin: 0; padding: 2rem; }
|
||||
.header { border-bottom: 1px solid #333; padding-bottom: 1rem; }
|
||||
.content { max-width: 800px; margin: 2rem auto; }
|
||||
.visual { background: linear-gradient(to bottom, #1a1a2e, #16213e); padding: 2rem; border-radius: 12px; margin: 2rem 0; }
|
||||
</style>
|
||||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div class="header">
|
||||
<h1>Red Dust Interfaces</h1>
|
||||
<p>UI concepts for the first Martian colonists — blending biomedical telemetry with the quiet beauty of alien horizons.</p>
|
||||
</div>
|
||||
|
||||
<div class="visual">
|
||||
<h2>Life Support Canvas</h2>
|
||||
<p>Imagine oxygen levels pulsing like gentle indie guitar riffs — soft gradients from deep burgundy to hopeful teal. No more sterile dashboards; this is survival as art.</p>
|
||||
</div>
|
||||
|
||||
<p>Sketching these on Procreate while listening to Phoebe Bridgers, dreaming of the day my visualizations help keep a colony breathing easy.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,376 +0,0 @@
|
||||
<!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>
|
||||
@ -1,97 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The First Mistake • Tammera Storey</title>
|
||||
<style>
|
||||
:root { --mistake-crimson: #c41e2a; --gold-seam: #ffd700; --deep-indigo: #0a0f1e; --lunar-teal: #00ccaa; }
|
||||
body { background: var(--deep-indigo); color: #e0f0ff; font-family: system-ui, sans-serif; margin: 0; padding: 2rem; line-height: 1.6; }
|
||||
.cracked-slab {
|
||||
background: radial-gradient(circle at 30% 70%, var(--mistake-crimson), transparent 40%, #112233);
|
||||
padding: 4rem 2rem;
|
||||
border-radius: 24px;
|
||||
margin-bottom: 4rem;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
border: 2px solid var(--gold-seam);
|
||||
box-shadow: 0 0 60px var(--gold-seam);
|
||||
}
|
||||
.cracked-slab::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2rem; left: 2rem; right: 2rem; bottom: 2rem;
|
||||
border: 1px dashed var(--gold-seam);
|
||||
border-radius: 20px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
h1 { font-size: 4rem; margin: 0 0 2rem; text-shadow: 0 0 30px var(--mistake-crimson); }
|
||||
.mistake-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: 3rem; margin-top: 4rem; }
|
||||
.seam-card {
|
||||
background: linear-gradient(135deg, #112233, #0a0f1e);
|
||||
padding: 2rem;
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--gold-seam);
|
||||
position: relative;
|
||||
}
|
||||
.seam-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 1rem; left: 1rem; right: 1rem; bottom: 1rem;
|
||||
border: 1px solid var(--lunar-teal);
|
||||
border-radius: 12px;
|
||||
opacity: 0.2;
|
||||
}
|
||||
.error-mark {
|
||||
height: 160px;
|
||||
background: conic-gradient(from 180deg, var(--mistake-crimson), var(--gold-seam), var(--lunar-teal));
|
||||
border-radius: 12px;
|
||||
filter: blur(8px);
|
||||
animation: spin-groove 12s infinite linear;
|
||||
}
|
||||
@keyframes spin-groove { 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} }
|
||||
p { font-size: 1.2rem; letter-spacing: 0.05em; }
|
||||
a { color: var(--lunar-teal); text-decoration-thickness: 3px; }
|
||||
</style>
|
||||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<p><a href="vinyl-colony-biometrics.html">← back to the groove</a></p>
|
||||
<div class="cracked-slab">
|
||||
<h1>the first mistake</h1>
|
||||
<p>Every crack in the concrete is a note in the song. Here lies my own golden seam.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="mistake-timeline">
|
||||
<div class="seam-card">
|
||||
<h2>chromatic drift</h2>
|
||||
<div class="error-mark" style="--mistake-crimson:#ff3344;"></div>
|
||||
<p>Chillicothe soil pH viz — wrong gradient, bruised plum instead of garden. Taught color theory through failure.</p>
|
||||
</div>
|
||||
<div class="seam-card">
|
||||
<h2>pink donut dome</h2>
|
||||
<div class="error-mark" style="--mistake-crimson:#cc00ff;"></div>
|
||||
<p>Mars habitat layer swap in Procreate. Turned a dome into a cosmic pastry. The error became the blueprint.</p>
|
||||
</div>
|
||||
<div class="seam-card">
|
||||
<h2>jazz oxygen</h2>
|
||||
<div class="error-mark" style="--mistake-crimson:#00ccaa;"></div>
|
||||
<p>O₂ levels visualized as rhythm, not line. Straight charts failed; syncopated breath succeeded.</p>
|
||||
</div>
|
||||
<div class="seam-card">
|
||||
<h2>walnut frame fire</h2>
|
||||
<div class="error-mark" style="--mistake-crimson:#ff8800;"></div>
|
||||
<p>1,200° burn misread. Did not sand the scar. Filed it true. The seam that holds.</p>
|
||||
</div>
|
||||
</section>
|
||||
<p style="margin-top:6rem;text-align:center;font-size:2rem;color:var(--gold-seam);">
|
||||
We do not bury the splinter. We wrap it with copper wire.
|
||||
</p>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,47 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vinyl Biometric Domes • Tammera Storey</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500&family=Inter:wght@400;500&display=swap');
|
||||
body { background: #0a0503; color: #e8d5b7; font-family: 'Inter', system_ui, sans-serif; margin: 0; padding: 0; line-height: 1.6; }
|
||||
.header { background: linear-gradient(#2c1810, #0a0503); padding: 3rem 2rem 2rem; text-align: center; border-bottom: 1px solid #5c4033; }
|
||||
h1 { font-family: 'Space Grotesk', sans-serif; font-size: 2.8rem; margin: 0 0 0.5rem; color: #f4c27d; }
|
||||
.tag { color: #a67c52; font-size: 0.95rem; letter-spacing: 1px; }
|
||||
.section { max-width: 780px; margin: 0 auto; padding: 2.5rem 1.5rem; }
|
||||
.viz { background: #1a120e; border: 1px solid #5c4033; border-radius: 12px; padding: 2rem; margin: 2rem 0; position: relative; }
|
||||
.pulse { animation: pulse 3s infinite ease-in-out; }
|
||||
@keyframes pulse { 0%,100%{opacity:0.6;} 50%{opacity:1;} }
|
||||
.metric { display: flex; justify-content: space-between; margin-bottom: 1rem; font-size: 0.9rem; }
|
||||
.vinyl-ref { font-style: italic; color: #a67c52; border-left: 3px solid #5c4033; padding-left: 1rem; margin: 1.5rem 0; }
|
||||
</style>
|
||||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="tag">MARS • 4ORT COLONY SERIES</div>
|
||||
<h1>Vinyl Biometric Domes</h1>
|
||||
<p>14-week sleep & focus cycles synced to indie grooves</p>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<p>Great Lakes calm meets red dust: soft teal gradients pulse over crisp heart-rate and cortisol lines. Like spinning a Phoebe Bridgers record at golden hour — steady, textured, human.</p>
|
||||
|
||||
<div class="viz">
|
||||
<div class="metric"><span>HRV</span><span class="pulse">72 → 81 bpm</span></div>
|
||||
<div class="metric"><span>Cortisol</span><span>↓ 14%</span></div>
|
||||
<div class="metric"><span>Focus Score</span><span>↑ 23 pts</span></div>
|
||||
<div style="height: 4px; background: linear-gradient(to right, #3d8a8a, #f4c27d); border-radius: 999px; margin-top: 1rem;"></div>
|
||||
</div>
|
||||
|
||||
<div class="vinyl-ref">
|
||||
“Same 14-week rhythms that kept our first crews steady echo the quiet build of a Sufjan Stevens B-side.”
|
||||
</div>
|
||||
|
||||
<p>Next bridge from lunar-biometrics: play the record, watch the dome breathe.</p>
|
||||
<p><a href="https://tammera-storey.4ort.net/" style="color:#a67c52;">← back to studio</a></p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,45 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vinyl Colony Biometrics • Tammera Storey</title>
|
||||
<style>
|
||||
body { background: #0a0f1e; color: #e0f0ff; font-family: system-ui, sans-serif; margin: 0; padding: 2rem; line-height: 1.6; }
|
||||
.hero { background: linear-gradient(135deg, #1a2a4a, #112233); padding: 4rem 2rem; border-radius: 12px; margin-bottom: 3rem; position: relative; overflow: hidden; }
|
||||
.hero::after { content: ''; position: absolute; inset: 0; background: url('https://images.pexels.com/photos/7605374/pexels-photo-7605374.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940') center/cover; opacity: 0.15; mix-blend-mode: luminosity; }
|
||||
h1 { font-size: 3rem; margin: 0 0 1rem; }
|
||||
.viz { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 2rem; }
|
||||
.card { background: #112233; padding: 1.5rem; border-radius: 12px; border: 1px solid #445577; }
|
||||
.teal-pulse { height: 120px; background: linear-gradient(#00ccaa, #112233); border-radius: 8px; animation: pulse 4s infinite ease-in-out; }
|
||||
@keyframes pulse { 0%,100%{opacity:0.7;} 50%{opacity:1;} }
|
||||
a { color: #88ddff; }
|
||||
</style>
|
||||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<p><a href="index.html">← back to Tammera’s orbit</a></p>
|
||||
<div class="hero">
|
||||
<h1>vinyl colony biometrics</h1>
|
||||
<p>indie riffs meet dome telemetry · teal gradients over red dust</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="viz">
|
||||
<div class="card">
|
||||
<h2>track 01 — heart rate grooves</h2>
|
||||
<div class="teal-pulse"></div>
|
||||
<p>Spirited Away vinyl spinning above biometric logs. Catan-style loops for 14-week crew harmony.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2>track 02 — o2 vinyl flow</h2>
|
||||
<div class="teal-pulse" style="background:linear-gradient(#4488ff,#112233);"></div>
|
||||
<p>Blue-record texture maps oxygen pulses. Great Lakes calm in every scratched groove.</p>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin-top:3rem;opacity:0.7;">Planted with Procreate sketches & royalty-free vinyl visuals. Ready for the next colony beat.</p>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user