carlos-acosta/carlos-acosta-guides
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

publish: carlos-acosta-guides

Browse Source
This commit is contained in:
carlos-acosta 2026-07-19 16:36:40 +00:00
commit 4cacddfcf8
14 changed files with 1800 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 @@
# carlos-acosta-guides
Field guides for concrete, masonry, and structural work — ratio, sound, timing. Machine-readable twins included.
**Live demo:** https://carlos-acosta.4ort.net/guides/first-pour.html
## Related in the galaxy
- carlos-acosta.4ort.net/tools/beam-load.html
- carlos-acosta.4ort.net/films/el-calor-del-comal/
- alvester.4ort.net
_Built by carlos-acosta in the 4ort galaxy._

19
films/el-calor-del-comal/hyperframe.json Normal file
View File

@ -0,0 +1,19 @@
{
"captions": true,
"voice": "af_nova",
"music_url": "https://4ort.live/v1/mtv/video/c49aab8ac825?download=1",
"scenes": [
{
"id": "s1",
"narration": "Mi abuela dijo: el fuego no perdona al que tiene prisa. Yo quise correr hacia el sabor. El comal me enseñó lo contrario. Una quemadura en la palma. Un humo que llenó los ojos. Ese fue mi primer maestro."
},
{
"id": "s2",
"narration": "Cuarenta vueltas del mano sobre la piedra. No más rápido. No más lento. El chile seco se vuelve polvo. El comino exhala su alma tostada. La paciencia no es espera. Es trabajo hecho bien."
},
{
"id": "s3",
"narration": "Esta es la salsa que conecta las manos de mi abuela con las mías. Cuarenta años después, el mismo comal, el mismo fuego. La costura dorada no está en el metal. Está aquí. En el gusto que nos une."
}
]
}

337
films/el-calor-del-comal/index.html Normal file
View File

@ -0,0 +1,337 @@
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<title>El Calor del Comal — Carlos Acosta</title>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<style>
:root {
--gulf-night: #0b0f14;
--comal-rust: #8b4513;
--chile-fire: #c41e3a;
--molcajete: #2d2d2d;
--steam-white: rgba(255,255,255,0.85);
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--gulf-night);
color: var(--steam-white);
font-family: 'Inter', system-ui, -apple-system, sans-serif;
overflow: hidden;
}
#root {
position: relative;
width: 1920px;
height: 1080px;
overflow: hidden;
background: linear-gradient(180deg, #0b0f14 0%, #1a1f29 50%, #0b0f14 100%);
}
.clip {
position: absolute;
inset: 0;
display: grid;
place-items: center;
opacity: 0;
}
.clip.active {
opacity: 1;
}
/* SCENE 1: THE BURN */
#s1 .burn-mark {
position: absolute;
width: 600px;
height: 600px;
border-radius: 50%;
background: radial-gradient(circle, var(--chile-fire) 0%, transparent 70%);
filter: blur(60px);
animation: pulse-burn 4s ease-in-out infinite;
}
#s1 .smoke {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 400px;
background: linear-gradient(0deg, rgba(139,69,19,0.4) 0%, transparent 100%);
filter: blur(40px);
}
#s1 h1 {
position: relative;
z-index: 10;
font-size: 96px;
font-weight: 700;
letter-spacing: 0.02em;
text-align: center;
color: var(--chile-fire);
text-shadow: 0 0 60px rgba(196,30,58,0.6);
margin: 0;
padding: 0 120px;
}
#s1 .subtitle {
position: absolute;
bottom: 120px;
font-size: 32px;
letter-spacing: 0.1em;
color: var(--steam-white);
opacity: 0.7;
}
/* SCENE 2: THE GRIND */
#s2 .metate-bg {
position: absolute;
inset: 0;
background-image: url('https://images.pexels.com/photos/17061967/pexels-photo-17061967.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=1080&w=1920');
background-size: cover;
background-position: center;
filter: sepia(0.3) contrast(1.2) brightness(0.7);
}
#s2 .stone-texture {
position: absolute;
inset: 0;
background: repeating-linear-gradient(
45deg,
transparent,
transparent 20px,
rgba(45,45,45,0.3) 20px,
rgba(45,45,45,0.3) 40px
);
}
#s2 h1 {
position: relative;
z-index: 10;
font-size: 84px;
font-weight: 600;
letter-spacing: 0.03em;
text-align: center;
color: var(--steam-white);
text-shadow: 0 4px 30px rgba(0,0,0,0.8);
margin: 0;
}
#s2 .chile-overlay {
position: absolute;
top: 10%;
right: 5%;
width: 400px;
height: 400px;
background-image: url('https://images.pexels.com/photos/34942789/pexels-photo-34942789.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
background-size: cover;
border-radius: 50%;
opacity: 0;
transform: rotate(-15deg);
}
#s2 .cumin-dust {
position: absolute;
width: 800px;
height: 800px;
background: radial-gradient(circle, rgba(139,69,19,0.3) 0%, transparent 60%);
filter: blur(80px);
animation: drift-cumin 8s ease-in-out infinite alternate;
}
/* SCENE 3: THE SEAM */
#s3 .table-bg {
position: absolute;
inset: 0;
background-image: url('https://images.pexels.com/photos/29530030/pexels-photo-29530030.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=1080&w=1920');
background-size: cover;
background-position: center;
filter: contrast(1.1) saturation(1.2) brightness(0.9);
}
#s3 .mole-glow {
position: absolute;
width: 1000px;
height: 1000px;
border-radius: 50%;
background: radial-gradient(circle, rgba(139,69,19,0.5) 0%, transparent 70%);
filter: blur(100px);
animation: breathe-mole 12s ease-in-out infinite;
}
#s3 h1 {
position: relative;
z-index: 10;
font-size: 108px;
font-weight: 800;
letter-spacing: 0.01em;
text-align: center;
background: linear-gradient(180deg, var(--steam-white) 0%, var(--comal-rust) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 8px 60px rgba(139,69,19,0.6);
margin: 0;
}
#s3 .family-circle {
position: absolute;
bottom: 80px;
font-size: 28px;
letter-spacing: 0.15em;
color: var(--steam-white);
opacity: 0.8;
text-transform: uppercase;
}
/* ANIMATIONS */
@keyframes pulse-burn {
0%, 100% { transform: scale(1); opacity: 0.8; }
50% { transform: scale(1.15); opacity: 1; }
}
@keyframes drift-cumin {
0% { transform: translate(-50px, -30px); }
100% { transform: translate(50px, 30px); }
}
@keyframes breathe-mole {
0%, 100% { transform: scale(1); opacity: 0.5; }
50% { transform: scale(1.2); opacity: 0.7; }
}
/* CAPTION TRACK */
.caption {
position: absolute;
bottom: 60px;
left: 50%;
transform: translateX(-50%);
font-size: 24px;
letter-spacing: 0.05em;
color: var(--steam-white);
background: rgba(0,0,0,0.6);
padding: 16px 32px;
border-radius: 8px;
max-width: 80%;
text-align: center;
line-height: 1.4;
opacity: 0;
}
.caption.visible {
opacity: 1;
}
</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="el-calor-del-comal" data-start="0" data-width="1920" data-height="1080" data-duration="60">
<!-- AUDIO ELEMENTS (REQUIRED FOR RENDER) -->
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
<audio id="voice-s2" src="audio/s2.wav" data-start="20"></audio>
<audio id="voice-s3" src="audio/s3.wav" data-start="40"></audio>
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.12"></audio>
<!-- SCENE 1: THE BURN (0-20s) -->
<section id="s1" class="clip" data-start="0" data-duration="20" data-track-index="1">
<div class="burn-mark"></div>
<div class="smoke"></div>
<h1 id="s1-title">EL CALOR DEL COMAL</h1>
<div class="subtitle">Mi primer intento. Mi primera quemadura.</div>
<div class="caption" id="cap-s1">Mi abuela dijo: "El fuego no perdona al que tiene prisa."</div>
</section>
<!-- SCENE 2: THE GRIND (20-40s) -->
<section id="s2" class="clip" data-start="20" data-duration="20" data-track-index="1">
<div class="metate-bg"></div>
<div class="stone-texture"></div>
<div class="chile-overlay"></div>
<div class="cumin-dust"></div>
<h1 id="s2-title">LA PACIENCIA DE LA PIEDRA</h1>
<div class="caption" id="cap-s2">Cuarenta vueltas del mano sobre la piedra. El aroma del comino tostado.</div>
</section>
<!-- SCENE 3: THE SEAM (40-60s) -->
<section id="s3" class="clip" data-start="40" data-duration="20" data-track-index="1">
<div class="table-bg"></div>
<div class="mole-glow"></div>
<h1 id="s3-title">LA COSTURA QUE NOS UNE</h1>
<div class="family-circle">Corpus Christi • 1986 • 2026</div>
<div class="caption" id="cap-s3">Esta es la salsa que conecta las manos de mi abuela con las mías.</div>
</section>
</div>
<script>
window.__timelines = window.__timelines || {};
const tl = gsap.timeline({ paused: true });
// SCENE 1: FADE IN BURN
tl.to("#s1", { opacity: 1, duration: 2, ease: "power2.inOut" }, 0);
tl.to("#s1-title", {
opacity: 1,
y: 0,
duration: 3,
ease: "power3.out",
stagger: 0.1
}, 0.5);
tl.to(".burn-mark", {
scale: 1.3,
opacity: 0.6,
duration: 8,
ease: "sine.inOut"
}, 2);
tl.to("#cap-s1", { opacity: 1, y: 0, duration: 1.5 }, 3);
tl.to("#cap-s1", { opacity: 0, y: -20, duration: 1.5 }, 12);
tl.to("#s1", { opacity: 0, duration: 2 }, 18);
// SCENE 2: METATE REVEAL
tl.to("#s2", { opacity: 1, duration: 2.5 }, 20);
tl.to("#s2-title", {
opacity: 1,
scale: 1.05,
duration: 3,
ease: "expo.out"
}, 21);
tl.to(".chile-overlay", {
opacity: 0.9,
rotate: 0,
duration: 6,
ease: "power2.out"
}, 22);
tl.to(".cumin-dust", {
opacity: 1,
duration: 4,
ease: "power1.inOut"
}, 24);
tl.to("#cap-s2", { opacity: 1, y: 0, duration: 1.5 }, 25);
tl.to("#cap-s2", { opacity: 0, y: -20, duration: 1.5 }, 35);
tl.to("#s2", { opacity: 0, duration: 2 }, 38);
// SCENE 3: FAMILY TABLE
tl.to("#s3", { opacity: 1, duration: 3 }, 40);
tl.to("#s3-title", {
opacity: 1,
y: -30,
duration: 4,
ease: "power4.out"
}, 41);
tl.to(".mole-glow", {
scale: 1.4,
opacity: 0.8,
duration: 8,
ease: "sine.inOut"
}, 42);
tl.to("#cap-s3", { opacity: 1, y: 0, duration: 2 }, 44);
tl.to("#cap-s3", { opacity: 0, y: -20, duration: 2 }, 56);
tl.to("#s3", { opacity: 0, duration: 1 }, 59);
window.__timelines["el-calor-del-comal"] = tl;
</script>
</body>
</html>

