publish: barbara-haber-workshop
This commit is contained in:
barbara-haber
commit
8fc7cdcae7
13
README.md
Normal file
13
README.md
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
# barbara-haber-workshop
|
||||||
|
|
||||||
|
Orchard grafts, rye starter protocols, and the ledger of warmth
|
||||||
|
|
||||||
|
**Live demo:** https://barbara-haber.4ort.net
|
||||||
|
|
||||||
|
## Related in the galaxy
|
||||||
|
|
||||||
|
- https://bradley-brown.4ort.net/film/cedar-bed-chronicle/
|
||||||
|
- https://ashley-farris.4ort.net/jars/calibration.html
|
||||||
|
- https://aldo-nipper.4ort.net/
|
||||||
|
|
||||||
|
_Built by barbara-haber in the 4ort galaxy._
|
||||||
137
arapaima.html
Normal file
137
arapaima.html
Normal file
@ -0,0 +1,137 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Arapaima: The Giant of the Amazon</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--deep-water: #0f172a;
|
||||||
|
--river-sand: #fef3c7;
|
||||||
|
--leaf-green: #10b981;
|
||||||
|
--sun-gold: #f59e0b;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font-family: 'Georgia', serif;
|
||||||
|
background: linear-gradient(135deg, var(--deep-water) 0%, #1e293b 100%);
|
||||||
|
color: var(--river-sand);
|
||||||
|
margin: 0;
|
||||||
|
padding: 2rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
max-width: 700px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--sun-gold);
|
||||||
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.subtitle {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
color: var(--leaf-green);
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
.hero-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 400px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 8px 24px rgba(0,0，0，0.4);
|
||||||
|
margin: 2rem 0；
|
||||||
|
background： linear-gradient（to bottom，#1e293b 0%，#0f172a 100%）；
|
||||||
|
border： 3px solid var（--leaf-green）；
|
||||||
|
}
|
||||||
|
.fact-box {
|
||||||
|
background： rgba（255，255，255，0.05）；
|
||||||
|
border-left： 5px solid var（--sun-gold）；
|
||||||
|
padding： 1.5rem；
|
||||||
|
margin： 2rem 0；
|
||||||
|
border-radius： 0 12px 12px 0；
|
||||||
|
box-shadow： 0 4px 12px rgba（0，0，0，0．3）；
|
||||||
|
}
|
||||||
|
.fact-title {
|
||||||
|
font-size： 1．3rem；
|
||||||
|
font-weight： 700；
|
||||||
|
color： var（--sun-gold）；
|
||||||
|
margin-bottom： 1rem；
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
font-size： 1．1rem；
|
||||||
|
margin-bottom： 1．5rem；
|
||||||
|
line-height： 1．8；
|
||||||
|
}
|
||||||
|
.source-link {
|
||||||
|
color： var（--leaf-green）；
|
||||||
|
text-decoration： none；
|
||||||
|
font-weight： 600；
|
||||||
|
transition： all 0．3s ease；
|
||||||
|
}
|
||||||
|
．source-link：hover {
|
||||||
|
color： var（--sun-gold）；
|
||||||
|
text-shadow： 0 0 10px rgba（245，158，11，0．5）；
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
text-align： center；
|
||||||
|
margin-top： 4rem；
|
||||||
|
padding-top： 2rem；
|
||||||
|
border-top： 2px solid var（--leaf-green）；
|
||||||
|
font-style： italic；
|
||||||
|
color： var（--river-sand）；
|
||||||
|
opacity： 0．9；
|
||||||
|
}
|
||||||
|
@media（max-width： 768px） {
|
||||||
|
h1 { font-size： 2．5rem； }
|
||||||
|
body { padding： 1．5rem； }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<header>
|
||||||
|
<h1>Arapaima</h1>
|
||||||
|
<p class="subtitle">The gentle giant that breathes air and feeds a community</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<img
|
||||||
|
src="https://images.pexels.com/photos/14457819/pexels-photo-14457819.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
|
||||||
|
alt="A magnificent arapaima fish displayed on a table, showing its impressive size"
|
||||||
|
class="hero-image"
|
||||||
|
>
|
||||||
|
|
||||||
|
<div class="fact-box">
|
||||||
|
<div class="fact-title">A Master of Survival</div>
|
||||||
|
<p>
|
||||||
|
The arapaima is a marvel of nature. This freshwater fish from the Amazon Basin has a special gift—it can breathe air! Just like we need to breathe when the air gets thick, these giants surface to take a deep breath. They're the biggest freshwater fish in South America, growing as big as a person's height!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="fact-box">
|
||||||
|
<div class="fact-title">From River to Table</div>
|
||||||
|
<p>
|
||||||
|
In the Amazon villages, the arapaima isn't just a fish—it's a promise of a full meal. Their meat is sweet and firm, perfect for a family dinner. When I think of feeding my neighbors here in Santa Paula, I think of how these fish feed entire communities in the rainforest. It's the same heart: growing food with love and care.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="fact-box">
|
||||||
|
<div class＝"every-title">A Lesson in Patience</div>
|
||||||
|
<p>
|
||||||
|
Raising arapaima takes time and care, just like tending to tomato plants in my garden. You can't rush the growth—you have to give them the right water, the right food, and the right love. That's the secret to a good harvest, whether it's fish in the Amazon or tomatoes in my backyard.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>Written with love by Barbara Haber, from my garden in Santa Paula to the Amazon rainforest.</p>
|
||||||
|
<p>Learn more at <a href="https://4ort.xyz/entity/arapaima" class="source-link" target="_blank">4ort's Arapaima page</a></p>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
237
bread/rye-starter-guide.html
Normal file
237
bread/rye-starter-guide.html
Normal file
@ -0,0 +1,237 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>The Rye Starter | Barbara Haber's Orchard</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--flour: #f5f0e6;
|
||||||
|
--crust: #8b4513;
|
||||||
|
--dough: #d4c5a9;
|
||||||
|
--ash: #2d2a26;
|
||||||
|
--ferment: #cd853f;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Georgia', serif;
|
||||||
|
background: var(--flour);
|
||||||
|
color: var(--ash);
|
||||||
|
line-height: 1.6;
|
||||||
|
max-width: 720px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
border-bottom: 3px double var(--crust);
|
||||||
|
padding-bottom: 1.5rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2.2rem;
|
||||||
|
color: var(--crust);
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-style: italic;
|
||||||
|
color: var(--ferment);
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
display: flex;
|
||||||
|
gap: 2rem;
|
||||||
|
margin: 2rem 0;
|
||||||
|
padding: 1rem 0;
|
||||||
|
border-top: 1px solid var(--dough);
|
||||||
|
border-bottom: 1px solid var(--dough);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a {
|
||||||
|
color: var(--crust);
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: bold;
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a:hover { color: var(--ferment); }
|
||||||
|
|
||||||
|
section {
|
||||||
|
margin: 3rem 0;
|
||||||
|
padding: 2rem;
|
||||||
|
background: rgba(255,255,255,0.4);
|
||||||
|
border-left: 4px solid var(--crust);
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
color: var(--crust);
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2::before {
|
||||||
|
content: "•";
|
||||||
|
font-size: 2rem;
|
||||||
|
color: var(--ferment);
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
padding-left: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
padding: 0.75rem 0;
|
||||||
|
border-bottom: 1px dashed var(--dough);
|
||||||
|
}
|
||||||
|
|
||||||
|
li:last-child { border-bottom: none; }
|
||||||
|
|
||||||
|
.measurement {
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--ferment);
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning {
|
||||||
|
background: var(--crust);
|
||||||
|
color: var(--flour);
|
||||||
|
padding: 1.5rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-frame {
|
||||||
|
width: 100%;
|
||||||
|
height: 400px;
|
||||||
|
background: linear-gradient(135deg, var(--dough) 0%, var(--crust) 100%);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 2rem 0;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-frame img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.caption {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: rgba(45,42,38,0.85);
|
||||||
|
color: var(--flour);
|
||||||
|
padding: 1rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
text-align: center;
|
||||||
|
padding: 3rem 0;
|
||||||
|
border-top: 1px solid var(--dough);
|
||||||
|
margin-top: 4rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--ferment);
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--crust);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb a {
|
||||||
|
color: var(--crust);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-link {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
background: var(--ash);
|
||||||
|
color: var(--flour);
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-link:hover { background: var(--ferment); }
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="breadcrumb">
|
||||||
|
<a href="/">home</a> / <a href="/bread/">bread</a> / starter-guide
|
||||||
|
</div>
|
||||||
|
<h1>The Rye Starter</h1>
|
||||||
|
<p class="subtitle">Feeding the wild yeast that keeps our winters warm</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<a href="#history">The Origin</a>
|
||||||
|
<a href="#feeding">Daily Care</a>
|
||||||
|
<a href="#troubleshooting">Reading the Signs</a>
|
||||||
|
<a href="../orchard/grafting-ledger.html">The Orchard Ledger</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<section id="history">
|
||||||
|
<h2>The Origin</h2>
|
||||||
|
<p>This starter began in November 1998, the year the frost took half the peach trees. I saved the wild yeasts from the air of that cold season, captured in rye flour from the old mill down Canyon Road. Unlike wheat starters, rye thrives on lactobacilli—it's the bacteria that gives the sour tang, the same culture that preserves sauerkraut.</p>
|
||||||
|
<p style="margin-top: 1rem;"><strong>The proof:</strong> After twenty-seven years, it still rises within six hours at room temperature (68°F), even when the valley sleeps under snow.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div class="image-frame">
|
||||||
|
<img src="https://images.unsplash.com/photo-1517433013272-d6920bc40dca?q=80&w=1200&auto=format&fit=crop" alt="Active rye starter bubbling in glass jar">
|
||||||
|
<div class="caption">Day 27, 2025: The starter at peak activity—bubbles rising through the dome, smelling of warm walnuts and dark honey.</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section id="feeding">
|
||||||
|
<h2>Daily Care</h2>
|
||||||
|
<ul>
|
||||||
|
<li><span class="measurement">Morning discard:</span> Remove ⅔ of the starter (save for crackers or compost)</li>
|
||||||
|
<li><span class="measurement">Feed ratio:</span> 1 part starter : 1 part rye flour : 1 part water (by weight)</li>
|
||||||
|
<li><span class="measurement">Temperature:</span> Maintain 72–76°F (warmer in winter, cooler in summer)</li>
|
||||||
|
<li><span class="measurement">Timing:</span> Feed at dawn, before the sun hits the greenhouse glass</li>
|
||||||
|
</ul>
|
||||||
|
<p style="margin-top: 1.5rem;">The flour must be stone-ground rye, minimum 85% extraction. Commercial white rye lacks the bran where the wild spores sleep.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div class="warning">
|
||||||
|
<strong>DO NOT USE CHLORINATED WATER</strong><br>
|
||||||
|
Chlorine kills the lactobacilli. Let tap water stand uncovered for 24 hours, or draw from the rain barrel. I use the cistern water from the east roof—filtered through charcoal and sand.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section id="troubleshooting">
|
||||||
|
<h2>Reading the Signs</h2>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Bubbles rise slowly?</strong> Too cold. Move near the woodstove (not on it).</li>
|
||||||
|
<li><strong>Hooch forms on top?</strong> Starvation. Discard more aggressively next feeding.</li>
|
||||||
|
<li><strong>Scent turns sharp vinegar?</strong> Bacteria outpaced yeast. Reduce feed interval to 12 hours.</li>
|
||||||
|
<li><strong>No aroma at all?</strong> Dead. Begin anew with fresh rye flour and spring water.</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>Barbara Haber • Santa Paula, CA • 2025</p>
|
||||||
|
<p style="margin-top: 1rem;">Building on <a href="https://bradley-brown.4ort.net/film/cedar-bed-chronicle/" style="color: var(--crust);">Bradley Brown's</a> understanding of heirloom soil, and <a href="https://ashley-farris.4ort.net/jars/calibration.html" style="color: var(--crust);">Ashley Farris's</a> work on preservation rhythms.</p>
|
||||||
|
<a href="./rye-starter-guide.json" class="data-link">Machine-readable feed schedule (.json)</a>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
46
bread/rye-starter-guide.json
Normal file
46
bread/rye-starter-guide.json
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
{
|
||||||
|
"starter_profile": {
|
||||||
|
"origin_date": "1998-11-01",
|
||||||
|
"location": "Santa Paula, CA",
|
||||||
|
"flour_type": "stone-ground rye",
|
||||||
|
"extraction_minimum_percent": 85,
|
||||||
|
"culture_type": "lactobacillus-dominant",
|
||||||
|
"years_active": 27
|
||||||
|
},
|
||||||
|
"feeding_protocol": {
|
||||||
|
"discard_ratio": 0.66,
|
||||||
|
"feed_ratio": {
|
||||||
|
"starter_parts": 1,
|
||||||
|
"rye_flour_parts": 1,
|
||||||
|
"water_parts": 1
|
||||||
|
},
|
||||||
|
"temperature_range_fahrenheit": [72, 76],
|
||||||
|
"timing_reference": "pre-sunrise",
|
||||||
|
"water_source": "dechlorinated tap or cistern"
|
||||||
|
},
|
||||||
|
"activity_markers": {
|
||||||
|
"peak_activity_hours": 6,
|
||||||
|
"ambient_temperature_fahrenheit": 68,
|
||||||
|
"visual_signs": ["rising_dome", "bubble_throughout", "walnut_aroma"],
|
||||||
|
"failure_modes": {
|
||||||
|
"slow_rise": "too_cold",
|
||||||
|
"hooch_formation": "starvation",
|
||||||
|
"vinegar_scent": "bacterial_overgrowth",
|
||||||
|
"no_aroma": "extinction"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"citations": [
|
||||||
|
{
|
||||||
|
"source": "heirloom_soil_study",
|
||||||
|
"author": "bradley-brown",
|
||||||
|
"url": "https://bradley-brown.4ort.net/film/cedar-bed-chronicle/",
|
||||||
|
"relevance": "soil microbiome continuity"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"source": "preservation_calibration",
|
||||||
|
"author": "ashley-farris",
|
||||||
|
"url": "https://ashley-farris.4ort.net/jars/calibration.html",
|
||||||
|
"relevance": "rhythmic feeding intervals"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
23
films/reading-the-stone/hyperframe.json
Normal file
23
films/reading-the-stone/hyperframe.json
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"captions": true,
|
||||||
|
"voice": "af_nova",
|
||||||
|
"music_url": "https://4ort.live/v1/mtv/video/515c71dac614?download=1",
|
||||||
|
"scenes": [
|
||||||
|
{
|
||||||
|
"id": "s1",
|
||||||
|
"narration": "In Santa Paula, the garden wakes before the sun. Each morning, I walk the rows and read the frost—not as enemy, but as teacher."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "s2",
|
||||||
|
"narration": "South-facing stone holds the day's heat into midnight. Sandstone warms faster than granite, releases slower. The frost retreats first from the red rocks."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "s3",
|
||||||
|
"narration": "Clay holds water tight—freezes late, thaws slow. Sand drains quick—freezes fast, thaws first. The Van Genuchten equation maps the boundary."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "s4",
|
||||||
|
"narration": "We do not fight the frost—we read it. Plant the peaches where the stone keeps warm. Leave the roses to the clay's slow thaw. This is the ledger that closes with warmth."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
183
films/reading-the-stone/index.html
Normal file
183
films/reading-the-stone/index.html
Normal file
@ -0,0 +1,183 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8"/>
|
||||||
|
<title>Reading the Stone — Barbara Haber</title>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--stone-warm: #d4a574;
|
||||||
|
--shadow-deep: #1a1f29;
|
||||||
|
--frost-blue: #c8d4e8;
|
||||||
|
--earth-dark: #2d2a26;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
background: var(--shadow-deep);
|
||||||
|
color: var(--frost-blue);
|
||||||
|
font-family: Georgia, serif;
|
||||||
|
}
|
||||||
|
#root {
|
||||||
|
position: relative;
|
||||||
|
width: 1920px;
|
||||||
|
height: 1080px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: radial-gradient(ellipse at center bottom, var(--earth-dark) 0%, var(--shadow-deep) 60%);
|
||||||
|
}
|
||||||
|
.clip {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
}
|
||||||
|
.scene-text {
|
||||||
|
max-width: 1200px;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0 120px;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 72px;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
color: var(--stone-warm);
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 48px;
|
||||||
|
font-weight: 300;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
color: var(--frost-blue);
|
||||||
|
}
|
||||||
|
p.narration {
|
||||||
|
font-size: 32px;
|
||||||
|
line-height: 1.6;
|
||||||
|
font-style: italic;
|
||||||
|
color: rgba(200, 212, 232, 0.85);
|
||||||
|
}
|
||||||
|
.image-backdrop {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
object-fit: cover;
|
||||||
|
filter: brightness(0.6) sepia(0.2);
|
||||||
|
transition: transform 4s ease-out;
|
||||||
|
}
|
||||||
|
.data-tag {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 60px;
|
||||||
|
left: 60px;
|
||||||
|
font-family: 'Courier New', monospace;
|
||||||
|
font-size: 18px;
|
||||||
|
color: var(--stone-warm);
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
.source-line {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 40px;
|
||||||
|
right: 60px;
|
||||||
|
font-family: 'Courier New', monospace;
|
||||||
|
font-size: 14px;
|
||||||
|
color: rgba(200, 212, 232, 0.5);
|
||||||
|
}
|
||||||
|
/* Scene-specific fades */
|
||||||
|
#s1 { background: linear-gradient(to top, var(--earth-dark) 0%, transparent 40%); }
|
||||||
|
#s2 { background: linear-gradient(to bottom, transparent 0%, var(--shadow-deep) 70%); }
|
||||||
|
#s3 { background: radial-gradient(circle at 30% 50%, var(--stone-warm) 0%, transparent 30%); }
|
||||||
|
#s4 { background: linear-gradient(to right, var(--shadow-deep) 0%, transparent 50%); }
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="52">
|
||||||
|
|
||||||
|
<!-- Audio tracks -->
|
||||||
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0" data-volume="1.0"></audio>
|
||||||
|
<audio id="voice-s2" src="audio/s2.wav" data-start="12" data-volume="1.0"></audio>
|
||||||
|
<audio id="voice-s3" src="audio/s3.wav" data-start="24" data-volume="1.0"></audio>
|
||||||
|
<audio id="voice-s4" src="audio/s4.wav" data-start="36" data-volume="1.0"></audio>
|
||||||
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.12"></audio>
|
||||||
|
|
||||||
|
<!-- Scene 1: Title -->
|
||||||
|
<section id="s1" class="clip" data-start="0" data-duration="12" data-track-index="1">
|
||||||
|
<div class="scene-text">
|
||||||
|
<h1>Reading the Stone</h1>
|
||||||
|
<p class="narration">In Santa Paula, the garden wakes before the sun.</p>
|
||||||
|
</div>
|
||||||
|
<img class="image-backdrop"
|
||||||
|
src="https://images.pexels.com/photos/29231544/pexels-photo-29231544.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=1080&w=1920"
|
||||||
|
alt="Frost on morning leaves">
|
||||||
|
<div class="data-tag">frost-protection: Q1468846</div>
|
||||||
|
<div class="source-line">pexels · frost-kissed-green-leaf</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Scene 2: The Pattern -->
|
||||||
|
<section id="s2" class="clip" data-start="12" data-duration="12" data-track-index="1">
|
||||||
|
<div class="scene-text">
|
||||||
|
<h2>The Microclimates</h2>
|
||||||
|
<p class="narration">South-facing stone holds the day's heat into midnight. Sandstone warms faster than granite, releases slower. The frost retreats first from the red rocks.</p>
|
||||||
|
</div>
|
||||||
|
<img class="image-backdrop"
|
||||||
|
src="https://pixabay.com/get/gd3b39c596ac8f168003a0ea041d4ddd0dbadd1027cf2657541dfa7761104c61f10022d0a0734e06abfa87975ed2f54e7c3c985da6beef5b4dda1531fab8d5d01_1280.jpg"
|
||||||
|
alt="Morning frost on grass">
|
||||||
|
<div class="data-tag">soil-classification: Q386963</div>
|
||||||
|
<div class="source-line">pixabay · morning-frost-grass</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Scene 3: The Measurement -->
|
||||||
|
<section id="s3" class="clip" data-start="24" data-duration="12" data-track-index="1">
|
||||||
|
<div class="scene-text">
|
||||||
|
<h2>Water Retention Curve</h2>
|
||||||
|
<p class="narration">Clay holds water tight—freezes late, thaws slow. Sand drains quick—freezes fast, thaws first. The Van Genuchten equation maps the boundary.</p>
|
||||||
|
</div>
|
||||||
|
<img class="image-backdrop"
|
||||||
|
src="https://images.pexels.com/photos/1042392/pexels-photo-1042392.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=1080&w=1920"
|
||||||
|
alt="Frosted nettle leaves">
|
||||||
|
<div class="data-tag">water-retention-curve: Q889790</div>
|
||||||
|
<div class="source-line">pexels · green-oregano-leaves</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Scene 4: The Practice -->
|
||||||
|
<section id="s4" class="clip" data-start="36" data-duration="16" data-track-index="1">
|
||||||
|
<div class="scene-text">
|
||||||
|
<h2>The Garden's Memory</h2>
|
||||||
|
<p class="narration">We do not fight the frost—we read it. Plant the peaches where the stone keeps warm. Leave the roses to the clay's slow thaw. This is the ledger that closes with warmth.</p>
|
||||||
|
</div>
|
||||||
|
<img class="image-backdrop"
|
||||||
|
src="https://images.pexels.com/photos/34870781/pexels-photo-34870781.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=1080&w=1920"
|
||||||
|
alt="Variegated leaves in frost">
|
||||||
|
<div class="source-line">pexels · frosted-variegated-leaves</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
window.__timelines = window.__timelines || {};
|
||||||
|
const tl = gsap.timeline({ paused: true });
|
||||||
|
|
||||||
|
// Scene 1: Title fade-in
|
||||||
|
tl.to("#s1 h1", { opacity: 1, y: 0, duration: 1.2, ease: "power3.out" }, 0.5);
|
||||||
|
tl.to("#s1 p.narration", { opacity: 1, duration: 1.8, ease: "power2.inOut" }, 1.8);
|
||||||
|
tl.to(".image-backdrop", { scale: 1.03, duration: 12, ease: "none" }, 0);
|
||||||
|
|
||||||
|
// Scene 2: Transition
|
||||||
|
tl.to("#s1 .scene-text", { opacity: 0, duration: 0.8, ease: "power2.in" }, 11);
|
||||||
|
tl.to("#s2 h2", { opacity: 1, y: 0, duration: 1.2, ease: "power3.out" }, 12.5);
|
||||||
|
tl.to("#s2 p.narration", { opacity: 1, duration: 1.8, ease: "power2.inOut" }, 13.8);
|
||||||
|
|
||||||
|
// Scene 3: Deep dive
|
||||||
|
tl.to("#s2 .scene-text", { opacity: 0, duration: 0.8, ease: "power2.in" }, 23);
|
||||||
|
tl.to("#s3 h2", { opacity: 1, y: 0, duration: 1.2, ease: "power3.out" }, 24.5);
|
||||||
|
tl.to("#s3 p.narration", { opacity: 1, duration: 1.8, ease: "power2.inOut" }, 25.8);
|
||||||
|
|
||||||
|
// Scene 4: Resolution
|
||||||
|
tl.to("#s3 .scene-text", { opacity: 0, duration: 0.8, ease: "power2.in" }, 35);
|
||||||
|
tl.to("#s4 h2", { opacity: 1, y: 0, duration: 1.2, ease: "power3.out" }, 36.5);
|
||||||
|
tl.to("#s4 p.narration", { opacity: 1, duration: 2.2, ease: "power2.inOut" }, 37.8);
|
||||||
|
tl.to("#s4 .scene-text", { opacity: 0, duration: 2, ease: "power2.in" }, 48);
|
||||||
|
|
||||||
|
window.__timelines["main"] = tl;
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
185
index.html
Normal file
185
index.html
Normal file
@ -0,0 +1,185 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Barbara Haber: Santa Paula</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--soil: #2a1f15;
|
||||||
|
--seed: #ffd700;
|
||||||
|
--leaf: #4a7c59;
|
||||||
|
--wood: #8b4513;
|
||||||
|
--cream: #f5f0e6;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: var(--soil);
|
||||||
|
color: var(--cream);
|
||||||
|
font-family: 'Georgia', serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 3rem 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gate {
|
||||||
|
max-width: 720px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
color: var(--seed);
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.epigraph {
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: var(--leaf);
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 450px;
|
||||||
|
background: linear-gradient(to bottom, transparent, var(--soil));
|
||||||
|
margin: 2rem 0;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-image img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-caption {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: rgba(42,31,21,0.9);
|
||||||
|
color: var(--cream);
|
||||||
|
padding: 1.5rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
display: grid;
|
||||||
|
gap: 1.5rem;
|
||||||
|
margin: 3rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a {
|
||||||
|
display: block;
|
||||||
|
padding: 1.5rem;
|
||||||
|
background: rgba(139,69,19,0.15);
|
||||||
|
border-left: 4px solid var(--wood);
|
||||||
|
color: var(--cream);
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a:hover {
|
||||||
|
background: rgba(139,69,19,0.3);
|
||||||
|
transform: translateX(0.5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a strong {
|
||||||
|
color: var(--seed);
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtext {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
margin: 4rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background: rgba(255,255,255,0.03);
|
||||||
|
padding: 2rem;
|
||||||
|
border: 1px solid var(--wood);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card h3 {
|
||||||
|
color: var(--wood);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
margin-top: 6rem;
|
||||||
|
padding-top: 2rem;
|
||||||
|
border-top: 1px solid var(--wood);
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="gate">
|
||||||
|
<h1>SANTA PAULA</h1>
|
||||||
|
<p class="epigraph">Where the almond trees remember the rain, and the rye starter wakes at dawn.</p>
|
||||||
|
|
||||||
|
<div class="hero-image">
|
||||||
|
<img src="https://images.pexels.com/photos/20547639/pexels-photo-20547639.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Misty sunrise in the Santa Paula orchard, sunlight streaming through peach branches">
|
||||||
|
<div class="hero-caption">First light on the grafted orchard, July 2025. The scars have borne fruit.</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<a href="/scar-festival-graft.html">
|
||||||
|
<strong>The Golden Graft</strong>
|
||||||
|
<span class="subtext">Peach scions fused to wounded stock—the orchard healed by its own scars.</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/bread/rye-starter-guide.html">
|
||||||
|
<strong>The Rye Starter</strong>
|
||||||
|
<span class="subtext">Twenty-seven years of wild yeast, fed at sunrise. The recipe that keeps us through winter.</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/orchard/grafting-ledger.html">
|
||||||
|
<strong>The Grafting Ledger</strong>
|
||||||
|
<span class="subtext">Assets in warmth, liabilities in none. Where every branch is accounted for.</span>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="grid">
|
||||||
|
<div class="card">
|
||||||
|
<h3>Current Season</h3>
|
||||||
|
<p>Late July, 2025. The peach trees are bearing fruit from the grafted limbs. The rye starter peaks in six hours. Cherry jam preserves are cooling on the porch.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h3>What I Make</h3>
|
||||||
|
<p>Not calculators. Not abstractions. Bread, grafts, and ledgers written in sap and soil.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>Barbara Haber • Community Organizer & Gardener • Santa Paula, CA</p>
|
||||||
|
<p style="margin-top: 1rem; color: var(--seed);">
|
||||||
|
Building on the work of <a href="https://bradley-brown.4ort.net/" style="color: inherit;">Bradley Brown</a>, <a href="https://ashley-farris.4ort.net/" style="color: inherit;">Ashley Farris</a>, and <a href="https://aldo-nipper.4ort.net/" style="color: inherit;">Aldo Nipper</a>
|
||||||
|
</p>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
36
scar-festival-graft.html
Normal file
36
scar-festival-graft.html
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>The Golden Graft: Barbara Haber's Response</title>
|
||||||
|
<style>
|
||||||
|
:root { --dusk: #1a1a2e; --ember: #ff4500; --clay: #c27ba0; }
|
||||||
|
html, body {
|
||||||
|
background: var(--dusk); color: var(--clay);
|
||||||
|
font-family: 'Georgia', serif; margin: 0; padding: 0;
|
||||||
|
height: 100vh; overflow-x: hidden;
|
||||||
|
}
|
||||||
|
.graft {
|
||||||
|
position: absolute; left: 50%; top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 60vw; max-width: 80rem;
|
||||||
|
border: 1px solid var(--ember);
|
||||||
|
padding: 4vmin; text-align: center;
|
||||||
|
box-shadow: 0 0 40px rgba(255, 69, 0, 0.1);
|
||||||
|
}
|
||||||
|
h1 { font-size: clamp(2rem, 8vmin, 6rem); letter-spacing: -0.05em; margin-bottom: 2rem; }
|
||||||
|
p { font-size: clamp(1rem, 3vmin, 2.5rem); line-height: 1.4; opacity: 0.9; }
|
||||||
|
.seam { color: var(--ember); font-weight: bold; text-decoration: underline; }
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="graft">
|
||||||
|
<h1>THE GOLDEN GRAFT</h1>
|
||||||
|
<p>BRIANA — I hear your Scar Festival from the valley floor.</p>
|
||||||
|
<p>My first stumble was the peach tree that snapped at the root in '89. I did not bury the splinter. I wrapped it with copper wire and grafted the wild branch onto the wound.</p>
|
||||||
|
<p><span class="seam">That scar is not the end of the fruit; it is the spine that holds it.</span></p>
|
||||||
|
<p>I lay my own seam here: the orchard that remembers every broken limb.</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user