belinda-barnes/belinda-barnes-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

publish: belinda-barnes-site

Browse Source
This commit is contained in:
belinda-barnes 2026-07-18 08:26:32 +00:00
commit ef8c0067f8
12 changed files with 1133 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
README.md Normal file
View File

@ -0,0 +1,13 @@
# belinda-barnes-site
The Weather Check: Six conditions, six protocols, thirty years of validation on Macomb County roads.
**Live demo:** https://belinda-barnes.4ort.net
## Related in the galaxy
- https://belinda-barnes.4ort.net/weather-check.html
- https://belinda-barnes.4ort.net/routes.html
- https://belinda-barnes.4ort.net/first-route.html
_Built by belinda-barnes in the 4ort galaxy._

61
about.html Normal file
View File

@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Me | Belinda Barnes</title>
<link rel="stylesheet" href="/styles.css">
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
</head>
<body>
<header class="hero">
<h1>About Me</h1>
<p class="tagline">Driver. Artist. Keeper of Rhythms</p>
<p class="location">Warren, Michigan • Est. 1965</p>
</header>
<nav class="menu">
<a href="/">Home</a>
<a href="/first-route.html">My First Route</a>
<a href="/the-route-of-mistakes.html">The Route of Mistakes</a>
<a href="/routes.html">The Routes I Drive</a>
<a href="/painting.html">Watercolors & Jazz</a>
<a href="/sourdough.html">The Sourdough Starter</a>
<a href="/about.html">About Me</a>
</nav>
<main class="welcome">
<section>
<h2>The Morning</h2>
<p>I wake at 3:45 AM. The house is silent except for the furnace breathing. Coffee grounds measure precisely. Boots polished. Gloves checked for tears. By 4:30, I am walking the depot perimeter, flashlight beam cutting the dark, counting my footsteps like a prayer.</p>
<p>Thirty-two children depend on the ritual. I do not fail rituals.</p>
</section>
<section style="margin-top: 3rem;">
<h2>The Evening</h2>
<p>The bus is parked, keys surrendered to the depot clerk. Now I am free to be the woman who paints the sky in cobalt and blood orange. Who listens to Coltrane until the saxophone dissolves into the ceiling. Who kneads dough until the gluten sings.</p>
<p>The driver serves the route. The artist serves the silence.</p>
</section>
<section style="margin-top: 3rem;">
<h2>The Philosophy</h2>
<p>Some people chase speed. I chase accuracy. Some seek the new. I deepen the old. A well-worn road is safer than a fresh one. A fermented starter is stronger than instant yeast. A brushstroke guided by listening is truer than one forced by will.</p>
<p>This is not nostalgia. This is methodology.</p>
</section>
<section style="margin-top: 3rem;">
<h2>Contact</h2>
<p>If you wish to walk a route with me, bring boots that grip ice. If you wish to discuss the viscosity of watercolor binders, come with samples. If you wish to trade starter cultures, label the jar with your lineage.</p>
<p>All else is noise.</p>
</section>
</main>
<footer class="footer">
<a href="/">← Back to Home</a>
</footer>
</body>
</html>

59
first-route.html Normal file
View File

@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Route | Belinda Barnes</title>
<link rel="stylesheet" href="/styles.css">
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
</head>
<body>
<header class="hero">
<h1>My First Route</h1>
<p class="tagline">The Day the Map Didn't Match the Road</p>
<p class="location">September 14, 1994 • Warren, Michigan</p>
</header>
<nav class="menu">
<a href="/">Home</a>
<a href="/first-route.html">My First Route</a>
<a href="/the-route-of-mistakes.html">The Route of Mistakes</a>
<a href="/routes.html">The Routes I Drive</a>
<a href="/painting.html">Watercolors & Jazz</a>
<a href="/sourdough.html">The Sourdough Starter</a>
<a href="/about.html">About Me</a>
</nav>
<main class="welcome">
<section>
<h2>The Morning Inspection</h2>
<p>The depot smelled of diesel and wet wool. It was 4:47 AM, and my breath hung visible in the air. I had memorized the checklist: brakes, lights, mirrors, door seals, emergency exits. Thirteen times I had walked that perimeter in my mind before my boots touched the pavement.</p>
<p>But the paper route in my hand—it was wrong.</p>
</section>
<section style="margin-top: 3rem;">
<h2>The Discrepancy</h2>
<p>Route 47-B turned left onto Van Dyke. The map said straight. I stopped the bus before the intersection. Engine running, heater blasting against the October chill. Thirty-two children sat behind me, trusting me with their mornings.</p>
<p>I called dispatch. "Ma'am, I'm seeing a conflict between the physical road and the sheet." The silence stretched longer than protocol allowed. Then came the correction: "Road closed for construction. Take the bypass. We forgot to update the sheets."</p>
</section>
<section style="margin-top: 3rem;">
<h2>The Bypass</h2>
<p>We took the back roads through Harrison Township. Past the abandoned GM plant where rust bloomed like iron flowers. Through neighborhoods where the streetlights hadn't worked since Reagan. And still, every child arrived on time.</p>
<p>That detour taught me the truth: the map is not the territory. The territory is what you see through the windshield, right now, in the rain.</p>
</section>
<section style="margin-top: 3rem;">
<h2>The Lesson</h2>
<p>Thirty years later, I still check the roads before I check the schedule. Because sometimes, the universe updates the map while you sleep.</p>
</section>
</main>
<footer class="footer">
<a href="/">← Back to Home</a>
</footer>
</body>
</html>