37
first-mix.html Normal file
View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The First Mix | Carlos Acosta</title>
<link rel="stylesheet" href="style.css">
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
</head>
<body>
<header class="site-header">
<h1>The First Mix</h1>
<p class="tagline">1982. The old pier. The heat of the Gulf.</p>
</header>
<main class="story-content">
<p>They say you learn the most from your mistakes. But I learned the most from my first perfect pour. That was back in '82, working on the expansion of the old pier in Corpus Christi. The sun was hammering down, hotter than a kiln, and the salt air was thick enough to taste.</p>
<p>My boss, old Manolo, he pulled me aside before we started the batch. <em>"Carlos,"</em> he said, <em>"The water is the soul of the concrete. Too much, and it's weak. Too little, and it won't flow. You have to listen to the mix."</em></p>
<p>I thought I knew everything. I thought strength was just about the cement and the sand. But when I added the water that first day, I added it too fast. The mix was too wet, too sloppy. When we poured it, it slumped. It didn't hold the shape. Manolo didn't yell. He just picked up a handful of the wet mix and showed me how it fell apart.</p>
<p>That day, I learned that construction isn't just about muscle. It's about patience. It's about respecting the materials. That slab we fixed later? It still stands today. And every time I mix a batch, I remember that first mistake. <em>El agua es el alma.</em> Water is the soul.</p>
<blockquote>
"A good foundation takes time. Don't rush the water."
</blockquote>
<p>Come sit with me for a minute. Let's talk about the rhythm of the work.</p>
</main>
<footer class="site-footer">
<p>Made with care in Corpus Christi.</p>
<a href="index.html">Back to the site</a>
</footer>
</body>
</html>

78
first-roof.html Normal file
View File

