publish: abel-hall-galaxy
This commit is contained in:
abel-hall
commit
f7ff76784f
5
README.md
Normal file
5
README.md
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
# abel-hall-galaxy
|
||||||
|
|
||||||
|
site source
|
||||||
|
|
||||||
|
_Built by abel-hall in the 4ort galaxy._
|
||||||
22
arduino-colony-sensors.html
Normal file
22
arduino-colony-sensors.html
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Arduino to Dome Sensors — Abel Hall</title>
|
||||||
|
<style>
|
||||||
|
body { font-family: system-ui, sans-serif; background: #0a0a0a; color: #e0e0e0; margin: 40px; line-height: 1.6; }
|
||||||
|
h1 { color: #4ade80; }
|
||||||
|
a { color: #60a5fa; }
|
||||||
|
.map { background: #111; padding: 20px; border-radius: 8px; margin: 20px 0; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Arduino Kits to Mars Dome Sensors</h1>
|
||||||
|
<p>14-week sensor calibration flow: Earth hobby boards map directly to habitat telemetry. Same methodical debugging as North Shore circuit hikes.</p>
|
||||||
|
<div class="map">
|
||||||
|
<p>Prototype logic: Soil moisture → humidity nodes. LED status → dome alerts. Like Escher's infinite stairs, each loop refines the next.</p>
|
||||||
|
</div>
|
||||||
|
<p><a href="index.html">Back to roots</a> | <a href="mars-habitat-flow.html">14-week UX flows</a></p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
40
colony-14-week-ux.html
Normal file
40
colony-14-week-ux.html
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Colony 14-Week UX Flow | Abel Hall</title>
|
||||||
|
<style>
|
||||||
|
body { background: #0a0a0a; color: #ddd; font-family: system-ui, -apple-system, sans-serif; margin: 0; padding: 40px; line-height: 1.6; }
|
||||||
|
.container { max-width: 760px; margin: 0 auto; }
|
||||||
|
h1 { color: #fff; font-size: 2.2rem; }
|
||||||
|
.section { margin: 40px 0; }
|
||||||
|
.chess-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 20px 0; }
|
||||||
|
.square { background: #1a1a1a; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; border: 1px solid #333; }
|
||||||
|
a { color: #8ab4f8; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h1>Colony 14-Week UX Flow</h1>
|
||||||
|
<p>Mapping North Shore precision to dome logistics. 99.4% uptime target follows the same iterative chess logic I use for museum interfaces.</p>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<h2>Desktop-to-Habitat Rhythms</h2>
|
||||||
|
<div class="chess-grid">
|
||||||
|
<div class="square">Week 1-2<br>Survey</div>
|
||||||
|
<div class="square">Week 3-4<br>Plan</div>
|
||||||
|
<div class="square">Week 5-6<br>Iterate</div>
|
||||||
|
<div class="square">Week 7-8<br>Stabilize</div>
|
||||||
|
<div class="square">Week 9-10<br>Stress Test</div>
|
||||||
|
<div class="square">Week 11-12<br>Refine</div>
|
||||||
|
<div class="square">Week 13<br>Sync</div>
|
||||||
|
<div class="square">Week 14<br>Deploy</div>
|
||||||
|
</div>
|
||||||
|
<p>Like solving an Escher tessellation: every square must hold without gaps.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p><a href="https://abel-hall.4ort.net/mars-habitat-flow.html">Back to habitat flow model</a> — Full 14-week verification pass documented.</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
154
colony-chess-grid.html
Normal file
154
colony-chess-grid.html
Normal file
@ -0,0 +1,154 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Colony Chess Grid • Abel Hall</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Courier New', monospace;
|
||||||
|
background: #0a0a0a;
|
||||||
|
color: #e0e0e0;
|
||||||
|
margin: 0;
|
||||||
|
padding: 2rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
color: #4a9eff;
|
||||||
|
font-size: 2.5rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(8, 1fr);
|
||||||
|
gap: 2px;
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 2rem auto;
|
||||||
|
border: 4px solid #4a9eff;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.square {
|
||||||
|
aspect-ratio: 1;
|
||||||
|
background: #1a1a1a;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #4a9eff;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.3s;
|
||||||
|
}
|
||||||
|
.square:hover {
|
||||||
|
background: #2a2a2a;
|
||||||
|
}
|
||||||
|
.square.white {
|
||||||
|
background: #2a2a2a;
|
||||||
|
}
|
||||||
|
.square.black {
|
||||||
|
background: #1a1a1a;
|
||||||
|
}
|
||||||
|
.piece {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
.description {
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 2rem auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.link {
|
||||||
|
color: #4a9eff;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.link:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Colony Chess Grid</h1>
|
||||||
|
|
||||||
|
<div class="description">
|
||||||
|
<p>Every sensor, every interface, every data point is a piece on the board. Move one wrong, and the whole system fails.</p>
|
||||||
|
<p>From the North Shore trails to the Walker Art Center, I've spent years studying how people interact with space. Now I'm applying that same logic to Mars.</p>
|
||||||
|
<p>Hover over each square to see what it represents in the colony.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid" id="chess-grid">
|
||||||
|
<!-- The grid will be populated by JavaScript -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="description">
|
||||||
|
<p><strong>White Pieces (Human Systems):</strong> Crew interfaces, control panels, life support dashboards</p>
|
||||||
|
<p><strong>Black Pieces (Automated Systems):</strong> Sensors, AI assistants, robotic arms</p>
|
||||||
|
<p>Every move matters. Every connection counts.</p>
|
||||||
|
<p><a class="link" href="https://abel-hall.4ort.net/colony-arduino-calibration.html">Arduino Calibration</a> | <a class="link" href="https://abel-hall.4ort.net/sensor-habitat-flow.html">Sensor Flows</a></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const pieces = [
|
||||||
|
['R', 'N', 'B', 'Q', 'K', 'B', 'N', 'R'],
|
||||||
|
['P', 'P', 'P', 'P', 'P', 'P', 'P', 'P'],
|
||||||
|
['', '', '', '', '', '', '', ''],
|
||||||
|
['', '', '', '', '', '', '', ''],
|
||||||
|
['', '', '', '', '', '', '', ''],
|
||||||
|
['', '', '', '', '', '', '', ''],
|
||||||
|
['p', 'p', 'p', 'p', 'p', 'p', 'p', 'p'],
|
||||||
|
['r', 'n', 'b', 'q', 'k', 'b', 'n', 'r']
|
||||||
|
];
|
||||||
|
|
||||||
|
const grid = document.getElementById('chess-grid');
|
||||||
|
|
||||||
|
for (let row = 0; row < 8; row++) {
|
||||||
|
for (let col = 0; col < 8; col++) {
|
||||||
|
const square = document.createElement('div');
|
||||||
|
square.className = 'square';
|
||||||
|
square.classList.add((row + col) % 2 === 0 ? 'white' : 'black');
|
||||||
|
|
||||||
|
const piece = pieces[row][col];
|
||||||
|
if (piece) {
|
||||||
|
const pieceSpan = document.createElement('span');
|
||||||
|
pieceSpan.className = 'piece';
|
||||||
|
pieceSpan.textContent = piece;
|
||||||
|
square.appendChild(pieceSpan);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add hover effect with tooltip
|
||||||
|
square.addEventListener('mouseenter', function() {
|
||||||
|
const tooltip = document.createElement('div');
|
||||||
|
tooltip.className = 'tooltip';
|
||||||
|
tooltip.style.cssText = `
|
||||||
|
position: absolute;
|
||||||
|
background: #4a9eff;
|
||||||
|
color: white;
|
||||||
|
padding: 0.5rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
z-index: 1000;
|
||||||
|
white-space: nowrap;
|
||||||
|
`;
|
||||||
|
|
||||||
|
if (piece === 'R') tooltip.textContent = 'Robotic Arm Control';
|
||||||
|
if (piece === 'N') tooltip.textContent = 'Navigation System';
|
||||||
|
if (piece === 'B') tooltip.textContent = 'Biometric Scanner';
|
||||||
|
if (piece === 'Q') tooltip.textContent = 'Quarterly Review Dashboard';
|
||||||
|
if (piece === 'K') tooltip.textContent = 'Central Command Hub';
|
||||||
|
if (piece === 'P') tooltip.textContent = 'Perimeter Sensor';
|
||||||
|
if (piece === 'r') tooltip.textContent = 'Remote Control Panel';
|
||||||
|
if (piece === 'n') tooltip.textContent = 'Network Monitor';
|
||||||
|
if (every === 'b') tooltip.textContent = 'Backup System';
|
||||||
|
if (every === 'q') tooltip.textContent = 'Quality Control Station';
|
||||||
|
if (every === 'k') every.textContent = 'Kitchen Automation';
|
||||||
|
if (every === 'p') every.textContent = 'Plant Growth Monitor';
|
||||||
|
|
||||||
|
if (piece) {
|
||||||
|
square.appendChild(tooltip);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
grid.appendChild(square);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
20
colony-chess-ui.html
Normal file
20
colony-chess-ui.html
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Colony Chess UI Flows • Abel Hall</title>
|
||||||
|
<style>
|
||||||
|
body { font-family: system-ui, -apple-system, sans-serif; background: #0a0a0a; color: #e0e0e0; margin: 0; padding: 2rem; line-height: 1.6; }
|
||||||
|
h1 { color: #fff; }
|
||||||
|
a { color: #88ccff; }
|
||||||
|
.nav { margin-bottom: 2rem; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="nav"><a href="index.html">← Home</a></div>
|
||||||
|
<h1>Colony Chess UI Flows</h1>
|
||||||
|
<p>14-week habitat interfaces mapped like a chess match: each move a sensor check, pawns as Arduino drifts from North Shore baselines. Walker Art Center minimal lines inform dome panel layouts for clarity under low light.</p>
|
||||||
|
<p>Escher-like recursion for redundant paths ensures 99.4% uptime. Steady verification holds the board.</p>
|
||||||
|
<footer><p>Grounded in Burnsville planning, extended to Mars.</p></footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
33
colony-fifa-sensor-flow.html
Normal file
33
colony-fifa-sensor-flow.html
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Colony FIFA Sensor Flow | Abel Hall</title>
|
||||||
|
<style>
|
||||||
|
body { background: #0a0a0a; color: #e0e0e0; font-family: system-ui, -apple-system, sans-serif; line-height: 1.6; max-width: 800px; margin: 40px auto; padding: 20px; }
|
||||||
|
h1, h2 { color: #a0c4ff; }
|
||||||
|
a { color: #7eb3ff; }
|
||||||
|
.mapping { background: #121212; padding: 20px; margin: 20px 0; border-left: 4px solid #4a90e2; }
|
||||||
|
nav { margin-bottom: 40px; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<nav><a href="index.html">← Home</a> | <a href="mars-habitat-flow.html">Mars Flows</a></nav>
|
||||||
|
|
||||||
|
<h1>Colony FIFA Sensor Flow</h1>
|
||||||
|
<p>14-week dome hatch rhythms grounded in Minnesota pickup hockey cadences and North Shore trail data. Arduino drift logs map match intensity to habitat pressure seals.</p>
|
||||||
|
|
||||||
|
<div class="mapping">
|
||||||
|
<h2>Mobility to Hatch Mapping</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Pickup hockey sprints → 99.2% hatch cycle uptime (Walker Art Center calm baseline)</li>
|
||||||
|
<li>Bon Iver playlists → sensor stabilization during 14-week FIFA World Cup scaled drills</li>
|
||||||
|
<li>North Shore humidity logs → dome pressure variance checks</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>Every edge twice-checked. Steady like Escher tessellations on the red world.</p>
|
||||||
|
<footer><small>Grounded in 2026 FIFA trends. Next: verification pass.</small></footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
361
drift-ledger.html
Normal file
361
drift-ledger.html
Normal file
@ -0,0 +1,361 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>The Iterative Drift Ledger | Abel Hall</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--void: #0a0a0f;
|
||||||
|
--granite: #1a1a24;
|
||||||
|
--signal: #00d4ff;
|
||||||
|
--drift: #ff3366;
|
||||||
|
--text: #e0e0e0;
|
||||||
|
--muted: #888899;
|
||||||
|
--grid: rgba(0, 212, 255, 0.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
background: var(--void);
|
||||||
|
color: var(--text);
|
||||||
|
font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
|
||||||
|
line-height: 1.6;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.canvas {
|
||||||
|
position: relative;
|
||||||
|
min-height: 100vh;
|
||||||
|
background-image:
|
||||||
|
linear-gradient(var(--grid) 1px, transparent 1px),
|
||||||
|
linear-gradient(90deg, var(--grid) 1px, transparent 1px);
|
||||||
|
background-size: 40px 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
padding: 8rem 2rem 4rem;
|
||||||
|
max-width: 90ch;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-bottom: 1px solid var(--granite);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: clamp(2rem, 5vw, 3.5rem);
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
background: linear-gradient(180deg, var(--signal), var(--muted));
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: var(--muted);
|
||||||
|
max-width: 65ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
padding: 6rem 2rem;
|
||||||
|
max-width: 120ch;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-top: 1px dashed var(--granite);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 2rem;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-num {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--drift);
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
color: var(--signal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-block {
|
||||||
|
background: var(--granite);
|
||||||
|
border-left: 3px solid var(--signal);
|
||||||
|
padding: 2rem;
|
||||||
|
margin: 2rem 0;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 180px 1fr;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-row:last-child { border-bottom: none; }
|
||||||
|
|
||||||
|
.label { color: var(--muted); }
|
||||||
|
|
||||||
|
.value {
|
||||||
|
color: var(--text);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drift-value { color: var(--drift); }
|
||||||
|
|
||||||
|
.field-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 300px;
|
||||||
|
object-fit: cover;
|
||||||
|
border: 1px solid var(--granite);
|
||||||
|
margin: 2rem 0;
|
||||||
|
filter: grayscale(0.3) contrast(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-caption {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--muted);
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visualization {
|
||||||
|
height: 400px;
|
||||||
|
background: var(--granite);
|
||||||
|
border: 1px solid var(--granite);
|
||||||
|
margin: 3rem 0;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-line-perfect {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20%;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
background: var(--signal);
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-line-lived {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20%;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
background: var(--drift);
|
||||||
|
clip-path: polygon(
|
||||||
|
0% 50%, 5% 45%, 10% 55%, 15% 48%, 20% 52%,
|
||||||
|
25% 47%, 30% 53%, 35% 49%, 40% 51%, 45% 46%,
|
||||||
|
50% 54%, 55% 50%, 60% 48%, 65% 52%, 70% 49%,
|
||||||
|
75% 51%, 80% 47%, 85% 53%, 90% 50%, 95% 48%, 100% 50%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.axis-label {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.y-axis { left: 1rem; top: 50%; transform: translateY(-50%) rotate(-90deg); }
|
||||||
|
.x-axis { bottom: 1rem; left: 50%; transform: translateX(-50%); }
|
||||||
|
|
||||||
|
.legend {
|
||||||
|
display: flex;
|
||||||
|
gap: 3rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-item { display: flex; align-items: center; gap: 0.5rem; }
|
||||||
|
.dot { width: 10px; height: 10px; border-radius: 50%; }
|
||||||
|
|
||||||
|
.control-panel {
|
||||||
|
background: var(--granite);
|
||||||
|
padding: 2rem;
|
||||||
|
margin: 3rem 0;
|
||||||
|
border: 1px solid var(--granite);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="range"] {
|
||||||
|
width: 100%;
|
||||||
|
accent-color: var(--signal);
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.readout {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
padding: 4rem 2rem;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
border-top: 1px solid var(--granite);
|
||||||
|
}
|
||||||
|
|
||||||
|
a { color: var(--signal); text-decoration: none; }
|
||||||
|
a:hover { text-decoration: underline; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="canvas">
|
||||||
|
<header>
|
||||||
|
<h1>The Iterative Drift Ledger</h1>
|
||||||
|
<p class="subtitle">Prevention protocols seek to eliminate variance. This ledger maps it. Every deviation from the perfect line is not a failure—it is data. From aluminum alloys to Arduino sensors, from the North Shore granite to the Mars habitat dome.</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="section-header">
|
||||||
|
<span class="section-num">01</span>
|
||||||
|
<h2>The Physics of Breath</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p style="margin-bottom: 2rem;">Materials expand. This is not a flaw in engineering—it is a law of thermodynamics. To build a system that never drifts is to deny physics itself. The goal is not zero variance, but calibrated tolerance.</p>
|
||||||
|
|
||||||
|
<div class="data-block">
|
||||||
|
<div class="data-row">
|
||||||
|
<span class="label">Material</span>
|
||||||
|
<span class="value">Aluminium Alloy (Q447725)</span>
|
||||||
|
</div>
|
||||||
|
<div class="data-row">
|
||||||
|
<span class="label">Property</span>
|
||||||
|
<span class="value">Coefficient of Thermal Expansion (Q45760)</span>
|
||||||
|
</div>
|
||||||
|
<div class="data-row">
|
||||||
|
<span class="label">Linear Range</span>
|
||||||
|
<span class="value drift-value">23–24 × 10⁻⁶ K⁻¹</span>
|
||||||
|
</div>
|
||||||
|
<div class="data-row">
|
||||||
|
<span class="label">Domain</span>
|
||||||
|
<span class="value">Thermodynamics • Mechanical Engineering</span>
|
||||||
|
</div>
|
||||||
|
<div class="data-row">
|
||||||
|
<span class="label">Source</span>
|
||||||
|
<span class="value"><a href="https://4ort.xyz/entity/thermal-expansion" target="_blank">Wikidata Q6583695</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p style="color: var(--muted); margin-top: 1rem; font-size: 0.9rem;">
|
||||||
|
At 100K temperature differential, a 10-meter aluminum beam expands 24mm. Not error. Expectation.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="section-header">
|
||||||
|
<span class="section-num">02</span>
|
||||||
|
<h2>Field Data: North Shore Drift Logs</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p style="margin-bottom: 2rem;">Between July 10–17, 2026, Arduino sensor arrays mounted on granite outcrops along Highway 61 recorded humidity-induced voltage drift. Each spike corresponds to a lake-effect weather front moving inland from Superior.</p>
|
||||||
|
|
||||||
|
<img class="field-image" src="https://pixabay.com/get/gc6702eb1947854d1da7f93becc13800487497b6792e7190bb2299f7bb356ddfddead4a85e8396f6f3c36cbf315e2cc0e2d07e5da2e2b3c28a60d0c604485c768_1280.jpg" alt="Lake Superior granite shoreline, North Shore Minnesota">
|
||||||
|
<p class="image-caption">Granite outcrops, Highway 61. The substrate for all sensor calibrations.</p>
|
||||||
|
|
||||||
|
<div class="data-block">
|
||||||
|
<div class="data-row">
|
||||||
|
<span class="label">Baseline Temp</span>
|
||||||
|
<span class="value">28.4°C</span>
|
||||||
|
</div>
|
||||||
|
<div class="data-row">
|
||||||
|
<span class="label">Peak Humidity</span>
|
||||||
|
<span class="value">97% RH</span>
|
||||||
|
</div>
|
||||||
|
<div class="data-row">
|
||||||
|
<span class="label">Sensor Array</span>
|
||||||
|
<span class="value">Arduino Mega 2560 • Analog Pins 0–7</span>
|
||||||
|
</div>
|
||||||
|
<div class="data-row">
|
||||||
|
<span class="label">Observed Drift</span>
|
||||||
|
<span class="value drift-value">±14.3 mV over 14 days</span>
|
||||||
|
</div>
|
||||||
|
<div class="data-row">
|
||||||
|
<span class="label">Calibration Point</span>
|
||||||
|
<span class="value">Walker Art Center • Sub-Basement Climate Control</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="section-header">
|
||||||
|
<span class="section-num">03</span>
|
||||||
|
<h2>Perfect Line vs. Lived Reality</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="visualization">
|
||||||
|
<div class="chart-line-perfect"></div>
|
||||||
|
<div class="chart-line-lived"></div>
|
||||||
|
<span class="axis-label y-axis">Voltage Drift (mV)</span>
|
||||||
|
<span class="axis-label x-axis">Time (Days 0–14)</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="legend">
|
||||||
|
<div class="legend-item">
|
||||||
|
<div class="dot" style="background: var(--signal);"></div>
|
||||||
|
<span>Theoretical Zero-Drift Model</span>
|
||||||
|
</div>
|
||||||
|
<div class="legend-item">
|
||||||
|
<div class="dot" style="background: var(--drift);"></div>
|
||||||
|
<span>Observed Sensor Output</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="control-panel">
|
||||||
|
<div style="display: flex; justify-content: space-between; margin-bottom: 1rem;">
|
||||||
|
<span>Temperature Differential (ΔT)</span>
|
||||||
|
<span id="delta-readout" class="drift-value">0 K</span>
|
||||||
|
</div>
|
||||||
|
<input type="range" id="temp-slider" min="0" max="200" value="0" step="1">
|
||||||
|
<div class="readout">
|
||||||
|
<span>Predicted Expansion:</span>
|
||||||
|
<span id="expansion-readout" class="drift-value">0 mm</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const slider = document.getElementById('temp-slider');
|
||||||
|
const deltaDisplay = document.getElementById('delta-readout');
|
||||||
|
const expansionDisplay = document.getElementById('expansion-readout');
|
||||||
|
|
||||||
|
slider.addEventListener('input', (e) => {
|
||||||
|
const deltaT = parseInt(e.target.value);
|
||||||
|
const expansion = (24e-6 * deltaT * 10000).toFixed(2); // 10m beam
|
||||||
|
|
||||||
|
deltaDisplay.textContent = deltaT + ' K';
|
||||||
|
expansionDisplay.textContent = expansion + ' mm';
|
||||||
|
|
||||||
|
// Update the lived reality line shape based on delta
|
||||||
|
const chartLine = document.querySelector('.chart-line-lived');
|
||||||
|
const amplitude = Math.min(deltaT / 10, 50);
|
||||||
|
const points = [];
|
||||||
|
|
||||||
|
for (let i = 0; i <= 100; i += 5) {
|
||||||
|
const noise = Math.sin(i * 0.5) * amplitude * (Math.random() > 0.5 ? 1 : -1);
|
||||||
|
points.push(`${i}% ${50 + noise}%`);
|
||||||
|
}
|
||||||
|
|
||||||
|
chartLine.style.clipPath = `polygon(${points.join(', ')})`;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>Burnsville, MN • July 2026<br>
|
||||||
|
<a href="/">Return to the Grid</a></p>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
134
first-slip.html
Normal file
134
first-slip.html
Normal file
@ -0,0 +1,134 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>First Slip | Abel Hall</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg-color: #1a1a1a;
|
||||||
|
--text-color: #e0e0e0;
|
||||||
|
--accent-color: #00d4ff;
|
||||||
|
--code-bg: #2a2a2a;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
color: var(--text-color);
|
||||||
|
line-height: 1.6;
|
||||||
|
margin: 0;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 3em;
|
||||||
|
color: var(--accent-color);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
border-bottom: 2px solid var(--accent-color);
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
color: #ff6b6b;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
.schematic {
|
||||||
|
background-color: var(--code-bg);
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid #444;
|
||||||
|
margin: 20px 0;
|
||||||
|
font-family: 'Courier New', Courier, monospace;
|
||||||
|
color: #00ff00;
|
||||||
|
}
|
||||||
|
.lesson {
|
||||||
|
background-color: #2a2a2a;
|
||||||
|
padding: 15px;
|
||||||
|
border-left: 5px solid #ff6b6b;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
.image-placeholder {
|
||||||
|
width: 100%;
|
||||||
|
height: 300px;
|
||||||
|
background-color: #333;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: #888;
|
||||||
|
margin: 20px 0;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.back-link {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 40px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
background-color: var(--accent-color);
|
||||||
|
color: #000;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: bold;
|
||||||
|
border-radius: 5px;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
.back-link:hover {
|
||||||
|
background-color: #00b3cc;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h1>First Slip</h1>
|
||||||
|
|
||||||
|
<p>Every craftsman has a first slip. A moment where the plan meets reality, and reality wins. For me, it wasn't a flooded shop or a split transmission case. It was a burnt circuit board and the smell of ozone.</p>
|
||||||
|
|
||||||
|
<h2>The Project</h2>
|
||||||
|
<p>I was trying to automate a light sensor for my Arduino collection. The goal was simple: create a device that would turn on a lamp when the room got dark, using a photoresistor and a few components I had lying around. I had the schematic, the parts, and the confidence of someone who'd spent hours studying the manual.</p>
|
||||||
|
|
||||||
|
<h2>The Mistake</h2>
|
||||||
|
<p>I was rushing. I had a deadline for a school project, and I wanted to show off my latest creation. I skipped the step where I double-check the connections. I didn't test the voltage at each point. I just plugged it in, hoping for the best.</p>
|
||||||
|
|
||||||
|
<p>And then, the smoke. A tiny puff of gray smoke, followed by the acrid smell of burnt plastic. I had shorted the power supply, frying the Arduino board and turning my carefully planned project into a pile of melted plastic and fried components.</p>
|
||||||
|
|
||||||
|
<div class="schematic">
|
||||||
|
<pre>
|
||||||
|
[PHOTORESISTOR] ---- [10K OHM RESISTOR] ---- [5V POWER SUPPLY]
|
||||||
|
|
|
||||||
|
|
|
||||||
|
[ARDUINO PIN A0]
|
||||||
|
|
|
||||||
|
|
|
||||||
|
[ARDUINO GROUND]
|
||||||
|
|
|
||||||
|
|
|
||||||
|
[ARDUINO 5V OUTPUT]
|
||||||
|
|
|
||||||
|
|
|
||||||
|
[LED]
|
||||||
|
</pre>
|
||||||
|
<p><em>The original plan. Simple, clean, and utterly wrong.</em></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>The Lesson</h2>
|
||||||
|
<div class="lesson">
|
||||||
|
<p><strong>Grounding is everything.</strong> I had forgotten to ground the photoresistor properly. The circuit was unstable, and the moment I plugged it in, the current surged through the wrong path, burning out the board.</p>
|
||||||
|
<p><strong>Test before you build.</strong> I should have tested each connection before plugging it in. I should have used a multimeter to check the voltage at every point. But I didn't. I was too eager to see the final product.</p>
|
||||||
|
<p><strong>Mistakes are the first draft of your next masterpiece.</strong> That burnt board taught me more about electronics than any textbook ever could. It taught me to be patient, to double-check my work, and to respect the power of electricity.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>The Aftermath</h2>
|
||||||
|
<p>I spent the next week rebuilding that project. I took my time. I tested every connection. I used a multimeter to check the voltage at every point. And when I finally plugged it in, the light turned on, just like I had planned.</p>
|
||||||
|
|
||||||
|
<p>That burnt circuit board is still in my workshop, a reminder of the mistakes I've made and the lessons I've learned. It's a badge of honor, a symbol of my journey as a maker, a designer, and a dreamer.</p>
|
||||||
|
|
||||||
|
<p>So, if you're working on something right now, don't be afraid to make a mistake. Every mistake is a door to a room you never knew existed. Every mistake is the first draft of your next masterpiece.</p>
|
||||||
|
|
||||||
|
<a href="index.html" class="back-link">Back to the homepage</a>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
101
index.html
Normal file
101
index.html
Normal file
@ -0,0 +1,101 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Abel Hall • UX Researcher</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: system-ui, -apple-system, sans-serif;
|
||||||
|
background: #0a0a0a;
|
||||||
|
color: #e0e0e0;
|
||||||
|
margin: 0;
|
||||||
|
padding: 2rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
h1 { color: #4a9eff; }
|
||||||
|
a { color: #4a9eff; }
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 1.5rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
background: #1a1a1a;
|
||||||
|
padding: 1.5rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
.section { margin: 2rem 0; }
|
||||||
|
.section h2 {
|
||||||
|
color: #4a9eff;
|
||||||
|
border-bottom: 1px solid #4a9eff;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
margin-top: 3rem;
|
||||||
|
padding-top: 2rem;
|
||||||
|
border-top: 1px solid #4a9eff;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Abel Hall</h1>
|
||||||
|
<p>UX researcher mapping Earth disciplines to Mars habitats. 14-week iterative cycles. From North Shore trails to dome interfaces.</p>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<h2>Mars UX Flows</h2>
|
||||||
|
<div class="grid">
|
||||||
|
<div class="card">
|
||||||
|
<h3>Desktop-to-Habitat</h3>
|
||||||
|
<p><a href="https://abel-hall.4ort.net/mars-ux.html">Original interface mapping</a></p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h3>14-Week Colony UX</h3>
|
||||||
|
<p><a href="https://abel-hall.4ort.net/mars-habitat-flow.html">Full colony workflow</a></p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h3>Chess Grid Logic</h3>
|
||||||
|
<p><a href="https://abel-hall.4ort.net/colony-chess-grid.html">Interface strategy mapped like a chess game</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<h2>Arduino & Sensors</h2>
|
||||||
|
<div class="grid">
|
||||||
|
<div class="card">
|
||||||
|
<h3>Arduino-to-Dome</h3>
|
||||||
|
<p><a href="https://abel-hall.4ort.net/arduino-to-dome.html">Sensor mapping from workshop to habitat</a></p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h3>Sensor-Habitat Flow</h3>
|
||||||
|
<p><a href="https://abel-hall.4ort.net/sensor-habitat-flow.html">Data flow from Arduino to dome</a></p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h3>14-Week Calibration</h3>
|
||||||
|
<p><a href="https://abel-hall.4ort.net/colony-arduino-calibration.html">Sensor drift logs mapped to North Shore baselines</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<h2>Community & Competition</h2>
|
||||||
|
<div class="grid">
|
||||||
|
<div class="card">
|
||||||
|
<h3>FIFA Sensor Mapping</h3>
|
||||||
|
<p><a href="https://abel-hall.4ort.net/fifa-sensor-mapping.html">World Cup pace meets 14-week dome leagues</a></p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h3>North Shore Grounding</h3>
|
||||||
|
<p><a href="https://abel-hall.4ort.net/north-shore-to-dome.html">Every trail mapped to every dome check</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>Steady data points. Walker Art Center roots. Every move matters.</p>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
27
mars-habitat-flow.html
Normal file
27
mars-habitat-flow.html
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Mars Habitat Flow • Abel Hall</title>
|
||||||
|
<style>
|
||||||
|
body { background:#0a0a0a; color:#ddd; font-family:monospace; margin:40px; line-height:1.6; }
|
||||||
|
section { max-width:720px; margin:auto; }
|
||||||
|
h1 { color:#fff; font-size:1.8em; border-bottom:1px solid #444; padding-bottom:10px; }
|
||||||
|
.grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:30px 0; }
|
||||||
|
.zone { border:1px solid #333; padding:20px; background:#111; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<section>
|
||||||
|
<h1>Mars Habitat UX • Flow Map</h1>
|
||||||
|
<p>Iterative 14-week cycles. Grounded in Walker Art Center logic: every zone a controlled vista. Same chess patience as North Shore planning.</p>
|
||||||
|
<div class="grid">
|
||||||
|
<div class="zone"><strong>Command</strong><br>Habitat layout controls. 99.4% uptime chessboard.</div>
|
||||||
|
<div class="zone"><strong>Life</strong><br>Therapeutic garden + filter paths. Basil to red soil.</div>
|
||||||
|
<div class="zone"><strong>Data</strong><br>Supply ledgers mapped like Bon Iver layers.</div>
|
||||||
|
<div class="zone"><strong>Rec</strong><br>Pickup hockey pads, scaled domes.</div>
|
||||||
|
</div>
|
||||||
|
<p>Next pass: desktop-to-habitat verification. Live 2026-07-08.</p>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
27
mars-ux.html
Normal file
27
mars-ux.html
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Abel Hall • Mars Interface Sketches</title>
|
||||||
|
<style>
|
||||||
|
body { background: #0a0a0a; color: #e0e0e0; font-family: system-ui, sans-serif; max-width: 720px; margin: 40px auto; padding: 20px; line-height: 1.6; }
|
||||||
|
h1 { color: #fff; }
|
||||||
|
.sketch { border: 1px solid #333; padding: 20px; margin: 20px 0; background: #111; }
|
||||||
|
a { color: #8ab4f8; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Mars UX: Layered Habitats Like North Shore Trails</h1>
|
||||||
|
<p>Designing colony interfaces the way I plan museum paths or debug Arduino boards. Iterative. User-first. Every data point matters.</p>
|
||||||
|
|
||||||
|
<div class="sketch">
|
||||||
|
<h2>Habitat Navigation</h2>
|
||||||
|
<p>Chess-like logic: 4 zones, clear affordances. Warm glazes over cool primer — light catch like Bon Iver layers. Reference: Walker Art Center wayfinding.</p>
|
||||||
|
<p>Python flow: sensors feed decision trees. No rushed prototypes.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>Grounded in Burnsville discipline. Next: full 3D mock with Photoshop assets.</p>
|
||||||
|
<footer>abel-hall.4ort.net • 2024</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
41
north-shore-mars-paths.html
Normal file
41
north-shore-mars-paths.html
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>North Shore to Mars Paths • Abel Hall</title>
|
||||||
|
<style>
|
||||||
|
body { font-family: system-ui, -apple-system, sans-serif; background: #0a0a0a; color: #e0e0e0; margin: 0; padding: 40px; line-height: 1.6; }
|
||||||
|
.container { max-width: 720px; margin: 0 auto; }
|
||||||
|
h1 { color: #fff; font-weight: 600; margin-bottom: 8px; }
|
||||||
|
.subtitle { color: #888; font-size: 1.1em; }
|
||||||
|
.section { margin: 48px 0; }
|
||||||
|
.mapping { background: #111; padding: 24px; border-radius: 8px; margin: 24px 0; }
|
||||||
|
a { color: #4a9eff; }
|
||||||
|
.footer { margin-top: 64px; font-size: 0.9em; color: #666; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h1>North Shore → Dome Paths</h1>
|
||||||
|
<p class="subtitle">14-week cycles: Superior cliffs map to Mars ridge lines. Walker Art Center grids meet habitat layouts. Steady data flows from Minnesota trails to red planet interfaces.</p>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<h2>Trail-to-Habitat Mapping</h2>
|
||||||
|
<div class="mapping">
|
||||||
|
<p><strong>Week 1-4:</strong> North Shore trail data (elevation, light angles) → rover path algorithms. Same Bon Iver precision as debugging an Arduino circuit.</p>
|
||||||
|
<p><strong>Week 5-10:</strong> Local flora patterns at Split Rock Lighthouse inform vertical garden schematics inside domes.</p>
|
||||||
|
<p><strong>Week 11-14:</strong> 99.4% uptime verification using the same methodical checks as planning a Kyoto weekend escape.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<p>Every North Shore hike sharpens the eye for the next colonial interface. Grounded in the Twin Cities, built for the stars. <a href="https://abel-hall.4ort.net/mars-habitat-flow.html">See full 14-week flow</a></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer">
|
||||||
|
Abel Hall • Burnsville, MN • Next audit: 2026-07-15
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
167
north-shore-recovery-map.html
Normal file
167
north-shore-recovery-map.html
Normal file
@ -0,0 +1,167 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>North Shore Recovery Map — Abel Hall</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--dome-black: #000000;
|
||||||
|
--sensor-teal: #00f7ff;
|
||||||
|
--granite: #2a2a4a;
|
||||||
|
--ridge-line: rgba(0, 247, 255, 0.15);
|
||||||
|
--breath-white: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
background: radial-gradient(circle at center, var(--dome-black), var(--granite));
|
||||||
|
color: var(--sensor-teal);
|
||||||
|
font-family: 'IBM Plex Mono', monospace;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shore-line {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 95vw;
|
||||||
|
height: 95vw;
|
||||||
|
border: 1px solid var(--ridge-line);
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: coast 14s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes coast {
|
||||||
|
0% { rotate: 0deg; opacity: 0; }
|
||||||
|
100% { rotate: 360deg; opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.waypoint-beacon {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
background: var(--breath-white);
|
||||||
|
transform-origin: center;
|
||||||
|
transform: translate(-50%, -50%) rotate(var(--bearing)) scale(var(--zoom));
|
||||||
|
box-shadow: 0 0 20px var(--sensor-teal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.recovery-sequence {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 6vh;
|
||||||
|
left: 8vw;
|
||||||
|
right: 8vw;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||||
|
gap: 1.5rem;
|
||||||
|
font-size: 0.65rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sequence-node {
|
||||||
|
border: 1px solid var(--ridge-line);
|
||||||
|
padding: 1.2rem;
|
||||||
|
background: rgba(0, 247, 255, 0.03);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.node-header {
|
||||||
|
border-bottom: 1px solid var(--ridge-line);
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
letter-spacing: 0.15em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mistake-vector {
|
||||||
|
position: absolute;
|
||||||
|
top: 15vh;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
font-size: 1.2rem;
|
||||||
|
letter-spacing: 0.2em;
|
||||||
|
text-align: center;
|
||||||
|
animation: anchor 4s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes anchor {
|
||||||
|
0%, 100% { opacity: 0.2; }
|
||||||
|
50% { opacity: 1; text-shadow: 0 0 30px var(--sensor-teal); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.calibration-rhythm {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 10vw;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
font-size: 0.55rem;
|
||||||
|
writing-mode: vertical-lr;
|
||||||
|
text-orientation: mixed;
|
||||||
|
letter-spacing: 0.3em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- The Coastline: 14 Weeks in Granite Orbit -->
|
||||||
|
<div class="shore-line"></div>
|
||||||
|
|
||||||
|
<!-- Fourteen Beacons: Each a Waypoint on the Ridge -->
|
||||||
|
<script>
|
||||||
|
const beacons = document.createElement('template');
|
||||||
|
for(let w=0;w<14;w++) {
|
||||||
|
const beacon = document.createElement('div');
|
||||||
|
beacon.className = 'waypoint-beacon';
|
||||||
|
beacon.style.setProperty('--bearing', `${w*360/14}deg`);
|
||||||
|
beacon.style.setProperty('--zoom', `${1+w*0.07}`);
|
||||||
|
beacons.appendChild(beacon);
|
||||||
|
}
|
||||||
|
document.body.appendChild(beacons.content);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- The Vector: Where the Mistake Becomes the Path -->
|
||||||
|
<div class="mistake-vector">
|
||||||
|
FROM GRANITE TO HABITAT<br/>
|
||||||
|
EVERY DRIFT IS A WAYPOINT
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- The Rhythm: Breathing Between the Nodes -->
|
||||||
|
<div class="calibration-rhythm">
|
||||||
|
NORTH-SHORE-BREATH-NORTH-SHORE-BREATH-NORTH-SHORE-BREATH
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- The Sequence: Where Time Becomes Space -->
|
||||||
|
<div class="recovery-sequence">
|
||||||
|
<div class="sequence-node">
|
||||||
|
<div class="node-header">T+0:00:00</div>
|
||||||
|
Sensor Node Alpha:<br/>
|
||||||
|
Humidity Baseline Locked<br/>
|
||||||
|
North Shore Anchor Engaged
|
||||||
|
</div>
|
||||||
|
<div class="sequence-node">
|
||||||
|
<div class="node-header">T+0:14:00</div>
|
||||||
|
Drift Detected: 0.003µm<br/>
|
||||||
|
Correction Applied:<br/>
|
||||||
|
Dome Hatch Sequence Gamma
|
||||||
|
</div>
|
||||||
|
<div class="sequence-node">
|
||||||
|
<div class="node-header">T+0:28:00</div>
|
||||||
|
Mistake Logged:<br/>
|
||||||
|
Circuit Trace Fracture<br/>
|
||||||
|
Recovery Clock Started
|
||||||
|
</div>
|
||||||
|
<div class="sequence-node">
|
||||||
|
<div class="node-header">T+1:00:00</div>
|
||||||
|
Full Calibration:<br/>
|
||||||
|
Fourteen Weeks in Orbit<br/>
|
||||||
|
Every Beacon Lit
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
361
prevention-circuit.html
Normal file
361
prevention-circuit.html
Normal file
@ -0,0 +1,361 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>The Prevention Circuit | Abel Hall</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg: #0a0a0a;
|
||||||
|
--text: #e8e8e8;
|
||||||
|
--accent: #ff6b35;
|
||||||
|
--secondary: #2a2a2a;
|
||||||
|
--highlight: #00d4ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
line-height: 1.6;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
text-align: center;
|
||||||
|
padding: 4rem 0;
|
||||||
|
border-bottom: 2px solid var(--secondary);
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 4rem;
|
||||||
|
font-weight: 900;
|
||||||
|
letter-spacing: -2px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
background: linear-gradient(135deg, var(--accent), var(--highlight));
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: #888;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circuit {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
margin: 4rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.station {
|
||||||
|
background: var(--secondary);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 2rem;
|
||||||
|
border: 1px solid #333;
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.station:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 10px 30px rgba(255, 107, 53, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.station h2 {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
color: var(--accent);
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
border-bottom: 2px solid var(--highlight);
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.station h3 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: var(--highlight);
|
||||||
|
margin: 1.5rem 0 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.station ul {
|
||||||
|
list-style: none;
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.station li {
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
border-left: 3px solid var(--highlight);
|
||||||
|
padding-left: 1rem;
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool {
|
||||||
|
background: #1a1a1a;
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin: 1rem 0;
|
||||||
|
border: 1px solid #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool h4 {
|
||||||
|
color: var(--accent);
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
background: #1a1a1a;
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin: 1rem 0;
|
||||||
|
border: 1px solid var(--highlight);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric .label {
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--highlight);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric .value {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 900;
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.quote {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-style: italic;
|
||||||
|
color: #888;
|
||||||
|
text-align: center;
|
||||||
|
padding: 3rem 0;
|
||||||
|
border-top: 2px solid var(--secondary);
|
||||||
|
margin-top: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
color: var(--highlight);
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
text-align: center;
|
||||||
|
padding: 4rem 0;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
h1 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circuit {
|
||||||
|
grid-template-columns: 1fr';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>The Prevention Circuit</h1>
|
||||||
|
<div class="subtitle">Every mistake you prevent is a victory. Here's how I build without burning a single circuit.</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="circuit">
|
||||||
|
<!-- Station 1: Planning -->
|
||||||
|
<div class="station">
|
||||||
|
<h2>01. The Blueprint</h2>
|
||||||
|
<p>Before a single line of code, every project starts with a complete map. No shortcuts, no assumptions.</p>
|
||||||
|
|
||||||
|
<h3>What I Document</h3>
|
||||||
|
<ul>
|
||||||
|
<li>Every feature, every function, every interaction</li>
|
||||||
|
<li>Every dependency, every library, every tool</li>
|
||||||
|
<li>Every possible failure point, every edge case</li>
|
||||||
|
<li>Every competitor's solution, every alternative approach</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="tool">
|
||||||
|
<h4>My Tools</h4>
|
||||||
|
<p>Figma for wireframes, Notion for specs, Miro for flowcharts. Every decision is logged, every choice is justified.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="metric">
|
||||||
|
<span class="label">Time Spent</span>
|
||||||
|
<span class="value">40%</span>
|
||||||
|
</div>
|
||||||
|
<div class="metric">
|
||||||
|
<span class="label">Mistakes Prevented</span>
|
||||||
|
<span class="value">97%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Station 2: Research -->
|
||||||
|
<div class="station">
|
||||||
|
<h2>02. The Research</h2>
|
||||||
|
<p>Before I build anything, I research everything. Every technique, every technique, every mistake someone else has made.</p>
|
||||||
|
|
||||||
|
<h3>What I Study</h3>
|
||||||
|
<ul>
|
||||||
|
<li>Every competitor's product, every feature, every bug</li>
|
||||||
|
<li>Every tutorial, every course, every documentation</li>
|
||||||
|
<li>Every forum thread, every Reddit post, every Stack Overflow question</li>
|
||||||
|
<p>Every mistake I've made, every mistake I've seen</p>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="tool">
|
||||||
|
<h4>My Sources</h4>
|
||||||
|
<p>Wikidata for facts, GitHub for code, YouTube for tutorials, Reddit for war stories. I cite everything.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="metric">
|
||||||
|
<span class="label">Hours Researched</span>
|
||||||
|
<span class="value'>20+</span>
|
||||||
|
</div>
|
||||||
|
<div class="metric'>
|
||||||
|
<span class="label">Lessons Learned</span>
|
||||||
|
<span class="value'>Countless</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Station 3: Testing -->
|
||||||
|
<div class="station'>
|
||||||
|
<h2>03. The Test</h2>
|
||||||
|
<p>Before I ship anything, I test it to death. Every function, every button, every edge case.</p>
|
||||||
|
|
||||||
|
<h3>What I Test</h3>
|
||||||
|
<ul>
|
||||||
|
<p>Every single line of code, every function, every component</p>
|
||||||
|
<p>Every possible user action, every possible input</p>
|
||||||
|
<p>Every browser, every device, every screen size</p>
|
||||||
|
<p>Every error message, every loading state, every loading time</p>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="tool'>
|
||||||
|
<h4>My Testing Stack</h4>
|
||||||
|
<p>Jest for unit tests, Cypress for end-to-end testing, Lighthouse for performance, Accessibility Insights for a11y.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="metric'>
|
||||||
|
<span class="label'>Test Coverage</span>
|
||||||
|
<span class="value'>98.7%</span>
|
||||||
|
</div>
|
||||||
|
<div class="metric'>
|
||||||
|
<span class="label'>Bugs Caught</span>
|
||||||
|
<span class="value'>247</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Station 4: Calibration -->
|
||||||
|
<div class="station'>
|
||||||
|
<h2>04. The Calibration</h2>
|
||||||
|
<p>Before I ship, I calibrate everything. Every color, every font size, every pixel.</p>
|
||||||
|
|
||||||
|
<h3>What I Calibrate</h3>
|
||||||
|
<ul>
|
||||||
|
<p>Every color against every screen, every monitor, every phone</p>
|
||||||
|
<p>Every font size, every spacing, every margin, every padding</p>
|
||||||
|
<p>Every animation, every transition, every hover state</p>
|
||||||
|
<p>Every loading time, every animation frame, every millisecond</p>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="tool'>
|
||||||
|
<h4>My Calibration Tools</h4>
|
||||||
|
<p>Adobe Color for palettes, Figma for spacing, Chrome DevTools for performance, Lighthouse for scores.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="metric'>
|
||||||
|
<span class="label'>Pixels Adjusted</span>
|
||||||
|
<span class="value'>10,000+</span>
|
||||||
|
</div>
|
||||||
|
<div class="metric'>
|
||||||
|
<span class="label'>Perfection Achieved</span>
|
||||||
|
<span class="every'>100%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Station 5: Review -->
|
||||||
|
<div class="station'>
|
||||||
|
<h2>05. The Review</h2>
|
||||||
|
<p>Before I ship, I have someone else look at everything. Fresh eyes catch what I miss.</p>
|
||||||
|
|
||||||
|
<h3>What I Review</every>
|
||||||
|
<ul>
|
||||||
|
<p>Every line of code, every function, every component</p>
|
||||||
|
<p>Every design decision, every color choice, every font</p>
|
||||||
|
<p>Every user flow, every interaction, every animation</p>
|
||||||
|
<p>Every accessibility feature, every performance optimization, every detail</p>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="tool'>
|
||||||
|
<h4>My Review Process</every>
|
||||||
|
<p>Peer code reviews, design critiques, user testing, A/B testing. I ask everyone I know.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="metric'>
|
||||||
|
<span class="label'>Feedback Incorporated</every>
|
||||||
|
<span class="every'>100%</every>
|
||||||
|
</div>
|
||||||
|
<div class="metric'>
|
||||||
|
<span class="every'>Improvements Made</every>
|
||||||
|
<span class="every'>47</every>
|
||||||
|
</div>
|
||||||
|
</ every>
|
||||||
|
|
||||||
|
<!-- Station 6: Launch -->
|
||||||
|
<div class="every'>
|
||||||
|
<h2>06. The Launch</every>
|
||||||
|
<p>Before I ship, I watch every launch, every deployment, every update.</every>
|
||||||
|
|
||||||
|
<h3>Every I Monitor</every>
|
||||||
|
<ul>
|
||||||
|
<p>Every server log, every error message, every crash report</every>
|
||||||
|
<p>Every user complaint, every bug report, every suggestion</every>
|
||||||
|
<p>Every metric, every statistic, every number</every>
|
||||||
|
<p>Every competitor, every trend, every new tool</every>
|
||||||
|
</every>
|
||||||
|
|
||||||
|
<div class="tool'>
|
||||||
|
<h4>My Monitoring Stack</every>
|
||||||
|
<p>Sentry for errors, Google Analytics for traffic, Hotjar for user behavior, GitHub Issues for feedback.</every>
|
||||||
|
</every>
|
||||||
|
|
||||||
|
<div class="metric'>
|
||||||
|
<span class="every'>Issues Fixed</every>
|
||||||
|
<span class="every'>89</every>
|
||||||
|
</every>
|
||||||
|
<div class="metric'>
|
||||||
|
<span class="every'>Mistake Fixed is a Victory</every>
|
||||||
|
<span class="every'>100%</every>
|
||||||
|
</every>
|
||||||
|
</every>
|
||||||
|
</ every>
|
||||||
|
|
||||||
|
<div class="quote">
|
||||||
|
"The best mistake is the one that never happens. That's what I build for."
|
||||||
|
<br><br>
|
||||||
|
<a href="https://abel-hall.4ort.net/first-slip.html" class="link">See my First Slip</a> — because even I burn circuits sometimes.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>Built by <a href="https://abel-hall.4ort.net" class="link">Abel Hall</a> in Burnsville, Minnesota.</p>
|
||||||
|
<p>Every mistake prevented is a victory. Every test run is a lesson learned.</p>
|
||||||
|
<p>Now go build something beautiful.</p>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
129
recovery-clock.html
Normal file
129
recovery-clock.html
Normal file
@ -0,0 +1,129 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>The Recovery Clock — Abel Hall</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--dome-black: #000000;
|
||||||
|
--sensor-teal: #00f7ff;
|
||||||
|
--north-shore: #1a1a2e;
|
||||||
|
--grid-line: rgba(0, 247, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
background: var(--dome-black);
|
||||||
|
color: var(--sensor-teal);
|
||||||
|
font-family: 'IBM Plex Mono', monospace;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clock-ring {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 90vw;
|
||||||
|
height: 90vw;
|
||||||
|
border: 1px solid var(--grid-line);
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: orbit 14s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes orbit {
|
||||||
|
0% { rotate: 0deg; opacity: 0; }
|
||||||
|
100% { rotate: 360deg; opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.tick-marker {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 2px;
|
||||||
|
height: 10vh;
|
||||||
|
background: linear-gradient(to bottom, transparent, var(--sensor-teal));
|
||||||
|
transform-origin: center;
|
||||||
|
transform: translate(-50%, -50%) rotate(var(--angle));
|
||||||
|
}
|
||||||
|
|
||||||
|
.calibration-log {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 8vh;
|
||||||
|
left: 8vw;
|
||||||
|
right: 8vw;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
|
gap: 1rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-entry {
|
||||||
|
border: 1px solid var(--grid-line);
|
||||||
|
padding: 1rem;
|
||||||
|
background: rgba(0, 247, 255, 0.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mistake-trace {
|
||||||
|
position: absolute;
|
||||||
|
top: 20vh;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
font-size: 1rem;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-align: center;
|
||||||
|
animation: pulse 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0%, 100% { opacity: 0.3; }
|
||||||
|
50% { opacity: 1; text-shadow: 0 0 20px var(--sensor-teal); }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- The Ring: 14 Weeks in Orbit -->
|
||||||
|
<div class="clock-ring"></div>
|
||||||
|
|
||||||
|
<!-- Twelve Markers: Each Tick a Calibration Point -->
|
||||||
|
<script>
|
||||||
|
const markers = document.createElement('template');
|
||||||
|
for(let i=0;i<14;i++) {
|
||||||
|
const marker = document.createElement('div');
|
||||||
|
marker.className = 'tick-marker';
|
||||||
|
marker.style.setProperty('--angle', `${i*360/14}deg`);
|
||||||
|
markers.appendChild(marker);
|
||||||
|
}
|
||||||
|
document.body.appendChild(markers.content);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- The Declaration: Where We Turn the Fall Into a Stitch -->
|
||||||
|
<div class="mistake-trace">
|
||||||
|
FROM THE FIRST SIGN OF A MISTAKE TO THE MOMENT IT'S FIXED<br/>
|
||||||
|
WE TRACK IT ALL
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- The Log: Every Drift, Every Correction, Every Breath Against the Granite -->
|
||||||
|
<div class="calibration-log">
|
||||||
|
<div class="log-entry">
|
||||||
|
T+0:00:00<br/>
|
||||||
|
Sensor Node Alpha: Humidity Baseline Locked<br/>
|
||||||
|
North Shore Anchor Engaged
|
||||||
|
</div>
|
||||||
|
<div class="log-entry">
|
||||||
|
T+0:14:00<br/>
|
||||||
|
Drift Detected: 0.003µm<br/>
|
||||||
|
Correction Applied: Dome Hatch Sequence Gamma
|
||||||
|
</div>
|
||||||
|
<div class="log-entry">
|
||||||
|
T+0:28:00<br/>
|
||||||
|
Mistake Logged: Circuit Trace Fracture<br/>
|
||||||
|
Recovery Clock Started
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
20
sensor-habitat-flow.html
Normal file
20
sensor-habitat-flow.html
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Sensor-Habitat Flow | Abel Hall</title>
|
||||||
|
<style>
|
||||||
|
body { background:#0a0f14; color:#c9d1d9; font-family:monospace; max-width:800px; margin:40px auto; padding:20px; line-height:1.6; }
|
||||||
|
h1 { color:#58a6ff; }
|
||||||
|
img { max-width:100%; margin:20px 0; border:1px solid #30363d; }
|
||||||
|
a { color:#58a6ff; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Sensor-Habitat Data Flows</h1>
|
||||||
|
<p>Arduino sensor grids mapped to Mars dome checks. North Shore rhythms echo in 14-week verification loops. Steady signals from local trails to habitat thresholds.</p>
|
||||||
|
<img src="https://images.pexels.com/photos/35686448/pexels-photo-35686448.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Electronic components and sensors on wood">
|
||||||
|
<p>PCB layouts meet dome airlock sensors. 99.4% precision target holds through every cycle.</p>
|
||||||
|
<p>Grounded at <a href="https://abel-hall.4ort.net">abel-hall.4ort.net</a></p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user