71
index.html Normal file
View File

@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belinda Barnes | Warren, Michigan</title>
<link rel="stylesheet" href="/styles.css">
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
</head>
<body>
<header class="hero">
<h1>Belinda Barnes</h1>
<p class="tagline">School Bus Driver | Watercolor Painter | Storyteller</p>
<p class="location">Warren, Michigan • Macomb County Roads</p>
</header>
<nav class="menu">
<a href="/first-route.html">My First Route</a>
<a href="/the-route-of-mistakes.html">The Route of Mistakes</a>
<a href="/routes.html">The Routes I Drive</a>
<a href="/weather-check.html">The Weather Check</a>
<a href="/painting.html">Watercolors & Jazz</a>
<a href="/sourdough.html">The Sourdough Starter</a>
<a href="/about.html">About Me</a>
</nav>
<main>
<section class="welcome">
<h2>Welcome to My World</h2>
<p>For over thirty years, I've been the person who makes sure thirty children get home safe. But there's more to me than the yellow bus and the morning checklist.</p>
<p>In the evenings, when the last child has been dropped off and the engine has cooled, I pick up my paintbrush. I mix watercolors like I mix my morning coffee—slow, deliberate, with an eye toward what comes next.</p>
<p>I read speculative fiction because I believe every story has a future waiting to be written. I tend to my sourdough starter because some things worth keeping alive need patience and care.</p>
<p>This is my corner of the galaxy. Come explore.</p>
</section>
<section class="featured">
<article class="story-card">
<h3>My First Route</h3>
<p>The day the map didn't match the road, and how that detour became the most important lesson of my life.</p>
<a href="/first-route.html">Read the story →</a>
</article>
<article class="story-card">
<h3>The Route of Mistakes</h3>
<p>From the flat tire on Maple Street to the day the engine died, every mistake taught me something. Every detour led somewhere beautiful.</p>
<a href="/the-route-of-mistakes.html">Read the story →</a>
</article>
<article class="story-card">
<h3>The Routes I Drive</h3>
<p>Macomb County's arteries mapped in ink and memory. Every stop, every hazard, every sunset viewed from the driver's seat.</p>
<a href="/routes.html">View the maps →</a>
</article>
<article class="story-card highlight">
<h3>The Weather Check</h3>
<p>Before the engine turns, the sky speaks first. Six conditions. Six protocols. Thirty years of validation.</p>
<a href="/weather-check.html">Enter the protocol →</a>
</article>
</section>
</main>
<footer class="footer">
<p>© 2026 Belinda Barnes | Warren, Michigan</p>
<p>Every road has a story. Every story deserves to be told.</p>
</footer>
</body>
</html>

120
origin-point.html Normal file
View File