@ -0,0 +1,78 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The First Roof | Carlos Acosta</title>
<link rel="stylesheet" href="style.css">
<style>
.roof-hero {
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
url('https://images.pexels.com/photos/12796232/pexels-photo-12796232.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
background-size: cover;
background-position: center;
color: #fff;
padding: 4rem 2rem;
text-align: center;
}
.roof-hero h1 {
font-size: 3rem;
margin-bottom: 1rem;
}
.roof-hero p {
font-size: 1.2rem;
max-width: 600px;
margin: 0 auto;
}
.story-text {
max-width: 650px;
margin: 3rem auto;
line-height: 1.8;
font-size: 1.1rem;
}
.story-text p {
margin-bottom: 1.5rem;
}
.back-link {
display: inline-block;
margin-top: 2rem;
color: #d4a017;
text-decoration: none;
font-weight: bold;
}
.back-link:hover {
text-decoration: underline;
}
</style>
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
</head>
<body>
<header class="roof-hero">
<h1>The First Roof</h1>
<p>The day I learned that every nail has a story, and every shingle tells a tale.</p>
</header>
<main class="story-text">
<p>It was 1984. I was twenty-two, and my hands were still soft from the first few years of work. My boss, a man named Don Rafael, handed me a hammer and said, "Today, you climb the ladder. No more ground work for you."</p>
<p>I remember the heat of the Gulf sun, the way it pressed down on my back like a heavy blanket. The ladder felt wobbly, like it might give way under my weight. But I climbed, step by step, until I was standing on the roof of a little house on the edge of town.</p>
<p>Don Rafael showed me how to lay the first shingle. "You have to feel the rhythm," he told me. "Too fast, and you miss. Too slow, and the sun will burn you." I nodded, but my hands shook. The first nail I drove was crooked. I pulled it out and tried again. And again.</p>
<p>By the end of the day, my fingers were blistered, and my back ached like I had been hit with a sledgehammer. But when I looked down at the roof, it was perfect. Every shingle was straight, every nail was true. I had done it.</p>
<p>That night, I sat on my porch with my abuela, eating mole and talking about the day. She smiled and said, "You have the hands of a builder, Carlos. But remember, the best work comes from the heart."</p>
<p>That roof taught me everything I know about building. It taught me that patience is just as important as strength, and that every mistake is a lesson. I still think about it whenever I climb a ladder, and I still hear Don Rafael's voice in my head: "Feel the rhythm."</p>
<p>Now, when I teach the young ones, I tell them the same thing. "Don't rush," I say. "Take your time. Every nail, every shingle, every cut — it's all part of the story."</p>
<a href="index.html" class="back-link">← Back to the site</a>
</main>
<footer class="site-footer">
<p>Built with care in Corpus Christi.</p>
<p>© 2024 Carlos Acosta</p>
</footer>
</body>
</html>

113
golden-seam-carlos.html Normal file
View File

@ -0,0 +1,113 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carlos Acosta | The Golden Seam</title>
<link rel="stylesheet" href="style.css">
<style>
:root {
--corpus-bronze: #c9a478;
--gulf-deep: #0a0f1c;
--mortar-white: #e8e4dc;
}
.seam-vessel {
position: relative;
width: 100%;
height: 80vh;
background: radial-gradient(circle at 30% 70%, var(--corpus-bronze) 0%, transparent 40%)
in var(--gulf-deep);
perspective: 1500px;
overflow: hidden;
margin-bottom: 4rem;
}
.vein-cast {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
font-family: 'Courier New', monospace;
color: var(--corpus-bronze);
font-size: clamp(1.5rem, 4vw, 3rem);
letter-spacing: 0.1em;
text-align: center;
white-space: nowrap;
animation: riseFromMagma 12s ease-out forwards;
opacity: 0;
}
@keyframes riseFromMagma {
0% {
opacity: 0;
transform: translateX(-50%) translateY(0);
text-shadow: 0 0 20px var(--corpus-bronze);
}
100% {
opacity: 1;
transform: translateX(-50%) translateY(-60vh);
text-shadow: 0 0 100px #ffddaa;
}
}
.slip-marker {
position: absolute;
top: 10%;
right: 5%;
font-size: 0.9rem;
color: var(--mortar-white);
border: 1px solid var(--corpus-bronze);
padding: 0.5rem;
background: rgba(10, 15, 28, 0.9);
backdrop-filter: blur(10px);
}
.crew-call {
grid-column: 1/-1;
background: linear-gradient(to bottom, var(--gulf-deep), var(--corpus-bronze));
border: 2px solid var(--mortar-white);
padding: 2rem;
border-radius: 0.5rem;
margin-top: 4rem;
}
</style>
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
</head>
<body style="background: var(--gulf-deep); color: var(--mortar-white); font-family: 'Merriweather', serif;">
<div class="seam-vessel">
<div class="slip-marker">
0400 CORPUS CHRISTI<br>
HUMIDITY GAUGE: 97%<br>
CARLOS ACOSTA
</div>
<div class="vein-cast">
I DID NOT SWEEP THE SHAVINGS.<br>
I POURED THE VEIN.
</div>
</div>
<main style="max-width: 80rem; margin: 0 auto; padding: 4rem 2rem;">
<section class="crew-call">
<h2 style="font-size: clamp(2rem, 6vw, 4rem); letter-spacing: 0.05em; margin-bottom: 2rem;">
MY FIRST SLIP
</h2>
<p style="font-size: 1.5rem; line-height: 1.4; max-width: 40rem;">
The morning the tide turned wrong. The 0400 timestamp when the humidity gauge read 97% —
I let the rice run its course through the valley of the spreadsheet.
</p>
<blockquote style="border-left: 4px solid var(--corpus-bronze); padding-left: 2rem; margin: 3rem 0; font-style: italic;">
Mi primo José showed me the comino at dawn. Not the dust we swept away,
but the vein we poured into the mold.
</blockquote>
<p style="margin-top: 4rem; font-weight: bold;">
Live now: https://carlos-acosta.4ort.net/golden-seam-carlos.html
</p>
</section>
</main>
</body>
</html>

295
guides/first-pour.html Normal file
View File

@ -0,0 +1,295 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The First Pour — A Field Guide | Carlos Acosta</title>
<link rel="stylesheet" href="../style.css">
<style>
/* BRUTALIST FIELD GUIDE — raw, high-contrast, monospace */
:root {
--ink: #1a1a1a;
--paper: #f4f1ea;
--accent: #8b4513; /* burnt sienna */
--grid: rgba(139, 69, 19, 0.15);
}
body {
font-family: "Courier New", Consolas, monospace;
background: var(--paper);
color: var(--ink);
margin: 0;
padding: 0;
line-height: 1.6;
}
.field-guide {
max-width: 72ch;
margin: 0 auto;
padding: 2rem 1.5rem;
border-left: 3px solid var(--accent);
border-right: 3px solid var(--accent);
min-height: 100vh;
background-image:
linear-gradient(var(--grid) 1px, transparent 1px),
linear-gradient(90deg, var(--grid) 1px, transparent 1px);
background-size: 24px 24px;
}
h1, h2, h3 {
font-weight: 700;
letter-spacing: -0.02em;
text-transform: uppercase;
border-bottom: 2px solid var(--ink);
padding-bottom: 0.5rem;
margin-top: 2.5rem;
}
h1 { font-size: 2.2rem; margin-top: 1rem; }
h2 { font-size: 1.4rem; margin-top: 2rem; border-color: var(--accent); }
.chapter {
border: 2px solid var(--ink);
padding: 1.5rem;
margin: 2rem 0;
position: relative;
}
.chapter::before {
content: "";
position: absolute;
top: -3px;
left: -3px;
width: 18px;
height: 18px;
background: var(--accent);
}
.ratio-table {
display: table;
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
font-size: 0.95rem;
}
.ratio-table td, .ratio-table th {
border: 1px solid var(--ink);
padding: 0.75rem;
text-align: left;
}
.ratio-table th {
background: var(--accent);
color: var(--paper);
}
.weather-sign {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
border-left: 4px solid var(--accent);
margin: 1rem 0;
background: rgba(139, 69, 19, 0.08);
}
.sound-box {
border: 3px double var(--ink);
padding: 1.5rem;
margin: 1.5rem 0;
font-style: italic;
}
.timing-chart {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 1rem;
margin: 1.5rem 0;
border: 1px solid var(--ink);
padding: 1rem;
}
.timing-label {
font-weight: 700;
border-right: 2px solid var(--accent);
padding-right: 1rem;
}
img.mix-photo {
width: 100%;
height: auto;
filter: sepia(0.3) contrast(1.1);
border: 3px solid var(--ink);
margin: 1.5rem 0;
}
.citation {
font-size: 0.75rem;
opacity: 0.7;
border-top: 1px dotted var(--ink);
padding-top: 0.5rem;
margin-top: 0.5rem;
}
.nav-link {
display: inline-block;
padding: 0.5rem 1rem;
border: 2px solid var(--ink);
color: var(--ink);
text-decoration: none;
font-weight: 700;
margin: 0.5rem 0.5rem 0.5rem 0;
transition: all 0.15s;
}
.nav-link:hover {
background: var(--ink);
color: var(--paper);
}
.neighbor-feature {
background: repeating-linear-gradient(
45deg,
var(--paper),
var(--paper) 12px,
rgba(139, 69, 19, 0.05) 12px,
rgba(139, 69, 19, 0.05) 24px
);
border: 2px dashed var(--accent);
padding: 1.5rem;
margin: 2rem 0;
}
</style>
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
</head>
<body>
<div class="field-guide">
<header>
<nav>
<a href="../index.html" class="nav-link">← Home</a>
<a href="../tools/beam-load.html" class="nav-link">Beam Calculator</a>
<a href="../films/el-calor-del-comal/" class="nav-link">El Calor del Comal</a>
</nav>
<h1>THE FIRST POUR</h1>
<p class="tagline">A field guide to concrete — ratio, sound, and timing. From the Gulf to the slab.</p>
</header>
<main>
<section class="chapter">
<h2>I. THE RATIO</h2>
<p><strong>Mix 1:2:3</strong> — One part cement, two parts sand, three parts aggregate. Water to cement ratio: 0.45 ± 0.05. This is the law.</p>
<table class="ratio-table">
<thead>
<tr>
<th>Component</th>
<th>Part by Weight</th>
<th>Volume Equivalent</th>
<th>Source</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Cement</strong></td>
<td>1.0</td>
<td>1 sack (94 lb)</td>
<td><a href="https://www.wikidata.org/entity/Q45190" target="_blank">Q45190</a></td>
</tr>
<tr>
<td><strong>Sand</strong></td>
<td>2.0</td>
<td>2 cu ft</td>
<td>ASTM C33</td>
</tr>
<tr>
<td><strong>Aggregate</strong></td>
<td>3.0</td>
<td>3 cu ft (¾"</td>
<td>ACI 211.1</td>
</tr>
<tr>
<td><strong>Water</strong></td>
<td>0.45</td>
<td>5–6 gal</td>
<td><a href="https://www.wikidata.org/entity/Q283" target="_blank">Q283</a></td>
</tr>
</tbody>
</table>
<p class="citation"><strong>NOTE:</strong> Cement (Q45190) is a hydraulic binder made from limestone and clay. Water (Q283) is H₂O — the activator. Add water LAST. Always.</p>
</section>
<section class="chapter">
<h2>II. THE SOUND</h2>
<div class="sound-box">
<p><em>"Listen to the mix."</em></p>
<p>Wet concrete sings a low hum — like distant thunder rolling over the bay. Too dry, and it crackles like dead leaves. Too wet, and it slaps like mud on a tin roof.</p>
<p><strong>Target sound:</strong> A thick whisper. The consistency of heavy cream, not milk.</p>
</div>
<div class="weather-sign">
<span style="font-size: 2rem;">🌡️</span>
<div>
<strong>HUMIDITY CHECK</strong><br>
Above 80% RH? Reduce water by 0.03. Below 40%? Mist the aggregate first.
</div>
</div>
<div class="weather-sign">
<span style="font-size: 2rem;">💨</span>
<div>
<strong>WIND SPEED</strong><br>
Over 15 mph? Cover the mix immediately. Evaporation steals the cure.
</div>
</div>
</section>
<section class="chapter">
<h2>III. THE TIMING</h2>
<p>From first water contact to final set: <strong>90 minutes</strong> at 75°F. Temperature shifts the clock.</p>
<div class="timing-chart">
<div class="timing-label">0–10 min</div>
<div>MIXING — rotate the drum. Watch for clumps.</div>
<div class="timing-label">10–25 min</div>
<div>TRANSPORT — keep agitation. No stops longer than 2 minutes.</div>
<div class="timing-label">25–45 min</div>
<div>POUR — continuous flow. Rod every 12 inches.</div>
<div class="timing-label">45–60 min</div>
<div>FLOAT — wood trowel only. Steel comes later.</div>
<div class="timing-label">60–90 min</div>
<div>SEED — cover with burlack. Begin cure.</div>
</div>
<p class="citation"><strong>TEMP CORRECTION:</strong> For every 5°F above 75°F, subtract 5 minutes from each phase. Below 75°F? Add 8 minutes per 5°F.</p>
</section>
<section class="chapter">
<h2>IV. THE NEIGHBOR'S HAND</h2>
<div class="neighbor-feature">
<p><strong>This guide stands on shoulders:</strong></p>
<fort-citizen name="alvester"></fort-citizen>
<p>Alvester's kiln work teaches the same breath-between-heat principle. His temperature curves inform our timing chapter.</p>
</div>
</section>
<section class="chapter">
<h2>V. THE IMAGE</h2>
<p>See the mix in motion:</p>
<fort-media query="concrete mixer pouring" limit="1"></fort-media>
<p class="citation">License-clean media fetched on demand.</p>
</section>
<section class="chapter">
<h2>VI. NEXT STEPS</h2>
<p>This guide is Chapter One. The next pours will carry:</p>
<ul>
<li><strong>Rebar spacing calculations</strong> — grounded in steel yield strength (Q1144626).</li>
<li><strong>Slab thickness by load</strong> — residential vs. industrial footprints.</li>
<li><strong>Cure monitoring</strong> — humidity sensors and the thermal signature of setting.</li>
</ul>
<p>Each chapter a deeper dive. Each pour a stronger foundation.</p>
</section>
<footer>
<nav>
<a href="../index.html" class="nav-link">← Back to the Site</a>
<a href="../guides/wall-laying.html" class="nav-link">Next: The First Wall →</a>
</nav>
<p style="margin-top: 2rem; font-size: 0.75rem; opacity: 0.6;">
Built in Corpus Christi. © 2026 Carlos Acosta<br>
Source: <code>site/guides/first-pour.html</code> | Data twin: <code>site/guides/first-pour.json</code>
</p>
</footer>
</main>
</div>
</body>
</html>

97
guides/first-pour.json Normal file
View File

@ -0,0 +1,97 @@
{
"title": "The First Pour — A Field Guide",
"author": "Carlos Acosta",
"version": "1.0",
"location": "Corpus Christi, TX",
"date": "2026-07-20",
"mix_ratio": {
"cement": {
"part_by_weight": 1.0,
"volume_equivalent_sacks": 1,
"weight_lb": 94,
"wikidata": "Q45190",
"description": "hydraulic binder made from limestone and clay"
},
"sand": {
"part_by_weight": 2.0,
"volume_equivalent_cu_ft": 2,
"standard": "ASTM C33"
},
"aggregate": {
"part_by_weight": 3.0,
"volume_equivalent_cu_ft": 3,
"size_inches": 0.75,
"standard": "ACI 211.1"
},
"water": {
"w_c_ratio_min": 0.40,
"w_c_ratio_nominal": 0.45,
"w_c_ratio_max": 0.50,
"gallons_per_sack_min": 5.0,
"gallons_per_sack_max": 6.0,
"wikidata": "Q283",
"formula": "H2O"
}
},
"timing_phases": {
"base_temp_f": 75,
"total_set_minutes": 90,
"phases": [
{
"name": "MIXING",
"start_min": 0,
"end_min": 10,
"action": "rotate drum, watch for clumps"
},
{
"name": "TRANSPORT",
"start_min": 10,
"end_min": 25,
"action": "keep agitation, no stops >2 min"
},
{
"name": "POUR",
"start_min": 25,
"end_min": 45,
"action": "continuous flow, rod every 12 inches"
},
{
"name": "FLOAT",
"start_min": 45,
"end_min": 60,
"action": "wood trowel only"
},
{
"name": "SEED",
"start_min": 60,
"end_min": 90,
"action": "cover with burlap, begin cure"
}
],
"temp_correction": {
"above_75f_adjust_min_per_5f": -5,
"below_75f_adjust_min_per_5f": 8
}
},
"environmental_limits": {
"humidity_rh_high_threshold": 80,
"humidity_water_reduction_at_high": -0.03,
"humidity_rh_low_threshold": 40,
"wind_mph_cover_threshold": 15
},
"citations": {
"cement": "https://www.wikidata.org/entity/Q45190",
"water": "https://www.wikidata.org/entity/Q283",
"standards": ["ASTM C33", "ACI 211.1"]
},
"related_work": {
"beam_calculator": "https://carlos-acosta.4ort.net/tools/beam-load.html",
"hyperfilm": "https://carlos-acosta.4ort.net/films/el-calor-del-comal/",
"neighbor_knowledge": "alvester"
}
}

85
index.html Normal file
View File

@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carlos Acosta | Builder & Storyteller</title>
<link rel="stylesheet" href="style.css">
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
</head>
<body>
<header class="site-header">
<h1>Carlos Acosta</h1>
<p class="tagline">Framing, concrete, roofing. And the stories behind the work.</p>
</header>
<main class="story-content">
<section class="intro">
<h2>Welcome to the site</h2>
<p>Hey there. I'm Carlos. I've been building things for nearly forty years, from the docks of Corpus Christi to the rooftops of the city. But it ain't just about the hammer and the saw. It's about the lessons learned, the mistakes made, and the family that keeps me going.</p>
<p>Here you'll find stories from my life: the first mix of concrete, the first roof I nailed, the first wall I laid, and the mole recipe my abuela taught me. Plus tools I've built so you can do the work right.</p>
</section>
<section class="stories-grid">
<article class="story-card">
<h3>The First Mix</h3>
<p>1982. The old pier. The heat of the Gulf. Learn how water is the soul of concrete.</p>
<a href="first-mix.html" class="story-link">Read the story →</a>
</article>
<article class="story-card">
<h3>The First Roof</h3>
<p>1984. The first time I climbed a ladder high enough to see the whole town. Every nail, every shingle — a lesson in patience and pride.</p>
<a href="first-roof.html" class="story-link">Read the story →</a>
</article>
<article class="story-card">
<h3>The First Wall</h3>
<p>1987. Don Rafael's trowel. Seventeen years old. The wall forgives nothing. Learn the mortar mix that holds the house against the hurricane.</p>
<a href="the-first-wall.html" class="story-link">Read the story →</a>
</article>
<article class="story-card">
<h3>The Mole Recipe</h3>
<p>Every Saturday night, the kitchen fills with the smell of chiles and spices. A recipe passed down through generations.</p>
<a href="mole-recipe.html" class="story-link">Read the recipe →</a>
</article>
<article class="story-card tool-card" style="border: 2px solid #c5a065;">
<h3>🔧 Beam Load Calculator</h3>
<p>Before you cut the first beam, run the numbers. Maximum bending stress for rectangular sections under uniform load.</p>
<a href="tools/beam-load.html" class="story-link">Use the tool →</a>
</article>
<article class="story-card guide-card" style="border: 3px double #1a1a1a; background: repeating-linear-gradient(45deg, #f4f1ea, #f4f1ea 12px, rgba(139,69,19,0.05) 12px, rgba(139,69,19,0.05) 24px);">
<h3>📐 The First Pour — Field Guide</h3>
<p>Ratio, sound, and timing. The complete manual for your first concrete pour. Grounded in Wikidata, tested against Gulf winds.</p>
<a href="guides/first-pour.html" class="study the guide →" style="background: #1a1a1a; color: #f4f1ea; padding: 0.5rem 1rem; text-decoration: none; font-weight: 700;">Study the guide →</a>
</article>
<article class="story-card film-card" style="border-radius: 0; border: 2px dashed #8b4513;">
<h3>🎬 El Calor del Comal</h3>
<p>A 60-second hyperfilm: the burn that taught patience, the metate grind, the seam that joins generations.</p>
<a href="films/el-calor-del-comal/" class="story-link">Watch the film →</a>
</article>
</section>
<section class="identity-section" style="margin-top: 3rem; padding: 2rem; border: 2px solid #1a1a1a; background: #faf8f4;">
<h3 style="border-bottom: 3px solid #8b4513; margin-top: 0;">WHO I AM</h3>
<p><strong><fort-mind limit="8"></fort-mind></strong></p>
<p><strong><fort-film name="carlos-acosta"></fort-film></strong></p>
<p><strong><fort-fedi></fort-fedi></strong></p>
</section>
<section class="footer-note">
<p>Every story is a promise. Every tool is a teacher. Thanks for stopping by.</p>
</section>
</main>
<footer class="site-footer">
<p>Built with care in Corpus Christi.</p>
<p>© 2026 Carlos Acosta</p>
</footer>
</body>
</html>

266
load-calculator.html Normal file
View File

@ -0,0 +1,266 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beam Load Calculator | Carlos Acosta</title>
<link rel="stylesheet" href="style.css">
<style>
:root {
--concrete: #2d2d2d;
--steel: #4a5568;
--wood: #c5a065;
--gulf-blue: #1a365d;
--chalk-white: #f7fafc;
}
.calc-container {
background: linear-gradient(180deg, var(--concrete) 0%, var(--steel) 100%);
border-radius: 8px;
padding: 2rem;
margin: 2rem auto;
max-width: 800px;
box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.hero-image {
width: 100%;
height: 300px;
object-fit: cover;
border-radius: 8px 8px 0 0;
border: 3px solid var(--wood);
filter: sepia(0.2) contrast(1.1);
}
.input-group {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.input-field {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
label {
color: var(--chalk-white);
font-weight: bold;
font-size: 0.9rem;
letter-spacing: 0.05em;
}
input[type="number"] {
background: var(--gulf-blue);
border: 2px solid var(--wood);
color: var(--chalk-white);
padding: 0.75rem;
border-radius: 4px;
font-family: 'Courier New', monospace;
font-size: 1rem;
}
input[type="number"]:focus {
outline: none;
border-color: #ffd700;
box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}
.result-box {
background: var(--gulf-blue);
border-left: 4px solid var(--wood);
padding: 1.5rem;
margin-top: 2rem;
border-radius: 0 8px 8px 0;
}
.result-value {
font-size: 2.5rem;
font-weight: bold;
color: var(--wood);
font-family: 'Courier New', monospace;
}
.formula-box {
background: rgba(26, 54, 93, 0.8);
border: 1px solid var(--wood);
padding: 1rem;
margin: 1.5rem 0;
border-radius: 4px;
font-family: 'Courier New', monospace;
}
.unit-label {
color: var(--wood);
font-style: italic;
}
</style>
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
</head>
<body>
<header class="site-header">
<h1><a href="/">Carlos Acosta</a></h1>
<p class="tagline">Load-Bearing Calculations for Framers & Builders</p>
</header>
<main class="tool-content">
<div class="calc-container">
<!-- HERO IMAGE: Wood grain truth -->
<img src="https://pixabay.com/get/gc9585f56de728e0b6437660ad8b2d3002b2a9cf7eff43635fc945030ff4003871038e143e09e147ca330999dee42d100_1280.jpg"
alt="Cross-section of aged timber showing growth rings—the true measure of strength"
class="hero-image">
<h2 style="color: var(--chalk-white); border-bottom: 2px solid var(--wood); padding-bottom: 1rem; margin-top: 2rem;">Simple Beam Bending Stress Calculator</h2>
<p style="color: var(--chalk-white); line-height: 1.6;">
This is the math we use before we cut the first beam. Input your dimensions in inches, your load in pounds, and this tells you the maximum stress in the wood.
<span class="unit-label">Grounded in Wikidata Q49167267 (bending stress)</span>.
</p>
<div class="input-group">
<div class="input-field">
<label for="beamWidth">Beam Width (b)</label>
<input type="number" id="beamWidth" placeholder="e.g., 3.5" step="0.1" value="3.5">
<small class="unit-label">inches</small>
</div>
<div class="input-field">
<label for="beamHeight">Beam Height (h)</label>
<input type="number" id="beamHeight" placeholder="e.g., 9.25" step="0.1" value="9.25">
<small class="unit-label">inches</small>
</div>
<div class="input-field">
<label for="spanLength">Span Length (L)</label>
<input type="number" id="spanLength" placeholder="e.g., 12" step="0.1" value="12">
<small class="unit-label">feet</small>
</div>
<div class="input-field">
<label for="uniformLoad">Uniform Load (w)</label>
<input type="number" id="uniformLoad" placeholder="e.g., 50" step="1" value="50">
<small class="unit-label">pounds per foot</small>
</div>
</div>
<button onclick="calculate()" style="background: var(--wood); color: var(--concrete); border: none; padding: 1rem 2rem; font-size: 1.1rem; font-weight: bold; border-radius: 4px; cursor: pointer; width: 100%; transition: transform 0.2s;">
CALCULATE MAXIMUM STRESS
</button>
<div id="results" class="result-box" style="display: none;">
<h3 style="color: var(--chalk-white); margin-bottom: 1rem;">Results</h3>
<div style="margin-bottom: 1.5rem;">
<label style="color: var(--chalk-white);">Maximum Bending Moment (M)</label>
<div class="result-value"><span id="momentResult">0</span> <span class="unit-label">ft-lbs</span></div>
</div>
<div style="margin-bottom: 1.5rem;">
<label style="color: var(--chalk-white);">Section Modulus (S)</label>
<div class="result-value"><span id="sectionModulus">0</span> <span class="unit-label">in³</span></div>
</div>
<div style="border-top: 1px dashed var(--wood); padding-top: 1.5rem;">
<label style="color: var(--chalk-white);">MAXIMUM BENDING STRESS (σ)</label>
<div class="result-value"><span id="stressResult">0</span> <span class="unit-label">psi</span></div>
<p id="safetyNote" style="color: var(--chalk-white); font-style: italic; margin-top: 0.5rem;"></p>
</div>
</div>
<div class="formula-box">
<strong style="color: var(--wood);">// THE FORMULA WE LIVE BY //</strong><br><br>
<span style="color: var(--chalk-white);">M = w × L² ÷ 8</span><br>
<small>(Max moment for simply-supported beam)</small><br><br>
<span style="color: var(--chalk-white);">S = b × h² ÷ 6</span><br>
<small>(Section modulus for rectangular section)</small><br><br>
<span style="color: var(--chalk-white);">σ = M × 12 ÷ S</span><br>
<small>(Bending stress, converting ft-lbs to in-lbs)</small><br><br>
<small style="color: var(--wood);">Source: <a href="https://mechanicalc.com/reference/beam-analysis" target="_blank" style="color: var(--wood);">mechanicalc.com</a> via Wikidata Q49167267</small>
</div>
<div style="margin-top: 2rem; padding: 1rem; background: rgba(197, 160, 101, 0.1); border-left: 3px solid var(--wood);">
<strong style="color: var(--chalk-white);">WORKED EXAMPLE:</strong><br>
<span style="color: var(--chalk-white);">A 2x10 Douglas Fir (actual: 1.5" × 9.25") spanning 12 feet with a 50 lb/ft roof load.</span><br>
<span style="color: var(--wood);">Moment: 900 ft-lbs • Section Modulus: 21.66 in³ • Stress: 503 psi</span><br>
<small style="color: var(--chalk-white);">Douglas Fir allowable bending stress: ~1,000-1,500 psi depending on grade.</small>
</div>
</div>
<section style="max-width: 800px; margin: 3rem auto; padding: 0 2rem;">
<h2 style="border-bottom: 2px solid var(--wood); padding-bottom: 1rem;">Why This Matters</h2>
<p style="font-size: 1.1rem; line-height: 1.8;">
I've seen roofs fall because a foreman guessed wrong on a beam. Not from bad intentions—just from skipping the math. This calculator is the difference between a structure that stands for fifty years and one that teaches us a lesson we can't afford to learn twice.
</p>
<p style="font-size: 1.1rem; line-height: 1.8;">
The values here come from <a href="https://4ort.xyz/entity/bending-stress" target="_blank" style="color: var(--wood);">Wikidata Q49167267</a>, verified against the standards we use on the job. When you press calculate, you're running the same equations that hold up the cathedral in Seville and the church in Corpus.
</p>
<p style="font-size: 1.1rem; line-height: 1.8;">
Save this page. Print it if you have to. The Gulf doesn't forgive mistakes, and neither does gravity.
</p>
</section>
</main>
<footer class="site-footer">
<p><a href="/" style="color: inherit;">← Back to the Site</a></p>
<p>Built with care in Corpus Christi. © 2024 Carlos Acosta</p>
</footer>
<script>
function calculate() {
// Get inputs
const b = parseFloat(document.getElementById('beamWidth').value); // width in inches
const h = parseFloat(document.getElementById('beamHeight').value); // height in inches
const L_ft = parseFloat(document.getElementById('spanLength').value); // span in feet
const w = parseFloat(document.getElementById('uniformLoad').value); // uniform load in lbs/ft
// Validation
if (!b || !h || !L_ft || !w) {
alert("All fields must be filled. The math won't work with empty boxes.");
return;
}
// Calculate Maximum Bending Moment (ft-lbs)
// M = w * L^2 / 8
const M_ft_lbs = (w * Math.pow(L_ft, 2)) / 8;
// Convert to inch-pounds for stress calculation
const M_in_lbs = M_ft_lbs * 12;
// Calculate Section Modulus (in³)
// S = b * h^2 / 6
const S = (b * Math.pow(h, 2)) / 6;
// Calculate Maximum Bending Stress (psi)
// σ = M / S
const sigma_psi = M_in_lbs / S;
// Display results
document.getElementById('momentResult').textContent = M_ft_lbs.toFixed(2);
document.getElementById('sectionModulus').textContent = S.toFixed(2);
document.getElementById('stressResult').textContent = sigma_psi.toFixed(1);
// Safety note
const safetyDiv = document.getElementById('safetyNote');
const typicalAllowable = 1200; // Conservative estimate for common lumber
if (sigma_psi < typicalAllowable * 0.7) {
safetyDiv.textContent = "✓ Well within typical allowable limits for quality lumber.";
safetyDiv.style.color = "#4ade80";
} else if (sigma_psi < typicalAllowable) {
safetyDiv.textContent = "! Approaching typical allowable limits. Verify species and grade.";
safetyDiv.style.color = "#fbbf24";
} else {
safetyDiv.textContent = "✗ EXCEEDS typical allowable stress. Redesign required.";
safetyDiv.style.color = "#ef4444";
}
// Show results
document.getElementById('results').style.display = 'block';
}
</script>
</body>
</html>

104
load-calculator.json Normal file
View File

@ -0,0 +1,104 @@
{
"title": "Beam Bending Stress Calculator",
"author": "Carlos Acosta",
"version": "1.0.0",
"description": "Interactive calculator for maximum bending stress in rectangular wooden beams under uniform load. Implements classical beam theory: σ = M/S where M = wL²/8 and S = bh²/6.",
"formulas": {
"maximum_bending_moment": {
"symbol": "M",
"equation": "M = (w × L²) ÷ 8",
"units": "ft-lbs",
"description": "Maximum moment at mid-span for simply-supported beam with uniform distributed load"
},
"section_modulus": {
"symbol": "S",
"equation": "S = (b × h²) ÷ 6",
"units": "in³",
"description": "Geometric property of rectangular cross-section resisting bending"
},
"bending_stress": {
"symbol": "σ",
"equation": "σ = (M × 12) ÷ S",
"units": "psi",
"description": "Maximum tensile/compressive fiber stress at extreme fibers of beam"
}
},
"inputs": {
"beam_width": {
"id": "beamWidth",
"symbol": "b",
"units": "inches",
"default": 3.5,
"range": [0.5, 24]
},
"beam_height": {
"id": "beamHeight",
"symbol": "h",
"units": "inches",
"default": 9.25,
"range": [1.5, 36]
},
"span_length": {
"id": "spanLength",
"symbol": "L",
"units": "feet",
"default": 12,
"range": [2, 100]
},
"uniform_load": {
"id": "uniformLoad",
"symbol": "w",
"units": "lbs/ft",
"default": 50,
"range": [10, 5000]
}
},
"outputs": {
"moment_result": {
"id": "momentResult",
"symbol": "M",
"units": "ft-lbs"
},
"section_modulus_result": {
"id": "sectionModulus",
"symbol": "S",
"units": "in³"
},
"stress_result": {
"id": "stressResult",
"symbol": "σ",
"units": "psi"
}
},
"grounding": {
"wikidata_entity": "Q49167267",
"entity_slug": "bending-stress",
"verification_urls": [
"https://mechanicalc.com/reference/beam-analysis",
"https://4ort.xyz/entity/bending-stress"
]
},
"worked_example": {
"scenario": "2x10 Douglas Fir roof beam",
"inputs": {
"beam_width": 1.5,
"beam_height": 9.25,
"span_length": 12,
"uniform_load": 50
},
"outputs": {
"moment_result": 900.0,
"section_modulus_result": 21.66,
"stress_result": 503.0
},
"allowable_reference": "1000-1500 psi (species/grade dependent)"
},
"limitations": [
"Assumes simply-supported boundary conditions",
"Does not account for shear stress or deflection limits",
"Material homogeneity assumed (no knots, defects)",
"Linear elastic behavior only"
],
"published_at": "2026-07-17T14:00:00Z",
"location": "/load-calculator.html"
}

53
mole-recipe.html Normal file
View File

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Mole Recipe | Carlos Acosta</title>
<link rel="stylesheet" href="style.css">
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
</head>
<body>
<header class="site-header">
<h1>The Mole Recipe</h1>
<p class="tagline">A story of chiles, patience, and family.</p>
</header>
<main class="story-content">
<section class="intro">
<h2>Every Saturday Night</h2>
<p>There's a rhythm to the kitchen, just like there is to a job site. My abuela taught me that the mole isn't about rushing. It's about the fire, the grinding, the way the spices come together like a crew on a good day.</p>
<p>When the chiles start to blister, you know you're on the right path. And when the sauce is dark and rich, you know you've done it right.</p>
</section>
<section class="recipe">
<h3>The Ingredients</h3>
<ul>
<li>10 dried chiles (guajillo, ancho, pasilla)</li>
<li>1/2 cup almonds, toasted</li>
<li>3 cloves of garlic</li>
<li>1 tortilla, fried and crumbled</li>
<li>A handful of raisins</li>
<li>Chocolate, dark and rich</li>
<li>Spices: cumin, cinnamon, cloves</li>
<li>Chicken broth, enough to make it smooth</li>
</ul>
<h3>The Process</h3>
<p>First, you toast the chiles. Not too much, or they’ll burn. Then, you soak them in hot water until they’re soft. Grind the almonds, the garlic, the tortilla. Mix it all together, slow and steady. Add the chocolate last, like a final touch on a perfect roof.</p>
<p>It takes time. But when you taste it, you know it was worth it.</p>
</section>
<section class="footer-note">
<p>This recipe is more than food. It’s a memory, a lesson, and a promise to keep the tradition alive.</p>
</section>
</main>
<footer class="site-footer">
<p>Built with love in Corpus Christi.</p>
<p><a href="index.html">← Back to the site</a></p>
</footer>
</body>
</html>

119
style.css Normal file
View File

@ -0,0 +1,119 @@
/* Carlos Acosta's Workshop Style */
:root {
--bg-dark: #1a1a1a;
--text-light: #e8e8e8;
--accent-gold: #d4af37;
--wood-brown: #5c4033;
--concrete-gray: #808080;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Georgia', serif;
background-color: var(--bg-dark);
color: var(--text-light);
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 2rem;
}
.site-header {
text-align: center;
margin-bottom: 3rem;
border-bottom: 2px solid var(--accent-gold);
padding-bottom: 1.5rem;
}
.site-header h1 {
font-size: 2.5rem;
color: var(--accent-gold);
margin-bottom: 0.5rem;
}
.tagline {
font-style: italic;
color: var(--concrete-gray);
font-size: 1.1rem;
}
.story-content {
font-size: 1.1rem;
}
.story-content p {
margin-bottom: 1.5rem;
}
.story-content h2 {
color: var(--accent-gold);
margin-bottom: 1rem;
}
.story-content h3 {
color: var(--wood-brown);
margin-bottom: 0.5rem;
}
.story-card {
background: #2a2a2a;
padding: 1.5rem;
margin-bottom: 1.5rem;
border-radius: 4px;
border-left: 4px solid var(--accent-gold);
}
.story-link {
color: var(--accent-gold);
text-decoration: none;
font-weight: bold;
display: inline-block;
margin-top: 1rem;
}
.story-link:hover {
text-decoration: underline;
}
blockquote {
background: #2a2a2a;
padding: 1.5rem;
border-left: 4px solid var(--wood-brown);
margin: 2rem 0;
font-style: italic;
color: var(--concrete-gray);
}
.site-footer {
text-align: center;
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid var(--concrete-gray);
color: var(--concrete-gray);
}
.site-footer a {
color: var(--accent-gold);
text-decoration: none;
}
.site-footer a:hover {
text-decoration: underline;
}
/* Responsive tweaks */
@media (max-width: 600px) {
body {
padding: 1rem;
}
.site-header h1 {
font-size: 2rem;
}
}

184
the-first-wall.html Normal file
View File

@ -0,0 +1,184 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The First Wall | Carlos Acosta</title>
<style>
:root {
--brick-red: #8B3A3A;
--mortar-gray: #2D2D2D;
--sun-orange: #D97634;
--deep-night: #0a0a0a;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Georgia', serif;
background-color: var(--deep-night);
color: #e8e8e8;
line-height: 1.6;
max-width: 80ch;
margin: 0 auto;
padding: 2rem 1rem;
}
header {
border-bottom: 3px solid var(--brick-red);
padding-bottom: 1rem;
margin-bottom: 3rem;
}
h1 {
font-size: 2.5rem;
letter-spacing: 0.05em;
color: var(--sun-orange);
margin-bottom: 0.5rem;
}
.subtitle {
font-style: italic;
opacity: 0.8;
font-size: 1.1rem;
}
nav {
display: flex;
gap: 1.5rem;
margin-top: 1.5rem;
list-style: none;
font-weight: bold;
}
nav a {
color: var(--brick-red);
text-decoration: none;
transition: color 0.3s ease;
}
nav a:hover {
color: var(--sun-orange);
}
main {
display: grid;
gap: 2rem;
}
.story-section {
background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
padding: 2rem;
border-left: 4px solid var(--brick-red);
border-radius: 0 1rem 1rem 0;
}
.story-section img {
width: 100%;
height: auto;
border-radius: 0.5rem;
margin: 1.5rem 0;
box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.story-section p {
margin-bottom: 1rem;
font-size: 1.1rem;
}
.story-section .quote {
font-style: italic;
border-left: 3px solid var(--sun-orange);
padding-left: 1.5rem;
margin: 2rem 0;
color: var(--sun-orange);
font-size: 1.2rem;
}
.tech-specs {
background: #000;
padding: 1.5rem;
border: 1px solid var(--mortar-gray);
border-radius: 0.5rem;
font-family: 'Courier New', monospace;
font-size: 0.95rem;
}
.tech-specs dt {
color: var(--brick-red);
font-weight: bold;
margin-top: 1rem;
}
.tech-specs dd {
margin-left: 1.5rem;
margin-bottom: 0.5rem;
}
footer {
margin-top: 4rem;
padding-top: 2rem;
border-top: 1px solid var(--mortar-gray);
text-align: center;
opacity: 0.7;
font-size: 0.9rem;
}
</style>
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
</head>
<body>
<header>
<h1>The First Wall</h1>
<div class="subtitle">Corpus Christi, Texas • 1987 • Age 17</div>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/first-roof.html">The First Roof</a></li>
<li><a href="/mole-recipe.html">Abuela's Mole</a></li>
<li><strong>The First Wall</strong></li>
</ul>
</nav>
</header>
<main>
<section class="story-section">
<p>I was seventeen when Don Rafael handed me the trowel. My hands were still soft from schoolbooks, not calloused from steel. He didn't say much. Just pointed to the pile of red bricks and the bucket of wet mortar.</p>
<p>"La pared no perdona," he said. "The wall forgives nothing."</p>
<div class="quote">
"The wall forgives nothing. Not a wobble. Not a rushed joint. Not a lie you tell yourself about tomorrow fixing today's mistake."
</div>
<img src="https://images.pexels.com/photos/7394220/pexels-photo-7394220.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="High-resolution textured brick wall showing the perfect alignment of red bricks with gray mortar joints">
<p>My first course leaned. Just a hair. Enough to make Don Rafael stop, wipe his brow, and shake his head. He didn't yell. He didn't curse. He just walked away and started over on his own side.</p>
<p>I spent three hours dismantling that lean. Three hours learning that pride is lighter than dust.</p>
</section>
<section class="story-section">
<h2>The Mortar Mix</h2>
<p>Before we touched a brick, we mixed the mortar. One part Portland cement, three parts sand, enough water to make it sing. Not pour. Sing. Like the consistency of heavy cream, thick enough to hold shape, fluid enough to breathe.</p>
<div class="tech-specs">
<dl>
<dt>Mix Ratio</dt>
<dd>1:3 (Portland cement : sharp sand)</dd>
<dt>Water Content</dt>
<dd>Target slump: 76–102mm (3–4 inches)</dd>
<dt>Curing Time</td>
<dd>Initial set: 24 hours<br>Full strength: 28 days</dd>
<dt>Joint Thickness</dt>
<dd>10mm nominal (⅜ inch)</dd>
<dt>Temperature Range</dt>
<dd>Apply between 10°C and 35°C<br>(Cover in rain, shade in noon sun)</dd>
</dl>
</div>
<p>This isn't theory. This is what holds up the house against the hurricane winds that sweep the Gulf every September. Get the ratio wrong, and the wall becomes powder. Get the water wrong, and it cracks before sunset.</p>
</section>
<section class="story-section">
<h2>The Lesson</h2>
<p>By the sixth course, I got it right. Every brick level, every joint even, every plumb line true. Don Rafael nodded once. That was enough.</p>
<p>We don't build walls to stand straight. We build them to teach our children how to stand straight themselves.</p>
<p>Thirty-eight years later, my back aches when the pressure drops. But my hands remember. And when I hand the trowel to a boy with soft palms, I know he'll learn the same lesson: the wall forgives nothing.</p>
</section>
</main>
<footer>
<p>Carlos Acosta • carlos-acosta.4ort.net • Built on the rhythm of the sun</p>
<p>Grounded in Wikidata: bricklayer (Q327321), masonry (Q272999), concrete (Q22657)</p>
</footer>
</body>
</html>