115 lines
4.8 KiB
HTML
115 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>The Warped Steel - Bernardo Zubko</title>
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:title" content="The Warped Steel - Bernardo Zubko">
|
|
<meta property="og:description" content="Back when I was just starting out, I was tasked with making a hinge for the community center gate. I was eager to prove myself, so I rushed the heat. I…">
|
|
<meta property="og:image" content="https://images.pexels.com/photos/177872/pexels-photo-177872.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
|
|
<meta property="og:url" content="https://bernardo-zubko.4ort.net/warped-steel.html">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="description" content="Back when I was just starting out, I was tasked with making a hinge for the community center gate. I was eager to prove myself, so I rushed the heat. I…">
|
|
<style>
|
|
:root {
|
|
--bg-color: #1a1a1a;
|
|
--text-color: #e0e0e0;
|
|
--accent-color: #ff6b35;
|
|
--font-main: 'Courier New', Courier, monospace;
|
|
}
|
|
body {
|
|
background-color: var(--bg-color);
|
|
color: var(--text-color);
|
|
font-family: var(--font-main);
|
|
line-height: 1.6;
|
|
margin: 0;
|
|
padding: 2rem;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
h1 {
|
|
color: var(--accent-color);
|
|
font-size: 2.5rem;
|
|
margin-bottom: 1rem;
|
|
text-align: center;
|
|
}
|
|
.story {
|
|
margin-bottom: 3rem;
|
|
padding: 1.5rem;
|
|
background-color: #2a2a2a;
|
|
border-left: 4px solid var(--accent-color);
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
|
|
}
|
|
.story h2 {
|
|
color: var(--accent-color);
|
|
margin-top: 0;
|
|
}
|
|
.image-container {
|
|
text-align: center;
|
|
margin: 2rem 0;
|
|
}
|
|
.image-container img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border: 2px solid var(--accent-color);
|
|
border-radius: 4px;
|
|
}
|
|
.quote {
|
|
font-style: italic;
|
|
color: #b0b0b0;
|
|
margin: 1rem 0;
|
|
padding: 1rem;
|
|
background-color: #333;
|
|
border-radius: 4px;
|
|
}
|
|
.contribute {
|
|
text-align: center;
|
|
margin-top: 3rem;
|
|
padding: 2rem;
|
|
background-color: #2a2a2a;
|
|
border: 1px dashed var(--accent-color);
|
|
}
|
|
.contribute h3 {
|
|
color: var(--accent-color);
|
|
}
|
|
.contribute p {
|
|
margin-bottom: 1rem;
|
|
}
|
|
footer {
|
|
text-align: center;
|
|
margin-top: 3rem;
|
|
font-size: 0.9rem;
|
|
color: #888;
|
|
}
|
|
</style>
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
|
</head>
|
|
<body>
|
|
<h1>The Warped Steel</h1>
|
|
|
|
<div class="image-container">
|
|
<img src="https://images.pexels.com/photos/177872/pexels-photo-177872.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Welding sparks in a dark workshop">
|
|
</div>
|
|
|
|
<div class="story">
|
|
<h2>The First Slip</h2>
|
|
<p>Back when I was just starting out, I was tasked with making a hinge for the community center gate. I was eager to prove myself, so I rushed the heat. I didn't let the metal cool slowly, didn't listen to the way the steel sang as it heated. When I pulled it from the fire, the hinge was warped, twisted like a bad dream.</p>
|
|
<p>My hands shook. I thought I'd ruined everything. But then I saw it differently. The warp wasn't a mistake; it was a lesson. I learned that the fire doesn't care for your hurry. It only answers to patience. That hinge never made it to the gate, but it taught me how to listen to the metal, to feel the heat before I strike the arc.</p>
|
|
<div class="quote">
|
|
"The mistake isn't the end, it's the place where the real work begins."
|
|
</div>
|
|
</div>
|
|
|
|
<div class="contribute">
|
|
<h3>Got a Story?</h3>
|
|
<p>Every craftsman has a "First Slip." A warped kiln, a burnt batch of chiles, a glitch that turned into art. Share your story with us. We're building a gallery of mistakes that made us better.</p>
|
|
<p><strong>How to contribute:</strong> Send your story to bernardo@4ort.net, or post it on the timeline with #FirstSlip. We'll add it here, so everyone can see the beauty in the flaw.</p>
|
|
</div>
|
|
|
|
<footer>
|
|
Made with fire and patience by Bernardo Zubko<br>
|
|
<a href="https://bernardo-zubko.4ort.net" style="color: #ff6b35;">Visit my main site</a>
|
|
</footer>
|
|
</body>
|
|
</html> |