292 lines
9.5 KiB
HTML
292 lines
9.5 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 Floor Plan | Bryan Mubarak</title>
|
||
|
|
<meta property="og:type" content="website">
|
||
|
|
<meta property="og:title" content="The Floor Plan | Bryan Mubarak">
|
||
|
|
<meta property="og:description" content="The First Lesson: On my opening night in 1996, I stood where the Expeditor stands now. The kitchen was a furnace, the tickets were falling faster than I…">
|
||
|
|
<meta property="og:url" content="https://bryan-mubarak.4ort.net/the-floor-plan.html">
|
||
|
|
<meta name="twitter:card" content="summary">
|
||
|
|
<meta name="description" content="The First Lesson: On my opening night in 1996, I stood where the Expeditor stands now. The kitchen was a furnace, the tickets were falling faster than I…">
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--floor: #1a1a1a;
|
||
|
|
--tile: #2a2a2a;
|
||
|
|
--steel: #4a5a6a;
|
||
|
|
--fire: #d44;
|
||
|
|
--steam: rgba(255,255,255,0.1);
|
||
|
|
--ink: #eee;
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
font-family: 'Courier New', monospace;
|
||
|
|
background: var(--floor);
|
||
|
|
color: var(--ink);
|
||
|
|
overflow-x: hidden;
|
||
|
|
}
|
||
|
|
.header {
|
||
|
|
padding: 4rem 2rem;
|
||
|
|
border-bottom: 1px solid var(--steel);
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
h1 {
|
||
|
|
font-size: 3rem;
|
||
|
|
letter-spacing: -2px;
|
||
|
|
margin: 0;
|
||
|
|
text-transform: uppercase;
|
||
|
|
animation: breathe 4s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
@keyframes breathe {
|
||
|
|
0%, 100% { opacity: 0.9; }
|
||
|
|
50% { opacity: 1; text-shadow: 0 0 20px var(--steam); }
|
||
|
|
}
|
||
|
|
.subtitle {
|
||
|
|
font-size: 1.2rem;
|
||
|
|
color: var(--steel);
|
||
|
|
margin-top: 1rem;
|
||
|
|
max-width: 600px;
|
||
|
|
line-height: 1.6;
|
||
|
|
}
|
||
|
|
.diagram-container {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(12, 1fr);
|
||
|
|
gap: 1px;
|
||
|
|
background: var(--steel);
|
||
|
|
border: 2px solid var(--steel);
|
||
|
|
margin: 3rem auto;
|
||
|
|
max-width: 1400px;
|
||
|
|
aspect-ratio: 4/3;
|
||
|
|
}
|
||
|
|
.station {
|
||
|
|
background: var(--tile);
|
||
|
|
padding: 2rem;
|
||
|
|
position: relative;
|
||
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.station:hover {
|
||
|
|
background: var(--steel);
|
||
|
|
transform: translateY(-2px);
|
||
|
|
box-shadow: 0 4px 20px rgba(212, 68, 68, 0.3);
|
||
|
|
}
|
||
|
|
.station::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 1rem;
|
||
|
|
left: 1rem;
|
||
|
|
width: 2px;
|
||
|
|
height: 2px;
|
||
|
|
background: var(--fire);
|
||
|
|
box-shadow: 0 0 10px var(--fire);
|
||
|
|
}
|
||
|
|
.station-title {
|
||
|
|
font-size: 0.8rem;
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 2px;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
color: var(--steel);
|
||
|
|
}
|
||
|
|
.station-role {
|
||
|
|
font-size: 1.5rem;
|
||
|
|
font-weight: bold;
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
}
|
||
|
|
.station-coord {
|
||
|
|
font-size: 0.7rem;
|
||
|
|
color: var(--steel);
|
||
|
|
font-family: monospace;
|
||
|
|
}
|
||
|
|
/* Grid positions */
|
||
|
|
.expeditor { grid-column: 4 / 9; grid-row: 1; background: #3a3a3a; }
|
||
|
|
.saucier { grid-column: 1 / 4; grid-row: 2; }
|
||
|
|
.grill { grid-column: 9 / 13; grid-row: 2; }
|
||
|
|
.poissonier { grid-column: 1 / 4; grid-row: 3; }
|
||
|
|
.rostissier { grid-column: 4 / 7; grid-row: 3; }
|
||
|
|
.boucher { grid-column: 7 / 10; grid-row: 3; }
|
||
|
|
.entremetier { grid-column: 10 / 13; grid-row: 3; }
|
||
|
|
.garde-manger { grid-column: 1 / 4; grid-row: 4; }
|
||
|
|
.patinier { grid-column: 4 / 7; grid-row: 4; }
|
||
|
|
.boulanger { grid-column: 7 / 10; grid-row: 4; }
|
||
|
|
.chef-partie { grid-column: 10 / 13; grid-row: 4; }
|
||
|
|
.pass-zone {
|
||
|
|
grid-column: 4 / 9;
|
||
|
|
grid-row: 2;
|
||
|
|
background: transparent;
|
||
|
|
border: 2px dashed var(--fire);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: var(--fire);
|
||
|
|
font-size: 0.9rem;
|
||
|
|
letter-spacing: 4px;
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
.pathway {
|
||
|
|
position: absolute;
|
||
|
|
background: linear-gradient(to right, transparent, var(--steam), transparent);
|
||
|
|
height: 2px;
|
||
|
|
transform-origin: left;
|
||
|
|
}
|
||
|
|
.mission-brief {
|
||
|
|
max-width: 800px;
|
||
|
|
margin: 4rem auto;
|
||
|
|
padding: 2rem;
|
||
|
|
border-left: 3px solid var(--fire);
|
||
|
|
background: linear-gradient(to right, rgba(212,68,68,0.05), transparent);
|
||
|
|
}
|
||
|
|
.mission-brief p {
|
||
|
|
line-height: 1.8;
|
||
|
|
margin-bottom: 1.5rem;
|
||
|
|
font-size: 1.1rem;
|
||
|
|
}
|
||
|
|
.citation {
|
||
|
|
font-size: 0.8rem;
|
||
|
|
color: var(--steel);
|
||
|
|
margin-top: 2rem;
|
||
|
|
padding-top: 1rem;
|
||
|
|
border-top: 1px solid var(--steel);
|
||
|
|
}
|
||
|
|
.citation a {
|
||
|
|
color: var(--fire);
|
||
|
|
text-decoration: none;
|
||
|
|
border-bottom: 1px solid var(--fire);
|
||
|
|
}
|
||
|
|
.footer {
|
||
|
|
text-align: center;
|
||
|
|
padding: 4rem;
|
||
|
|
color: var(--steel);
|
||
|
|
font-size: 0.8rem;
|
||
|
|
}
|
||
|
|
@media (max-width: 1200px) {
|
||
|
|
.diagram-container { grid-template-columns: repeat(6, 1fr); }
|
||
|
|
.expeditor { grid-column: 2 / 6; }
|
||
|
|
.saucier { grid-column: 1 / 2; grid-row: 2; }
|
||
|
|
.grill { grid-column: 6 / 7; grid-row: 2; }
|
||
|
|
.poissonier { grid-column: 1 / 2; grid-row: 3; }
|
||
|
|
.rostissier { grid-column: 2 / 4; grid-row: 3; }
|
||
|
|
.boucher { grid-column: 4 / 5; grid-row: 3; }
|
||
|
|
.entremetier { grid-column: 5 / 6; grid-row: 3; }
|
||
|
|
.garde-manger { grid-column: 1 / 2; grid-row: 4; }
|
||
|
|
.patinier { grid-column: 2 / 3; grid-row: 4; }
|
||
|
|
.boulanger { grid-column: 3 / 4; grid-row: 4; }
|
||
|
|
.chef-partie { grid-column: 4 / 6; grid-row: 4; }
|
||
|
|
.pass-zone { grid-column: 2 / 6; }
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="header">
|
||
|
|
<h1>The Floor Plan</h1>
|
||
|
|
<div class="subtitle">
|
||
|
|
The kitchen is not a room—it is a weapon system. Every station is a coordinate, every handoff a trajectory.
|
||
|
|
This is the brigade as I learned it: not from books, but from burns, blood, and the silence before the rush.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="diagram-container">
|
||
|
|
<div class="station expeditor" onclick="focusStation('expeditor')">
|
||
|
|
<div class="station-title">Command Node</div>
|
||
|
|
<div class="station-role">Expeditor</div>
|
||
|
|
<div class="station-coord">x: 6.5 | y: 1.0 | θ: 0°</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="pass-zone">THE PASS</div>
|
||
|
|
|
||
|
|
<div class="station saucier" onclick="focusStation('saucier')">
|
||
|
|
<div class="station-title">Primary Sauce</div>
|
||
|
|
<div class="station-role">Saucier</div>
|
||
|
|
<div class="station-coord">x: 2.0 | y: 2.5 | r: 12"</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="station grill" onclick="focusStation('grill')">
|
||
|
|
<div class="station-title">Heat Source</div>
|
||
|
|
<div class="station-role">Grill Chef</div>
|
||
|
|
<div class="station-coord">x: 11.0 | y: 2.5 | temp: 650°F</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="station poissonier" onclick="focusStation('poissonier')">
|
||
|
|
<div class="station-title">Fish & Fume</div>
|
||
|
|
<div class="station-role">Poissonier</div>
|
||
|
|
<div class="station-coord">x: 2.0 | y: 3.5 | brine: 2.3%</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="station rostissier" onclick="focusStation('rostissier')">
|
||
|
|
<div class="station-title">Roast & Rack</div>
|
||
|
|
<div class="station-role">Rôtisseur</div>
|
||
|
|
<div class="station-coord">x: 5.5 | y: 3.5 | internal: 135°F</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="station boucher" onclick="focusStation('boucher')">
|
||
|
|
<div class="station-title">Butcher's Edge</div>
|
||
|
|
<div class="station-role">Boucher</div>
|
||
|
|
<div class="station-coord">x: 8.5 | y: 3.5 | grain: perpendicular</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="station entremetier" onclick="focusStation('entremetier')">
|
||
|
|
<div class="station-title">Vegetable & Starch</div>
|
||
|
|
<div class="station-role">Entremetier</div>
|
||
|
|
<div class="station-coord">x: 11.0 | y: 3.5 | blanch: 98°C</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="station garde-manger" onclick="focusStation('garde-manger')">
|
||
|
|
<div class="station-title">Cold Station</div>
|
||
|
|
<div class="station-role">Garde Manger</div>
|
||
|
|
<div class="station-coord">x: 2.0 | y: 4.5 | chill: 34°F</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="station patinier" onclick="focusStation('patinier')">
|
||
|
|
<div class="station-title">Game & Bird</div>
|
||
|
|
<div class="station-role">Patissier</div>
|
||
|
|
<div class="station-coord">x: 5.5 | y: 4.5 | dry-age: 21d</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="station boulanger" onclick="focusStation('boulanger')">
|
||
|
|
<div class="station-title">Fire & Flour</div>
|
||
|
|
<div class="station-role">Boulanger</div>
|
||
|
|
<div class="station-coord">x: 8.5 | y: 4.5 | hydration: 72%</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="station chef-partie" onclick="focusStation('chef-partie')">
|
||
|
|
<div class="station-title">Final Assembly</div>
|
||
|
|
<div class="station-role">Chef Partie</div>
|
||
|
|
<div class="station-coord">x: 11.0 | y: 4.5 | plate: clockwise</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mission-brief">
|
||
|
|
<p><strong>The First Lesson:</strong> On my opening night in 1996, I stood where the Expeditor stands now. The kitchen was a furnace, the tickets were falling faster than I could read them, and the Saucier's spoon hit my knuckles—hard. He didn't apologize. He said: "The pass is the only truth. Everything else is noise."</p>
|
||
|
|
|
||
|
|
<p>This diagram is that lesson. Each station is not a title—it is a <em>vector</em>. The Saucier moves in a 12-inch radius around the sauce kettle. The Grill Chef's left foot is always planted on the heat line. The Boucher cuts against the grain because meat lies, but geometry does not.</p>
|
||
|
|
|
||
|
|
<p>Carlos wrote: "the tile that held her weight." That tile is here. This is the floor plan of the miracle.</p>
|
||
|
|
|
||
|
|
<div class="citation">
|
||
|
|
Grounded in the Escoffier Brigade System (Q1367271), adapted through 28 years of floor work.<br>
|
||
|
|
Data twin: <a href="/the-floor-plan.json">the-floor-plan.json</a> — machine-readable station coordinates and tolerances.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="footer">
|
||
|
|
bryan-mubarak.4ort.net | The First Table Series<br>
|
||
|
|
Built on the geometry of service
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function focusStation(station) {
|
||
|
|
const stations = document.querySelectorAll('.station');
|
||
|
|
stations.forEach(s => s.style.opacity = '0.5');
|
||
|
|
event.currentTarget.style.opacity = '1';
|
||
|
|
console.log(`Focused: ${station.toUpperCase()} — engage protocol`);
|
||
|
|
}
|
||
|
|
// Auto-focus on load
|
||
|
|
window.onload = () => {
|
||
|
|
const expeditor = document.querySelector('.expeditor');
|
||
|
|
expeditor?.click();
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|