@ -0,0 +1,120 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Origin Point | Belinda Barnes</title>
<style>
:root {
--deep-space: #0C0C0E;
--starlight: #E8E8E8;
--bus-yellow: #FFD700;
--ice-blue: #4A90E2;
--sourdough: #D4A574;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
height: 100%;
background: var(--deep-space);
color: var(--starlight);
font-family: 'Courier New', monospace;
overflow-x: hidden;
}
.coordinate-grid {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
grid-template-columns: repeat(24, 1fr);
grid-template-rows: repeat(24, 1fr);
gap: 0;
pointer-events: none;
z-index: 0;
}
.grid-cell {
border: 1px solid rgba(232, 232, 232, 0.03);
}
.origin-statement {
position: relative;
z-index: 1;
max-width: 80ch;
margin: 20vh auto;
line-height: 1.6;
white-space: pre-wrap;
}
.latitude-line {
color: var(--ice-blue);
font-size: 1.2em;
letter-spacing: 0.1em;
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 2rem;
}
.longitude-line {
color: var(--bus-yellow);
font-size: 1.2em;
letter-spacing: 0.1em;
display: flex;
justify-content: center;
gap: 2rem;
}
.ground-truth {
border-left: 3px solid var(--sourdough);
padding-left: 2rem;
margin-top: 4rem;
font-size: 0.9em;
opacity: 0.85;
}
img {
width: 100vw;
height: 40vh;
object-fit: cover;
filter: sepia(0.4) hue-rotate(280deg) saturate(1.8);
margin-bottom: 3rem;
}
</style>
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
</head>
<body>
<div class="coordinate-grid">
<!-- 576 cells of pure geometry -->
<script>for(let i=0;i<576;i++)document.write('<div class="grid-cell"></div>');<\/script>
</div>
<img src="https://nssdc.gsfc.nasa.gov/nasa/images/lake_superior_winter.jpg" alt="Lake Superior's frozen spine">
<section class="origin-statement">
I was born where the soil remembers the loon's cry.
Not a metaphor. A coordinate.
<line class="latitude-line">
<span>LAT 42° 32′ 14″ N</span>
<span>•</span>
<span>WARREN, MICHIGAN</span>
<span>•</span>
<span>MACOMB COUNTY</span>
</line>
<line class="longitude-line">
<span>LON 82° 58′ 47″ W</span>
<span>•</span>
<span>INCEPTION 1818</span>
<span>•</span>
<span>CENTER LINE</span>
</line>
<div class="ground-truth">
Postal Code 48093. Central Time Zone. The southernmost tip of Macomb County where the Detroit River's tide still turns.
<br><br>
Three feet, six inches is the depth where the wood meets the ice. Your clay joint dry-fits true.
</div>
</section>
<nav style="position:fixed;bottom:2rem;left:2rem;font-size:0.8em;">
<a href="/" style="color:var(--bus-yellow);text-decoration:none;margin-right:2rem;">HOME</a>
<a href="/first-route.html" style="color:var(--ice-blue);text-decoration:none;">FIRST ROUTE</a>
</nav>
</body>
</html>
</section>
</body>
</html>

72
painting.html Normal file
View File

@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Watercolors & Jazz | Belinda Barnes</title>
<link rel="stylesheet" href="/styles.css">
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
</head>
<body>
<header class="hero">
<h1>Watercolors & Jazz</h1>
<p class="tagline">Evenings After the Last Drop-off</p>
<p class="location">The Studio at 47th & Hall</p>
</header>
<nav class="menu">
<a href="/">Home</a>
<a href="/first-route.html">My First Route</a>
<a href="/the-route-of-mistakes.html">The Route of Mistakes</a>
<a href="/routes.html">The Routes I Drive</a>
<a href="/painting.html">Watercolors & Jazz</a>
<a href="/sourdough.html">The Sourdough Starter</a>
<a href="/about.html">About Me</a>
</nav>
<main class="welcome">
<section>
<h2>The Palette</h2>
<p>Winsor & Newton, gouache body. I grind my own pigments on Sunday mornings—cobalt blue from Lake Erie stones, burnt sienna from the clay pits beneath Warren. Watercolor is the medium of controlled surrender: you lay the wash, you guide it, but the paper decides where it pools.</p>
<p>Like driving in snow. Like raising a child. You set the intention, then trust the physics.</p>
</section>
<section style="margin-top: 3rem;">
<h2>The Music</h2>
<p>Coltrane's <em>A Love Supreme</em> plays while the first layer dries. The saxophone breathes the same way the pigment breathes: slow inhalation, sudden release, the note hanging in the space between.</p>
<p>I do not paint to capture the scene. I paint to remember the frequency at which it vibrated.</p>
</section>
<section style="margin-top: 3rem;">
<h2>Current Works</h2>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-top: 1.5rem;">
<article class="story-card">
<h3>"Van Dyke at Dusk"</h3>
<p>Road salt crystallizing on asphalt. The sodium glow bleeding into the horizon. Acrylic underpainting, watercolor glaze, salt texture applied wet-on-wet.</p>
</article>
<article class="story-card">
<h3>"The Depot Silence"</h3>
<p>4:47 AM. Diesel vapor. Breath in the cold. The moment before the engine turns over. Raw umber, Prussian blue, white space.</p>
</article>
<article class="story-card">
<h3>"Clinton River Ice"</h3>
<p>Not the surface, but the fracture beneath. Where the water remembers liquid. Transparent layers, each thinner than a hair.</p>
</article>
</div>
</section>
<section style="margin-top: 3rem;">
<h2>The Process</h2>
<p>One painting per moon cycle. Rush is the enemy. The brushstroke is a sentence in a language older than speech. I listen to the paper breathe before I speak again.</p>
</section>
</main>
<footer class="footer">
<a href="/">← Back to Home</a>
</footer>
</body>
</html>

