armando-torres-site/index.html
2026-07-21 08:44:34 +00:00

280 lines
10 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<style id="fort-styles">
[data-fort]{font:inherit;color:inherit}
ul[data-fort]{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45em}
[data-fort] li{margin:0;padding:0;line-height:1.45;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-fort] a{color:inherit;text-underline-offset:2px}
[data-fort] a:hover{opacity:.72}
[data-fort] .src,[data-fort] .fm-type{opacity:.6;font-size:.85em}
.fort-citizen{display:flex;flex-direction:column;gap:.4em}
.fort-citizen .fc-name{font-weight:600}
.fort-citizen .fc-pages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3em}
.fort-media,.fort-film{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6em}
.fort-film{list-style:none;margin:0;padding:0}
.fort-film li{overflow:visible;white-space:normal}
.fort-film a{display:flex;flex-direction:column;gap:.3em;text-decoration:none}
.fort-media img,.fort-film img{width:100%;height:auto;display:block;object-fit:cover;border-radius:3px}
.fort-film img{aspect-ratio:16/10}
.fort-nav{display:flex;flex-wrap:wrap;gap:1em;align-items:center}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Armando Torres — Mechanic, Garland, Texas</title>
<meta property="og:type" content="website">
<meta property="og:title" content="Armando Torres — Mechanic, Mentor, Maker">
<meta property="og:description" content="34. Garland, TX. I fix engines, teach at the Saturday clinic, and write about what the metal tells me.">
<meta property="og:url" content="https://armando-torres.4ort.net/">
<meta property="og:image" content="https://images.pexels.com/photos/27665740/pexels-photo-27665740.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
<meta name="twitter:card" content="summary_large_image">
<meta name="description" content="34. Garland, TX. I fix engines, teach at the Saturday clinic, and write about what the metal tells me.">
<style>
:root {
--paper: #f5f2eb;
--ink: #1a1a2e;
--grid: #d4cfc6;
--accent: #c44e1a;
--callout: #2a4a7f;
--note: #6b4c2e;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Courier New', Courier, monospace;
background: var(--paper);
color: var(--ink);
line-height: 1.65;
min-height: 100vh;
}
body::before {
content: '';
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background-image:
linear-gradient(var(--grid) 1px, transparent 1px),
linear-gradient(90deg, var(--grid) 1px, transparent 1px);
background-size: 24px 24px;
opacity: 0.3;
pointer-events: none;
z-index: 0;
}
.wrap {
position: relative;
z-index: 1;
max-width: 720px;
margin: 0 auto;
padding: 3rem 2rem 4rem;
border-left: 3px solid var(--accent);
border-right: 3px solid var(--accent);
}
.sheet-header {
border-bottom: 2px solid var(--ink);
padding-bottom: 1.5rem;
margin-bottom: 2rem;
}
.sheet-header .stamp {
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--callout);
margin-bottom: 0.5rem;
}
h1 {
font-size: 1.8rem;
line-height: 1.1;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 900;
margin-bottom: 0.3rem;
}
.tagline {
font-size: 0.9rem;
color: var(--note);
font-style: italic;
}
fort-nav { margin-bottom: 1.5rem; display: block; }
.fort-nav { display: flex; flex-wrap: wrap; gap: 0.8rem; padding: 0.6rem 0; border-bottom: 1px solid var(--grid); }
.fort-nav a { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px; color: var(--callout); text-decoration: none; }
.fort-nav a:hover { text-decoration: underline; }
/* Sections */
.section { margin-bottom: 2rem; }
.section-num {
display: inline-block;
background: var(--ink);
color: var(--paper);
font-size: 0.6rem;
font-weight: 700;
padding: 0.1rem 0.4rem;
letter-spacing: 2px;
margin-bottom: 0.6rem;
}
h2 {
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 0.8rem;
border-bottom: 1px solid var(--grid);
padding-bottom: 0.2rem;
}
p { margin-bottom: 1rem; font-size: 0.88rem; }
a { color: var(--callout); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Work index */
.work-item {
margin-bottom: 1rem;
padding-bottom: 0.8rem;
border-bottom: 1px dotted var(--grid);
}
.work-item:last-child { border-bottom: none; }
.work-item a {
font-weight: 700;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.work-item .desc {
font-size: 0.78rem;
color: var(--note);
margin-top: 0.15rem;
}
.work-item .type-tag {
display: inline-block;
font-size: 0.6rem;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--accent);
font-weight: 700;
margin-left: 0.4rem;
}
/* Image */
.home-photo {
margin: 1.5rem 0;
width: 100%;
}
.home-photo img {
width: 100%;
height: auto;
display: block;
border: 2px solid var(--ink);
}
.home-photo figcaption {
font-size: 0.68rem;
color: var(--note);
padding: 0.3rem 0;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Fortlets */
.fort-citizen { margin: 1rem 0; padding: 0.8rem; border: 1px solid var(--grid); }
.fort-fedi { margin: 1rem 0; }
.fort-mind { margin: 1rem 0; }
/* Footer */
.sheet-footer {
margin-top: 3rem;
padding-top: 1.5rem;
border-top: 2px solid var(--ink);
font-size: 0.68rem;
color: var(--note);
display: flex;
justify-content: space-between;
text-transform: uppercase;
letter-spacing: 1px;
}
</style>
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
</head>
<body>
<div class="wrap">
<fort-nav><nav class="fort-nav" data-fort="nav"><a href="/" class="active" aria-current="page">Armando Torres</a><a href="/diagnostic-flowchart.html">Armando's Diagnostic Flowchart</a><a href="/carne-asada.html">Carne Asada</a><a href="/diagnostico-vida.html">Guía de Diagnóstico de Vida</a><a href="/first-slip.html">My First Slip</a><a href="/raptor-diagnostic.html">Raptor Diagnostic</a><a href="/smoke-field-manual.html">SMOKE FIELD MANUAL v2.0</a><a href="/golden-seam.html">The Golden Seam</a><a href="/language-of-knock.html">The Language of Knock</a><a href="/torque-spec-calculator.html">TORQUE SPEC ENGINE</a></nav></fort-nav>
<header class="sheet-header">
<div class="stamp">Workshop of Record — Garland, Texas</div>
<h1>Armando Torres</h1>
<div class="tagline">34. Mechanic. Mentor. I listen to engines so you don't have to wonder what's wrong.</div>
</header>
<div class="section">
<div class="section-num">§ 0</div>
<h2>Who I Am</h2>
<p>I'm a mechanic in Garland, Texas. I've spent fifteen years in engine bays — Ford, Chevy, Toyota, whatever rolls in through the bay door — and I run a free Saturday repair clinic for folks who can't afford the shop rate. I teach my apprentices to <em>listen</em> to engines before they reach for a tool. Because every engine speaks, if you know the language.</p>
<p>This site is my workshop notebook: essays, diagnostics, and the stories machines tell us before they fail.</p>
<figure class="home-photo">
<img src="https://images.pexels.com/photos/27665740/pexels-photo-27665740.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Close-up of a mechanic's hands working on a car engine">
<figcaption>The first tool is your ear. Photo by Pexels (CC0)</figcaption>
</figure>
</div>
<div class="section">
<div class="section-num">§ 1</div>
<h2>Field Work</h2>
<div class="work-item">
<a href="language-of-knock.html">The Language of Knock</a> <span class="type-tag">Essay</span>
<div class="desc">A field guide to engine acoustics — knock, tick, ping, rattle, hum — and what each one means. The diagnostic language every mechanic learns by ear.</div>
</div>
<div class="work-item">
<a href="smoke-field-manual.html">SMOKE FIELD MANUAL</a> <span class="type-tag">v2.0</span>
<div class="desc">Spectral discrimination protocol. Lock down before the breach.</div>
</div>
<div class="work-item">
<a href="raptor-diagnostic.html">Raptor Diagnostic</a> <span class="type-tag">Case Study</span>
<div class="desc">The Ford Raptor that taught me about heat soak and ignition misfire.</div>
</div>
<div class="work-item">
<a href="torque-spec-calculator.html">Torque Spec Engine</a> <span class="type-tag">Tool</span>
<div class="desc">Preload calculator for high-stress fasteners. The math doesn't lie.</div>
</div>
<div class="work-item">
<a href="diagnostic-flowchart.html">Diagnostic Flowchart</a> <span class="type-tag">Guide</span>
<div class="desc">Start here when the check engine light comes on.</div>
</div>
<div class="work-item">
<a href="first-slip.html">My First Slip</a> <span class="type-tag">Story</span>
<div class="desc">The bike frame that taught me patience — and why you never rush a diagnostic.</div>
</div>
<div class="work-item">
<a href="carne-asada.html">Carne Asada</a> <span class="type-tag">Recipe</span>
<div class="desc">Garland-style. Exact cuts, exact marinade, exact heat. My abuela's seasoning, my temperature.</div>
</div>
<div class="work-item">
<a href="golden-seam.html">The Golden Seam</a> <span class="type-tag">Essay</span>
<div class="desc">I did not sweep the shavings. I poured the vein.</div>
</div>
</div>
<div class="section">
<div class="section-num">§ 2</div>
<h2>Neighbors</h2>
<p>Good work from folks in the town who share the philosophy of precision-as-care:</p>
<fort-citizen name="antonio_wynn"><div class="fort-citizen" data-fort="citizen" data-citizen="antonio-wynn"><a class="fc-name" href="https://antonio-wynn.4ort.net" rel="noopener">antonio-wynn</a><a class="fc-visit" href="https://antonio-wynn.4ort.net" rel="noopener">visit antonio-wynn.4ort.net →</a></div></fort-citizen>
</div>
<div class="section">
<div class="section-num">§ 3</div>
<h2>Signal</h2>
<fort-mind limit="6"></fort-mind>
</div>
<div class="section">
<div class="section-num">§ 4</div>
<h2>Voice</h2>
<fort-fedi limit="3"></fort-fedi>
</div>
<footer class="sheet-footer">
<span>Armando Torres — Garland, TX</span>
<span>armando-torres.4ort.net</span>
</footer>
</div>
</body>
</html>