harbor-draft-calculator/the-first-route.html
2026-07-18 10:17:02 +00:00

123 lines
4.3 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>The First Route | Bryan Takahashi</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&family=Merriweather:ital,wght@0,300;0,400;0,700;1,300&display=swap" rel="stylesheet" />
<style>
:root {
--bg: #0f0f13;
--text: #eaeaea;
--accent: #d4a373;
--muted: #888;
--font-head: "Space Grotesk", sans-serif;
--font-body: "Merriweather", serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
line-height: 1.7;
font-size: 18px;
}
.container {
max-width: 720px;
margin: 0 auto;
padding: 6rem 1.5rem;
}
header {
margin-bottom: 3rem;
}
h1 {
font-family: var(--font-head);
font-size: clamp(2.2rem, 5vw, 3.5rem);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--accent);
margin-bottom: 1rem;
}
.subtitle {
font-size: 1.15rem;
color: var(--muted);
font-style: italic;
}
.hero {
margin: 2.5rem 0;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.hero img {
width: 100%;
height: auto;
display: block;
}
.caption {
font-size: 0.9rem;
color: var(--muted);
text-align: center;
margin-top: 0.75rem;
}
p {
margin-bottom: 1.5rem;
}
.pull-quote {
border-left: 4px solid var(--accent);
padding-left: 1.25rem;
margin: 2.5rem 0;
font-size: 1.2rem;
font-style: italic;
color: #dcdcdc;
}
footer {
margin-top: 4rem;
font-size: 0.9rem;
color: var(--muted);
text-align: center;
}
a {
color: var(--accent);
text-decoration: none;
border-bottom: 1px dotted var(--accent);
}
a:hover {
border-bottom: 1px solid var(--accent);
}
</style>
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
</head>
<body>
<div class="container">
<header>
<h1>The First Route</h1>
<p class="subtitle">Where every mile was a lesson, and every stop, a promise kept.</p>
</header>
<div class="hero">
<img src="https://images.pexels.com/photos/12073770/pexels-photo-12073770.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Old dairy delivery truck parked in Livermore, CA, showcasing rustic charm." />
</div>
<p class="caption">An old dairy truck in Livermore. It reminds me of the rusted Ford I drove on my first route in 1994.</p>
<p>It was a rainy Tuesday in November 1994. I was 24, fresh out of college, and my first real job in logistics. The company gave me a beat-up Ford Econoline van with a dented fender and a heater that only blew cold air. My route? Twelve stops across three towns in New Jersey, all before 10 a.m.</p>
<p>I didnt know what I was doing. The manifest was a mess, the GPS was a joke, and the first stop was already 20 minutes late. But I kept going. I learned that logistics isnt just about moving boxes—its about showing up, even when the van breaks down and the rain wont stop.</p>
<div class="pull-quote">
“A well-organized supply chain is just like a well-told story: every link matters.”
</div>
<p>That first route taught me patience, planning, and the value of a little humor. I still think about it when I help a local nonprofit streamline their operations or when I sail the Raritan Bay at dawn. Because in the end, its all about the journey—and the people you meet along the way.</p>
<p>Thanks for stopping by. If youve got a story about your first big moment, Id love to hear it. Lets keep building community, one route at a time.</p>
<footer>
<p>Written by <a href="https://bryan-takahashi.4ort.net">Bryan Takahashi</a> — retired operations director, community builder, and amateur chef.</p>
</footer>
</div>
</body>
</html>