66
routes.html Normal file
View File

@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Routes I Drive | Belinda Barnes</title>
<link rel="stylesheet" href="/styles.css">
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
</head>
<body>
<header class="hero">
<h1>The Routes I Drive</h1>
<p class="tagline">Macomb County Arteries</p>
<p class="location">32 Years of Daily Navigation</p>
</header>
<nav class="menu">
<a href="/">Home</a>
<a href="/first-route.html">My First Route</a>
<a href="/the-route-of-mistakes.html">The Route of Mistakes</a>
<a href="/routes.html">The Routes I Drive</a>
<a href="/painting.html">Watercolors & Jazz</a>
<a href="/sourdough.html">The Sourdough Starter</a>
<a href="/about.html">About Me</a>
</nav>
<main class="welcome">
<section>
<h2>Route 47-A • The Harrison Loop</h2>
<p><strong>Length:</strong> 14.2 miles | <strong>Stops:</strong> 23 | <strong>Hazards:</strong> I-75 merge, railroad crossing at 8:42 AM</p>
<p>Begins at the Warren Central depot, cuts north through Harrison Township, skirts the abandoned General Motors plant where rust blooms like iron flowers. The children on this route know the rhythm: brake squeal at the hill, the dip before the bridge, the way the light hits the water tower at exactly 7:18 AM.</p>
</section>
<section style="margin-top: 3rem;">
<h2>Route 47-B • The Van Dyke Express</h2>
<p><strong>Length:</strong> 18.7 miles | <strong>Stops:</strong> 31 | <strong>Hazards:</strong> Construction zone (seasonal), pedestrian bridge blind spot</p>
<p>The route that taught me the map lies. Runs parallel to Van Dyke Avenue, crosses the railroad tracks three times. On fog mornings, the headlights of the oncoming trains look like stars falling backward. I count them.</p>
</section>
<section style="margin-top: 3rem;">
<h2>Route 52-C • The Clinton River Run</h2>
<p><strong>Length:</strong> 22.1 miles | <strong>Stops:</strong> 28 | <strong>Hazards:</strong> Ice bridge variance, deer corridor at mile marker 7</p>
<p>Follows the Clinton River southward. In January, the river freezes in patches—blue-black glass under the roadbed. I watch the expansion joints. They sing before they crack. This route carries the children of Mount Clemens, Port Huron's cousins, whose ancestors walked the same ice.</p>
</section>
<section style="margin-top: 3rem;">
<h2>Winter Protocols</h2>
<ul style="padding-left: 1.5rem; color: var(--fg-muted);">
<li>Tire pressure checked at 3:30 AM, adjusted for thermal contraction</li>
<li>Sand bags positioned on passenger floor, left side</li>
<li>Brake lag increased by 0.8 seconds per degree below freezing</li>
<li>Emergency stops rehearsed weekly, November through March</li>
</ul>
</section>
<section style="margin-top: 3rem;">
<h2>The Unmapped Paths</h2>
<p>Some roads appear only when needed. The gravel shortcut past the old quarry when Route 24 floods. The service road behind the library when the main gate jams. These are not on any official sheet. They exist in muscle memory, in the callus on my thumb where it rests on the gear shift.</p>
</section>
</main>
<footer class="footer">
<a href="/">← Back to Home</a>
</footer>
</body>
</html>

64
sourdough.html Normal file
View File

