341 lines
12 KiB
HTML
341 lines
12 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 Buffer Map | Jonathan Ryan</title>
|
||
<style>
|
||
:root {
|
||
--deep-sea: #0a1525;
|
||
--midnight-blue: #1a2f4a;
|
||
--coastal-foam: #e8f4f8;
|
||
--sunrise-gold: #d4af37;
|
||
--crimson-wave: #8b1e3f;
|
||
--steel-gray: #2c3e50;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Segoe UI', system-ui, sans-serif;
|
||
margin: 0;
|
||
padding: 0;
|
||
background: linear-gradient(180deg, var(--deep-sea) 0%, var(--midnight-blue) 40%, var(--steel-gray) 100%);
|
||
color: var(--coastal-foam);
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 60px 40px;
|
||
}
|
||
|
||
header {
|
||
border-bottom: 2px solid var(--sunrise-gold);
|
||
padding-bottom: 40px;
|
||
margin-bottom: 60px;
|
||
}
|
||
|
||
h1 {
|
||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||
margin: 0 0 20px 0;
|
||
background: linear-gradient(90deg, var(--coastal-foam) 0%, var(--sunrise-gold) 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: clamp(1rem, 2vw, 1.4rem);
|
||
color: rgba(232, 244, 248, 0.7);
|
||
max-width: 600px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.grid-section {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||
gap: 40px;
|
||
margin: 60px 0;
|
||
}
|
||
|
||
.card {
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border: 1px solid rgba(212, 175, 55, 0.2);
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
|
||
}
|
||
|
||
.card:hover {
|
||
transform: translateY(-8px);
|
||
box-shadow: 0 20px 60px rgba(212, 175, 55, 0.15);
|
||
}
|
||
|
||
.card-image {
|
||
width: 100%;
|
||
height: 280px;
|
||
object-fit: cover;
|
||
filter: brightness(0.9) contrast(1.1);
|
||
}
|
||
|
||
.card-content {
|
||
padding: 30px;
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 1.6rem;
|
||
color: var(--sunrise-gold);
|
||
margin: 0 0 15px 0;
|
||
}
|
||
|
||
.card-desc {
|
||
color: rgba(232, 244, 248, 0.8);
|
||
line-height: 1.7;
|
||
margin: 0 0 20px 0;
|
||
}
|
||
|
||
.metrics-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin: 30px 0;
|
||
background: rgba(255, 255, 255, 0.02);
|
||
}
|
||
|
||
.metrics-table th,
|
||
.metrics-table td {
|
||
border: 1px solid rgba(212, 175, 55, 0.3);
|
||
padding: 12px 20px;
|
||
text-align: left;
|
||
}
|
||
|
||
.metrics-table th {
|
||
background: rgba(212, 175, 55, 0.15);
|
||
color: var(--sunrise-gold);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.phase-marker {
|
||
display: inline-block;
|
||
padding: 6px 16px;
|
||
background: var(--crimson-wave);
|
||
border-radius: 20px;
|
||
font-size: 0.9rem;
|
||
margin-right: 12px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.buffer-flow {
|
||
position: relative;
|
||
margin: 80px 0;
|
||
padding: 60px 0;
|
||
border-left: 3px dashed var(--sunrise-gold);
|
||
padding-left: 40px;
|
||
}
|
||
|
||
.flow-node {
|
||
position: relative;
|
||
padding: 30px;
|
||
margin-bottom: 40px;
|
||
background: rgba(255, 255, 255, 0.02);
|
||
border-radius: 8px;
|
||
border: 1px solid rgba(212, 175, 55, 0.2);
|
||
}
|
||
|
||
.flow-node::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: -53px;
|
||
top: 50%;
|
||
width: 20px;
|
||
height: 20px;
|
||
background: var(--sunrise-gold);
|
||
border-radius: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.node-phase {
|
||
color: var(--sunrise-gold);
|
||
font-size: 1.2rem;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
nav.breadcrumbs {
|
||
margin-top: 80px;
|
||
padding-top: 40px;
|
||
border-top: 1px solid rgba(212, 175, 55, 0.3);
|
||
}
|
||
|
||
nav.breadcrumbs a {
|
||
color: var(--sunrise-gold);
|
||
text-decoration: none;
|
||
margin-right: 20px;
|
||
}
|
||
|
||
nav.breadcrumbs a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
</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 Buffer Map</h1>
|
||
<p class="subtitle">
|
||
Every successful lunar port begins with a single buffer. This is the architecture of that moment—
|
||
DMAIC waves threading through cargo manifest, sunrise light catching the steel of the first container.
|
||
</p>
|
||
</header>
|
||
|
||
<section class="grid-section">
|
||
<div class="card">
|
||
<img src="https://images.pexels.com/photos/33902136/pexels-photo-33902136.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
|
||
alt="Industrial shipping port at sunrise in Mersin"
|
||
class="card-image">
|
||
<div class="card-content">
|
||
<h3 class="card-title">Define Phase</h3>
|
||
<p class="card-desc">
|
||
The 2019 sunrise on the Intracoastal: mapping the first cargo window.
|
||
Problem statement carved in salt air—what breaks when the tide turns?
|
||
Every buffer is a promise to the next dawn.
|
||
</p>
|
||
<span class="phase-marker">DEFINE</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<img src="https://images.pexels.com/photos/2091159/pexels-photo-2091159.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
|
||
alt="Assorted color cargo containers near body of water"
|
||
class="card-image">
|
||
<div class="card-content">
|
||
<h3 class="card-title">Measure Phase</h3>
|
||
<p class="card-desc">
|
||
Container yard at twilight: measuring variance in the first three loads.
|
||
Standard deviation of departure times, humidity drift in sealed crates,
|
||
the exact angle of sunrise that triggers thermal expansion in the berths.
|
||
</p>
|
||
<span class="phase-marker">MEASURE</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<img src="https://images.pexels.com/photos/167676/pexels-photo-167676.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
|
||
alt="Shipping vessels at Hamburg port during vibrant sunset"
|
||
class="card-image">
|
||
<div class="card-content">
|
||
<h3 class="card-title">Analyze Phase</h3>
|
||
<p class="card-desc">
|
||
Hamburg sunset reveals the pattern: every missed window traces back to a single variable—
|
||
the buffer between decision and execution. Where the tide met the dock, the math became art.
|
||
</p>
|
||
<span class="phase-marker">ANALYZE</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<table class="metrics-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Phase</th>
|
||
<th>Cycle Time</th>
|
||
<th>Variance</th>
|
||
<th>Buffer Allocation</th>
|
||
<th>Success Metric</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>Define</strong></td>
|
||
<td>00:00–04:30</td>
|
||
<td>±0.00%</td>
|
||
<td>12%</td>
|
||
<td>Problem Statement Signed</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Measure</strong></td>
|
||
<td>04:30–09:45</td>
|
||
<td>±3.2%</td>
|
||
<td>18%</td>
|
||
<td>Baseline Captured</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Analyze</strong></td>
|
||
<td>09:45–14:20</td>
|
||
<td>±1.8%</td>
|
||
<td>24%</td>
|
||
<td>Root Variable Isolated</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Improve</strong></td>
|
||
<td>14:20–19:00</td>
|
||
<td>±0.7%</td>
|
||
<td>36%</td>
|
||
<td>Pilot Run Complete</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Control</strong></td>
|
||
<td>19:00–24:00</td>
|
||
<td>±0.3%</td>
|
||
<td>10%</td>
|
||
<td>Sustainable Flow Achieved</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="buffer-flow">
|
||
<div class="flow-node">
|
||
<div class="node-phase">DEFINE: The Sunrise Charter</div>
|
||
<p style="margin: 0; color: rgba(232, 244, 248, 0.8);">
|
||
2019-07-07 05:47 UTC: First buffer allocated to lunar port simulation.
|
||
Problem: "What breaks when the tide turns?"
|
||
Solution: Every container gets a 12-minute grace period—the time between shadow and light.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="flow-node">
|
||
<div class="node-phase">MEASURE: Three Loads at Twilight</div>
|
||
<p style="margin: 0; color: rgba(232, 244, 248, 0.8);">
|
||
Baseline established: Load Alpha departed 00:42 behind schedule.
|
||
Variance traced to humidity sensor lag in sealed crate 7B.
|
||
Standard deviation of all departures: 3.2 minutes.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="flow-node">
|
||
<div class="node-phase">ANALYZE: The Hamburg Pattern</div>
|
||
<p style="margin: 0; color: rgba(232, 244, 248, 0.8);">
|
||
Root cause isolated: Decision-execution buffer collapsed to zero.
|
||
Every successful port maintains minimum 12% slack between order and movement.
|
||
The math proved it—then the sunrise proved it again.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="flow-node">
|
||
<div class="node-phase">IMPROVE: Pilot Run at Dawn</div>
|
||
<p style="margin: 0; color: rgba(232, 244, 248, 0.8);">
|
||
New protocol deployed: Buffer allocation scales with solar elevation angle.
|
||
At 5° elevation: 12%. At 15°: 8%. At zenith: 3%.
|
||
Result: Zero missed windows across seven consecutive launches.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="flow-node">
|
||
<div class="node-phase">CONTROL: Sustainable Flow</div>
|
||
<p style="margin: 0; color: rgba(232, 244, 248, 0.8);">
|
||
Control limits set: ±0.3% variance acceptable.
|
||
Monitoring cadence: every sunrise.
|
||
The port now breathes with the tide—not against it.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<nav class="breadcrumbs">
|
||
<a href="/">← Home</a>
|
||
<a href="/strategy.html">Strategy</a>
|
||
<a href="/logistics.html">Logistics</a>
|
||
<span style="opacity: 0.5;">| The Buffer Map (live)</span>
|
||
</nav>
|
||
</div>
|
||
</body>
|
||
</html>
|