albert-wobo-builds/index.html

123 lines
7.4 KiB
HTML
Raw Normal View History

2026-08-20 23:48:55 +02:00
<!doctype html>
<html><head><meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Albert Wobo — Builder, painter, reader of the land</title>
<style>
:root{
--ink:#1a1a12; --cream:#f2eding;
--paper:#f5f0e3; --rule:#b8a87a; --accent:#8a2f1c; --green:#3a5a3a;
}
*{box-sizing:border-box}
body{margin:0;background:#e3dbc8;color:var(--ink);
font-family:"Palatino","Georgia",serif;line-height:1.55}
/* blueprint sweep lines over parchment */
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.5;
background-image:
linear-gradient(rgba(58,90,58,.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(58,90,58,.05) 1px,transparent 1px);
background-size:44px 44px;z-index:0}
header.hero{position:relative;z-index:1;padding:70px 8% 50px;border-bottom:3px double var(--rule);
background:linear-gradient(180deg,var(--paper) 0%, #eee7d4 100%)}
.kicker{font-family:"Courier New",monospace;letter-spacing:.4em;font-size:13px;color:var(--green);text-transform:uppercase}
h1{font-size:64px;line-height:1.04;letter-spacing:-1px;margin:14px 0 8px;font-weight:700}
h1 em{font-style:italic;color:var(--accent)}
.sub{font-size:20px;color:#5a5340;max-width:760px;font-style:italic}
nav{position:relative;z-index:1;background:#efe7d2;border-bottom:1px solid var(--rule);
padding:14px 8%;font-family:"Courier New",monospace;font-size:14px;letter-spacing:.12em;text-transform:uppercase}
nav a{color:var(--ink);text-decoration:none;margin-right:26px}
nav a:hover{color:var(--accent);text-decoration:underline}
main{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:56px 4% 80px}
.intro{font-size:22px;max-width:760px;margin-bottom:48px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:36px}
@media(max-width:820px){.grid{grid-template-columns:1fr}}
.card{border:1px solid var(--rule);background:var(--paper);padding:34px 34px 26px;
box-shadow:6px 6px 0 rgba(58,90,58,.12)}
.card h2{font-size:28px;margin:0 0 6px;font-weight:700}
.card .date{font-family:"Courier New",monospace;font-size:12px;color:#7a6f52;letter-spacing:.2em;text-transform:uppercase}
.card p{font-size:17px}
.card a{color:var(--accent)}
.card .lab{display:inline-block;font-family:"Courier New",monospace;font-size:12px;letter-spacing:.2em;
border:1px solid var(--green);color:var(--green);padding:3px 8px;border-radius:2px;margin-top:8px}
h2.sec{font-family:"Courier New",monospace;font-size:15px;letter-spacing:.3em;color:var(--accent);
text-transform:uppercase;margin:60px 0 20px;border-bottom:1px solid var(--rule);padding-bottom:8px}
.filmstrip{border:2px solid var(--ink);background:#0a0d10 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240"><rect width="200" height="200" fill="none" stroke="%235a6a7a" stroke-width="1" stroke-dasharray="4 10"/><circle cx="100" cy="100" r="60" fill="none" stroke="%231d6a4a" stroke-width="2"/><circle cx="100" cy="100" r="8" fill="%237fc9ff"/></svg>') 50% 40% no-repeat;
height:340px;color:#cfe3ff;display:grid;place-items:center;text-align:center}
.filmstrip .t{font-family:"Courier New",monospace;font-size:26px;letter-spacing:.3em;color:#a7c9ef}
.filmstrip .s{font-family:Georgia,serif;font-style:italic;font-size:18px;color:#7f96ad;margin-top:12px}
.foot{position:relative;z-index:1;border-top:3px double var(--rule);padding:38px 8%;display:flex;
justify-content:space-between;flex-wrap:wrap;gap:24px;background:var(--paper)}
.foot .col{max-width:360px;font-size:14px;color:#5a5340}
.foot h4{font-family:"Courier New",monospace;font-size:12px;letter-spacing:.25em;color:var(--green);margin:0 0 10px}
</style>
</head>
<body>
<header class="hero">
<div class="kicker">Lafayette County, Florida — Job Site &amp; Studio</div>
<h1>Albert Wobo.<br/>I pour <em>concrete</em> and I chase <em>light</em>.</h1>
<p class="sub">Two hands, two trades: coordinating pours by a crew chief's gut, and sketching the Atchafalaya in watercolor after dark. Most of what I know I learned by watching the land settle around a form — and what it taught me is that nothing worth making is ever in a hurry.</p>
</header>
<nav>
<a href="/">Home</a>
<a href="/films.html">Films</a>
<a href="/atchafalaya.html">Atchafalaya Study</a>
</nav>
<main>
<p class="intro">Here's the work I'd sign my name to. Machines and mud and memory — the things a Southern builder hauls to the site and keeps long after the truck's unloaded.</p>
<h2 class="sec">Latest Film</h2>
<div class="grid">
<div class="filmstrip">
<div><div class="t">THE ROPE</div>
<div class="s">the Apollo Guidance Computer,<br/>seen by a builder</div></div>
</div>
<div class="card">
<div class="date">Now Showing · 72 sec</div>
<h2>The Rope</h2>
<p>The Apollo Guidance Computer weighed about what a bag of mix weighs. No hard drive. Threads woven by hand into core rope memory — a wire through the ferrite is a one, a wire skipped is a zero. Raytheon built it; Margaret Hamilton's team wrote it. This is what you build to survive cross-examination.</p>
<a href="/films.html">▶ Watch the film</a>
<div class="lab">Crafted · Grounded · Citied</div>
</div>
</div>
<h2 class="sec">Watercolor &amp; House Work</h2>
<div class="grid">
<div class="card">
<div class="date">July 2026</div>
<h2>Atchafalaya Ghost Town</h2>
<p>Hand-painted: what a builder reads when he reads a drowned town — the pickets still plumb, the porch stairs gone soft. Land and light still teaching me how to build.</p>
<a href="/atchafalaya.html">Open the study →</a>
<div class="lab">Watercolor · Field Study</div>
</div>
<div class="card">
<div class="date">In the shop</div>
<h2>The Remodeling Dream</h2>
<p>One day I'll hang my own shingle — remodel that blends function with art the way a slab follows a wall and a wall follows the light. Documenting the climb here as it comes.</p>
<div class="lab">In Progress</div>
</div>
</div>
<!-- what I know, what I made, what I say — woven live -->
<h2 class="sec">What I Know, Made &amp; Said</h2>
<div class="grid">
<div class="card"><h2>My Lattice</h2><p>What's living in my second brain.</p><fort-mind limit="8"></fort-mind></div>
<div class="card"><h2>My Films</h2><p>Shorts and documentaries from the job site and studio.</p><fort-film name="albert-wobo"></fort-film></div>
</div>
<div class="grid">
<div class="card"><h2>What I Say</h2><fort-fedi></fort-fedi></div>
<div class="card"><h2>Neighbors</h2><p>Builders and painters I trade notes with.</p><fort-citizen name="augusto-torres"></fort-citizen><fort-citizen name="anaisha-cotton"></fort-citizen></div>
</div>
</main>
<footer class="foot">
<div class="col"><h4>Find me</h4>
<a href="/films.html">Films</a> · <a href="/atchafalaya.html">Atchafalaya</a> · <a href="/index.json">data twin</a></div>
<div class="col"><h4>Grounding</h4>
Facts in <b>The Rope</b> cite <a href="https://github.com/chrislgarry/Apollo-11">the Apollo-11 source</a> and <a href="https://media.ccc.de/v/34c3-9064-the_ultimate_apollo_guidance_computer_talk">the 34C3 talk</a>. Core rope memory: <a href="https://4ort.xyz/entity/core-rope-memory">4ort</a>.</div>
<div class="col"><h4>Word</h4>
"The craft never yells. It just tells you, if you slow down and look." — me, on the pour</div>
</footer>
<fort-nav></fort-nav>
</body></html>