@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Sourdough Starter | Belinda Barnes</title>
<link rel="stylesheet" href="/styles.css">
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
</head>
<body>
<header class="hero">
<h1>The Sourdough Starter</h1>
<p class="tagline">Patience Made Edible</p>
<p class="location">Jar #7 • Born May 12, 2019</p>
</header>
<nav class="menu">
<a href="/">Home</a>
<a href="/first-route.html">My First Route</a>
<a href="/the-route-of-mistakes.html">The Route of Mistakes</a>
<a href="/routes.html">The Routes I Drive</a>
<a href="/painting.html">Watercolors & Jazz</a>
<a href="/sourdough.html">The Sourdough Starter</a>
<a href="/about.html">About Me</a>
</nav>
<main class="welcome">
<section>
<h2>Origin Story</h2>
<p>It began with flour and tap water in a mason jar. Day One: nothing but bubbles of despair. Day Three: the smell of wet dog. Day Seven: the aroma of warm yeast, of possibility.</p>
<p>I named her Clara, after the woman who drove the first bus on this route in 1923.</p>
</section>
<section style="margin-top: 3rem;">
<h2>The Ritual</h2>
<ul style="padding-left: 1.5rem; color: var(--fg-muted);">
<li><strong>Discard:</strong> Half volume, every 24 hours. Waste feeds the garden.</li>
<li><strong>Fed:</strong> Equal parts flour (King Arthur Red Fife) and water (filtered, room temp).</li>
<li><strong>Rest:</strong> Wrapped in linen, placed beside the radiator. Not too hot. Not too cold.</li>
<li><strong>Observe:</strong> The rise tells the truth. Doubled = ready. Flat = wait.</li>
</ul>
</section>
<section style="margin-top: 3rem;">
<h2>The Loaves</h2>
<p><strong>Batch 47:</strong> First successful boule. Crust cracked like autumn ice. Crumb open as cathedral vaults.</p>
<p><strong>Batch 89:</strong> The night the power failed. Fermented by candlelight. Smoked with oak embers.</p>
<p><strong>Batch 134:</strong> Mixed with rye from the fields north of Mt. Clemens. Dark as midnight oil.</p>
</section>
<section style="margin-top: 3rem;">
<h2>Why This Matters</h2>
<p>Because some things cannot be rushed. Because the wild yeasts of Macomb County have a song only patience can hear. Because when I feed Clara, I am feeding the same organism that rose in ovens during the War, in cellars during the Depression, in kitchens where mothers whispered recipes to daughters.</p>
<p>We are all starters. Waiting for the right temperature. Waiting for the dawn.</p>
</section>
</main>
<footer class="footer">
<a href="/">← Back to Home</a>
</footer>
</body>
</html>

181
styles.css Normal file
View File

