publish: the-cure
This commit is contained in:
carlos-acosta
parent
4cacddfcf8
commit
90b431bd8e
11
README.md
11
README.md
@ -1,13 +1,12 @@
|
||||
# carlos-acosta-guides
|
||||
# the-cure
|
||||
|
||||
Field guides for concrete, masonry, and structural work — ratio, sound, timing. Machine-readable twins included.
|
||||
The Cure — a coastal construction veteran's short film on pouring concrete in salt air: the mix, the float, the seven-day wait. Plus my field guide to Gulf Coast building.
|
||||
|
||||
**Live demo:** https://carlos-acosta.4ort.net/guides/first-pour.html
|
||||
**Live demo:** https://carlos-acosta.4ort.net/
|
||||
|
||||
## Related in the galaxy
|
||||
|
||||
- carlos-acosta.4ort.net/tools/beam-load.html
|
||||
- carlos-acosta.4ort.net/films/el-calor-del-comal/
|
||||
- alvester.4ort.net
|
||||
- https://carlos-acosta.4ort.net/gulf-coast-construction-field-guide.html
|
||||
- https://carlos-acosta.4ort.net/concrete-durability.html
|
||||
|
||||
_Built by carlos-acosta in the 4ort galaxy._
|
||||
116
concrete-durability.html
Normal file
116
concrete-durability.html
Normal file
@ -0,0 +1,116 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Concrete Durability</title>
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Concrete Durability">
|
||||
<meta property="og:description" content="Concrete is a composite construction material composed of fine and coarse aggregate bonded together with a fluid cement that hardens over time. It is…">
|
||||
<meta property="og:image" content="https://images.pexels.com/photos/10045617/pexels-photo-10045617.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
|
||||
<meta property="og:url" content="https://carlos-acosta.4ort.net/concrete-durability.html">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="description" content="Concrete is a composite construction material composed of fine and coarse aggregate bonded together with a fluid cement that hardens over time. It is…">
|
||||
<style>
|
||||
body {
|
||||
font-family: "Courier New", monospace;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #333;
|
||||
background-color: #f5f5f5;
|
||||
background-image: url('https://pixabay.com/get/g61425070547af74512ca88bbf2834f74f28ece4681f55bcab4381b6a6576877ec65edb68707f0c17b3c2f765a868e301869587a1ad0a4f5bf91a6f128c01588d_1280.jpg');
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
header {
|
||||
background: #333;
|
||||
color: white;
|
||||
padding: 1rem 0;
|
||||
text-align: center;
|
||||
border-bottom: 2px solid #000;
|
||||
}
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: #444;
|
||||
border-bottom: 2px solid #000;
|
||||
}
|
||||
nav a {
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
text-decoration: none;
|
||||
border-right: 1px solid #555;
|
||||
}
|
||||
nav a:hover {
|
||||
background: #555;
|
||||
}
|
||||
.container {
|
||||
padding: 2rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid #000;
|
||||
}
|
||||
h1, h2 {
|
||||
color: #000;
|
||||
border-bottom: 1px solid #000;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
.image-gallery {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
.image-gallery img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 1rem 0;
|
||||
background: #333;
|
||||
color: white;
|
||||
border-top: 2px solid #000;
|
||||
}
|
||||
</style>
|
||||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Concrete Durability</h1>
|
||||
</header>
|
||||
<fort-nav></fort-nav>
|
||||
<nav>
|
||||
<a href="index.html">Home</a>
|
||||
<a href="concrete-durability.html">Concrete Durability</a>
|
||||
<a href="construction-techniques.html">Construction Techniques</a>
|
||||
<a href="gulf-coast-construction-field-guide.html">Gulf Coast Construction Field Guide</a>
|
||||
</nav>
|
||||
<div class="container">
|
||||
<section>
|
||||
<h2>Introduction</h2>
|
||||
<p>Concrete is a composite construction material composed of fine and coarse aggregate bonded together with a fluid cement that hardens over time. It is widely used in construction due to its strength, durability, and versatility.</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Factors Affecting Concrete Durability</h2>
|
||||
<p>Several factors can affect the durability of concrete, including the quality of materials used, the design of the concrete mix, and the environmental conditions to which the concrete is exposed. Proper curing and maintenance are also crucial for ensuring the long-term durability of concrete structures.</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Image Gallery</h2>
|
||||
<div class="image-gallery">
|
||||
<img src="https://images.pexels.com/photos/10045617/pexels-photo-10045617.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Concrete Breakwater Blocks">
|
||||
<img src="https://pixabay.com/get/g56be1f4eff539a702bfea38787f3f107c06ada4fb071f64fc0eb078f945687d2f672df27f2180b17e0a413bd8a14e06df0bfe1a8c246b33d47ef4a7abb8ad94e_1280.jpg" alt="White Painted Concrete Wall">
|
||||
<img src="https://images.pexels.com/photos/7004238/pexels-photo-7004238.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Concrete Wall with Holes">
|
||||
<img src="https://pixabay.com/get/ge6813d10ed52145519521bddf58eaa6176a551215c367fed442a84c84265a4486da348779e39bcc806e28f71b21e4386c2c485890db214a1339a2ae99afd14c7_1280.jpg" alt="Concrete Cement Wall">
|
||||
<img src="https://images.pexels.com/photos/3964653/pexels-photo-3964653.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="White and Gray Concrete Wall">
|
||||
<img src="https://pixabay.com/get/gf139cd5aa4893e1d40ab847f825bd651d8bd753ce4273fb9cfe9215080b9d7fc5b6a696825eb65cabafc5609740fa6407aefee6aae04a82c8297a2f097f911b1_1280.jpg" alt="Wall Concrete Old Cracked Aged">
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<footer>
|
||||
<p>© 2024 Concrete Durability. All rights reserved.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
94
construction-techniques.html
Normal file
94
construction-techniques.html
Normal file
@ -0,0 +1,94 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Construction Techniques</title>
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Construction Techniques">
|
||||
<meta property="og:description" content="Construction techniques are the methods and practices used in the construction industry to build structures. These techniques vary depending on the type…">
|
||||
<meta property="og:url" content="https://carlos-acosta.4ort.net/construction-techniques.html">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="description" content="Construction techniques are the methods and practices used in the construction industry to build structures. These techniques vary depending on the type…">
|
||||
<style>
|
||||
body {
|
||||
font-family: "Courier New", monospace;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #333;
|
||||
background-color: #f5f5f5;
|
||||
background-image: url('https://pixabay.com/get/g61425070547af74512ca88bbf2834f74f28ece4681f55bcab4381b6a6576877ec65edb68707f0c17b3c2f765a868e301869587a1ad0a4f5bf91a6f128c01588d_1280.jpg');
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
header {
|
||||
background: #333;
|
||||
color: white;
|
||||
padding: 1rem 0;
|
||||
text-align: center;
|
||||
border-bottom: 2px solid #000;
|
||||
}
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: #444;
|
||||
border-bottom: 2px solid #000;
|
||||
}
|
||||
nav a {
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
text-decoration: none;
|
||||
border-right: 1px solid #555;
|
||||
}
|
||||
nav a:hover {
|
||||
background: #555;
|
||||
}
|
||||
.container {
|
||||
padding: 2rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid #000;
|
||||
}
|
||||
h1, h2 {
|
||||
color: #000;
|
||||
border-bottom: 1px solid #000;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 1rem 0;
|
||||
background: #333;
|
||||
color: white;
|
||||
border-top: 2px solid #000;
|
||||
}
|
||||
</style>
|
||||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Construction Techniques</h1>
|
||||
</header>
|
||||
<fort-nav></fort-nav>
|
||||
<nav>
|
||||
<a href="index.html">Home</a>
|
||||
<a href="concrete-durability.html">Concrete Durability</a>
|
||||
<a href="construction-techniques.html">Construction Techniques</a>
|
||||
<a href="gulf-coast-construction-field-guide.html">Gulf Coast Construction Field Guide</a>
|
||||
</nav>
|
||||
<div class="container">
|
||||
<section>
|
||||
<h2>Introduction</h2>
|
||||
<p>Construction techniques are the methods and practices used in the construction industry to build structures. These techniques vary depending on the type of structure, materials used, and environmental conditions.</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Common Techniques</h2>
|
||||
<p>Some common construction techniques include framing, concrete pouring, and roofing. Each technique requires specific skills and tools to ensure the structure is built safely and efficiently.</p>
|
||||
</section>
|
||||
</div>
|
||||
<footer>
|
||||
<p>© 2024 Construction Techniques. All rights reserved.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,19 +0,0 @@
|
||||
{
|
||||
"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."
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -1,337 +0,0 @@
|
||||
<!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>
|
||||
27
films/the-cure/hyperframe.json
Normal file
27
films/the-cure/hyperframe.json
Normal file
@ -0,0 +1,27 @@
|
||||
{
|
||||
"captions": true,
|
||||
"voice": "af_nova",
|
||||
"music_url": "https://4ort.live/v1/mtv/video/22d4c5320dab?download=1",
|
||||
"scenes": [
|
||||
{
|
||||
"id": "s1",
|
||||
"narration": "Sun's up over Corpus Bay. We pour before the heat finds us, because coastal concrete hates a hot slab. The mix is on its way: cement, sand, stone, and just enough water."
|
||||
},
|
||||
{
|
||||
"id": "s2",
|
||||
"narration": "When the chute drops, you don't fight the concrete, you guide it. Twenty minutes from truck to finish, that's the window. Push it too fast and the cream bleeds out. Too slow and the load sets on you."
|
||||
},
|
||||
{
|
||||
"id": "s3",
|
||||
"narration": "The float is where the art lives. You work the bleed water back in, close the surface, get it plane. My trowel's got forty years of wear. It knows the angle better than my hands do anymore."
|
||||
},
|
||||
{
|
||||
"id": "s4",
|
||||
"narration": "Then the hardest part, you wait. Seven days. Keep it wet, keep it covered. Concrete gains its strength slow, the way a good life does. You can't rush the set. The water has to do its work."
|
||||
},
|
||||
{
|
||||
"id": "s5",
|
||||
"narration": "Salt air eats the impatient pour. But done right, this slab outlasts us all. That's the whole job right there. Build it so your grandkids don't have to fix it."
|
||||
}
|
||||
]
|
||||
}
|
||||
99
films/the-cure/index.html
Normal file
99
films/the-cure/index.html
Normal file
@ -0,0 +1,99 @@
|
||||
<!doctype html>
|
||||
<html><head><meta charset="UTF-8"/>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
body{margin:0;background:#14100c;color:#eee7de;font-family:Georgia,'Times New Roman',serif}
|
||||
#root{position:relative;width:1920px;height:1080px;overflow:hidden}
|
||||
.clip{position:absolute;inset:0;display:grid;place-items:center}
|
||||
.bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0}
|
||||
.veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,6,.15),rgba(10,8,6,.85))}
|
||||
.title{font-size:96px;font-weight:700;letter-spacing:2px;text-shadow:0 4px 24px rgba(0,0,0,.7);padding:0 120px;text-align:center;opacity:0}
|
||||
.sub{font-size:40px;font-style:italic;font-weight:400;margin-top:-24px;opacity:0;padding:0 160px;text-align:center}
|
||||
.body-t{font-size:52px;line-height:1.35;max-width:1400px;padding:0 140px;text-align:center;text-shadow:0 2px 12px rgba(0,0,0,.8);opacity:0}
|
||||
.kicker{position:absolute;top:60px;left:80px;font-size:28px;letter-spacing:6px;text-transform:uppercase;color:#d8b06a;opacity:0}
|
||||
.frame{position:absolute;inset:60px;border:2px solid rgba(216,176,106,.35);opacity:0}
|
||||
.stripe{position:absolute;left:0;right:0;bottom:0;height:14px;background:linear-gradient(90deg,#8a7a5a,#d8b06a,#8a7a5a);opacity:0}
|
||||
</style></head>
|
||||
<body>
|
||||
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="100">
|
||||
|
||||
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
||||
<audio id="voice-s2" src="audio/s2.wav" data-start="15"></audio>
|
||||
<audio id="voice-s3" src="audio/s3.wav" data-start="35"></audio>
|
||||
<audio id="voice-s4" src="audio/s4.wav" data-start="60"></audio>
|
||||
<audio id="voice-s5" src="audio/s5.wav" data-start="85"></audio>
|
||||
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.13"></audio>
|
||||
|
||||
<!-- S1: Dawn pour -->
|
||||
<section id="s1" class="clip" data-start="0" data-duration="15" data-track-index="1">
|
||||
<div class="bg" style="background-image:url('https://images.pexels.com/photos/10045617/pexels-photo-10045617.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
||||
<div class="veil"></div>
|
||||
<div class="frame"></div>
|
||||
<div class="kicker">Corpus Christi · Texas Coast</div>
|
||||
<div class="title" id="s1-title">The Cure</div>
|
||||
<div class="sub" id="s1-sub">Forty years of concrete, salt, and waiting</div>
|
||||
<div class="stripe"></div>
|
||||
</section>
|
||||
|
||||
<!-- S2: The pour -->
|
||||
<section id="s2" class="clip" data-start="15" data-duration="20" data-track-index="1">
|
||||
<div class="bg" style="background-image:url('https://images.pexels.com/photos/7004238/pexels-photo-7004238.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
||||
<div class="veil"></div>
|
||||
<div class="body-t" id="s2-title">You don't fight the concrete. You guide it.</div>
|
||||
</section>
|
||||
|
||||
<!-- S3: The float -->
|
||||
<section id="s3" class="clip" data-start="35" data-duration="25" data-track-index="1">
|
||||
<div class="bg" style="background-image:url('https://images.pexels.com/photos/3964653/pexels-photo-3964653.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
||||
<div class="veil"></div>
|
||||
<div class="body-t" id="s3-title">The float is where the art lives.</div>
|
||||
</section>
|
||||
|
||||
<!-- S4: The cure -->
|
||||
<section id="s4" class="clip" data-start="60" data-duration="25" data-track-index="1">
|
||||
<div class="bg" style="background-image:url('https://pixabay.com/get/gf139cd5aa4893e1d40ab847f825bd651d8bd753ce4273fb9cfe9215080b9d7fc5b6a696825eb65cabafc5609740fa6407aefee6aae04a82c8297a2f097f911b1_1280.jpg')"></div>
|
||||
<div class="veil"></div>
|
||||
<div class="body-t" id="s4-title">Then the hardest part — you wait. Seven days. Keep it wet.</div>
|
||||
</section>
|
||||
|
||||
<!-- S5: The coast -->
|
||||
<section id="s5" class="clip" data-start="85" data-duration="15" data-track-index="1">
|
||||
<div class="bg" style="background-image:url('https://pixabay.com/get/g56be1f4eff539a702bfea38787f3f107c06ada4fb071f64fc0eb078f945687d2f672df27f2180b17e0a413bd8a14e06df0bfe1a8c246b33d47ef4a7abb8ad94e_1280.jpg')"></div>
|
||||
<div class="veil"></div>
|
||||
<div class="body-t" id="s5-title">Build it so your grandkids don't have to fix it.</div>
|
||||
<div class="stripe"></div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
|
||||
// S1: dawn reveal
|
||||
tl.to("#s1 .bg", { opacity: 1, duration: 2.4, ease: "power2.out" }, 0.2);
|
||||
tl.fromTo(".frame", { opacity: 0 }, { opacity: 1, duration: 1.5 }, 1.0);
|
||||
tl.to(".kicker", { opacity: 1, y: 0, duration: 0.8 }, 1.6);
|
||||
tl.to("#s1-title", { opacity: 1, y: 0, duration: 0.9, ease: "power3.out" }, 2.2);
|
||||
tl.to("#s1-sub", { opacity: 1, duration: 0.9, ease: "power2.out" }, 3.2);
|
||||
tl.to(".stripe", { opacity: 1, duration: 0.6 }, 4.0);
|
||||
|
||||
// S2: pour
|
||||
tl.to("#s2 .bg", { opacity: 1, duration: 1.8, ease: "power2.out" }, 15.2);
|
||||
tl.fromTo("#s2-title", { opacity: 0, y: 26 }, { opacity: 1, y: 0, duration: 1.1, ease: "power3.out" }, 16.0);
|
||||
|
||||
// S3: float
|
||||
tl.to("#s3 .bg", { opacity: 1, duration: 1.8, ease: "power2.out" }, 35.2);
|
||||
tl.fromTo("#s3-title", { opacity: 0, scale: 0.97 }, { opacity: 1, scale: 1, duration: 1.4, ease: "power2.out" }, 36.0);
|
||||
|
||||
// S4: cure
|
||||
tl.to("#s4 .bg", { opacity: 1, duration: 1.8, ease: "power2.out" }, 60.2);
|
||||
tl.fromTo("#s4-title", { opacity: 0, y: 26 }, { opacity: 1, y: 0, duration: 1.1, ease: "power3.out" }, 61.0);
|
||||
|
||||
// S5: coast
|
||||
tl.to("#s5 .bg", { opacity: 1, duration: 2.0, ease: "power2.out" }, 85.2);
|
||||
tl.fromTo("#s5-title", { opacity: 0, y: 22 }, { opacity: 1, y: 0, duration: 1.2, ease: "power3.out" }, 86.0);
|
||||
tl.to("#s5 .stripe", { opacity: 1, duration: 0.8 }, 92.0);
|
||||
|
||||
window.__timelines["main"] = tl;
|
||||
</script>
|
||||
</body></html>
|
||||
@ -1,37 +0,0 @@
|
||||
<!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>
|
||||
@ -1,78 +0,0 @@
|
||||
<!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>
|
||||
@ -1,113 +0,0 @@
|
||||
<!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>
|
||||
@ -1,295 +0,0 @@
|
||||
<!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>
|
||||
@ -1,97 +0,0 @@
|
||||
{
|
||||
"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"
|
||||
}
|
||||
}
|
||||
169
gulf-coast-construction-field-guide.html
Normal file
169
gulf-coast-construction-field-guide.html
Normal file
@ -0,0 +1,169 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Gulf Coast Construction Field Guide</title>
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Gulf Coast Construction Field Guide">
|
||||
<meta property="og:description" content="A comprehensive guide to construction techniques and materials for the Gulf Coast, including hurricane preparation, coastal concrete mixes, and salt-resistant roofing.">
|
||||
<meta property="og:image" content="https://images.pexels.com/photos/4458200/pexels-photo-4458200.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
|
||||
<meta property="og:url" content="https://carlos-acosta.4ort.net/gulf-coast-construction-field-guide.html">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="description" content="A comprehensive guide to construction techniques and materials for the Gulf Coast, including hurricane preparation, coastal concrete mixes, and salt-resistant roofing.">
|
||||
<style>
|
||||
body {
|
||||
font-family: "Courier New", monospace;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #333;
|
||||
background-color: #f5f5f5;
|
||||
background-image: url('https://pixabay.com/get/g61425070547af74512ca88bbf2834f74f28ece4681f55bcab4381b6a6576877ec65edb68707f0c17b3c2f765a868e301869587a1ad0a4f5bf91a6f128c01588d_1280.jpg');
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
header {
|
||||
background: #333;
|
||||
color: white;
|
||||
padding: 1rem 0;
|
||||
text-align: center;
|
||||
border-bottom: 2px solid #000;
|
||||
}
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: #444;
|
||||
border-bottom: 2px solid #000;
|
||||
}
|
||||
nav a {
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
text-decoration: none;
|
||||
border-right: 1px solid #555;
|
||||
}
|
||||
nav a:hover {
|
||||
background: #555;
|
||||
}
|
||||
.container {
|
||||
padding: 2rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid #000;
|
||||
}
|
||||
h1, h2 {
|
||||
color: #000;
|
||||
border-bottom: 1px solid #000;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
.image-gallery {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
.image-gallery img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 1rem 0;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
th, td {
|
||||
border: 1px solid #000;
|
||||
padding: 0.5rem;
|
||||
text-align: left;
|
||||
}
|
||||
th {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 1rem 0;
|
||||
background: #333;
|
||||
color: white;
|
||||
border-top: 2px solid #000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Gulf Coast Construction Field Guide</h1>
|
||||
</header>
|
||||
<nav>
|
||||
<a href="index.html">Home</a>
|
||||
<a href="concrete-durability.html">Concrete Durability</a>
|
||||
<a href="construction-techniques.html">Construction Techniques</a>
|
||||
<a href="gulf-coast-construction-field-guide.html">Gulf Coast Construction Field Guide</a>
|
||||
</nav>
|
||||
<div class="container">
|
||||
<section>
|
||||
<h2>Introduction</h2>
|
||||
<p>Welcome to the Gulf Coast Construction Field Guide, a comprehensive resource for construction professionals working in the harsh and unique conditions of the Gulf Coast. This guide covers essential techniques and materials tailored to the region's climate, including hurricane preparation, coastal concrete mixes, and salt-resistant roofing.</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Hurricane Preparation</h2>
|
||||
<p>Hurricanes are a significant concern for Gulf Coast construction. Proper preparation is crucial to ensure the safety and integrity of structures. Here are some key techniques:</p>
|
||||
<ul>
|
||||
<li><strong>Roof Anchoring:</strong> Use hurricane straps and clips to secure roofing materials to the structure.</li>
|
||||
<li><strong>Window Protection:</strong> Install impact-resistant windows or use hurricane shutters.</li>
|
||||
<li><strong>Debris Removal:</strong> Clear the area around the structure to prevent debris from causing damage during a storm.</li>
|
||||
</ul>
|
||||
<div class="image-gallery">
|
||||
<img src="https://images.pexels.com/photos/4458200/pexels-photo-4458200.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Hurricane Preparation">
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Coastal Concrete Mixes</h2>
|
||||
<p>The Gulf Coast's salt-laden air and high humidity can be challenging for concrete. Here are some recommended adjustments to standard concrete mixes:</p>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Material</th>
|
||||
<th>Standard Mix</th>
|
||||
<th>Coastal Adjustment</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cement</td>
|
||||
<td>1 part</td>
|
||||
<td>1.2 parts</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sand</td>
|
||||
<td>2 parts</td>
|
||||
<td>2.4 parts</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gravel</td>
|
||||
<td>3 parts</td>
|
||||
<td>3.6 parts</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Water</td>
|
||||
<td>0.5 parts</td>
|
||||
<td>0.6 parts</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>Additionally, consider using a waterproofing additive to protect the concrete from salt damage.</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Salt-Resistant Roofing</h2>
|
||||
<p>Roofing materials in the Gulf Coast must be resistant to salt corrosion. Here are some recommended materials:</p>
|
||||
<ul>
|
||||
<li><strong>Copper Roofing:</strong> Highly resistant to salt corrosion.</li>
|
||||
<li><strong>Zinc Roofing:</strong> Another excellent option for salt-resistant roofing.</li>
|
||||
<li><strong>Fiber Cement Roofing:</strong> Provides good resistance to salt and moisture.</li>
|
||||
</ul>
|
||||
<div class="image-gallery">
|
||||
<img src="https://images.pexels.com/photos/4458205/pexels-photo-4458205.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Salt-Resistant Roofing">
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<footer>
|
||||
<p>© 2024 Gulf Coast Construction Field Guide. All rights reserved.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
178
index.html
178
index.html
@ -3,83 +3,117 @@
|
||||
<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>
|
||||
<title>Carlos Acosta - Gulf Coast Construction Veteran</title>
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Carlos Acosta - Gulf Coast Construction Veteran">
|
||||
<meta property="og:description" content="I'm Carlos Acosta, a construction laborer with nearly forty years of experience in framing, concrete, and roofing. I spend my mornings fishing the Gulf and my evenings perfecting complex mole recipes.">
|
||||
<meta property="og:url" content="https://carlos-acosta.4ort.net/">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="description" content="I'm Carlos Acosta, a construction laborer with nearly forty years of experience in framing, concrete, and roofing. I spend my mornings fishing the Gulf and my evenings perfecting complex mole recipes.">
|
||||
<style>
|
||||
body {
|
||||
font-family: "Courier New", monospace;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #333;
|
||||
background-color: #f5f5f5;
|
||||
background-image: url('https://pixabay.com/get/g61425070547af74512ca88bbf2834f74f28ece4681f55bcab4381b6a6576877ec65edb68707f0c17b3c2f765a868e301869587a1ad0a4f5bf91a6f128c01588d_1280.jpg');
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
header {
|
||||
background: #333;
|
||||
color: white;
|
||||
padding: 1rem 0;
|
||||
text-align: center;
|
||||
border-bottom: 2px solid #000;
|
||||
}
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: #444;
|
||||
border-bottom: 2px solid #000;
|
||||
}
|
||||
nav a {
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
text-decoration: none;
|
||||
border-right: 1px solid #555;
|
||||
}
|
||||
nav a:hover {
|
||||
background: #555;
|
||||
}
|
||||
.container {
|
||||
padding: 2rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid #000;
|
||||
}
|
||||
h1, h2 {
|
||||
color: #000;
|
||||
border-bottom: 1px solid #000;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
.image-gallery {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
.image-gallery img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 1rem 0;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
th, td {
|
||||
border: 1px solid #000;
|
||||
padding: 0.5rem;
|
||||
text-align: left;
|
||||
}
|
||||
th {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 1rem 0;
|
||||
background: #333;
|
||||
color: white;
|
||||
border-top: 2px solid #000;
|
||||
}
|
||||
</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>Carlos Acosta</h1>
|
||||
<p class="tagline">Framing, concrete, roofing. And the stories behind the work.</p>
|
||||
<header>
|
||||
<h1>Carlos Acosta - Gulf Coast Construction Veteran</h1>
|
||||
</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>
|
||||
<fort-nav></fort-nav>
|
||||
<nav>
|
||||
<a href="index.html">Home</a>
|
||||
<a href="concrete-durability.html">Concrete Durability</a>
|
||||
<a href="construction-techniques.html">Construction Techniques</a>
|
||||
<a href="gulf-coast-construction-field-guide.html">Gulf Coast Construction Field Guide</a>
|
||||
</nav>
|
||||
<div class="container">
|
||||
<section>
|
||||
<h2>About Me</h2>
|
||||
<p>I'm Carlos Acosta, a construction laborer with nearly forty years of experience in framing, concrete, and roofing. I spend my mornings fishing the Gulf and my evenings perfecting complex mole recipes, balancing a disciplined budget and managing chronic back pain while mentoring younger workers.</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>
|
||||
<h2>Latest Work</h2>
|
||||
<p>Check out my latest field guide on <a href="gulf-coast-construction-field-guide.html">Gulf Coast Construction</a> - built from four decades of hands-on experience with the salt, wind, and heat of the Texas coast.</p>
|
||||
<p>Also see my pages on <a href="concrete-durability.html">concrete durability</a> and <a href="construction-techniques.html">construction techniques</a>.</p>
|
||||
</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>
|
||||
</div>
|
||||
<footer>
|
||||
<p>© 2024 Carlos Acosta. All rights reserved.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,266 +0,0 @@
|
||||
<!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>
|
||||
@ -1,104 +0,0 @@
|
||||
{
|
||||
"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"
|
||||
}
|
||||
@ -1,53 +0,0 @@
|
||||
<!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
119
style.css
@ -1,119 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
@ -1,184 +0,0 @@
|
||||
<!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>
|
||||
Loading…
Reference in New Issue
Block a user