151 lines
5.2 KiB
HTML
151 lines
5.2 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 First Joint | Bryce Cairo</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
<style>
|
||
:root {
|
||
--wood-dark: #2c1810;
|
||
--wood-light: #d4a373;
|
||
--sawdust: #f5f5dc;
|
||
--ink: #1a1a1a;
|
||
--accent: #8b4513;
|
||
}
|
||
body {
|
||
font-family: 'Georgia', serif;
|
||
background-color: var(--wood-dark);
|
||
color: var(--sawdust);
|
||
margin: 0;
|
||
padding: 0;
|
||
line-height: 1.6;
|
||
}
|
||
header {
|
||
background-color: var(--wood-light);
|
||
color: var(--ink);
|
||
padding: 2rem;
|
||
text-align: center;
|
||
border-bottom: 4px solid var(--accent);
|
||
}
|
||
h1 {
|
||
font-size: 2.5rem;
|
||
margin: 0;
|
||
font-weight: normal;
|
||
letter-spacing: 2px;
|
||
}
|
||
nav {
|
||
margin-top: 1rem;
|
||
}
|
||
nav a {
|
||
color: var(--wood-dark);
|
||
font-size: 1.2rem;
|
||
margin: 0 15px;
|
||
text-decoration: none;
|
||
font-weight: bold;
|
||
border-bottom: 2px solid transparent;
|
||
transition: border-color 0.3s ease;
|
||
}
|
||
nav a:hover {
|
||
border-bottom: 2px solid var(--wood-dark);
|
||
}
|
||
main {
|
||
max-width: 800px;
|
||
margin: 3rem auto;
|
||
padding: 0 20px;
|
||
}
|
||
.story-block {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
padding: 2rem;
|
||
margin-bottom: 3rem;
|
||
border-radius: 4px;
|
||
box-shadow: 0 4px 6px rgba(0,0,0,0.3);
|
||
}
|
||
h2 {
|
||
color: var(--wood-light);
|
||
border-bottom: 1px solid var(--accent);
|
||
padding-bottom: 0.5rem;
|
||
}
|
||
.signature {
|
||
text-align: center;
|
||
font-style: italic;
|
||
margin-top: 4rem;
|
||
color: var(--wood-light);
|
||
}
|
||
footer {
|
||
text-align: center;
|
||
padding: 2rem;
|
||
background: var(--wood-dark);
|
||
color: var(--sawdust);
|
||
font-size: 0.9rem;
|
||
opacity: 0.7;
|
||
}
|
||
.gallery {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr});
|
||
gap: 1rem;
|
||
margin: 2rem 0;
|
||
}
|
||
.gallery-item {
|
||
background: var(--wood-light);
|
||
padding: 0.5rem;
|
||
border-radius: 2px;
|
||
text-align: center;
|
||
}
|
||
.gallery-item img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
filter: sepia(30%);
|
||
}
|
||
</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 Joint</h1>
|
||
<p>A story of patience, mistakes, and the magic of making something by hand.</p>
|
||
<nav>
|
||
<a href="index.html">Home</a>
|
||
<a href="gallery.html">Gallery</a>
|
||
<a href="about.html">About Bryce</a>
|
||
</nav>
|
||
</header>
|
||
|
||
<main>
|
||
<div class="story-block">
|
||
<h2>It Was 1974</h2>
|
||
<p>The air in my grandfather’s workshop was thick with the smell of pine shavings and linseed oil. I was twelve years old, and he handed me a chisel and a block of oak. “Make it fit,” he said. “Not because you have to, but because you want to.”</p>
|
||
<p>I spent three days on that dovetail. The pins were too wide, the tails too tight. I cried when I saw the gap. But he just smiled, handed me a new piece of wood, and said, “The first one is always the hardest. The second one teaches you how to listen.”</p>
|
||
<p>That lesson has shaped every piece I’ve made since. The first joint wasn’t perfect, but it was mine. And that’s what matters.</p>
|
||
</div>
|
||
|
||
<div class="story-block">
|
||
<h2>The Tools of the Trade</h2>
|
||
<p>My grandfather taught me that every tool has a soul. The chisel, the saw, the mallet—they all have their own rhythm. You have to learn to listen to them.</p>
|
||
<p>Here are the tools I still use today:</p>
|
||
<ul>
|
||
<li><strong>Chisel:</strong> For carving the finest details.</li>
|
||
<li><strong>Saw:</strong> For cutting the wood into shape.</li>
|
||
<li><strong>Mallet:</strong> For driving the chisel with precision.</li>
|
||
<li><strong>Sandpaper:</strong> For smoothing the rough edges.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="story-block">
|
||
<h2>Why I Still Make Things</h2>
|
||
<p>In a world that’s obsessed with speed and efficiency, I still choose to make things by hand. It’s not about the money or the fame. It’s about the joy of creating something with your own hands.</p>
|
||
<p>Every piece I make tells a story. And I hope that when you hold one of my creations, you can feel the love and care that went into it.</p>
|
||
</div>
|
||
|
||
<div class="signature">
|
||
— Bryce Cairo, Morganton, NC
|
||
</div>
|
||
</main>
|
||
|
||
<footer>
|
||
© 2023 Bryce Cairo | Handcrafted in the Blue Ridge
|
||
</footer>
|
||
|
||
</body>
|
||
</html> |