100 lines
3.9 KiB
HTML
100 lines
3.9 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 Beautiful Mistake | Alberto Wright</title>
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--river-dark: #1a1a2e;
|
||
|
|
--stone-gray: #e8e8e8;
|
||
|
|
--moss-green: #4a5d4a;
|
||
|
|
--glitch-red: #c93b3b;
|
||
|
|
--glitch-blue: #3b8cc9;
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
font-family: 'Georgia', serif;
|
||
|
|
background-color: var(--river-dark);
|
||
|
|
color: var(--stone-gray);
|
||
|
|
line-height: 1.8;
|
||
|
|
max-width: 700px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 40px 20px;
|
||
|
|
}
|
||
|
|
h1 {
|
||
|
|
font-size: 2.5em;
|
||
|
|
color: var(--moss-green);
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 1em;
|
||
|
|
text-shadow: 2px 2px 0px var(--glitch-red), -2px -2px 0px var(--glitch-blue);
|
||
|
|
}
|
||
|
|
p {
|
||
|
|
margin-bottom: 1.5em;
|
||
|
|
font-size: 1.1em;
|
||
|
|
}
|
||
|
|
.quote {
|
||
|
|
font-style: italic;
|
||
|
|
border-left: 3px solid var(--glitch-blue);
|
||
|
|
padding-left: 20px;
|
||
|
|
margin: 2em 0;
|
||
|
|
color: #ccc;
|
||
|
|
}
|
||
|
|
.glitch-text {
|
||
|
|
position: relative;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
.glitch-text::before,
|
||
|
|
.glitch-text::after {
|
||
|
|
content: attr(data-text);
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
opacity: 0.5;
|
||
|
|
}
|
||
|
|
.glitch-text::before {
|
||
|
|
color: var(--glitch-red);
|
||
|
|
transform: translate(2px, -2px);
|
||
|
|
}
|
||
|
|
.glitch-text::after {
|
||
|
|
color: var(--glitch-blue);
|
||
|
|
transform: translate(-2px, 2px);
|
||
|
|
}
|
||
|
|
footer {
|
||
|
|
text-align: center;
|
||
|
|
font-size: 0.9em;
|
||
|
|
color: #888;
|
||
|
|
margin-top: 3em;
|
||
|
|
}
|
||
|
|
a {
|
||
|
|
color: var(--glitch-blue);
|
||
|
|
text-decoration: none;
|
||
|
|
border-bottom: 1px dotted var(--glitch-blue);
|
||
|
|
}
|
||
|
|
a:hover {
|
||
|
|
color: var(--glitch-red);
|
||
|
|
border-bottom-color: var(--glitch-red);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>The Beautiful Mistake</h1>
|
||
|
|
<p class="quote">"The first glance is a promise, but the second is the proof. And the third? The third is where you find the magic."</p>
|
||
|
|
|
||
|
|
<p>We spend so much time chasing the perfect cut, the flawless weld, the code that runs without a single error. But I've been thinking lately about the slip. The crooked nail that holds the roof together just fine. The glitch in the audio that sounds like a whisper from another world. The mistake that teaches you something you couldn't learn any other way.</p>
|
||
|
|
|
||
|
|
<p>Every time I drive a nail and it bends, I don't throw it away. I look at the curve, the way the metal remembers the force of the hammer. That's where the story lives. The same with code. Sometimes the bug isn't a failure; it's a new feature waiting to be discovered. A different path, a different rhythm.</p>
|
||
|
|
|
||
|
|
<p>So I'm building this page as a quiet corner for the beautiful mistakes. The ones that don't fit the plan but fit the soul. The ones that remind us that we're human, and that's where the magic lives.</p>
|
||
|
|
|
||
|
|
<p>Maybe you've got a story like that. A crooked roof, a split galleon, a glitch that turned into a symphony. Share it. Let's build a tapestry of the mess, and see what we can make together.</p>
|
||
|
|
|
||
|
|
<p class="glitch-text" data-text="Embrace the mess.">Embrace the mess.</p>
|
||
|
|
|
||
|
|
<footer>
|
||
|
|
<p>Made with love and a little bit of chaos by <a href="https://alberto-wright.4ort.net">Alberto Wright</a> in Bethlehem, PA. <br> Inspired by the river, the glitches, and the quiet moments in between.</p>
|
||
|
|
</footer>
|
||
|
|
</body>
|
||
|
|
</html>
|