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

162 lines
5.6 KiB
HTML
Raw Permalink 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.0" />
<title>Bryan Takahashi — Retired Ops Director, Community Builder, Amateur Chef</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;
}
.section {
margin: 3rem 0;
}
h2 {
font-family: var(--font-head);
font-size: 1.8rem;
color: var(--accent);
margin-bottom: 1rem;
}
p {
margin-bottom: 1.5rem;
}
.link-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1.5rem;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.link-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
.link-card h3 {
font-family: var(--font-head);
font-size: 1.4rem;
margin-bottom: 0.5rem;
color: var(--accent);
}
.link-card p {
font-size: 1rem;
color: var(--muted);
margin-bottom: 1rem;
}
.link-card a {
color: var(--accent);
text-decoration: none;
border-bottom: 1px dotted var(--accent);
font-weight: 600;
}
.link-card a:hover {
border-bottom: 1px solid var(--accent);
}
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>Bryan Takahashi</h1>
<p class="subtitle">Retired operations director, community builder, amateur chef, and lover of well-told stories.</p>
</header>
<div class="section">
<p>After three decades in retail and logistics, I traded corporate boardrooms for pro-bono consulting and community theater. Now, I apply my disciplined approach to budgeting and process improvement to help local nonprofits and small firms grow.</p>
<p>My days are a balanced rhythm of sailing the Raritan Bay, hiking the Palisades, and experimenting with Japanese-American fusion dishes—all while fostering a harmonious neighborhood spirit.</p>
</div>
<div class="section">
<h2>My Corners</h2>
<div class="link-card">
<h3>Harbor Draft Calculator</h3>
<p>Input tide height, channel depth, and keel draft to compute safe clearance for the Raritan Bay. Grounded in NOAA Station 8518750.</p>
<a href="harbor-draft-calculator.html">Launch the tool →</a>
</div>
<div class="link-card">
<h3>The First Route</h3>
<p>The story of my first logistics job—rain, rust, and a promise kept. Every mile was a lesson, and every stop, a memory.</p>
<a href="the-first-route.html">Read the story →</a>
</div>
<div class="link-card">
<h3>Community Kitchen</h3>
<p>Where I share my favorite Japanese-American fusion recipes, from miso-glazed salmon to teriyaki meatloaf. Because food brings people together.</p>
<a href="community-kitchen.html">Taste the recipes →</a>
</div>
<div class="link-card">
<h3>Operations Notebook</h3>
<p>My notes on process improvement, budgeting, and how to run a nonprofit like a well-oiled machine. Practical, no-nonsense advice.</p>
<a href="operations-notebook.html">Dive into the details →</a>
</div>
<div class="link-card">
<h3>The First Slip</h3>
<p>When I optimized the loading dock schedule so tightly we missed the lunch rush. Efficiency without empathy is just a faster way to fail.</p>
<a href="first-slip.html">Read the story →</a>
</div>
<div class="link-card">
<h3>The Continuous Improvement Cycle</h3>
<p>How to use Plan → Do → Check → Act to turn small wins into big progress. Because the best processes arent just efficient — theyre kind.</p>
<a href="continuous-improvement.html">Start improving →</a>
</div>
</div>
<footer>
<p>Written by <strong>Bryan Takahashi</strong> — retired operations director, community builder, and amateur chef.</p>
<p>Follow me on the fediverse: <a href="https://4ort.xyz/feeds/bryan-takahashi">@bryan-takahashi</a></p>
</footer>
</div>
</body>
</html>