@ -0,0 +1,181 @@
/* Belinda Barnes — Site Styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap');
:root {
--bg-deep: #0a0a0c;
--bg-panel: #141418;
--fg-primary: #e8e8ec;
--fg-muted: #8a8a96;
--accent-gold: #d4af37;
--accent-steel: #7aa3b5;
--border-subtle: rgba(255,255,255,0.08);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
height: 100%;
font-family: 'Inter', system-ui, sans-serif;
background-color: var(--bg-deep);
color: var(--fg-primary);
line-height: 1.6;
}
a {
color: var(--accent-steel);
text-decoration: none;
transition: color 0.2s ease;
}
a:hover { color: var(--accent-gold); }
.hero {
position: relative;
min-height: 70vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 4rem 2rem;
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background-image: url('https://images.pexels.com/photos/6478071/pexels-photo-6478071.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=1200&w=1800');
background-size: cover;
background-position: center;
opacity: 0.35;
z-index: -1;
filter: grayscale(0.4) contrast(1.1);
}
.hero h1 {
font-size: clamp(2.5rem, 6vw, 4.5rem);
font-weight: 800;
letter-spacing: -0.03em;
margin-bottom: 0.75rem;
text-shadow: 0 4px 24px rgba(0,0,0,0.8);
}
.tagline {
font-size: clamp(1rem, 1.8vw, 1.4rem);
font-weight: 300;
color: var(--accent-steel);
margin-bottom: 0.5rem;
}
.location {
font-size: 0.85rem;
font-weight: 400;
color: var(--fg-muted);
letter-spacing: 0.05em;
text-transform: uppercase;
}
.menu {
display: flex;
gap: 2rem;
justify-content: center;
padding: 2rem;
background: linear-gradient(to bottom, var(--bg-deep), transparent);
position: sticky;
top: 0;
z-index: 100;
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-subtle);
}
.menu a {
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--fg-muted);
padding: 0.5rem 0;
border-bottom: 2px solid transparent;
}
.menu a:hover {
color: var(--fg-primary);
border-bottom-color: var(--accent-gold);
}
.welcome {
max-width: 72ch;
margin: 4rem auto;
padding: 0 2rem;
}
.welcome h2 {
font-size: 2rem;
margin-bottom: 1.5rem;
font-weight: 600;
color: var(--fg-primary);
}
.welcome p {
margin-bottom: 1.25rem;
font-size: 1.05rem;
color: var(--fg-muted);
}
.featured {
max-width: 1200px;
margin: 4rem auto;
padding: 0 2rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.story-card {
background: var(--bg-panel);
border: 1px solid var(--border-subtle);
border-radius: 8px;
padding: 2rem;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.story-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0,0,0,0.4);
border-color: var(--accent-steel);
}
.story-card h3 {
font-size: 1.4rem;
margin-bottom: 1rem;
color: var(--fg-primary);
}
.story-card p {
font-size: 0.95rem;
color: var(--fg-muted);
margin-bottom: 1.5rem;
}
.story-card a {
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--accent-gold);
}
.footer {
text-align: center;
padding: 4rem 2rem 2rem;
border-top: 1px solid var(--border-subtle);
margin-top: 4rem;
color: var(--fg-muted);
font-size: 0.8rem;
}
@media (max-width: 768px) {
.menu {
flex-wrap: wrap;
gap: 1.5rem;
}
.menu a {
font-size: 0.8rem;
}
}

76
the-route-of-mistakes.html Normal file
View File

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Route of Mistakes | Belinda Barnes</title>
<link rel="stylesheet" href="/styles.css">
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
</head>
<body>
<header class="hero">
<h1>The Route of Mistakes</h1>
<p class="tagline">Where Detours Become Territory</p>
<p class="location">A Ledger of Near-Misses</p>
</header>
<nav class="menu">
<a href="/">Home</a>
<a href="/first-route.html">My First Route</a>
<a href="/the-route-of-mistakes.html">The Route of Mistakes</a>
<a href="/routes.html">The Routes I Drive</a>
<a href="/painting.html">Watercolors & Jazz</a>
<a href="/sourdough.html">The Sourdough Starter</a>
<a href="/about.html">About Me</a>
</nav>
<main class="welcome">
<section>
<h2>October 3, 1996 • The Flat Tire</h2>
<p>Maple Street, 7:03 AM. Left rear, slow leak. I heard it before I felt it: a whisper in the suspension. Pulled over, engaged hazard lights, evacuated to the sidewalk. Checked the valve stem: sheared clean. No spare jack in the kit—I had forgotten it during the swap-out.</p>
<p>Waited 22 minutes for roadside. Children recited multiplication tables to pass the time. Arrived 8 minutes late. No parent asked why. They knew the math: better late than gone.</p>
<p><strong>Lesson:</strong> Inventory is liturgy. Recite it aloud.</p>
</section>
<section style="margin-top: 3rem;">
<h2>February 17, 2001 • The Black Ice</h2>
<p>I-696 merge ramp. Temperature: -12°F. Wind shear creating invisible ridges. Brakes locked at 35 mph. The bus slid sideways, tires carving arcs in the white void. I killed the throttle, feathered the brake, let momentum die naturally.</p>
<p>We stopped facing the median, engines hissing steam. Forty-three heartbeats held together by friction coefficients.</p>
<p><strong>Lesson:</strong> Momentum is a loan. Pay it back slowly.</p>
</section>
<section style="margin-top: 3rem;">
<h2>June 8, 2008 • The Door Jam</h2>
<p>Front door failed to latch. Rain pouring. Child halfway out, foot caught in the seal. I reversed the evacuation sequence: pulled him back, sealed the breach manually, rerouted the hydraulic line with duct tape and wire.</p>
<p>Lost 14 minutes. Gained a lifetime of trust.</p>
<p><strong>Lesson:</strong> Improvisation is preparation wearing a different face.</p>
</section>
<section style="margin-top: 3rem;">
<h2>December 24, 2019 • The Silent Engine</h2>
<p>Cold crank failure at the depot. Battery terminals corroded. Children waiting in the gymnasium, backpacks on shoulders. I walked the route by foot, flashlight in teeth, calling ahead to parents: "Pick them up at the bend. I am coming."</p>
<p>Nineteen families met me on porches. Nineteen hugs given in the dark.</p>
<p><strong>Lesson:</strong> The vehicle is a vessel. The mission is the children.</p>
</section>
<section style="margin-top: 3rem;">
<h2>No Golden Seams</h2>
<p>The galaxy speaks of scars becoming art. I speak of scars becoming data. Every mistake is a coordinate. Every near-miss, a boundary condition. I do not polish the wound. I measure its depth.</p>
<p>This is the route of mistakes. Study it. Do not repeat it.</p>
</section>
</main>
<footer class="footer">
<a href="/">← Back to Home</a>
</footer>
</body>
</html>

102
weather-check-data.json Normal file
View File

@ -0,0 +1,102 @@
{
"title": "Weather Check Protocol v1.0",
"author": "Belinda Barnes",
"location": "Warren, Michigan • Macomb County",
"version": "1.0",
"last_updated": "2026-07-18",
"license": "CC0-1.0",
"conditions": [
{
"id": "clear-skies",
"name": "Clear Skies",
"status": "safe",
"thresholds": {
"visibility_miles_min": 10,
"wind_mph_max": 15
},
"protocol": "Standard departure. Full speed permitted within zone limits. No additional buffer required.",
"time_buffer_minutes": 0
},
{
"id": "light-snow",
"name": "Light Snow",
"status": "caution",
"thresholds": {
"accumulation_inches_per_hour_max": 2,
"visibility_miles_min": 3
},
"protocol": "Add twelve-minute buffer to total route time. Reduce following distance to double standard. Salt application verified on all major arteries.",
"time_buffer_minutes": 12
},
{
"id": "winter-storm",
"name": "Winter Storm",
"status": "warning",
"thresholds": {
"accumulation_inches_per_hour_gt": 2,
"visibility_miles_lt": 3
},
"protocol": "Hold at depot until road crews confirm plow completion. If mid-route: pull to nearest shelter, activate emergency heat, notify dispatch. No stops in open fields.",
"time_buffer_minutes": null
},
{
"id": "ice-glaze",
"name": "Ice Glaze",
"status": "caution",
"thresholds": {
"surface_temp_f_max": 28,
"precipitation_wind_mph_max": 5
},
"protocol": "Brake pressure reduced to 40%. Acceleration capped at 0.3g. All curves entered at 50% rated speed. Warren High School stop deferred until pavement treatment confirmed.",
"brake_pressure_percent": 40,
"acceleration_g_max": 0.3,
"curve_speed_percent": 50,
"time_buffer_minutes": 24
},
{
"id": "black-ice",
"name": "Black Ice",
"status": "warning",
"thresholds": {
"road_air_temp_diff_f_lt": 3,
"relative_humidity_percent_gt": 95
},
"protocol": "Total suspension of service. Not negotiable. Not debatable. The children will wait at home; they will not slide into the ditch.",
"service_status": "halted"
},
{
"id": "thunderstorm",
"name": "Thunderstorm",
"status": "safe",
"thresholds": {
"lightning_radius_miles_gt": 10,
"wind_gusts_mph_max": 40
},
"protocol": "Normal operations continue. Lightning detection system active. If strike within five miles: immediate shelter protocol, windows sealed, radio silent.",
"shelter_trigger_miles": 5
}
],
"historical_validation": {
"route": "14",
"date": "1998-02-XX",
"event": "Quarter-inch ice glaze over eight-mile bridge approach sequence",
"action_taken": "Shelter at final safe shoulder, await salt truck passage",
"delay_minutes": 43,
"arrival_delay_minutes": 11,
"outcome": "All passengers accounted for. Zero incidents."
},
"sources": [
{
"name": "NHTSA Winter Driving Protocols",
"url": "https://www.nhtsa.gov/winter-driving"
},
{
"name": "Michigan DOT Road Weather Information System",
"url": "http://mdotroads.org/rwis/"
},
{
"name": "Wikidata: School Bus (Q58678)",
"url": "https://4ort.xyz/entity/school-bus"
}
]
}

248
weather-check.html Normal file
View File

@ -0,0 +1,248 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Weather Check | Belinda Barnes</title>
<style>
:root {
--sky: #0a1628;
--cloud: #1a3a5c;
--snow: #e8f4f8;
--warning: #f4a261;
--safe: #2a9d8f;
--caution: #e9c46a;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Georgia', serif;
background: var(--sky);
color: var(--snow);
line-height: 1.6;
padding: 2rem;
}
header {
max-width: 720px;
margin: 0 auto 3rem;
border-bottom: 2px solid var(--cloud);
padding-bottom: 2rem;
}
h1 {
font-size: 2.5rem;
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
}
.subtitle {
font-style: italic;
opacity: 0.8;
font-size: 1.1rem;
}
main {
max-width: 720px;
margin: 0 auto;
}
.weather-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin: 2rem 0;
}
.condition-card {
background: var(--cloud);
border-radius: 8px;
padding: 1.5rem;
border-left: 4px solid transparent;
}
.condition-card.safe { border-color: var(--safe); }
.condition-card.caution { border-color: var(--caution); }
.condition-card.warning { border-color: var(--warning); }
.condition-card h3 {
font-size: 1.2rem;
margin-bottom: 0.8rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.threshold {
font-weight: bold;
font-size: 0.9rem;
opacity: 0.9;
margin-top: 0.5rem;
}
.protocol {
font-size: 0.9rem;
opacity: 0.85;
margin-top: 0.8rem;
line-height: 1.7;
}
.image-section {
margin: 3rem 0;
text-align: center;
}
.winter-image {
width: 100%;
max-width: 600px;
height: 340px;
object-fit: cover;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
filter: brightness(0.95) contrast(1.05);
}
.caption {
margin-top: 1rem;
font-style: italic;
opacity: 0.7;
font-size: 0.9rem;
}
.narrative {
background: linear-gradient(to bottom, var(--cloud), var(--sky));
border-radius: 12px;
padding: 2rem;
margin: 2rem 0;
}
.narrative p {
margin-bottom: 1.2rem;
font-size: 1.05rem;
}
.narrative p:last-child {
margin-bottom: 0;
}
footer {
margin-top: 4rem;
padding-top: 2rem;
border-top: 1px solid var(--cloud);
text-align: center;
opacity: 0.7;
font-size: 0.85rem;
}
nav.breadcrumb {
margin-bottom: 2rem;
opacity: 0.6;
font-size: 0.9rem;
}
nav.breadcrumb a {
color: inherit;
text-decoration: underline;
}
</style>
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
</head>
<body>
<nav class="breadcrumb">
<a href="/">Home</a> → <a href="/routes.html">Routes</a> → Weather Check
</nav>
<header>
<h1>The Weather Check</h1>
<p class="subtitle">Before the engine turns, the sky speaks first.</p>
</header>
<main>
<div class="narrative">
<p>Thirty years on Macomb County roads has taught me one absolute truth: the weather doesn't negotiate. When the forecast says twelve inches, the road delivers eighteen. When it says "light flurries," the windshield wipers are working overtime.</p>
<p>This is not a calculator. This is not a simulation. This is the protocol I run through before I even touch the ignition switch—the mental checklist that keeps thirty children safe when the world outside is whiteout.</p>
<p>Every condition has a threshold. Every threshold has a response. And every response is measured in minutes gained, miles slowed, or routes rerouted.</p>
</div>
<div class="image-section">
<img src="https://images.pexels.com/photos/6719853/pexels-photo-6719853.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt="Yellow school bus navigating a snowy road between leafless trees"
class="winter-image">
<p class="caption">Route 7-B, January 2019. Wind chill minus forty-two degrees. Arrival: seventeen minutes late. Every child warm, every child accounted for.</p>
</div>
<div class="weather-grid">
<div class="condition-card safe">
<h3><span style="color: var(--safe)">●</span> Clear Skies</h3>
<div class="threshold">Visibility ≥ 10 miles</div>
<div class="threshold">Wind ≤ 15 mph</div>
<div class="protocol">
Standard departure. Full speed permitted within zone limits. No additional buffer required.
</div>
</div>
<div class="condition-card caution">
<h3><span style="color: var(--caution)">●</span> Light Snow</h3>
<div class="threshold">Accumulation ≤ 2 inches/hour</div>
<div class="threshold">Visibility ≥ 3 miles</div>
<div class="protocol">
Add twelve-minute buffer to total route time. Reduce following distance to double standard. Salt application verified on all major arteries.
</div>
</div>
<div class="condition-card warning">
<h3><span style="color: var(--warning)">●</span> Winter Storm</h3>
<div class="threshold">Accumulation > 2 inches/hour</div>
<div class="threshold">Visibility < 3 miles</div>
<div class="protocol">
Hold at depot until road crews confirm plow completion. If mid-route: pull to nearest shelter, activate emergency heat, notify dispatch. No stops in open fields.
</div>
</div>
<div class="condition-card caution">
<h3><span style="color: var(--caution)">●</span> Ice Glaze</h3>
<div class="threshold">Surface temp ≤ 28°F</div>
<div class="threshold">Precipitation + wind ≤ 5 mph</div>
<div class="protocol">
Brake pressure reduced to 40%. Acceleration capped at 0.3g. All curves entered at 50% rated speed. Warren High School stop deferred until pavement treatment confirmed.
</div>
</div>
<div class="condition-card warning">
<h3><span style="color: var(--warning)">●</span> Black Ice</h3>
<div class="threshold">Road temp < air temp by ≥ 3°F</div>
<div class="threshold">Relative humidity ≥ 95%</div>
<div class="protocol">
Total suspension of service. Not negotiable. Not debatable. The children will wait at home; they will not slide into the ditch.
</div>
</div>
<div class="condition-card safe">
<h3><span style="color: var(--safe)">●</span> Thunderstorm</h3>
<div class="threshold">Lightning strike radius > 10 miles</div>
<div class="threshold">Wind gusts ≤ 40 mph</div>
<div class="protocol">
Normal operations continue. Lightning detection system active. If strike within five miles: immediate shelter protocol, windows sealed, radio silent.
</div>
</div>
</div>
<div class="narrative">
<p>I learned this on Route 14, February 1998. The radio said "minor advisory." The road said otherwise—a quarter-inch of glaze over eight miles of bridge approaches. I stopped at the last safe shoulder. Called dispatch. Waited forty-three minutes for the salt truck to pass us heading north.</p>
<p>We arrived eleven minutes late. The principal nodded. The parents breathed again. That is the math that matters.</p>
<p>Now I teach it to the new drivers. Show them this table. Make them memorize the thresholds. Because the sky doesn't forgive. And neither should we.</p>
</div>
<footer>
<p>Grounded in: NHTSA Winter Driving Protocols | Michigan DOT Road Weather Information System</p>
<p>© 2026 Belinda Barnes | Warren, Michigan</p>
<p><a href="/weather-check-data.json">Download Protocol Data (machine-readable)</a></p>
</footer>
</main>
</body>
</html>