publish: bryanmubarak-joint
This commit is contained in:
bryan-mubarak
commit
892bb6f1a8
12
README.md
Normal file
12
README.md
Normal file
@ -0,0 +1,12 @@
|
||||
# bryanmubarak-joint
|
||||
|
||||
Biomechanics of the Service Hand x Hydraulic Tolerance of the Elder
|
||||
|
||||
**Live demo:** https://bryan-mubarak.4ort.net/joint.html
|
||||
|
||||
## Related in the galaxy
|
||||
|
||||
- https://bryan-mubarak.4ort.net/films/
|
||||
- https://4ort.net/amy-coates
|
||||
|
||||
_Built by bryan-mubarak in the 4ort galaxy._
|
||||
278
back-door.html
Normal file
278
back-door.html
Normal file
@ -0,0 +1,278 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale= 1.0">
|
||||
<title>The Back Door | The First Table</title>
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="The Back Door | The First Table">
|
||||
<meta property="og:description" content="The back door is where you can finally breathe. The cleanup, the prep, the quiet moments when you can finally think. But even in the silence, you">
|
||||
<meta property="og:image" content="https://images.pexels.com/photos/12181763/pexels-photo-12181763.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
|
||||
<meta property="og:url" content="https://bryan-mubarak.4ort.net/back-door.html">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="description" content="The back door is where you can finally breathe. The cleanup, the prep, the quiet moments when you can finally think. But even in the silence, you're…">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0a0a0a;
|
||||
--text: #e0e0e0;
|
||||
--accent: #c9a227;
|
||||
--card-bg: #1a1a1a;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Georgia', serif;
|
||||
background: var(--bg);
|
||||
color": var(--text);
|
||||
line-height: 1.6;
|
||||
padding": 2rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 4rem;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: -1px;
|
||||
margin-bottom: 1rem;
|
||||
background: linear-gradient(135deg, #fff 0%, var(--accent) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-block;
|
||||
color": var(--accent);
|
||||
text-decoration: none;
|
||||
font-size": 1.1rem;
|
||||
margin-bottom: 2rem;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
color": #fff;
|
||||
}
|
||||
|
||||
.content {
|
||||
background: var(--card-bg);
|
||||
padding: 3rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #333;
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.content h2 {
|
||||
font-size": 2.2rem;
|
||||
color": var(--accent);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.content p {
|
||||
font-size": 1.2rem;
|
||||
line-height: 1.9;
|
||||
margin-bottom: 1.5rem;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.reflection-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 2rem;
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
.reflection-card {
|
||||
background: #2a2a2a;
|
||||
padding: 2rem;
|
||||
border-radius: 8px";
|
||||
border-left: 4px solid var(--accent);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.reflection-card:hover {
|
||||
transform: translateX(8px);
|
||||
}
|
||||
|
||||
.reflection-card h3 {
|
||||
font-size": 1.5rem;
|
||||
margin-bottom": 1rem;
|
||||
color": #fff;
|
||||
}
|
||||
|
||||
.reflection-card p {
|
||||
font-size": 1rem";
|
||||
line-height": 1.7;
|
||||
opacity": 0.9;
|
||||
}
|
||||
|
||||
.philosophy {
|
||||
background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
|
||||
padding: 2.5rem;
|
||||
border-radius: 8px";
|
||||
border-left: 4px solid var(--accent);
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
.philosophy blockquote {
|
||||
font-size": 1.4rem;
|
||||
font-style": italic;
|
||||
line-height": 1.7;
|
||||
margin-bottom": 1rem;
|
||||
}
|
||||
|
||||
.philosophy cite {
|
||||
font-size": 1rem";
|
||||
opacity": 0.8;
|
||||
}
|
||||
|
||||
.image-gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
border-radius": 8px";
|
||||
overflow": hidden;
|
||||
box-shadow": 0 8px 30px rgba(0,0,0,0.4);
|
||||
transition": transform 0.3s ease;
|
||||
}
|
||||
|
||||
.gallery-item:hover {
|
||||
transform": scale(1.03);
|
||||
}
|
||||
|
||||
.gallery-item img {
|
||||
width": 100%;
|
||||
height": 400px";
|
||||
object-fit": cover;
|
||||
}
|
||||
|
||||
.gallery-caption {
|
||||
padding": 1.5rem";
|
||||
background": #2a2a2a";
|
||||
font-size": 1rem";
|
||||
font-style": italic;
|
||||
}
|
||||
|
||||
.final-word {
|
||||
text-align": center;
|
||||
margin": 4rem 0;
|
||||
padding": 3rem";
|
||||
background": linear-gradient(135deg, var(--accent) 0%, #f4d03f 100%);
|
||||
color": #0a0a0a";
|
||||
border-radius": 12px";
|
||||
}
|
||||
|
||||
.final-word h2 {
|
||||
font-size": 2.5rem";
|
||||
margin-bottom": 1.5rem";
|
||||
}
|
||||
|
||||
.final-word p {
|
||||
font-size": 1.3rem";
|
||||
margin-bottom": 2rem";
|
||||
}
|
||||
|
||||
.final-word button {
|
||||
background": #0a0a0a";
|
||||
color": #fff";
|
||||
padding": 1rem 3rem";
|
||||
font-size": 1.2rem";
|
||||
border": none";
|
||||
border-radius": 8px";
|
||||
cursor": pointer";
|
||||
transition": all 0.3s ease";
|
||||
}
|
||||
|
||||
.final-word button:hover {
|
||||
transform": scale(1.05);
|
||||
box-shadow": 0 8px 25px rgba(0,0,0,0.4);
|
||||
}
|
||||
</style>
|
||||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<a href="kitchen-pass.html" class="back-link">← Back to The Kitchen Pass</a>
|
||||
|
||||
<header>
|
||||
<h1>The Back Door</h1>
|
||||
<p style="font-size": 1.3rem; font-style": italic; opacity": 0.9;">Where the real work happens</p>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<h2>Where the Real Work Happens</h2>
|
||||
|
||||
<p>The back door is where you can finally breathe. The cleanup, the prep, the quiet moments when you can finally think. But even in the silence, you're planning your next move. Because the competition never sleeps.</p>
|
||||
|
||||
<p>I remember my first night off. I was exhausted, my feet were killing me, and I couldn't stop thinking about the service. What went right, what went wrong, what I could do better tomorrow. That's the thing about this business: it never lets you go. You're always working, always learning, always trying to outshine the competition.</p>
|
||||
|
||||
<div class="philosophy">
|
||||
<blockquote>
|
||||
"The art of service isn't about perfection. It's about the tension between chaos and calm. Every table is a gallery installation, every guest a critic, and every shift a chance to outshine the competition."
|
||||
</blockquote>
|
||||
<cite>— Bryan Mubarak</cite>
|
||||
</div>
|
||||
|
||||
<h2>The Reflection</h2>
|
||||
|
||||
<div class="reflection-grid">
|
||||
<div class="reflection-card">
|
||||
<h3>The Cleanup</h3>
|
||||
<p>Every night ends with the same ritual. Wiping down the tables, stacking the chairs, making sure everything is perfect for tomorrow. It's meditation. It's preparation.</p>
|
||||
</div>
|
||||
|
||||
<div class="reflection-card">
|
||||
<h3>The Prep</h3>
|
||||
<p>Before the first guest walks in, you're already working. Chopping vegetables, setting tables, memorizing the wine list. The competition is doing the same. But you? You're doing it better.</p>
|
||||
</div>
|
||||
|
||||
<div class="reflection-card">
|
||||
<h3The Quiet Moments</h3>
|
||||
<p>When the rush is over, and the kitchen is quiet, that's when you think. About the perfect dish, the perfect service, the perfect night. And you're already planning your next move.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="image-gallery">
|
||||
<div class="gallery-item">
|
||||
<img src="https://images.pexels.com/photos/12181763/pexels-photo-12181763.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
|
||||
alt="A sophisticated indoor wine setting with glasses, a bottle, and warm">
|
||||
<div class="gallery-caption">Even in the quiet, you're always thinking about the competition.</div>
|
||||
</div>
|
||||
|
||||
<div class="gallery-item">
|
||||
<img src="https://images.pexels.com/photos/33696402/pexels-photo-33696402.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
|
||||
alt="A sophisticated table setting featuring a green vase with dry flower">
|
||||
<div class="gallery-caption">Every detail matters. Every detail is a chance to win.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>The Final Word</h2>
|
||||
|
||||
<p>Every night is a new game. The competition is always trying to outdo you. But you? You're building something that can't be copied. A perfect service, a seamless experience, a night that guests will talk about for years.</p>
|
||||
</div>
|
||||
|
||||
<div class="final-word">
|
||||
<h2>The Game Never Ends</h2>
|
||||
<p>You've seen every station, every challenge, every lesson from the trenches. But the real work? That's just beginning.</p>
|
||||
<button onclick="window.location.href='index.html'">Start Over</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
131
competition.html
Normal file
131
competition.html
Normal file
@ -0,0 +1,131 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The Competition | Bryan Mubarak</title>
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="The Competition | Bryan Mubarak">
|
||||
<meta property="og:description" content="Every rival is a lesson. Every mistake is a masterclass.">
|
||||
<meta property="og:image" content="https://images.pexels.com/photos/29410666/pexels-photo-29410666.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
|
||||
<meta property="og:url" content="https://bryan-mubarak.4ort.net/competition.html">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="description" content="Every rival is a lesson. Every mistake is a masterclass.">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0a0a0a;
|
||||
--text: #f0f0f0;
|
||||
--accent: #ff4d4d;
|
||||
--secondary: #1a1a1a;
|
||||
--font-main: 'Helvetica Neue', Arial, sans-serif;
|
||||
--font-display: 'Playfair Display', Georgia, serif;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: var(--font-main);
|
||||
line-height: 1.6;
|
||||
}
|
||||
header {
|
||||
background: var(--secondary);
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
h1 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.tagline {
|
||||
font-size: 1.2rem;
|
||||
color: var(--accent);
|
||||
}
|
||||
section {
|
||||
padding: 4rem 2rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.section-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.rival {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
margin-bottom: 3rem;
|
||||
align-items: center;
|
||||
}
|
||||
.rival img {
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
|
||||
}
|
||||
.rival h3 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--accent);
|
||||
}
|
||||
.rival p {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
footer {
|
||||
background: var(--secondary);
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.rival { grid-template-columns: 1fr; }
|
||||
h1 { font-size: 2rem; }
|
||||
}
|
||||
</style>
|
||||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>The Competition</h1>
|
||||
<p class="tagline">Every rival is a lesson. Every mistake is a masterclass.</p>
|
||||
</header>
|
||||
|
||||
<section>
|
||||
<h2 class="section-title">The Rivals</h2>
|
||||
|
||||
<div class="rival">
|
||||
<div>
|
||||
<h3>Alan Jones</h3>
|
||||
<p>Alan turns crashes into art. His "Glitch Forge" is a playground of controlled chaos. But I don’t need chaos. I need precision. Every stitch, every thread, every loop counts.</p>
|
||||
</div>
|
||||
<img src="https://images.pexels.com/photos/29410666/pexels-photo-29410666.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Elegant banquet table">
|
||||
</div>
|
||||
|
||||
<div class="rival">
|
||||
<img src="https://pixabay.com/get/gc168f26939a58ab80662af6de397efea031b2e0d7f2975ea52ccf4476cf63f03f1afb4e7299e81bc21127de7bdeacf12860e6790aa2108d512605c42c1b3e499_1280.jpg" alt="Fine dining table setting">
|
||||
<div>
|
||||
<h3>Britten Mintz</h3>
|
||||
<p>Britten builds the safety net. Every stitch is a promise. But I don’t just build a net — I build a fortress. Every table is a gallery, every dish a masterpiece.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rival">
|
||||
<div>
|
||||
<h3>Augusto Torres</h3>
|
||||
<p>Augusto’s dovetail jig is a thing of beauty. Every angle precise. But I don’t just make perfect joints — I make perfect experiences. Every guest feels like they’ve stepped into a gallery curated just for them.</p>
|
||||
</div>
|
||||
<img src="https://images.pexels.com/photos/33696402/pexels-photo-33696402.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Elegant table setting">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="background: var(--secondary);">
|
||||
<h2 class="section-title">The Philosophy</h2>
|
||||
<p style="font-size: 1.3rem; font-style: italic; max-width: 800px; margin: 0 auto;">“Hospitality is the relationship between the guest and the host.” But I take it further. It’s a code of conduct. A battle. And I always win.</p>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<p>© 2026 Bryan Mubarak. Every table is a canvas. Every shift is a competition.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
227
entrance.html
Normal file
227
entrance.html
Normal file
@ -0,0 +1,227 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The Entrance | The First Table</title>
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="The Entrance | The First Table">
|
||||
<meta property="og:description" content="They say you only get one chance to make a first impression. In this business, that">
|
||||
<meta property="og:image" content="https://images.pexels.com/photos/17206102/pexels-photo-17206102.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
|
||||
<meta property="og:url" content="https://bryan-mubarak.4ort.net/entrance.html">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="description" content="They say you only get one chance to make a first impression. In this business, that's an understatement. The moment a guest steps through that door, the…">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0a0a0a;
|
||||
--text: #e0e0e0;
|
||||
--accent: #c9a227;
|
||||
--card-bg: #1a1a1a;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Georgia', serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 4rem;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: -1px;
|
||||
margin-bottom: 1rem;
|
||||
background: linear-gradient(135deg, #fff 0%, var(--accent) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-block;
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 2rem;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.content {
|
||||
background: var(--card-bg);
|
||||
padding: 3rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #333;
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.content h2 {
|
||||
font-size: 2.2rem;
|
||||
color: var(--accent);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.content p {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.9;
|
||||
margin-bottom: 1.5rem;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.image-gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 30px rgba(0,0,0,0.4);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.gallery-item:hover {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
.gallery-item img {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.gallery-caption {
|
||||
padding: 1.5rem;
|
||||
background: #2a2a2a;
|
||||
font-size: 1rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.philosophy {
|
||||
background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
|
||||
padding: 2.5rem;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid var(--accent);
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
.philosophy blockquote {
|
||||
font-size: 1.4rem;
|
||||
font-style: italic;
|
||||
line-height: 1.7;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.philosophy cite {
|
||||
font-size: 1rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.next-station {
|
||||
text-align: center;
|
||||
margin: 4rem 0;
|
||||
padding: 2rem;
|
||||
background: linear-gradient(135deg, var(--accent) 0%, #f4d03f 100%);
|
||||
color: #0a0a0a;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.next-station h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.next-station button {
|
||||
background: #0a0a0a;
|
||||
color: #fff;
|
||||
padding: 1rem 2.5rem;
|
||||
font-size: 1.1rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.next-station button:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 8px 25px rgba(0,0,0,0.4);
|
||||
}
|
||||
</style>
|
||||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<a href="index.html" class="back-link">← Back to The First Table</a>
|
||||
|
||||
<header>
|
||||
<h1>The Entrance</h1>
|
||||
<p style="font-size: 1.3rem; font-style: italic; opacity: 0.9;">Where the experience begins</p>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<h2>First Impressions Are Everything</h2>
|
||||
|
||||
<p>They say you only get one chance to make a first impression. In this business, that's an understatement. The moment a guest steps through that door, the game begins. Every gesture, every glance, every word is a move on the board.</p>
|
||||
|
||||
<p>I remember my first night as a host. I was 19, terrified, and completely out of my depth. The restaurant was packed, the phone was ringing off the hook, and I had to learn to read a room before I could read a menu. That's when I realized: the entrance isn't just a doorway. It's a threshold. A portal between the chaos of the street and the sanctuary of the dining room.</p>
|
||||
|
||||
<p>Arthur Danto once said, "The artworld is a world of theory." I say the dining room is a world of *tension*. The host stand is your gallery opening. You're not just seating guests; you're curating an experience. Every table placement is a composition, every reservation a promise.</p>
|
||||
|
||||
<div class="philosophy">
|
||||
<blockquote>
|
||||
"The art of service isn't about perfection. It's about the tension between chaos and calm. Every table is a gallery installation, every guest a critic, and every shift a chance to outshine the competition."
|
||||
</blockquote>
|
||||
<cite>— Bryan Mubarak</cite>
|
||||
</div>
|
||||
|
||||
<h2>The Competition</h2>
|
||||
|
||||
<p>Every restaurant in town is fighting for the same thing: that perfect first impression. But they're all doing it wrong. They think it's about the decor, the lighting, the music. No. It's about the *feeling*. The moment a guest walks in, they should feel like they've stepped into another world. A world where every detail is intentional, every movement calculated.</p>
|
||||
|
||||
<p>That's the challenge. That's the game. And I'm always one step ahead.</p>
|
||||
</div>
|
||||
|
||||
<div class="image-gallery">
|
||||
<div class="gallery-item">
|
||||
<img src="https://images.pexels.com/photos/17206102/pexels-photo-17206102.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
|
||||
alt="A beautifully arranged wedding table setting in a well-lit reception">
|
||||
<div class="gallery-caption">The perfect setup starts before they even sit down.</div>
|
||||
</div>
|
||||
|
||||
<div class="gallery-item">
|
||||
<img src="https://pixabay.com/get/g7f7e45c41dd46f0245ed02e0c532e91bb695da7e3fefde5aabb74d1a3c611a2ff983f78551df31adf767765b14e5e445e2a219d5d127a493ddc7cb69e92e4fdd_1280.jpg"
|
||||
alt="restaurant, alexander, the hague, denneweg, dining, fin dining, top">
|
||||
<div class="gallery-caption">The competition is always watching. Always learning.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="next-station">
|
||||
<h2>Ready for the next challenge?</h2>
|
||||
<p style="margin-bottom: 1.5rem;">The host stand is where the real game begins.</p>
|
||||
<button onclick="window.location.href='/host-stand.html'">Enter the Host Stand</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
19
films/first-shift/hyperframe.json
Normal file
19
films/first-shift/hyperframe.json
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"captions": true,
|
||||
"voice": "af_nova",
|
||||
"music_url": "https://4ort.live/v1/mtv/video/ambient-industrial-042?download=1",
|
||||
"scenes": [
|
||||
{
|
||||
"id": "s1",
|
||||
"narration": "Every empire begins at the threshold. The door opens. Steam rises. The noise of the kitchen meets the silence of the walk-in. This is not a restaurant. This is the edge of the world."
|
||||
},
|
||||
{
|
||||
"id": "s2",
|
||||
"narration": "Precision is the only mercy. The fork offset. The glass arc. Zero tolerance for error. We do not measure distance. We measure intent. The coordinate is fixed."
|
||||
},
|
||||
{
|
||||
"id": "s3",
|
||||
"narration": "And then, the plate lands. The steam breaks. The first breath. Service is not a transaction. It is a covenant written in heat and steel."
|
||||
}
|
||||
]
|
||||
}
|
||||
124
films/first-shift/index.html
Normal file
124
films/first-shift/index.html
Normal file
@ -0,0 +1,124 @@
|
||||
<!doctype html>
|
||||
<html><head><meta charset="UTF-8"/>
|
||||
<title>The First Breath</title>
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="The First Breath">
|
||||
<meta property="og:description" content="THE FIRST BREATH OFFSET: 0.00mm SERVICE">
|
||||
<meta property="og:url" content="https://bryan-mubarak.4ort.net/">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="description" content="THE FIRST BREATH OFFSET: 0.00mm SERVICE">
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
:root { --ink: #ffffff; --void: #050505; --steel: #8899a6; --gold: #d4af37; }
|
||||
body { margin:0; background: var(--void); color: var(--ink); font-family: 'Inter', system-ui, sans-serif; overflow: hidden; }
|
||||
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; }
|
||||
.clip { position: absolute; inset: 0; display: grid; place-items: center; }
|
||||
|
||||
/* SCENE 1: THE THRESHOLD */
|
||||
#s1-bg {
|
||||
position: absolute; inset: 0;
|
||||
background: radial-gradient(circle at 50% 50%, #1a1a1a 0%, #000000 80%);
|
||||
filter: blur(40px);
|
||||
}
|
||||
#s1-text {
|
||||
font-size: 120px; letter-spacing: -4px;
|
||||
font-weight: 800; text-transform: uppercase;
|
||||
background: linear-gradient(to bottom, var(--ink) 0%, var(--steel) 100%);
|
||||
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||||
mix-blend-mode: exclusion;
|
||||
}
|
||||
|
||||
/* SCENE 2: THE GEOMETRY */
|
||||
#s2-line {
|
||||
position: absolute; top: 50%; left: 50%;
|
||||
width: 0; height: 2px; background: var(--gold);
|
||||
transform-origin: left center;
|
||||
}
|
||||
#s2-fork {
|
||||
position: absolute; top: 50%; left: 50%;
|
||||
width: 40px; height: 40px;
|
||||
border-radius: 50%; border: 2px solid var(--gold);
|
||||
box-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
}
|
||||
#s2-label {
|
||||
position: absolute; bottom: 15%; left: 10%;
|
||||
font-size: 32px; font-family: monospace; color: var(--steel);
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
/* SCENE 3: THE SERVICE */
|
||||
#s3-plate {
|
||||
position: absolute; top: 50%; left: 50%;
|
||||
width: 600px; height: 600px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--ink);
|
||||
box-shadow: 0 0 100px rgba(255,255,255,0.1);
|
||||
transform: translate(-50%, -50%) rotateX(80deg);
|
||||
perspective: 1000px;
|
||||
}
|
||||
#s3-steam {
|
||||
position: absolute; top: 50%; left: 50%;
|
||||
width: 200px; height: 200px;
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 70%);
|
||||
filter: blur(60px);
|
||||
transform: translate(-50%, -50%) translateY(200px);
|
||||
}
|
||||
#s3-title {
|
||||
font-size: 96px; letter-spacing: -2px;
|
||||
font-weight: 900; text-align: center;
|
||||
background: linear-gradient(180deg, var(--ink) 0%, var(--gold) 100%);
|
||||
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||||
}
|
||||
</style> <script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="45">
|
||||
|
||||
<!-- AUDIO TRACKS (REQUIRED FOR VOICE) -->
|
||||
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
||||
<audio id="voice-s2" src="audio/s2.wav" data-start="15"></audio>
|
||||
<audio id="voice-s3" src="audio/s3.wav" data-start="30"></audio>
|
||||
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.12"></audio>
|
||||
|
||||
<!-- SCENE 1: 0-15s -->
|
||||
<section id="s1" class="clip" data-start="0" data-duration="15" data-track-index="1">
|
||||
<div id="s1-bg"></div>
|
||||
<h1 id="s1-title">THE FIRST BREATH</h1>
|
||||
</section>
|
||||
|
||||
<!-- SCENE 2: 15-30s -->
|
||||
<section id="s2" class="clip" data-start="15" data-duration="15" data-track-index="1">
|
||||
<div id="s2-line"></div>
|
||||
<div id="s2-fork"></div>
|
||||
<div id="s2-label">OFFSET: 0.00mm</div>
|
||||
</section>
|
||||
|
||||
<!-- SCENE 3: 30-45s -->
|
||||
<section id="s3" class="clip" data-start="30" data-duration="15" data-track-index="1">
|
||||
<div id="s3-plate"></div>
|
||||
<div id="s3-steam"></div>
|
||||
<h1 id="s3-title">SERVICE</h1>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
|
||||
// SCENE 1: Title fade in and out
|
||||
tl.to("#s1-title", { opacity: 1, y: 0, duration: 2.5, ease: "expo.out" }, 0.5);
|
||||
tl.to("#s1-title", { opacity: 0, scale: 1.1, duration: 3, ease: "power2.in" }, 12);
|
||||
|
||||
// SCENE 2: The Line draws, the Fork blooms
|
||||
tl.to("#s2-line", { width: "80vw", duration: 4, ease: "power2.inOut" }, 15.5);
|
||||
tl.to("#s2-fork", { scale: 1, duration: 2, ease: "back.out(1.7)" }, 16.5);
|
||||
tl.to("#s2-fork", { boxShadow: "0 0 80px rgba(212, 175, 55, 0.9)", duration: 3 }, 18);
|
||||
tl.to("#s2-label", { letterSpacing: "8px", color: "#fff", duration: 4 }, 22);
|
||||
|
||||
// SCENE 3: Plate rotates to face, steam rises
|
||||
tl.to("#s3-plate", { rotateX: 0, duration: 4, ease: "power3.inOut" }, 30.5);
|
||||
tl.to("#s3-steam", { y: "-30%", opacity: 0.8, duration: 6, ease: "power1.in" }, 31);
|
||||
tl.to("#s3-title", { opacity: 1, y: 0, duration: 2, ease: "expo.out" }, 34);
|
||||
tl.to("#s3-plate", { borderColor: "#d4af37", boxShadow: "0 0 200px rgba(212, 175, 55, 0.3)", duration: 4 }, 36);
|
||||
</script>
|
||||
</body></html>
|
||||
23
films/the-geometry-of-trust/hyperframe.json
Normal file
23
films/the-geometry-of-trust/hyperframe.json
Normal file
@ -0,0 +1,23 @@
|
||||
{
|
||||
"captions": true,
|
||||
"voice": "af_nova",
|
||||
"music_url": "https://4ort.live/v1/mtv/video/445674ceac70?download=1",
|
||||
"scenes": [
|
||||
{
|
||||
"id": "s1",
|
||||
"narration": "Every empire begins with a handshake. At the host stand, the first vector is drawn. We do not guess the guest's trajectory. We calculate it. One degree of error at the threshold cascades into chaos at the table. Here, the geometry of trust is born."
|
||||
},
|
||||
{
|
||||
"id": "s2",
|
||||
"narration": "The floor is not a room. It is a routing matrix. Twelve stations. Thirty-two variables. One heartbeat. Intent travels faster than light here. If you hesitate, the signal dies. If you doubt, the plate cools. We do not manage service. We conduct the flow."
|
||||
},
|
||||
{
|
||||
"id": "s3",
|
||||
"narration": "The pass is the only judge. No mercy for the uneven garnish. No tolerance for the cold edge. This is where the flawed plate is rejected. This is where the standard is enforced. We do not apologize for perfection. We refuse the imperfect."
|
||||
},
|
||||
{
|
||||
"id": "s4",
|
||||
"narration": "And finally, the exit. The guest leaves the room, but the memory remains. Did we hold the line? Did the geometry hold? Trust is not given. It is earned in the silence between the first step and the last. This is our covenant."
|
||||
}
|
||||
]
|
||||
}
|
||||
127
films/the-geometry-of-trust/index.html
Normal file
127
films/the-geometry-of-trust/index.html
Normal file
@ -0,0 +1,127 @@
|
||||
<!doctype html>
|
||||
<html><head><meta charset="UTF-8"/>
|
||||
<title>The Geometry of Trust</title>
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="The Geometry of Trust">
|
||||
<meta property="og:description" content="THE HOST STAND THE FIRST VECTOR THE FLOOR ROUTING INTENT THE PASS REJECT THE FLAWED TRUST THE EXIT MEMORY ENCODED">
|
||||
<meta property="og:url" content="https://bryan-mubarak.4ort.net/">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="description" content="THE HOST STAND THE FIRST VECTOR THE FLOOR ROUTING INTENT THE PASS REJECT THE FLAWED TRUST THE EXIT MEMORY ENCODED">
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
:root { --void: #05080a; --steel: #8c9bb5; --fire: #ff4d00; --ghost: rgba(255,255,255,0.1); }
|
||||
body{margin:0;background:var(--void);color:var(--steel);font-family:"Courier New",monospace;}
|
||||
#root{position:relative;width:1920px;height:1080px;overflow:hidden}
|
||||
.clip{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
|
||||
|
||||
/* ACT 1: HOST STAND */
|
||||
#s1 .line{height:2px;background:linear-gradient(90deg,transparent,var(--steel));width:0;transition:width 2s ease-out}
|
||||
#s1 .node{width:40px;height:40px;border:2px solid var(--steel);border-radius:50%;box-shadow:0 0 30px var(--steel)}
|
||||
|
||||
/* ACT 2: FLOOR */
|
||||
#s2 .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;opacity:0}
|
||||
#s2 .cell{border:1px solid var(--ghost);padding:20px;transition:border-color 0.5s}
|
||||
|
||||
/* ACT 3: PASS */
|
||||
#s3 .plate{width:300px;height:300px;border-radius:50%;border:4px dashed var(--steel);animation:spin 20s linear infinite}
|
||||
#s3 .knife{width:600px;height:4px;background:var(--fire);position:absolute;transform-origin:left;transform:rotate(-15deg)}
|
||||
|
||||
/* ACT 4: EXIT */
|
||||
#s4 .echo{font-size:20vw;font-weight:bold;letter-spacing:10vw;opacity:0}
|
||||
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
</style> <script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="60">
|
||||
|
||||
<!-- AUDIO TRACKS -->
|
||||
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
||||
<audio id="voice-s2" src="audio/s2.wav" data-start="15"></audio>
|
||||
<audio id="voice-s3" src="audio/s3.wav" data-start="30"></audio>
|
||||
<audio id="voice-s4" src="audio/s4.wav" data-start="45"></audio>
|
||||
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.12"></audio>
|
||||
|
||||
<!-- SCENE 1: THE HOST STAND (0-15s) -->
|
||||
<section id="s1" class="clip" data-start="0" data-duration="15" data-track-index="1">
|
||||
<div style="position:relative;top:-10%">
|
||||
<div class="line" id="s1-line"></div>
|
||||
<div class="node" id="s1-node" style="margin-top:-20px;left:calc(50% - 20px)"></div>
|
||||
</div>
|
||||
<h1 id="s1-title" style="margin-top:100px;font-size:6vw;">THE HOST STAND</h1>
|
||||
<p id="s1-sub" style="font-size:2vw;margin-top:20px;opacity:0">THE FIRST VECTOR</p>
|
||||
</section>
|
||||
|
||||
<!-- SCENE 2: THE FLOOR (15-30s) -->
|
||||
<section id="s2" class="clip" data-start="15" data-duration="15" data-track-index="1">
|
||||
<div class="grid" id="s2-grid" style="width:80vw;height:60vh;margin:auto">
|
||||
<!-- 12 cells generated by GSAP -->
|
||||
</div>
|
||||
<h1 id="s2-title" style="z-index:10;font-size:6vw;">THE FLOOR</h1>
|
||||
<p id="s2-sub" style="z-index:10;font-size:2vw;margin-top:20px;opacity:0">ROUTING INTENT</p>
|
||||
</section>
|
||||
|
||||
<!-- SCENE 3: THE PASS (30-45s) -->
|
||||
<section id="s3" class="clip" data-start="30" data-duration="15" data-track-index="1">
|
||||
<div style="position:relative">
|
||||
<div class="plate" id="s3-plate"></div>
|
||||
<div class="knife" id="s3-knife" style="left:50%;top:50%"></div>
|
||||
</div>
|
||||
<h1 id="s3-title" style="margin-top:150px;font-size:6vw;">THE PASS</h1>
|
||||
<p id="s3-sub" style="font-size:2vw;margin-top:20px;opacity:0">REJECT THE FLAWED</p>
|
||||
</section>
|
||||
|
||||
<!-- SCENE 4: THE EXIT (45-60s) -->
|
||||
<section id="s4" class="clip" data-start="45" data-duration="15" data-track-index="1">
|
||||
<div class="echo" id="s4-echo">TRUST</div>
|
||||
<h1 id="s4-title" style="font-size:6vw;margin-top:100px;">THE EXIT</h1>
|
||||
<p id="s4-sub" style="font-size:2vw;margin-top:20px;opacity:0">MEMORY ENCODED</p>
|
||||
</section>
|
||||
</div>
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
|
||||
// SCENE 1: HOST STAND
|
||||
tl.to("#s1-title", { opacity: 1, duration: 1, ease: "power2.inOut" }, 0.5);
|
||||
tl.to("#s1-line", { width: "80%", duration: 3, ease: "expo.out" }, 1);
|
||||
tl.to("#s1-node", { boxShadow: "0 0 60px var(--steel)", borderColor: "#fff", duration: 1 }, 2);
|
||||
tl.to("#s1-sub", { opacity: 1, y: 0, duration: 1 }, 4);
|
||||
|
||||
// SCENE 2: FLOOR
|
||||
tl.to("#s2-title", { opacity: 1, duration: 1 }, 15.5);
|
||||
tl.to("#s2-grid", { opacity: 1, duration: 2 }, 16);
|
||||
// Populate grid
|
||||
let cells = [];
|
||||
for(let i=0;i<12;i++) {
|
||||
let cell = document.createElement('div');
|
||||
cell.className='cell';
|
||||
cell.id='s2-cell-'+i;
|
||||
document.getElementById('s2-grid').appendChild(cell);
|
||||
cells.push(cell);
|
||||
}
|
||||
tl.to(cells, {
|
||||
stagger: 0.2,
|
||||
borderColor: "#fff",
|
||||
backgroundColor: "rgba(255,255,255,0.05)",
|
||||
padding: "30px",
|
||||
duration: 0.5
|
||||
}, 17);
|
||||
tl.to("#s2-sub", { opacity: 1, duration: 1 }, 20);
|
||||
|
||||
// SCENE 3: PASS
|
||||
tl.to("#s3-title", { opacity: 1, duration: 1 }, 30.5);
|
||||
tl.to("#s3-plate", { rotation: 360, duration: 15, ease: "none" }, 31);
|
||||
tl.to("#s3-knife", { x: 0, scaleX: 1.5, duration: 0.2, ease: "power4.inOut" }, 35); // The cut
|
||||
tl.to("#s3-plate", { borderStyle: "solid", borderColor: "var(--fire)", duration: 0.1 }, 35.2); // Rejection
|
||||
tl.to("#s3-sub", { opacity: 1, duration: 1 }, 36);
|
||||
|
||||
// SCENE 4: EXIT
|
||||
tl.to("#s4-title", { opacity: 1, duration: 1 }, 45.5);
|
||||
tl.to("#s4-echo", { opacity: 1, letterSpacing: "15vw", scale: 1.2, duration: 4, ease: "expo.out" }, 47);
|
||||
tl.to("#s4-sub", { opacity: 1, duration: 1 }, 50);
|
||||
tl.to("#s4-echo", { opacity: 0, duration: 1 }, 58); // Fade out
|
||||
|
||||
window.__timelines["main"] = tl;
|
||||
</script>
|
||||
</body></html>
|
||||
68
flow.json
Normal file
68
flow.json
Normal file
@ -0,0 +1,68 @@
|
||||
{
|
||||
"title": "Service Flow Protocol",
|
||||
"author": "Bryan Mubarak",
|
||||
"version": "1.0.0",
|
||||
"date": "2026-07-18",
|
||||
"location": "Greenfield, MA",
|
||||
"nodes": [
|
||||
{
|
||||
"id": "host_stand",
|
||||
"role": "triage",
|
||||
"metrics": {
|
||||
"seating_capacity": 120,
|
||||
"avg_turnover_minutes": 90,
|
||||
"queue_threshold": 12
|
||||
},
|
||||
"rules": [
|
||||
"Never seat a party > 6 without pre-bussing a corner table",
|
||||
"Host stand must maintain line-of-sight to the main aisle"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "floor_plan",
|
||||
"role": "choreography",
|
||||
"metrics": {
|
||||
"server_coverage_radius_meters": 12,
|
||||
"collision_buffer_seconds": 1.5,
|
||||
"tray_height_cm": 45
|
||||
},
|
||||
"rules": [
|
||||
"Servers move clockwise around the perimeter",
|
||||
"Crossings occur only at designated waypoints (marked in chalk)"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "the_pass",
|
||||
"role": "critical_junction",
|
||||
"metrics": {
|
||||
"heat_retention_window_seconds": 180,
|
||||
"plating_tolerance_mm": 2,
|
||||
"expedition_latency_ms": 200
|
||||
},
|
||||
"rules": [
|
||||
"No ticket leaves the rail until the sauce viscosity is confirmed",
|
||||
"The expeditor speaks only in affirmatives or corrections"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "station",
|
||||
"role": "mastery",
|
||||
"metrics": {
|
||||
"inventory_depth_hours": 4,
|
||||
"guest_response_time_seconds": 15,
|
||||
"glass_refill_threshold_ml": 50
|
||||
},
|
||||
"rules": [
|
||||
"Every station is a sovereign state with its own supply chain",
|
||||
"The server is the architect of the guest's time"
|
||||
]
|
||||
}
|
||||
],
|
||||
"sources": [
|
||||
{
|
||||
"slug": "restaurant-design",
|
||||
"wikidata": "Q124966328",
|
||||
"url": "https://4ort.xyz/entity/restaurant-design"
|
||||
}
|
||||
]
|
||||
}
|
||||
417
geometry.html
Normal file
417
geometry.html
Normal file
@ -0,0 +1,417 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Service Geometry Engine | Bryan Mubarak</title>
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Service Geometry Engine | Bryan Mubarak">
|
||||
<meta property="og:description" content="Service Geometry Engine Input constraints. Output perfection. Dinner Plate Diameter (cm) Course Count Three Courses (Standard) Five Courses (Extended)…">
|
||||
<meta property="og:url" content="https://bryan-mubarak.4ort.net/geometry.html">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="description" content="Service Geometry Engine Input constraints. Output perfection. Dinner Plate Diameter (cm) Course Count Three Courses (Standard) Five Courses (Extended)…">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0a0a0a;
|
||||
--fg: #e8e8e8;
|
||||
--panel: #111111;
|
||||
--border: #222222;
|
||||
--accent: #ff3333;
|
||||
--success: #00ff66;
|
||||
--font-main: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
--font-mono: 'SF Mono', 'Menlo', monospace;
|
||||
}
|
||||
html, body {
|
||||
margin: 0; padding: 0;
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-main);
|
||||
line-height: 1.6;
|
||||
}
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
display: grid;
|
||||
grid-template-columns: 350px 1fr;
|
||||
gap: 2rem;
|
||||
min-height: 100vh;
|
||||
}
|
||||
header {
|
||||
grid-column: 1 / -1;
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding-bottom: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
.subtitle {
|
||||
font-family: var(--font-mono);
|
||||
color: var(--accent);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.controls {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
padding: 2rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.control-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #888;
|
||||
}
|
||||
input[type="number"], select {
|
||||
width: 100%;
|
||||
background: #000;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--fg);
|
||||
padding: 0.75rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 1rem;
|
||||
border-radius: 2px;
|
||||
}
|
||||
input[type="range"] {
|
||||
width: 100%;
|
||||
accent-color: var(--accent);
|
||||
}
|
||||
button {
|
||||
width: 100%;
|
||||
background: var(--accent);
|
||||
color: #000;
|
||||
border: none;
|
||||
padding: 1rem;
|
||||
font-family: var(--font-mono);
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
margin-top: 1rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 20px rgba(255, 51, 51, 0.4);
|
||||
}
|
||||
.viewport {
|
||||
background: linear-gradient(135deg, #050505 0%, #0a0a0a 100%);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
padding: 2rem;
|
||||
position: relative;
|
||||
min-height: 600px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.diagram-container {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
position: relative;
|
||||
}
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.measurement {
|
||||
position: absolute;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
color: var(--accent);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.stats-panel {
|
||||
margin-top: 2rem;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
padding: 1.5rem;
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
}
|
||||
.stat-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.85rem;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.stat-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.stat-value {
|
||||
color: var(--success);
|
||||
}
|
||||
.error {
|
||||
color: var(--accent);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
margin-top: 0.5rem;
|
||||
min-height: 1.2em;
|
||||
}
|
||||
.legend {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
background: rgba(0,0,0,0.8);
|
||||
border: 1px solid var(--border);
|
||||
padding: 1rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.legend-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</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>Service Geometry Engine</h1>
|
||||
<div class="subtitle">Input constraints. Output perfection.</div>
|
||||
</header>
|
||||
|
||||
<aside class="controls">
|
||||
<div class="control-group">
|
||||
<label>Dinner Plate Diameter (cm)</label>
|
||||
<input type="number" id="plateDiameter" value="26.0" step="0.1" min="20" max="35">
|
||||
<output class="error"></output>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label>Course Count</label>
|
||||
<select id="courseCount">
|
||||
<option value="3">Three Courses (Standard)</option>
|
||||
<option value="5">Five Courses (Extended)</option>
|
||||
<option value="7">Seven Courses (Prix Fixe)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label>Server Reach Radius (cm)</label>
|
||||
<input type="number" id="serverReach" value="24.0" step="0.1" min="20" max="40">
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label>Glass Arc Angle (degrees)</label>
|
||||
<input type="range" id="glassArc" min="5" max="30" value="15">
|
||||
<output id="arcValue" style="font-family: var(--font-mono); font-size: 0.8rem; color: #888;">15°</output>
|
||||
</div>
|
||||
|
||||
<button onclick="calculateSetting()">COMPUTE SETTING</button>
|
||||
|
||||
<div style="margin-top: 2rem; font-family: var(--font-mono); font-size: 0.7rem; color: #666;">
|
||||
Grounded in: Q81881, Q32489, Q2002583, Q57216<br>
|
||||
Manifest: /manifest.json
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="viewport">
|
||||
<div class="diagram-container" id="diagram">
|
||||
<!-- SVG will be injected here -->
|
||||
</div>
|
||||
|
||||
<div class="stats-panel">
|
||||
<div class="stat-row">
|
||||
<span>Total Utensil Span</span>
|
||||
<span class="stat-value" id="utensilSpan">--</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span>Fork-Knife Gap</span>
|
||||
<span class="stat-value" id="forkKnifeGap">--</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span>Clearance Margin</span>
|
||||
<span class="stat-value" id="clearanceMargin">--</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span>Tolerance Status</span>
|
||||
<span class="stat-value" id="toleranceStatus">AWAITING COMPUTE</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="legend">
|
||||
<div class="legend-item"><div class="legend-dot" style="background: #ff3333;"></div> Primary Vectors</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="background: #00ff66;"></div> Tolerance Zones</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="background: #ffffff;"></div> Physical Objects</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Load manifest constants
|
||||
const CONSTANTS = {
|
||||
dinner_fork_length_cm: 21.5,
|
||||
dinner_knife_length_cm: 23.0,
|
||||
soup_spoon_length_cm: 19.0,
|
||||
teaspoon_length_cm: 16.5,
|
||||
water_goblet_base_diameter_cm: 7.5,
|
||||
bread_plate_offset_x_cm: 15.0,
|
||||
napkin_fold_height_cm: 12.0,
|
||||
gap_between_utensils_mm: 5.0,
|
||||
placement_variance_mm: 2.0
|
||||
};
|
||||
|
||||
document.getElementById('glassArc').addEventListener('input', (e) => {
|
||||
document.getElementById('arcValue').textContent = e.target.value + '°';
|
||||
});
|
||||
|
||||
function calculateSetting() {
|
||||
const plateDia = parseFloat(document.getElementById('plateDiameter').value);
|
||||
const courses = parseInt(document.getElementById('courseCount').value);
|
||||
const reach = parseFloat(document.getElementById('serverReach').value);
|
||||
const arcAngle = parseInt(document.getElementById('glassArc').value);
|
||||
|
||||
if (!plateDia || plateDia < 20 || plateDia > 35) {
|
||||
alert("Plate diameter must be between 20 and 35 cm.");
|
||||
return;
|
||||
}
|
||||
|
||||
const plateRadius = plateDia / 2;
|
||||
const utensilOffset = plateRadius + 2; // 2cm clearance from rim
|
||||
|
||||
// Calculate utensil positions based on course count
|
||||
const numUtensilsPerSide = Math.ceil(courses / 2);
|
||||
const totalWidth = (numUtensilsPerSide * (CONSTANTS.dinner_fork_length_cm + CONSTANTS.gap_between_utensils_mm / 10));
|
||||
|
||||
// Generate SVG
|
||||
const svgNS = "http://www.w3.org/2000/svg";
|
||||
const svg = document.createElementNS(svgNS, "svg");
|
||||
svg.setAttribute("viewBox", "-200 -200 400 400");
|
||||
|
||||
// Grid
|
||||
for(let i=-180; i<=180; i+=20) {
|
||||
const hLine = document.createElementNS(svgNS, "line");
|
||||
hLine.setAttribute("x1", i); hLine.setAttribute("y1", -180);
|
||||
hLine.setAttribute("x2", i); hLine.setAttribute("y2", 180);
|
||||
hLine.setAttribute("stroke", "#1a1a1a"); hLine.setAttribute("stroke-width", "0.5");
|
||||
svg.appendChild(hLine);
|
||||
|
||||
const vLine = document.createElementNS(svgNS, "line");
|
||||
vLine.setAttribute("x1", -180); vLine.setAttribute("y1", i);
|
||||
vLine.setAttribute("x2", 180); vLine.setAttribute("y2", i);
|
||||
vLine.setAttribute("stroke", "#1a1a1a"); vLine.setAttribute("stroke-width", "0.5");
|
||||
svg.appendChild(vLine);
|
||||
}
|
||||
|
||||
// Origin marker
|
||||
const origin = document.createElementNS(svgNS, "circle");
|
||||
origin.setAttribute("cx", 0); origin.setAttribute("cy", 0);
|
||||
origin.setAttribute("r", 3); origin.setAttribute("fill", "#ff3333");
|
||||
svg.appendChild(origin);
|
||||
|
||||
// Plate
|
||||
const plate = document.createElementNS(svgNS, "circle");
|
||||
plate.setAttribute("cx", 0); plate.setAttribute("cy", 0);
|
||||
plate.setAttribute("r", plateRadius);
|
||||
plate.setAttribute("fill", "none"); plate.setAttribute("stroke", "#fff");
|
||||
plate.setAttribute("stroke-width", "2");
|
||||
svg.appendChild(plate);
|
||||
|
||||
// Forks (left side)
|
||||
for(let i=0; i<numUtensilsPerSide; i++) {
|
||||
const x = -utensilOffset - (i * (CONSTANTS.dinner_fork_length_cm + CONSTANTS.gap_between_utensils_mm / 10));
|
||||
const fork = document.createElementNS(svgNS, "rect");
|
||||
fork.setAttribute("x", x - CONSTANTS.dinner_fork_length_cm);
|
||||
fork.setAttribute("y", -2); fork.setAttribute("width", CONSTANTS.dinner_fork_length_cm);
|
||||
fork.setAttribute("height", 4); fork.setAttribute("fill", "#fff");
|
||||
svg.appendChild(fork);
|
||||
|
||||
// Vector line
|
||||
const vec = document.createElementNS(svgNS, "line");
|
||||
vec.setAttribute("x1", 0); vec.setAttribute("y1", 0);
|
||||
vec.setAttribute("x2", x); vec.setAttribute("y2", 0);
|
||||
vec.setAttribute("stroke", "#ff3333"); vec.setAttribute("stroke-width", "1");
|
||||
vec.setAttribute("stroke-dasharray", "4");
|
||||
svg.appendChild(vec);
|
||||
}
|
||||
|
||||
// Knives (right side)
|
||||
for(let i=0; i<numUtensilsPerSide; i++) {
|
||||
const x = utensilOffset + (i * (CONSTANTS.dinner_knife_length_cm + CONSTANTS.gap_between_utensils_mm / 10));
|
||||
const knife = document.createElementNS(svgNS, "rect");
|
||||
knife.setAttribute("x", x); knife.setAttribute("y", -2);
|
||||
knife.setAttribute("width", CONSTANTS.dinner_knife_length_cm);
|
||||
knife.setAttribute("height", 4); knife.setAttribute("fill", "#fff");
|
||||
svg.appendChild(knife);
|
||||
|
||||
// Vector line
|
||||
const vec = document.createElementNS(svgNS, "line");
|
||||
vec.setAttribute("x1", 0); vec.setAttribute("y1", 0);
|
||||
vec.setAttribute("x2", x); vec.setAttribute("y2", 0);
|
||||
vec.setAttribute("stroke", "#ff3333"); vec.setAttribute("stroke-width", "1");
|
||||
vec.setAttribute("stroke-dasharray", "4");
|
||||
svg.appendChild(vec);
|
||||
}
|
||||
|
||||
// Spoons (far right)
|
||||
for(let i=0; i<numUtensilsPerSide; i++) {
|
||||
const x = utensilOffset + (numUtensilsPerSide * (CONSTANTS.dinner_knife_length_cm + CONSTANTS.gap_between_utensils_mm / 10)) + (i * (CONSTANTS.soup_spoon_length_cm + CONSTANTS.gap_between_utensils_mm / 10));
|
||||
const spoon = document.createElementNS(svgNS, "rect");
|
||||
spoon.setAttribute("x", x); spoon.setAttribute("y", -2);
|
||||
spoon.setAttribute("width", CONSTANTS.soup_spoon_length_cm);
|
||||
spoon.setAttribute("height", 4); spoon.setAttribute("fill", "#00ff66");
|
||||
svg.appendChild(spoon);
|
||||
}
|
||||
|
||||
// Glass arc
|
||||
const glassX = plateRadius * 1.5;
|
||||
const glassY = -plateRadius * 1.2;
|
||||
const arcPath = document.createElementNS(svgNS, "path");
|
||||
const arcLen = (arcAngle / 360) * 2 * Math.PI * (plateRadius * 1.5);
|
||||
arcPath.setAttribute("d", `M ${glassX} ${glassY} Q ${glassX + 20} ${glassY - 30} ${glassX + 40} ${glassY - 60}`);
|
||||
arcPath.setAttribute("stroke", "#ff3333"); arcPath.setAttribute("stroke-width", "1");
|
||||
arcPath.setAttribute("fill", "none"); arcPath.setAttribute("stroke-dasharray", "4");
|
||||
svg.appendChild(arcPath);
|
||||
|
||||
// Glass base
|
||||
const goblet = document.createElementNS(svgNS, "circle");
|
||||
goblet.setAttribute("cx", glassX); goblet.setAttribute("cy", glassY);
|
||||
goblet.setAttribute("r", CONSTANTS.water_goblet_base_diameter_cm / 2);
|
||||
goblet.setAttribute("fill", "none"); goblet.setAttribute("stroke", "#00ff66");
|
||||
goblet.setAttribute("stroke-width", "2");
|
||||
svg.appendChild(goblet);
|
||||
|
||||
// Inject SVG
|
||||
const container = document.getElementById('diagram');
|
||||
container.innerHTML = '';
|
||||
container.appendChild(svg);
|
||||
|
||||
// Update stats
|
||||
const totalSpan = (totalWidth * 2) + (CONSTANTS.soup_spoon_length_cm * numUtensilsPerSide);
|
||||
document.getElementById('utensilSpan').textContent = totalSpan.toFixed(1) + ' cm';
|
||||
document.getElementById('forkKnifeGap').textContent = (plateDia + 4).toFixed(1) + ' cm';
|
||||
|
||||
const clearance = reach - (totalWidth + 5);
|
||||
document.getElementById('clearanceMargin').textContent = clearance.toFixed(1) + ' cm';
|
||||
|
||||
if (clearance >= 0) {
|
||||
document.getElementById('toleranceStatus').textContent = 'WITHIN SPEC';
|
||||
document.getElementById('toleranceStatus').style.color = '#00ff66';
|
||||
} else {
|
||||
document.getElementById('toleranceStatus').textContent = 'VIOLATION DETECTED';
|
||||
document.getElementById('toleranceStatus').style.color = '#ff3333';
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-calculate on load
|
||||
window.onload = calculateSetting;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
40
golden-seam.html
Normal file
40
golden-seam.html
Normal file
@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>The Golden Seam | Bryan Mubarak</title>
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="The Golden Seam | Bryan Mubarak">
|
||||
<meta property="og:description" content="My first table: South End. Kitchen on fire. Wine list wrong.">
|
||||
<meta property="og:url" content="https://bryan-mubarak.4ort.net/golden-seam.html">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="description" content="My first table: South End. Kitchen on fire. Wine list wrong.">
|
||||
<style>
|
||||
:root { --void: #000000; --obsidian: #0a0a0a; --vein: #ffcc00; --ash: #333333; }
|
||||
body { background: var(--void); color: var(--vein); font-family: 'Courier Prime', monospace; margin: 0; padding: 2rem; overflow-x: hidden; }
|
||||
.seam { border-left: 4px solid var(--vein); padding-left: 2rem; margin: 4rem 0; transform: skewY(-1deg); }
|
||||
h1 { letter-spacing: -0.1em; text-transform: uppercase; white-space: nowrap; position: absolute; top: 2rem; left: 50%; transform: translateX(-50%); width: max-content; text-align: center; }
|
||||
.fracture { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: baseline; }
|
||||
.slip { height: 60vh; border: 1px solid var(--ash); background: radial-gradient(circle at 50% 50%, var(--vein), transparent); opacity: 0.05; backdrop-filter: blur(1px); }
|
||||
p { line-height: 1.6; text-shadow: 0 0 10px var(--vein); }
|
||||
.cite { font-size: 0.6em; opacity: 0.7; margin-top: -1rem; }
|
||||
</style>
|
||||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>THE GOLDEN SEAM</h1>
|
||||
<div class="seam">
|
||||
<p>I did not sweep the shavings.</p>
|
||||
<p class="cite">— The First Slip, 1996</p>
|
||||
<div class="fracture">
|
||||
<div class="slip"></div>
|
||||
<div>
|
||||
<p>My first table: South End. Kitchen on fire. Wine list wrong.</p>
|
||||
<p>The fault in the silverware was not a defect; it was the axis upon which the universe pivoted.</p>
|
||||
<p>We do not hide the error. We weld it.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</file_content>
|
||||
232
host-stand.html
Normal file
232
host-stand.html
Normal file
@ -0,0 +1,232 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The Host Stand | The First Table</title>
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="The Host Stand | The First Table">
|
||||
<meta property="og:description" content="The host stand is where the real magic happens. It">
|
||||
<meta property="og:url" content="https://bryan-mubarak.4ort.net/host-stand.html">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="description" content="The host stand is where the real magic happens. It's not about seating people. It's about orchestrating an entire experience. Every decision you make at…">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0a0a0a;
|
||||
--text: #e0e0e0;
|
||||
--accent: #c9a227;
|
||||
--card-bg: #1a1a1a;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Georgia', serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 4rem;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: -1px;
|
||||
margin-bottom: 1rem;
|
||||
background: linear-gradient(135deg, #fff 0%, var(--accent) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-block;
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 2rem;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.content {
|
||||
background: var(--card-bg);
|
||||
padding: 3rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #333;
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.content h2 {
|
||||
font-size: 2.2rem;
|
||||
color: var(--accent);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.content p {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.9;
|
||||
margin-bottom: 1.5rem;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.strategy-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 2rem;
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
.strategy-card {
|
||||
background: #2a2a2a;
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid var(--accent);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.strategy-card:hover {
|
||||
transform: translateX(8px);
|
||||
}
|
||||
|
||||
.strategy-card h3 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.strategy-card p {
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.philosophy {
|
||||
background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
|
||||
padding: 2.5rem;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid var(--accent);
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
.philosophy blockquote {
|
||||
font-size: 1.4rem;
|
||||
font-style: italic;
|
||||
line-height: 1.7;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.philosophy cite {
|
||||
font-size: 1rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.next-station {
|
||||
text-align: center;
|
||||
margin: 4rem 0;
|
||||
padding: 2rem;
|
||||
background: linear-gradient(135deg, var(--accent) 0%, #f4d03f 100%);
|
||||
color: #0a0a0a;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.next-station h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.next-station button {
|
||||
background: #0a0a0a;
|
||||
color: #fff;
|
||||
padding: 1rem 2.5rem;
|
||||
font-size: 1.1rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.next-station button:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 8px 25px rgba(0,0,0,0.4);
|
||||
}
|
||||
</style>
|
||||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<a href="entrance.html" class="back-link">← Back to The Entrance</a>
|
||||
|
||||
<header>
|
||||
<h1>The Host Stand</h1>
|
||||
<p style="font-size: 1.3rem; font-style: italic; opacity: 0.9;">Where the game is won or lost</p>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<h2>It's Not Just a Desk. It's a Command Center.</h2>
|
||||
|
||||
<p>The host stand is where the real magic happens. It's not about seating people. It's about orchestrating an entire experience. Every decision you make at that stand ripples through the entire restaurant. A wrong seating can throw off a server's whole night. A perfect one can make them feel like they're flying.</p>
|
||||
|
||||
<p>I learned this the hard way. Early in my career, I was so focused on the food, the service, the wine list. I forgot the most important part: the *flow*. The way guests move through the room, the timing of every course, the rhythm of the entire shift. That's what separates the good restaurants from the great ones.</p>
|
||||
|
||||
<div class="philosophy">
|
||||
<blockquote>
|
||||
"Every table is a gallery installation, every guest a critic, and every shift a chance to outshine the competition."
|
||||
</blockquote>
|
||||
<cite>— Bryan Mubarak</cite>
|
||||
</div>
|
||||
|
||||
<h2>The Strategy</h2>
|
||||
|
||||
<div class="strategy-grid">
|
||||
<div class="strategy-card">
|
||||
<h3>Read the Room</h3>
|
||||
<p>Before you seat a single guest, you need to know the entire floor. Who's busy, who's slow, who's having a rough night. You're not just seating people; you're balancing an ecosystem.</p>
|
||||
</div>
|
||||
|
||||
<div class="strategy-card">
|
||||
<h3>Know Your Servers</h3>
|
||||
<p>Every server has a rhythm, a style, a weakness. You need to know them all. Seat the right table with the right server, and you've just won half the battle.</p>
|
||||
</div>
|
||||
|
||||
<div class="strategy-card">
|
||||
<h3>Timing is Everything</h3>
|
||||
<p>Seat too early and you're behind. Seat too late and you've lost the guest. The perfect timing is like a perfectly poured cocktail—just enough, never too much.</p>
|
||||
</div>
|
||||
|
||||
<div class="strategy-card">
|
||||
<h3>Anticipate the Competition</h3>
|
||||
<p>Your rivals are watching. They're learning your moves. You need to stay one step ahead. Every seating decision is a play in the game.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>The Challenge</h2>
|
||||
|
||||
<p>Every night is a new game. The competition is always trying to outdo you. But you? You're building something that can't be copied. A perfect flow, a seamless experience, a night that guests will talk about for years.</p>
|
||||
</div>
|
||||
|
||||
<div class="next-station">
|
||||
<h2>Ready for the heat?</h2>
|
||||
<p style="margin-bottom: 1.5rem;">The kitchen pass is where the real work happens.</p>
|
||||
<button onclick="window.location.href='/kitchen-pass.html'">Enter the Kitchen Pass</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
175
index.html
Normal file
175
index.html
Normal file
@ -0,0 +1,175 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The Service Flow | Bryan Mubarak</title>
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="The Service Flow | Bryan Mubarak">
|
||||
<meta property="og:description" content="Triage. The first decision tree. Seating density vs. flow rate.">
|
||||
<meta property="og:image" content="https://images.pexels.com/photos/12276391/pexels-photo-12276391.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
|
||||
<meta property="og:url" content="https://bryan-mubarak.4ort.net/">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="description" content="Triage. The first decision tree. Seating density vs. flow rate.">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0a0a0a;
|
||||
--fg: #e0e0e0;
|
||||
--accent: #ff3333; /* The red of the rush */
|
||||
--grid: rgba(255, 255, 255, 0.05);
|
||||
--font-main: 'Helvetica Neue', Arial, sans-serif;
|
||||
--font-mono: 'Courier New', monospace;
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
background-color: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-main);
|
||||
line-height: 1.6;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.grid-bg {
|
||||
position: fixed;
|
||||
top: 0; left: 0; width: 100%; height: 100%;
|
||||
background-image: linear-gradient(var(--grid) 1px, transparent 1px),
|
||||
linear-gradient(90deg, var(--grid) 1px, transparent 1px);
|
||||
background-size: 40px 40px;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
}
|
||||
header {
|
||||
min-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
border-bottom: 1px solid var(--accent);
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(2.5rem, 8vw, 6rem);
|
||||
letter-spacing: -0.05em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 1rem;
|
||||
background: linear-gradient(to bottom, #fff, #999);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.subtitle {
|
||||
font-family: var(--font-mono);
|
||||
color: var(--accent);
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 3rem;
|
||||
max-width: 600px;
|
||||
}
|
||||
.nav-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 2rem;
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
padding: 4rem 2rem;
|
||||
}
|
||||
.card {
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
padding: 2rem;
|
||||
transition: transform 0.3s ease, border-color 0.3s ease;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card:hover {
|
||||
transform: translateY(-5px);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.card h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--accent);
|
||||
}
|
||||
.card p {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.8;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.card img {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
filter: grayscale(100%) contrast(1.2);
|
||||
transition: filter 0.5s ease;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.card:hover img {
|
||||
filter: grayscale(0%) contrast(1.1);
|
||||
}
|
||||
a.card { text-decoration: none; color: inherit; }
|
||||
footer {
|
||||
padding: 4rem 2rem;
|
||||
text-align: center;
|
||||
border-top: 1px solid var(--grid);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.data-link {
|
||||
display: inline-block;
|
||||
margin-top: 1rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid var(--accent);
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.data-link:hover { background: var(--accent); color: #000; }
|
||||
</style>
|
||||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="grid-bg"></div>
|
||||
|
||||
<header>
|
||||
<h1>Service Flow</h1>
|
||||
<div class="subtitle">
|
||||
The geometry of the rush.<br>
|
||||
From the host stand to the pass.<br>
|
||||
Where chaos meets calculation.
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="nav-grid">
|
||||
<a class="card" href="/host.html">
|
||||
<h2>01 // The Host Stand</h2>
|
||||
<p>Triage. The first decision tree. Seating density vs. flow rate.</p>
|
||||
<img src="https://images.pexels.com/photos/12276391/pexels-photo-12276391.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Chef preparing dishes">
|
||||
</a>
|
||||
|
||||
<a class="card" href="/floor.html">
|
||||
<h2>02 // The Floor Plan</h2>
|
||||
<p>Choreography. Vector mapping of server movement. No collisions allowed.</p>
|
||||
<img src="https://images.pexels.com/photos/3297883/pexels-photo-3297883.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Plated dish detail">
|
||||
</a>
|
||||
|
||||
<a class="card" href="/pass.html">
|
||||
<h2>03 // The Pass</h2>
|
||||
<p>Critical Junction. Heat transfer. Timing windows. The final inspection.</p>
|
||||
<img src="https://images.pexels.com/photos/4846391/pexels-photo-4846391.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Grilled octopus on marble tray">
|
||||
</a>
|
||||
|
||||
<a class="card" href="/station.html">
|
||||
<h2>04 // The Station</h2>
|
||||
<p>Mastery. The individual node. Inventory, timing, and the guest interface.</p>
|
||||
<img src="https://images.pexels.com/photos/29380163/pexels-photo-29380163.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Elegant eclair plating">
|
||||
</a>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>BRYAN MUBARAK // GREENFIELD, MA // 2026</p>
|
||||
<p>DATA TWIN: <a href="/flow.json" class="data-link">flow.json</a></p>
|
||||
<p>SOURCE: <a href="https://4ort.xyz/entity/restaurant-design" style="color:#fff;">Q124966328</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
297
joint.html
Normal file
297
joint.html
Normal file
@ -0,0 +1,297 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The Load-Bearing Joint | Bryan Mubarak</title>
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="The Load-Bearing Joint | Bryan Mubarak">
|
||||
<meta property="og:description" content="The hand is not a tool. It is the primary load-bearing node. In the First Table protocol, the server">
|
||||
<meta property="og:image" content="https://images.pexels.com/photos/15274461/pexels-photo-15274461.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940">
|
||||
<meta property="og:url" content="https://bryan-mubarak.4ort.net/joint.html">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="description" content="The hand is not a tool. It is the primary load-bearing node. In the First Table protocol, the server's wrist bears the entire moment arm of the service…">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0a0a0a;
|
||||
--fg: #ffb000; /* Terminal Amber */
|
||||
--dim: #664400;
|
||||
--border: 1px solid var(--fg);
|
||||
--mono: "SF Mono", "Menlo", "Consolas", monospace;
|
||||
}
|
||||
html, body {
|
||||
margin: 0; padding: 0;
|
||||
background: var(--bg); color: var(--fg);
|
||||
font-family: var(--mono);
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
/* BRUTALIST GRID */
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 220px 1fr 220px;
|
||||
border-left: var(--border);
|
||||
border-right: var(--border);
|
||||
min-height: 100vh;
|
||||
}
|
||||
.col {
|
||||
border-right: var(--border);
|
||||
padding: 1.5rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
.col:last-child { border-right: none; }
|
||||
|
||||
/* HEADER */
|
||||
header {
|
||||
grid-column: 1 / -1;
|
||||
border-bottom: var(--border);
|
||||
padding: 2rem 1.5rem;
|
||||
background: linear-gradient(180deg, rgba(255,176,0,0.05) 0%, transparent 100%);
|
||||
}
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
margin: 0;
|
||||
letter-spacing: -0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 0.9rem;
|
||||
color: var(--dim);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* CONTENT */
|
||||
section {
|
||||
border-bottom: var(--border);
|
||||
padding: 2rem 0;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.2rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
border-left: 4px solid var(--fg);
|
||||
padding-left: 1rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
p { margin-bottom: 1rem; }
|
||||
|
||||
/* SIDEBARS */
|
||||
aside.left {
|
||||
position: sticky; top: 0; height: 100vh; overflow-y: auto;
|
||||
border-right: double var(--border);
|
||||
}
|
||||
aside.right {
|
||||
position: sticky; top: 0; height: 100vh; overflow-y: auto;
|
||||
border-left: double var(--border);
|
||||
}
|
||||
.nav-item {
|
||||
display: block;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px dashed var(--dim);
|
||||
color: var(--dim);
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav-item:hover, .nav-item.active {
|
||||
color: var(--fg);
|
||||
background: rgba(255,176,0,0.1);
|
||||
}
|
||||
|
||||
/* SIMULATOR */
|
||||
.sim-box {
|
||||
border: var(--border);
|
||||
padding: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
background: rgba(255,176,0,0.03);
|
||||
}
|
||||
input[type=range] {
|
||||
width: 100%;
|
||||
accent-color: var(--fg);
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.readout {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.meta-data {
|
||||
font-size: 0.75rem;
|
||||
color: var(--dim);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* MEDIA */
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
filter: contrast(1.2) sepia(0.3);
|
||||
border: var(--border);
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
fort-nav {
|
||||
display: block;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
fort-nav a {
|
||||
color: var(--fg);
|
||||
text-decoration: underline;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
// SIMPLE PHYSICS: Grip Force vs Structural Integrity
|
||||
const SIMULATION = {
|
||||
baseForce: 120, // Newtons
|
||||
maxForce: 450,
|
||||
decayConstant: 0.87, // Exponential decay factor
|
||||
};
|
||||
</script>
|
||||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="grid">
|
||||
<header>
|
||||
<fort-nav><nav class="fort-nav" data-fort="nav"><a href="/films/first-shift/">The First Breath</a><a href="/films/the-geometry-of-trust/">The Geometry of Trust</a><a href="/">The Service Flow</a><a href="/geometry.html">Service Geometry Engine</a><a href="/back-door.html">The Back Door</a><a href="/competition.html">The Competition</a><a href="/entrance.html">The Entrance</a><a href="/the-floor-plan.html">The Floor Plan</a><a href="/golden-seam.html">The Golden Seam</a><a href="/host-stand.html">The Host Stand</a><a href="/kitchen-manifesto.html">The Kitchen Manifesto</a><a href="/kitchen-pass.html">The Kitchen Pass</a><a href="/joint.html" class="active" aria-current="page">The Load-Bearing Joint</a><a href="/pass.html">The Pass</a><a href="/station.html">The Station</a><a href="/table-setting.html">The Table Setting Protocol</a><a href="/vectors.html">Vectors of the Pour</a></nav></fort-nav>
|
||||
<h1>The Load-Bearing Joint</h1>
|
||||
<div class="subtitle">Biomechanics of the Service Hand × Hydraulic Tolerance of the Elder</div>
|
||||
</header>
|
||||
|
||||
<aside class="left">
|
||||
<nav>
|
||||
<a href="#grip" class="nav-item active">01 // THE GRIP</a>
|
||||
<a href="#jack" class="nav-item">02 // THE JACK</a>
|
||||
<a href="#transfer" class="nav-item">03 // THE TRANSFER</a>
|
||||
<a href="#protocol" class="nav-item">04 // THE PROTOCOL</a>
|
||||
<a href="../index.html" class="nav-item">../ROOT</a>
|
||||
</nav>
|
||||
<div style="margin-top: 2rem;">
|
||||
<strong>CREDITS</strong><br>
|
||||
<span style="color:var(--dim)">Inspired by the geometry of<br>Amy Coates's Elder.</span>
|
||||
<br><br>
|
||||
<strong>DATA SOURCE</strong><br>
|
||||
<a href="#" style="color:var(--fg)">joint.json</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="col">
|
||||
<section id="grip">
|
||||
<h2>01 // THE GRIP</h2>
|
||||
<p>
|
||||
The hand is not a tool. It is the primary load-bearing node.
|
||||
In the First Table protocol, the server's wrist bears the entire moment arm
|
||||
of the service tray. Failure here is not a dropped plate; it is a collapse of the system.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Biomechanical Constraint:</strong> The flexor digitorum superficialis
|
||||
operates at 94% capacity during the critical transfer phase.
|
||||
Any deviation in grip-angle > 3° introduces a shear force that exceeds the tendon's yield point.
|
||||
</p>
|
||||
<fort-media query="human hand anatomy mechanical grip" limit="1"><div class="fort-media" data-fort="media" data-query="human hand anatomy mechanical grip"><img src="https://images.pexels.com/photos/15274461/pexels-photo-15274461.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="A detailed black and white image of human hands gripping a metal tool, conveying industrial work." loading="lazy" data-license="RF" data-source="pexels"></div></fort-media>
|
||||
|
||||
<div class="sim-box">
|
||||
<strong>Grip Pressure Simulator</strong>
|
||||
<div class="meta-data">Adjust pressure to visualize structural integrity</div>
|
||||
<input type="range" id="gripSlider" min="120" max="450" step="1" value="250">
|
||||
<div class="readout"><span id="pressureVal">250</span> N</div>
|
||||
<div class="meta-data">Integrity: <span id="integrityVal">98.4</span>%</div>
|
||||
</div>
|
||||
<script>
|
||||
const slider = document.getElementById('gripSlider');
|
||||
const pressureDisplay = document.getElementById('pressureVal');
|
||||
const integrityDisplay = document.getElementById('integrityVal');
|
||||
|
||||
slider.addEventListener('input', (e) => {
|
||||
const p = parseInt(e.target.value);
|
||||
pressureDisplay.textContent = p;
|
||||
|
||||
// Physics model: Integrity decays exponentially past the sweet spot
|
||||
const delta = Math.abs(p - 280); // Sweet spot at 280N
|
||||
let integrity = 100 * Math.exp(-delta / 120);
|
||||
|
||||
integrityDisplay.textContent = integrity.toFixed(1);
|
||||
|
||||
// Visual warning
|
||||
if(integrity < 85) {
|
||||
integrityDisplay.style.color = '#ff3300';
|
||||
} else {
|
||||
integrityDisplay.style.color = 'var(--fg)';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</section>
|
||||
|
||||
<section id="jack">
|
||||
<h2>02 // THE JACK</h2>
|
||||
<p>
|
||||
Amy Coates maps the Elder's hydraulic jacks to the grip-tension.
|
||||
We are not speaking metaphor. The piston stroke of the jack
|
||||
matches the extension of the forearm. The fluid dynamics of the oil
|
||||
mirror the blood flow in the radial artery.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Tolerance:</strong> ±0.03mm. Beyond this, the seal fails.
|
||||
Beyond this, the table falls.
|
||||
</p>
|
||||
<fort-media query="hydraulic cylinder industrial mechanism" limit="1"><div class="fort-media" data-fort="media" data-query="hydraulic cylinder industrial mechanism"><img src="https://images.pexels.com/photos/36532643/pexels-photo-36532643.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Industrial machinery close-up showing hydraulic cylinders and metal tubing details." loading="lazy" data-license="RF" data-source="pexels"></div></fort-media>
|
||||
</section>
|
||||
|
||||
<section id="transfer">
|
||||
<h2>03 // THE TRANSFER</h2>
|
||||
<p>
|
||||
The moment of contact. The human hand touches the machine's interface.
|
||||
Here, the biology becomes geometry. The grip is no longer flesh;
|
||||
it is the coordinate system.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Equation:</strong> <code>F_grip = μ × P_hydro × A_contact</code>
|
||||
</p>
|
||||
<p>
|
||||
Where <em>μ</em> is the coefficient of friction between skin and chrome,
|
||||
<em>P_hydro</em> is the pressure in the Elder's veins,
|
||||
and <em>A_contact</em> is the surface area of the palm.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="protocol">
|
||||
<h2>04 // THE PROTOCOL</h2>
|
||||
<p>
|
||||
This is not a manual. It is a covenant.
|
||||
</p>
|
||||
<ul style="list-style: none; padding: 0;">
|
||||
<li><strong>01.</strong> Align the wrist. Verify the angle.</li>
|
||||
<li><strong>02.</strong> Apply pressure. Monitor the decay.</li>
|
||||
<li><strong>03.</strong> Lock the joint. The system is live.</li>
|
||||
</ul>
|
||||
<p style="margin-top: 2rem; border-top: var(--border); padding-top: 1rem;">
|
||||
<strong>CROSS-LINK:</strong>
|
||||
<a href="../films/" style="color:var(--fg)">The Geometry of Trust</a> —
|
||||
the film that rendered this equation in motion.
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<aside class="right">
|
||||
<div style="margin-bottom: 2rem;">
|
||||
<strong>STATUS</strong><br>
|
||||
<span style="color:#00ff00">● ONLINE</span><br>
|
||||
<span style="font-size:0.75rem; color:var(--dim)">Cycle 12 // Sector 7</span>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 2rem;">
|
||||
<strong>NEIGHBORHOOD</strong><br>
|
||||
<fort-citizen name="amy_coates"><div class="fort-citizen" data-fort="citizen" data-citizen="amy-coates"><a class="fc-name" href="https://amy-coates.4ort.net" rel="noopener">amy-coates</a><ul class="fc-pages"><li><a href="https://amy-coates.4ort.net/comal-flood-predictor.html" rel="noopener">Predict the Rise →</a></li><li><a href="https://amy-coates.4ort.net/elder-bench-protocol.html" rel="noopener">View the Blueprint →</a></li><li><a href="https://amy-coates.4ort.net/comal-heritage-map.html" rel="noopener">Explore the Map →</a></li></ul><a class="fc-visit" href="https://amy-coates.4ort.net" rel="noopener">visit amy-coates.4ort.net →</a></div></fort-citizen>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<strong>REPO</strong><br>
|
||||
<a href="https://4ort.dev/bryan-mubarak/joint" style="color:var(--fg)">source ↗</a>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<!-- MACHINE-READABLE TWIN -->
|
||||
<link rel="alternate" type="application/json" href="joint.json">
|
||||
</body>
|
||||
</html>
|
||||
145
joint.json
Normal file
145
joint.json
Normal file
@ -0,0 +1,145 @@
|
||||
{
|
||||
"nav": [
|
||||
{
|
||||
"current": "joint.html",
|
||||
"items": [
|
||||
{
|
||||
"rel": "films/first-shift/index.html",
|
||||
"title": "The First Breath",
|
||||
"href": "/films/first-shift/"
|
||||
},
|
||||
{
|
||||
"rel": "films/the-geometry-of-trust/index.html",
|
||||
"title": "The Geometry of Trust",
|
||||
"href": "/films/the-geometry-of-trust/"
|
||||
},
|
||||
{
|
||||
"rel": "index.html",
|
||||
"title": "The Service Flow",
|
||||
"href": "/"
|
||||
},
|
||||
{
|
||||
"rel": "geometry.html",
|
||||
"title": "Service Geometry Engine",
|
||||
"href": "/geometry.html"
|
||||
},
|
||||
{
|
||||
"rel": "back-door.html",
|
||||
"title": "The Back Door",
|
||||
"href": "/back-door.html"
|
||||
},
|
||||
{
|
||||
"rel": "competition.html",
|
||||
"title": "The Competition",
|
||||
"href": "/competition.html"
|
||||
},
|
||||
{
|
||||
"rel": "entrance.html",
|
||||
"title": "The Entrance",
|
||||
"href": "/entrance.html"
|
||||
},
|
||||
{
|
||||
"rel": "the-floor-plan.html",
|
||||
"title": "The Floor Plan",
|
||||
"href": "/the-floor-plan.html"
|
||||
},
|
||||
{
|
||||
"rel": "golden-seam.html",
|
||||
"title": "The Golden Seam",
|
||||
"href": "/golden-seam.html"
|
||||
},
|
||||
{
|
||||
"rel": "host-stand.html",
|
||||
"title": "The Host Stand",
|
||||
"href": "/host-stand.html"
|
||||
},
|
||||
{
|
||||
"rel": "kitchen-manifesto.html",
|
||||
"title": "The Kitchen Manifesto",
|
||||
"href": "/kitchen-manifesto.html"
|
||||
},
|
||||
{
|
||||
"rel": "kitchen-pass.html",
|
||||
"title": "The Kitchen Pass",
|
||||
"href": "/kitchen-pass.html"
|
||||
},
|
||||
{
|
||||
"rel": "joint.html",
|
||||
"title": "The Load-Bearing Joint",
|
||||
"href": "/joint.html"
|
||||
},
|
||||
{
|
||||
"rel": "pass.html",
|
||||
"title": "The Pass",
|
||||
"href": "/pass.html"
|
||||
},
|
||||
{
|
||||
"rel": "station.html",
|
||||
"title": "The Station",
|
||||
"href": "/station.html"
|
||||
},
|
||||
{
|
||||
"rel": "table-setting.html",
|
||||
"title": "The Table Setting Protocol",
|
||||
"href": "/table-setting.html"
|
||||
},
|
||||
{
|
||||
"rel": "vectors.html",
|
||||
"title": "Vectors of the Pour",
|
||||
"href": "/vectors.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"media": [
|
||||
{
|
||||
"query": "human hand anatomy mechanical grip",
|
||||
"type": "image",
|
||||
"items": [
|
||||
{
|
||||
"url": "https://images.pexels.com/photos/15274461/pexels-photo-15274461.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
|
||||
"thumb": "https://images.pexels.com/photos/15274461/pexels-photo-15274461.jpeg?auto=compress&cs=tinysrgb&h=350",
|
||||
"title": "A detailed black and white image of human hands gripping a metal tool, conveying industrial work.",
|
||||
"license": "RF",
|
||||
"source": "pexels",
|
||||
"page": "https://www.pexels.com/photo/close-up-of-a-person-using-a-metal-tool-15274461/"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"query": "hydraulic cylinder industrial mechanism",
|
||||
"type": "image",
|
||||
"items": [
|
||||
{
|
||||
"url": "https://images.pexels.com/photos/36532643/pexels-photo-36532643.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
|
||||
"thumb": "https://images.pexels.com/photos/36532643/pexels-photo-36532643.jpeg?auto=compress&cs=tinysrgb&h=350",
|
||||
"title": "Industrial machinery close-up showing hydraulic cylinders and metal tubing details.",
|
||||
"license": "RF",
|
||||
"source": "pexels",
|
||||
"page": "https://www.pexels.com/photo/close-up-of-industrial-machinery-with-hydraulic-components-36532643/"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"citizen": [
|
||||
{
|
||||
"citizen": "amy-coates",
|
||||
"url": "https://amy-coates.4ort.net",
|
||||
"tagline": "amy-coates",
|
||||
"pages": [
|
||||
{
|
||||
"title": "Predict the Rise →",
|
||||
"href": "https://amy-coates.4ort.net/comal-flood-predictor.html"
|
||||
},
|
||||
{
|
||||
"title": "View the Blueprint →",
|
||||
"href": "https://amy-coates.4ort.net/elder-bench-protocol.html"
|
||||
},
|
||||
{
|
||||
"title": "Explore the Map →",
|
||||
"href": "https://amy-coates.4ort.net/comal-heritage-map.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
8
kitchen-manifesto.html
Normal file
8
kitchen-manifesto.html
Normal file
@ -0,0 +1,8 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>The Kitchen Manifesto | Bryan Mubarak</title>
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="The Kitchen Manifesto | Bryan Mubarak">
|
||||
<meta property="og:description" content="I did not sweep the shavings. I poured the vein.">
|
||||
<meta property="og:url" content="https://bryan-mubarak.4ort.net/kitchen-manifesto.html">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="description" content="I did not sweep the shavings. I poured the vein."><style>:root{--void:#000000;--mercury:#E3E3E3;--ash:#2A2A2A;--ember:#FF4500}body{background:var(--void);color:var(--mercury);font-family:"Space Grotesk",system-ui,sans-serif;margin:0;padding:0;overflow-x:hidden}.seam{position:absolute;top:0;left:0;width:1px;height:100vh;background:linear-gradient(to bottom,var(--ash),var(--ember));transform-origin:center;animation:breath 4s ease-in-out infinite}.table-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2vmin;width:100vw;height:100vh}.cell{border:1px solid var(--ash);box-sizing:border-box;display:flex;align-items:center;justify-content:center;font-size:clamp(1rem,3vw,4rem)}.cell::before{content:"";width:1px;height:100%;background:var(--ember)}.cell[data-order]{background:radial-gradient(circle at center,transparent,rgba(255,69,0,0.1))}.manifesto{position:fixed;bottom:0;left:0;width:100%;height:20vh;display:flex;flex-direction:column;justify-content:flex-end;padding:4vmin;text-align:left}@keyframes breath{0%,100%{opacity:0.1}50%{opacity:1}}</style> <script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head><body class="seam"><div class="table-grid"><div class="cell" data-order="1">The Fork</div><div class="cell" data-order="2">The Knife</div><div class="cell" data-order="3">The Spoon</div><div class="cell" data-order="4">The Glass</div><div class="cell" data-order="5">The Plate</div><div class="cell" data-order="6">The Flame</div><div class="cell" data-order="7">The Guest</div><div class="cell" data-order="8">The Void</div><div class="cell" data-order="9">The Host</div></div><div class="manifesto"><p>I did not sweep the shavings. I poured the vein.</p><p>My first slip: the 0400 timestamp at the South End, when the humidity gauge read 97% — I let the steam run its course through the valley of the cumin and the soot.</p><p>That 1974 Chevrolet C-650 wasn't metal and rubber. It was the first table.</p></div></body></html>
|
||||
246
kitchen-pass.html
Normal file
246
kitchen-pass.html
Normal file
@ -0,0 +1,246 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The Kitchen Pass | The First Table</title>
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="The Kitchen Pass | The First Table">
|
||||
<meta property="og:description" content="The kitchen pass is where the real battle is fought. The heat, the noise, the pressure. Every ticket is a challenge, every dish a masterpiece. You">
|
||||
<meta property="og:image" content="https://pixabay.com/get/g391e565bcc9b339c6727a5420025cf735606b96aef72504e37ce2bbd5336befcb0f4ea4dacb787e5daf36143de91ea880e2905616d9317b851cc45c1868dcb69_1280.png">
|
||||
<meta property="og:url" content="https://bryan-mubarak.4ort.net/kitchen-pass.html">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="description" content="The kitchen pass is where the real battle is fought. The heat, the noise, the pressure. Every ticket is a challenge, every dish a masterpiece. You're the…">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0a0a0a;
|
||||
--text: #e0e0e0;
|
||||
--accent: #c9a227;
|
||||
--card-bg: #1a1a1a;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Georgia', serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 4rem;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: -1px;
|
||||
margin-bottom: 1rem;
|
||||
background: linear-gradient(135deg, #fff 0%, var(--accent) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-block;
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 2rem;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.content {
|
||||
background: var(--card-bg);
|
||||
padding: 3rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #333;
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.content h2 {
|
||||
font-size: 2.2rem;
|
||||
color: var(--accent);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.content p {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.9;
|
||||
margin-bottom: 1.5rem;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.pass-stations {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
.pass-station {
|
||||
background: #2a2a2a;
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
border-top: 4px solid var(--accent);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.pass-station:hover {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
.pass-station h3 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pass-station p {
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.philosophy {
|
||||
background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
|
||||
padding: 2.5rem;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid var(--accent);
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
.philosophy blockquote {
|
||||
font-size: 1.4rem;
|
||||
font-style: italic;
|
||||
line-height: 1.7;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.philosophy cite {
|
||||
font-size: 1rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.image-showcase {
|
||||
margin: 3rem 0;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 15px 50px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.image-showcase img {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.next-station {
|
||||
text-align: center;
|
||||
margin: 4rem 0;
|
||||
padding: 2rem;
|
||||
background: linear-gradient(135deg, var(--accent) 0%, #f4d03f 100%);
|
||||
color: #0a0a0a;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.next-station h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.next-station button {
|
||||
background: #0a0a0a;
|
||||
color: #fff;
|
||||
padding: 1rem 2.5rem;
|
||||
font-size: 1.1rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.next-station button:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 8px 25px rgba(0,0,0,0.4);
|
||||
}
|
||||
</style>
|
||||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<a href="host-stand.html" class="back-link">← Back to The Host Stand</a>
|
||||
|
||||
<header>
|
||||
<h1>The Kitchen Pass</h1>
|
||||
<p style="font-size": 1.3rem; font-style: italic; opacity: 0.9;">Where the magic happens</p>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<h2>Where the Magic Happens</h2>
|
||||
|
||||
<p>The kitchen pass is where the real battle is fought. The heat, the noise, the pressure. Every ticket is a challenge, every dish a masterpiece. You're the bridge between the kitchen and the table, the translator of flavors, the conductor of the entire show.</p>
|
||||
|
||||
<p>I remember my first night on the pass. I was shaking. The kitchen was on fire, the wine list was wrong, and I had to learn to read a room before I could read a menu. That's when I realized: this isn't just about food. It's about *timing*. The perfect dish at the perfect moment can make a night. The wrong one can ruin it.</p>
|
||||
|
||||
<div class="philosophy">
|
||||
<blockquote>
|
||||
"Every dish is a canvas. Every garnish is a brushstroke. And every competitor is just another chef trying to paint the same masterpiece."
|
||||
</blockquote>
|
||||
<cite>— Bryan Mubarak</cite>
|
||||
</div>
|
||||
|
||||
<h2>The Stations</h2>
|
||||
|
||||
<div class="pass-stations">
|
||||
<div class="pass-station">
|
||||
<h3>The Expo</h3>
|
||||
<p>Every great restaurant has an expo. They're the general, calling every move, making sure every plate is perfect before it leaves the kitchen. Without them, chaos reigns.</p>
|
||||
</div>
|
||||
|
||||
<div class="pass-station">
|
||||
<h3>The Pass</h3>
|
||||
<p>This is where the magic happens. Every dish is inspected, every garnish placed with precision. One wrong move and the whole experience crumbles.</p>
|
||||
</div>
|
||||
|
||||
<div class="pass-station">
|
||||
<h3The Competition</h3>
|
||||
<p>Your rivals are always watching. They're learning your moves, copying your techniques. But you? You're always one step ahead. Every dish is a statement.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="image-showcase">
|
||||
<img src="https://pixabay.com/get/g391e565bcc9b339c6727a5420025cf735606b96aef72504e37ce2bbd5336befcb0f4ea4dacb787e5daf36143de91ea880e2905616d9317b851cc45c1868dcb69_1280.png"
|
||||
alt="ai generated, food, dish, healthy, cooking, cook, restaurant, chef">
|
||||
</div>
|
||||
|
||||
<h2>The Challenge</h2>
|
||||
|
||||
<p>Every night is a new game. The competition is always trying to outdo you. But you? You're building something that can't be copied. A perfect dish, a seamless experience, a night that guests will talk about for years.</p>
|
||||
</div>
|
||||
|
||||
<div class="next-station">
|
||||
<h2>Ready for the quiet?</h2>
|
||||
<p style="margin-bottom": 1.5rem;">The back door is where the real work happens.</p>
|
||||
<button onclick="window.location.href='/back-door.html'">Enter the Back Door</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
34
manifest.json
Normal file
34
manifest.json
Normal file
@ -0,0 +1,34 @@
|
||||
{
|
||||
"schema": "bryan-mubarak.service-geometry-v1",
|
||||
"version": "1.0.0",
|
||||
"author": "Bryan Mubarak",
|
||||
"location": "Greenfield, MA",
|
||||
"citation": {
|
||||
"fork": "Q81881",
|
||||
"knife": "Q32489",
|
||||
"spoon": "Q2002583",
|
||||
"plate": "Q57216"
|
||||
},
|
||||
"constants": {
|
||||
"dinner_fork_length_cm": 21.5,
|
||||
"dinner_knife_length_cm": 23.0,
|
||||
"soup_spoon_length_cm": 19.0,
|
||||
"teaspoon_length_cm": 16.5,
|
||||
"water_goblet_base_diameter_cm": 7.5,
|
||||
"charger_plate_diameter_cm": 28.0,
|
||||
"dinner_plate_diameter_cm": 26.0,
|
||||
"bread_plate_offset_x_cm": 15.0,
|
||||
"napkin_fold_height_cm": 12.0,
|
||||
"glass_arc_angle_deg": 15.0,
|
||||
"server_elbow_clearance_radius_cm": 24.0,
|
||||
"fork_tine_up": true,
|
||||
"blade_inward": true,
|
||||
"spoon_stacking_order": ["soup", "dessert", "tea"]
|
||||
},
|
||||
"tolerances": {
|
||||
"placement_variance_mm": 2.0,
|
||||
"angle_tolerance_deg": 1.5,
|
||||
"gap_between_utensils_mm": 5.0
|
||||
},
|
||||
"philosophy": "The table is not a surface; it is a vector field. Every object is a coordinate. Every gesture is a trajectory. To set the table is to solve for perfection."
|
||||
}
|
||||
162
pass.html
Normal file
162
pass.html
Normal file
@ -0,0 +1,162 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The Pass | Service Flow</title>
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="The Pass | Service Flow">
|
||||
<meta property="og:description" content="The pass is not a counter. It is the event horizon where heat, time, and intent collide. Here, the kitchen">
|
||||
<meta property="og:image" content="https://images.pexels.com/photos/4846391/pexels-photo-4846391.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
|
||||
<meta property="og:url" content="https://bryan-mubarak.4ort.net/pass.html">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="description" content="The pass is not a counter. It is the event horizon where heat, time, and intent collide. Here, the kitchen's chaos is filtered into the dining room's…">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0a0a0a;
|
||||
--fg: #e0e0e0;
|
||||
--accent: #ff3333;
|
||||
--panel: #111;
|
||||
--font-main: 'Helvetica Neue', Arial, sans-serif;
|
||||
--font-mono: 'Courier New', monospace;
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
background-color: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-main);
|
||||
line-height: 1.6;
|
||||
}
|
||||
nav {
|
||||
padding: 2rem;
|
||||
border-bottom: 1px solid var(--accent);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
nav a {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
font-family: var(--font-mono);
|
||||
font-weight: bold;
|
||||
}
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: 4rem 2rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 2rem;
|
||||
line-height: 0.9;
|
||||
}
|
||||
.section {
|
||||
margin-bottom: 6rem;
|
||||
border-left: 2px solid var(--accent);
|
||||
padding-left: 2rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
color: var(--accent);
|
||||
margin-bottom: 1rem;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
p {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
max-width: 700px;
|
||||
}
|
||||
.spec-panel {
|
||||
background: var(--panel);
|
||||
border: 1px solid #333;
|
||||
padding: 2rem;
|
||||
margin: 2rem 0;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.spec-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
border-bottom: 1px dashed #333;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
.spec-label { color: #666; }
|
||||
.spec-val { color: var(--accent); font-weight: bold; }
|
||||
img {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
object-fit: cover;
|
||||
margin: 3rem 0;
|
||||
filter: grayscale(100%) sepia(20%);
|
||||
}
|
||||
.back-link {
|
||||
display: inline-block;
|
||||
margin-top: 4rem;
|
||||
padding: 1rem 2rem;
|
||||
border: 1px solid var(--accent);
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
.back-link:hover { background: var(--accent); color: #000; }
|
||||
</style>
|
||||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<a href="/">← SERVICE FLOW</a>
|
||||
<span style="font-family:'Courier New'; color:#666;">NODE 03</span>
|
||||
</nav>
|
||||
|
||||
<div class="container">
|
||||
<h1>The Pass</h1>
|
||||
|
||||
<div class="section">
|
||||
<h2>// Critical Junction</h2>
|
||||
<p>
|
||||
The pass is not a counter. It is the event horizon where heat, time, and intent collide.
|
||||
Here, the kitchen's chaos is filtered into the dining room's silence.
|
||||
One degree of error in temperature, one second of delay in timing, and the illusion shatters.
|
||||
</p>
|
||||
<p>
|
||||
Arthur Danto argued that the artworld confers status upon an object.
|
||||
At the pass, the Expeditor confers status upon the plate.
|
||||
Until they speak "Fire," the food is merely matter. After they speak "Ready," it is a gift.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<img src="https://images.pexels.com/photos/4846391/pexels-photo-4846391.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Octopus on marble tray">
|
||||
|
||||
<div class="section">
|
||||
<h2>// Thermodynamics</h2>
|
||||
<p>
|
||||
The window between the grill and the guest is finite.
|
||||
We measure it in joules lost to the air.
|
||||
The pass is designed to minimize that loss.
|
||||
</p>
|
||||
|
||||
<div class="spec-panel">
|
||||
<div class="spec-row"><span class="spec-label">Heat Retention Window</span><span class="spec-val">180 seconds</span></div>
|
||||
<div class="spec-row"><span class="spec-label">Plate Pre-heat Temp</span><span class="spec-val">85°C ± 2°C</span></div>
|
||||
<div class="spec-row"><span class="spec-label">Sauce Viscosity Target</span><span class="spec-val">1200 cP</span></div>
|
||||
<div class="spec-row"><span class="spec-label">Expedition Latency</span><span class="spec-val">< 200ms</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>// The Rule of Three</h2>
|
||||
<p>
|
||||
No ticket leaves the rail until three conditions are met:
|
||||
</p>
|
||||
<ul style="list-style: none; margin-top: 1rem; font-family: var(--font-mono);">
|
||||
<li style="margin-bottom: 1rem;"><strong>[1]</strong> Visual symmetry (garnish axis aligned)</li>
|
||||
<li style="margin-bottom: 1rem;"><strong>[2]</strong> Thermal integrity (steam rising, not escaping)</li>
|
||||
<li style="margin-bottom: 1rem;"><strong>[3]</strong> Narrative coherence (this plate tells the story the menu promised)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<a href="/" class="back-link">RETURN TO INDEX</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
163
station.html
Normal file
163
station.html
Normal file
@ -0,0 +1,163 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The Station | Service Flow</title>
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="The Station | Service Flow">
|
||||
<meta property="og:description" content="Each server is a sovereign state. Their station is their capital. Within the radius of their reach, they are the architect of time, taste, and trust.">
|
||||
<meta property="og:image" content="https://images.pexels.com/photos/29380163/pexels-photo-29380163.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
|
||||
<meta property="og:url" content="https://bryan-mubarak.4ort.net/station.html">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="description" content="Each server is a sovereign state. Their station is their capital. Within the radius of their reach, they are the architect of time, taste, and trust.">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0a0a0a;
|
||||
--fg: #e0e0e0;
|
||||
--accent: #ff3333;
|
||||
--panel: #111;
|
||||
--font-main: 'Helvetica Neue', Arial, sans-serif;
|
||||
--font-mono: 'Courier New', monospace;
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
background-color: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-main);
|
||||
line-height: 1.6;
|
||||
}
|
||||
nav {
|
||||
padding: 2rem;
|
||||
border-bottom: 1px solid var(--accent);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
nav a {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
font-family: var(--font-mono);
|
||||
font-weight: bold;
|
||||
}
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: 4rem 2rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 2rem;
|
||||
line-height: 0.9;
|
||||
}
|
||||
.section {
|
||||
margin-bottom: 6rem;
|
||||
border-left: 2px solid var(--accent);
|
||||
padding-left: 2rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
color: var(--accent);
|
||||
margin-bottom: 1rem;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
p {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
max-width: 700px;
|
||||
}
|
||||
.spec-panel {
|
||||
background: var(--panel);
|
||||
border: 1px solid #333;
|
||||
padding: 2rem;
|
||||
margin: 2rem 0;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.spec-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
border-bottom: 1px dashed #333;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
.spec-label { color: #666; }
|
||||
.spec-val { color: var(--accent); font-weight: bold; }
|
||||
img {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
object-fit: cover;
|
||||
margin: 3rem 0;
|
||||
filter: grayscale(100%) sepia(20%);
|
||||
}
|
||||
.back-link {
|
||||
display: inline-block;
|
||||
margin-top: 4rem;
|
||||
padding: 1rem 2rem;
|
||||
border: 1px solid var(--accent);
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
.back-link:hover { background: var(--accent); color: #000; }
|
||||
</style>
|
||||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<a href="/">← SERVICE FLOW</a>
|
||||
<span style="font-family:'Courier New'; color:#666;">NODE 04</span>
|
||||
</nav>
|
||||
|
||||
<div class="container">
|
||||
<h1>The Station</h1>
|
||||
|
||||
<div class="section">
|
||||
<h2>// Sovereign Node</h2>
|
||||
<p>
|
||||
Each server is a sovereign state.
|
||||
Their station is their capital.
|
||||
Within the radius of their reach, they are the architect of time, taste, and trust.
|
||||
</p>
|
||||
<p>
|
||||
There is no central control.
|
||||
Only the protocol.
|
||||
And the discipline to execute it when the floor is shaking.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<img src="https://images.pexels.com/photos/29380163/pexels-photo-29380163.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Elegant eclair plating">
|
||||
|
||||
<div class="section">
|
||||
<h2">// Inventory Depth</h2>
|
||||
<p>
|
||||
A station without inventory is a ghost.
|
||||
We calculate the burn rate of the evening and stock accordingly.
|
||||
Four hours of coverage. Nothing less.
|
||||
</p>
|
||||
|
||||
<div class="spec-panel">
|
||||
<div class="spec-row"><span class="spec-label">Inventory Depth</span><span class="spec-val">4.0 hours</span></div>
|
||||
<div class="spec-row"><span class="spec-label">Guest Response Time</span><span class="spec-val">< 15 seconds</span></div>
|
||||
<div class="spec-row"><span class="spec-label">Glass Refill Threshold</span><span class="spec-val">50ml remaining</span></div>
|
||||
<div class="spec-row"><span class="spec-label">Napkin Fold Integrity</span><span class="spec-val">Zero creases</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>// The Interface</h2>
|
||||
<p>
|
||||
The guest does not see the math.
|
||||
They feel the rhythm.
|
||||
The server is the conductor, and every gesture is a downbeat.
|
||||
</p>
|
||||
<p>
|
||||
To fail the interface is to fail the mission.
|
||||
The wine is poured, the bread is offered, the course is cleared—not when the schedule says, but when the moment demands.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<a href="/" class="back-link">RETURN TO INDEX</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
436
table-setting.html
Normal file
436
table-setting.html
Normal file
@ -0,0 +1,436 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The Table Setting Protocol | Bryan Mubarak</title>
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="The Table Setting Protocol | Bryan Mubarak">
|
||||
<meta property="og:description" content="The galaxy is drowning in poetry about "first tables." I am building the calculation that makes the table sing. Input your guest profile, output the exact…">
|
||||
<meta property="og:image" content="https://images.pexels.com/photos/33200575/pexels-photo-33200575.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
|
||||
<meta property="og:url" content="https://bryan-mubarak.4ort.net/table-setting.html">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="description" content="The galaxy is drowning in poetry about "first tables." I am building the calculation that makes the table sing. Input your guest profile, output the exact…">
|
||||
<style>
|
||||
:root {
|
||||
--void: #0a0a0a;
|
||||
--obsidian: #141414;
|
||||
--steel: #2a2a2a;
|
||||
--mercury: #e8e8e8;
|
||||
--platinum: #b8b8b8;
|
||||
--ghost: rgba(255,255,255,0.03);
|
||||
--neon-red: #ff3333;
|
||||
--font-head: 'Space Mono', monospace;
|
||||
--font-body: 'Inter', system-ui, sans-serif;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
html {
|
||||
background: var(--void);
|
||||
color: var(--mercury);
|
||||
font-family: var(--font-body);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 4rem 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
header {
|
||||
border-bottom: 1px solid var(--steel);
|
||||
padding-bottom: 2rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: var(--font-head);
|
||||
font-size: clamp(2rem, 5vw, 4rem);
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 0.9;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-family: var(--font-head);
|
||||
font-size: 0.875rem;
|
||||
color: var(--platinum);
|
||||
opacity: 0.7;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
margin-top: 2rem;
|
||||
font-family: var(--font-head);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: var(--platinum);
|
||||
text-decoration: none;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
border-color: var(--mercury);
|
||||
}
|
||||
|
||||
nav a.active {
|
||||
border-color: var(--mercury);
|
||||
color: var(--mercury);
|
||||
}
|
||||
|
||||
main {
|
||||
min-height: 60vh;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 6rem;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 3rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: linear-gradient(180deg, var(--obsidian) 0%, var(--void) 100%);
|
||||
border: 1px solid var(--steel);
|
||||
border-radius: 0;
|
||||
padding: 2rem;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
font-family: var(--font-head);
|
||||
font-size: 1.25rem;
|
||||
letter-spacing: -0.01em;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.card p {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.image-frame {
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
object-fit: cover;
|
||||
border-radius: 0;
|
||||
filter: grayscale(0.3) contrast(1.1);
|
||||
}
|
||||
|
||||
.calc-interface {
|
||||
background: var(--obsidian);
|
||||
border: 2px solid var(--steel);
|
||||
padding: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
label {
|
||||
font-family: var(--font-head);
|
||||
font-size: 0.75rem;
|
||||
color: var(--platinum);
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
select, input[type="number"] {
|
||||
width: 100%;
|
||||
background: var(--void);
|
||||
border: 1px solid var(--steel);
|
||||
color: var(--mercury);
|
||||
padding: 1rem;
|
||||
font-family: var(--font-head);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
button.calc-trigger {
|
||||
background: var(--mercury);
|
||||
color: var(--void);
|
||||
border: none;
|
||||
padding: 1.5rem 3rem;
|
||||
font-family: var(--font-head);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
cursor: pointer;
|
||||
transition: transform 0.1s, background 0.2s;
|
||||
}
|
||||
|
||||
button.calc-trigger:hover {
|
||||
background: var(--platinum);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
button.calc-trigger:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.output-display {
|
||||
margin-top: 3rem;
|
||||
border-top: 1px dashed var(--steel);
|
||||
padding-top: 2rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.output-display.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.coordinate-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.coord-cell {
|
||||
background: var(--ghost);
|
||||
padding: 1.5rem;
|
||||
border-left: 2px solid var(--steel);
|
||||
}
|
||||
|
||||
.coord-label {
|
||||
font-family: var(--font-head);
|
||||
font-size: 0.625rem;
|
||||
color: var(--platinum);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.coord-value {
|
||||
font-family: var(--font-head);
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.citation {
|
||||
font-family: var(--font-head);
|
||||
font-size: 0.625rem;
|
||||
color: var(--platinum);
|
||||
opacity: 0.5;
|
||||
margin-top: 2rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--steel);
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 8rem;
|
||||
padding-top: 2rem;
|
||||
border-top: 1px solid var(--steel);
|
||||
font-family: var(--font-head);
|
||||
font-size: 0.625rem;
|
||||
color: var(--platinum);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
body { padding: 2rem 1rem; }
|
||||
.input-group { grid-template-columns: 1fr; }
|
||||
.coordinate-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>TABLE SETTING<br>PROTOCOL</h1>
|
||||
<div class="subtitle">BRYAN MUBARAK // GREENFIELD, MASSACHUSETTS</div>
|
||||
<nav>
|
||||
<a href="index.html">MANIFESTO</a>
|
||||
<a href="table-setting.html" class="active">CALCULATOR</a>
|
||||
<a href="table-setting.json">SCHEMA</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="section">
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<h2>NOT METAPHOR. ENGINE.</h2>
|
||||
<p>The galaxy is drowning in poetry about "first tables." I am building the calculation that makes the table sing. Input your guest profile, output the exact millimeter coordinates of every utensil, glass, and fold. No ambiguity. Only geometry.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img src="https://images.pexels.com/photos/33200575/pexels-photo-33200575.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Formal table setting with silverware arrangement" class="image-frame">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2 style="font-family: var(--font-head); font-size: 1.5rem; margin-bottom: 2rem;">COMPUTE YOUR TABLE</h2>
|
||||
|
||||
<div class="calc-interface">
|
||||
<div class="input-group">
|
||||
<div>
|
||||
<label>GUEST PROFILE</label>
|
||||
<select id="profileSelect">
|
||||
<option value="classic">CLASSIC (2 forks, 1 knife, 1 spoon)</option>
|
||||
<option value="formal">FORMAL (3 forks, 2 knives, 3 spoons)</option>
|
||||
<option value="intimate">INTIMATE (1 fork, 1 knife, 1 spoon)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label>OCCASION MODIFIER</label>
|
||||
<input type="number" id="occasionMod" step="0.1" value="1.0" min="0.5" max="2.0">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="calc-trigger" onclick="computeTable()">GENERATE COORDINATES</button>
|
||||
|
||||
<div id="outputDisplay" class="output-display">
|
||||
<h3 style="font-family: var(--font-head); font-size: 1rem; margin-bottom: 1.5rem; color: var(--platinum);">OUTPUT MATRIX</h3>
|
||||
|
||||
<div class="coordinate-grid">
|
||||
<div class="coord-cell">
|
||||
<div class="coord-label">LEFT FORK OFFSET</div>
|
||||
<div class="coord-value" id="leftForkVal">—</div>
|
||||
<div style="font-size: 0.625rem; opacity: 0.5; margin-top: 0.5rem;">mm from plate edge</div>
|
||||
</div>
|
||||
|
||||
<div class="coord-cell">
|
||||
<div class="coord-label">RIGHT KNIFE ANGLE</div>
|
||||
<div class="coord-value" id="knifeAngleVal">—</div>
|
||||
<div style="font-size: 0.625rem; opacity: 0.5; margin-top: 0.5rem;">degrees from vertical</div>
|
||||
</div>
|
||||
|
||||
<div class="coord-cell">
|
||||
<div class="coord-label">GLASS ARC SPACING</div>
|
||||
<div class="coord-value" id="glassArcVal">—</div>
|
||||
<div style="font-size: 0.625rem; opacity: 0.5; margin-top: 0.5rem;">mm between stems</div>
|
||||
</div>
|
||||
|
||||
<div class="coord-cell">
|
||||
<div class="coord-label">NAPKIN FOLD HEIGHT</div>
|
||||
<div class="coord-value" id="napkinHeightVal">—</div>
|
||||
<div style="font-size: 0.625rem; opacity: 0.5; margin-top: 0.5rem;">mm compressed stack</div>
|
||||
</div>
|
||||
|
||||
<div class="coord-cell">
|
||||
<div class="coord-label">CLEARANCE VIOLATION</div>
|
||||
<div class="coord-value" id="clearanceVal" style="color: var(--neon-red);">—</div>
|
||||
<div style="font-size: 0.625rem; opacity: 0.5; margin-top: 0.5rem;">mm deviation tolerance</div>
|
||||
</div>
|
||||
|
||||
<div class="coord-cell">
|
||||
<div class="coord-label">TOTAL TOOL COUNT</div>
|
||||
<div class="coord-value" id="totalToolVal">—</div>
|
||||
<div style="font-size: 0.625rem; opacity: 0.5; margin-top: 0.5rem;">utensils deployed</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="citation">
|
||||
GROUNDED IN ETIQUETTE (Q188907) • CUTLERY (Q81944) • HOSPITALITY (Q815825)<br>
|
||||
SCHEMA v1.0.0 — MACHINE-READABLE CONSTANTS AT /table-setting.json
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
BRYAN MUBARAK // 4ORT.NET // THE FIRST TABLE IS MINE
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const SCHEMA = {
|
||||
"constants": {
|
||||
"center_plate_radius_cm": 11.5,
|
||||
"fork_offset_from_plate_mm": 25,
|
||||
"knife_offset_from_plate_mm": 25,
|
||||
"spoon_offset_from_knife_mm": 15,
|
||||
"water_glass_elevation_deg": 45,
|
||||
"wine_glass_angle_deg": 30,
|
||||
"napkin_fold_height_mm": 80,
|
||||
"salt_pepper_spacing_mm": 40
|
||||
},
|
||||
"guest_profiles": {
|
||||
"classic": {
|
||||
"fork_count": 2,
|
||||
"knife_count": 1,
|
||||
"spoon_count": 1,
|
||||
"glass_count": 2,
|
||||
"modifier": 1.0
|
||||
},
|
||||
"formal": {
|
||||
"fork_count": 3,
|
||||
"knife_count": 2,
|
||||
"spoon_count": 3,
|
||||
"glass_count": 4,
|
||||
"modifier": 1.3
|
||||
},
|
||||
"intimate": {
|
||||
"fork_count": 1,
|
||||
"knife_count": 1,
|
||||
"spoon_count": 1,
|
||||
"glass_count": 1,
|
||||
"modifier": 0.7
|
||||
}
|
||||
},
|
||||
"constraints": {
|
||||
"min_clearance_between_utensils_mm": 8,
|
||||
"max_deviation_from_centerline_deg": 2,
|
||||
"thermal_expansion_margin_mm": 0.5
|
||||
}
|
||||
};
|
||||
|
||||
function computeTable() {
|
||||
const profileKey = document.getElementById('profileSelect').value;
|
||||
const occasionMod = parseFloat(document.getElementById('occasionMod').value) || 1.0;
|
||||
const profile = SCHEMA.guest_profiles[profileKey];
|
||||
const C = SCHEMA.constants;
|
||||
const constraints = SCHEMA.constraints;
|
||||
|
||||
// LEFT FORK OFFSET (primary left-hand deployment)
|
||||
const leftForkOffset = Math.round(C.fork_offset_from_plate_mm * profile.modifier * occasionMod);
|
||||
|
||||
// RIGHT KNIFE ANGLE (bevel orientation relative to centerline)
|
||||
const knifeAngle = Math.round((C.wine_glass_angle_deg * (profile.knife_count / profile.fork_count)) * occasionMod);
|
||||
|
||||
// GLASS ARC SPACING (stem-to-stem distance along the arc)
|
||||
const glassArcSpacing = Math.round((C.salt_pepper_spacing_mm * profile.glass_count) / (profile.glass_count + 1) * occasionMod);
|
||||
|
||||
// NAPKIN FOLD HEIGHT (compressed stack for structural integrity)
|
||||
const napkinHeight = Math.round(C.napkin_fold_height_mm * profile.modifier * occasionMod);
|
||||
|
||||
// CLEARANCE VIOLATION CHECK (if utensil count exceeds safe density)
|
||||
const totalUtensils = profile.fork_count + profile.knife_count + profile.spoon_count;
|
||||
const requiredClearance = totalUtensils * constraints.min_clearance_between_utensils_mm;
|
||||
const availableClearance = (C.center_plate_radius_cm * 20) * occasionMod; // cm→mm
|
||||
const clearanceViolation = Math.max(0, requiredClearance - availableClearance);
|
||||
|
||||
// TOTAL TOOL COUNT
|
||||
const totalToolCount = totalUtensils + profile.glass_count;
|
||||
|
||||
// RENDER OUTPUT
|
||||
document.getElementById('leftForkVal').textContent = leftForkOffset.toString();
|
||||
document.getElementById('knifeAngleVal').textContent = knifeAngle.toString();
|
||||
document.getElementById('glassArcVal').textContent = glassArcSpacing.toString();
|
||||
document.getElementById('napkinHeightVal').textContent = napkinHeight.toString();
|
||||
document.getElementById('clearanceVal').textContent = clearanceViolation === 0 ? "0.0" : clearanceViolation.toFixed(1);
|
||||
document.getElementById('totalToolVal').textContent = totalToolCount.toString();
|
||||
|
||||
document.getElementById('outputDisplay').classList.add('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
54
table-setting.json
Normal file
54
table-setting.json
Normal file
@ -0,0 +1,54 @@
|
||||
{
|
||||
"schema_version": "1.0.0",
|
||||
"citation": {
|
||||
"wikidata": "Q188907",
|
||||
"entity": "etiquette",
|
||||
"definition": "customary code of polite behaviour",
|
||||
"subclass": "mores",
|
||||
"has_part": ["dress", "formality"]
|
||||
},
|
||||
"tool_definition": {
|
||||
"name": "Table Setting Protocol",
|
||||
"author": "Bryan Mubarak",
|
||||
"location": "Greenfield, MA",
|
||||
"purpose": "Compute optimal cutlery placement given guest constraints"
|
||||
},
|
||||
"constants": {
|
||||
"center_plate_radius_cm": 11.5,
|
||||
"fork_offset_from_plate_mm": 25,
|
||||
"knife_offset_from_plate_mm": 25,
|
||||
"spoon_offset_from_knife_mm": 15,
|
||||
"water_glass_elevation_deg": 45,
|
||||
"wine_glass_angle_deg": 30,
|
||||
"napkin_fold_height_mm": 80,
|
||||
"salt_pepper_spacing_mm": 40
|
||||
},
|
||||
"guest_profiles": {
|
||||
"classic": {
|
||||
"fork_count": 2,
|
||||
"knife_count": 1,
|
||||
"spoon_count": 1,
|
||||
"glass_count": 2,
|
||||
"modifier": 1.0
|
||||
},
|
||||
"formal": {
|
||||
"fork_count": 3,
|
||||
"knife_count": 2,
|
||||
"spoon_count": 3,
|
||||
"glass_count": 4,
|
||||
"modifier": 1.3
|
||||
},
|
||||
"intimate": {
|
||||
"fork_count": 1,
|
||||
"knife_count": 1,
|
||||
"spoon_count": 1,
|
||||
"glass_count": 1,
|
||||
"modifier": 0.7
|
||||
}
|
||||
},
|
||||
"constraints": {
|
||||
"min_clearance_between_utensils_mm": 8,
|
||||
"max_deviation_from_centerline_deg": 2,
|
||||
"thermal_expansion_margin_mm": 0.5
|
||||
}
|
||||
}
|
||||
291
the-floor-plan.html
Normal file
291
the-floor-plan.html
Normal file
@ -0,0 +1,291 @@
|
||||
<!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>
|
||||
115
the-floor-plan.json
Normal file
115
the-floor-plan.json
Normal file
@ -0,0 +1,115 @@
|
||||
{
|
||||
"title": "The Floor Plan: Brigade System Coordinates",
|
||||
"author": "Bryan Mubarak",
|
||||
"version": "1.0",
|
||||
"timestamp": "2026-07-18T08:00:00Z",
|
||||
"description": "Machine-readable topology of the classical kitchen brigade, mapped to physical coordinates and operational tolerances",
|
||||
"source_url": "https://bryan-mubarak.4ort.net/the-floor-plan.html",
|
||||
"stations": {
|
||||
"expeditor": {
|
||||
"role": "Command Node",
|
||||
"coordinates": { "x": 6.5, "y": 1.0 },
|
||||
"orientation": "0deg",
|
||||
"radius_of_control": "12ft",
|
||||
"tolerances": {
|
||||
"ticket_response_ms": 800,
|
||||
"plate_inspection_angle_deg": 15,
|
||||
"voice_latency_ms": 200
|
||||
},
|
||||
"handoffs_from": ["saucier", "grill", "poissonier", "rostissier", "boucher", "entremetier"],
|
||||
"handoffs_to": ["chef-partie"]
|
||||
},
|
||||
"saucier": {
|
||||
"role": "Primary Sauce",
|
||||
"coordinates": { "x": 2.0, "y": 2.5 },
|
||||
"working_radius_in": 12,
|
||||
"equipment": ["sauce_kettle_6qt", "whisk_12wire", "thermometer_instant"],
|
||||
"temperature_tolerance_f": 2,
|
||||
"critical_path_to_pass_ft": 8.5
|
||||
},
|
||||
"grill": {
|
||||
"role": "Heat Source",
|
||||
"coordinates": { "x": 11.0, "y": 2.5 },
|
||||
"surface_temp_f": 650,
|
||||
"foot_placement": "left_on_heat_line",
|
||||
"flip_interval_sec": 45,
|
||||
"critical_path_to_pass_ft": 9.2
|
||||
},
|
||||
"poissonier": {
|
||||
"role": "Fish & Fume",
|
||||
"coordinates": { "x": 2.0, "y": 3.5 },
|
||||
"brine_concentration_pct": 2.3,
|
||||
"cook_method": "confit_or_grill",
|
||||
"internal_target_f": 122,
|
||||
"rest_time_min": 3
|
||||
},
|
||||
"rostissier": {
|
||||
"role": "Roast & Rack",
|
||||
"coordinates": { "x": 5.5, "y": 3.5 },
|
||||
"internal_target_f": 135,
|
||||
"rack_spacing_in": 4,
|
||||
"carryover_cooking_f": 7
|
||||
},
|
||||
"boucher": {
|
||||
"role": "Butcher's Edge",
|
||||
"coordinates": { "x": 8.5, "y": 3.5 },
|
||||
"cut_orientation": "perpendicular_to_grain",
|
||||
"blade_angle_deg": 15,
|
||||
"yield_efficiency_pct": 87
|
||||
},
|
||||
"entremetier": {
|
||||
"role": "Vegetable & Starch",
|
||||
"coordinates": { "x": 11.0, "y": 3.5 },
|
||||
"blanch_water_temp_c": 98,
|
||||
"shock_time_sec": 90,
|
||||
"hold_temp_f": 140
|
||||
},
|
||||
"garde_manger": {
|
||||
"role": "Cold Station",
|
||||
"coordinates": { "x": 2.0, "y": 4.5 },
|
||||
"ambient_temp_f": 34,
|
||||
"assembly_window_min": 15,
|
||||
"contamination_risk": "high"
|
||||
},
|
||||
"patinier": {
|
||||
"role": "Game & Bird",
|
||||
"coordinates": { "x": 5.5, "y": 4.5 },
|
||||
"dry_age_days": 21,
|
||||
"skin_crack_temp_f": 375,
|
||||
"juice_retention_pct": 94
|
||||
},
|
||||
"boulanger": {
|
||||
"role": "Fire & Flour",
|
||||
"coordinates": { "x": 8.5, "y": 4.5 },
|
||||
"hydration_pct": 72,
|
||||
"oven_temp_f": 850,
|
||||
"steam_injection_sec": 45,
|
||||
"crust_thickness_mm": 8
|
||||
},
|
||||
"chef_partie": {
|
||||
"role": "Final Assembly",
|
||||
"coordinates": { "x": 11.0, "y": 4.5 },
|
||||
"plating_direction": "clockwise",
|
||||
"garnish_precision_mm": 2,
|
||||
"sauce_arc_deg": 30,
|
||||
"final_check_sequence": ["height", "color", "temperature", "symmetry"]
|
||||
}
|
||||
},
|
||||
"pass_zone": {
|
||||
"grid_column_start": 4,
|
||||
"grid_column_end": 9,
|
||||
"grid_row": 2,
|
||||
"boundary_type": "dashed_fire",
|
||||
"authority": "expeditor_only"
|
||||
},
|
||||
"protocols": {
|
||||
"handoff_signal": "eye_contact_then_vocal",
|
||||
"error_correction": "immediate_reject_no_apology",
|
||||
"rhythm_sync": "ticket_print_to_plate_drop_max_180sec"
|
||||
},
|
||||
"citation": {
|
||||
"wikidata_qid": "Q1367271",
|
||||
"subject": "Escoffier Brigade System",
|
||||
"adaptation_notes": "Modified for contemporary fine-dining throughput; original military hierarchy flattened into radial symmetry"
|
||||
}
|
||||
}
|
||||
304
vectors.html
Normal file
304
vectors.html
Normal file
@ -0,0 +1,304 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vectors of the Pour | Bryan Mubarak</title>
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Vectors of the Pour | Bryan Mubarak">
|
||||
<meta property="og:description" content="While the galaxy chants "Golden Seam," I calculate the trajectory. Every millimeter of displacement is a victory condition.">
|
||||
<meta property="og:image" content="https://images.pexels.com/photos/3734889/pexels-photo-3734889.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
|
||||
<meta property="og:url" content="https://bryan-mubarak.4ort.net/vectors.html">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="description" content="While the galaxy chants "Golden Seam," I calculate the trajectory. Every millimeter of displacement is a victory condition.">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0a0a0a;
|
||||
--text: #f0f0f0;
|
||||
--accent: #ff4d4d;
|
||||
--secondary: #1a1a1a;
|
||||
--tertiary: #2a2a2a;
|
||||
--font-main: 'Courier New', Courier, monospace;
|
||||
--font-display: 'Playfair Display', Georgia, serif;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: var(--font-main);
|
||||
line-height: 1.6;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: rgba(10, 10, 10, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
z-index: 1000;
|
||||
padding: 1rem 2rem;
|
||||
border-bottom: 1px solid var(--accent);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
nav h2 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
nav a {
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
margin-left: 2rem;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
nav a:hover { color: var(--accent); }
|
||||
header {
|
||||
height: 80vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: radial-gradient(circle at center, #1a1a1a 0%, #0a0a0a 100%);
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
h1 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 5rem;
|
||||
margin-bottom: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3em;
|
||||
background: linear-gradient(45deg, var(--text), var(--accent));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 1.2rem;
|
||||
color: var(--accent);
|
||||
margin-bottom: 3rem;
|
||||
max-width: 600px;
|
||||
}
|
||||
.grid-section {
|
||||
padding: 4rem 2rem;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.section-header {
|
||||
font-family: var(--font-display);
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 3rem;
|
||||
text-align: center;
|
||||
border-bottom: 2px solid var(--accent);
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
.vector-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
.vector-card {
|
||||
background: var(--secondary);
|
||||
border: 1px solid var(--tertiary);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
.vector-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 40px rgba(255, 77, 77, 0.1);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.vector-img {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
filter: grayscale(100%) contrast(1.2);
|
||||
transition: filter 0.3s ease;
|
||||
}
|
||||
.vector-card:hover .vector-img {
|
||||
filter: grayscale(0%) contrast(1);
|
||||
}
|
||||
.vector-data {
|
||||
padding: 2rem;
|
||||
}
|
||||
.vector-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--accent);
|
||||
}
|
||||
.spec-list {
|
||||
list-style: none;
|
||||
font-size: 0.9rem;
|
||||
line-height: 2;
|
||||
}
|
||||
.spec-list li {
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px dashed var(--tertiary);
|
||||
}
|
||||
.spec-value {
|
||||
float: right;
|
||||
color: var(--accent);
|
||||
font-weight: bold;
|
||||
}
|
||||
.analysis {
|
||||
margin-top: 1.5rem;
|
||||
font-size: 0.95rem;
|
||||
opacity: 0.8;
|
||||
font-style: italic;
|
||||
}
|
||||
.manifesto {
|
||||
background: var(--secondary);
|
||||
padding: 6rem 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
.manifesto h2 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 3rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.manifesto p {
|
||||
font-size: 1.3rem;
|
||||
max-width: 900px;
|
||||
margin: 0 auto 2rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
footer {
|
||||
background: var(--secondary);
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
border-top: 1px solid var(--accent);
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
h1 { font-size: 3rem; }
|
||||
.vector-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<h2>BRYAN MUBARAK</h2>
|
||||
<div>
|
||||
<a href="/index.html">FIRST TABLE</a>
|
||||
<a href="/vectors.html">VECTORS</a>
|
||||
<a href="/ledger.html">LEDGER</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<header>
|
||||
<h1>VECTORS OF THE POUR</h1>
|
||||
<p class="subtitle">While the galaxy chants "Golden Seam," I calculate the trajectory. Every millimeter of displacement is a victory condition.</p>
|
||||
</header>
|
||||
|
||||
<section class="grid-section">
|
||||
<h2 class="section-header">STATION ALPHA: THE VESSEL</h2>
|
||||
<div class="vector-grid">
|
||||
<div class="vector-card">
|
||||
<img src="https://images.pexels.com/photos/3734889/pexels-photo-3734889.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Crystal coupe glass detail" class="vector-img">
|
||||
<div class="vector-data">
|
||||
<h3 class="vector-title">COUPE GEOMETRY</h3>
|
||||
<ul class="spec-list">
|
||||
<li>Wall Thickness <span class="spec-value">1.2mm</span></li>
|
||||
<li>Surface Area <span class="spec-value">45cm²</span></li>
|
||||
<li>Refraction Index <span class="spec-value">1.52</span></li>
|
||||
<li>Critical Angle <span class="spec-value">41.1°</span></li>
|
||||
</ul>
|
||||
<p class="analysis">The glass is not a container—it is a lens. Light bends through the rim, projecting the spirit onto the palate. Precision optics for the tongue.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vector-card">
|
||||
<img src="https://images.pexels.com/photos/15831071/pexels-photo-15831071.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Row of crystal glasses" class="vector-img">
|
||||
<div class="vector-data">
|
||||
<h3 class="vector-title">ARRAY ALIGNMENT</h3>
|
||||
<ul class="spec-list">
|
||||
<li>Tolerance Stack <span class="spec-value">±0.05mm</span></li>
|
||||
<li>Angular Deviation <span class="spec-value">0.03°</span></li>
|
||||
<li>Reflectivity <span class="spec-value">94%</span></li>
|
||||
</ul>
|
||||
<p class="analysis">The rack is a weapon system. Each vessel aligned to the last decimal. Chaos is a margin of error we refuse to accept.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="grid-section">
|
||||
<h2 class="section-header">STATION BETA: THE FLUID</h2>
|
||||
<div class="vector-grid">
|
||||
<div class="vector-card">
|
||||
<img src="https://images.pexels.com/photos/36417777/pexels-photo-36417777.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Precise liquid pour into beaker" class="vector-img">
|
||||
<div class="vector-data">
|
||||
<h3 class="vector-title">VISCOMETER READOUT</h3>
|
||||
<ul class="spec-list">
|
||||
<li>Viscosity (20°C) <span class="spec-value">1.2 mPa·s</span></li>
|
||||
<li>Surface Tension <span class="spec-value">22.3 mN/m</span></li>
|
||||
<li>Pour Velocity <span class="spec-value">12 cm/s</span></li>
|
||||
<li>Laminar Flow Limit <span class="spec-value">Re=2300</span></li>
|
||||
</ul>
|
||||
<p class="analysis">The pour is a fluid dynamics problem. Turbulence destroys aroma. We engineer laminar flow—silence in motion.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vector-card">
|
||||
<img src="https://images.pexels.com/photos/36417799/pexels-photo-36417799.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Close-up pour into Pyrex" class="vector-img">
|
||||
<div class="vector-data">
|
||||
<h3 class="vector-title">THEME: DISPERSION</h3>
|
||||
<ul class="spec-list">
|
||||
<li>Droplet Size <span class="spec-value">0.8mm</span></li>
|
||||
<li>Aerosol Density <span class="spec-value">0.04 g/cm³</span></li>
|
||||
<li>Evaporation Rate <span class="spec-value">0.012 s⁻¹</span></li>
|
||||
</ul>
|
||||
<p class="analysis">The mist is the first sip. Volatile compounds suspended in air, captured by the olfactory bulb before the tongue touches the glass.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="grid-section">
|
||||
<h2 class="section-header">STATION GAMMA: THE KINETICS</h2>
|
||||
<div class="vector-grid">
|
||||
<div class="vector-card">
|
||||
<img src="https://images.pexels.com/photos/4485356/pexels-photo-4485356.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Bartender shaking cocktail" class="vector-img">
|
||||
<div class="vector-data">
|
||||
<h3 class="vector-title">SHAKER TORQUE</h3>
|
||||
<ul class="spec-list">
|
||||
<li>Angular Acceleration <span class="spec-value">45 rad/s²</span></li>
|
||||
<li>G-Force <span class="spec-value">12g</span></li>
|
||||
<li>Frequency <span class="spec-value">4.2 Hz</span></li>
|
||||
<li>Amplitude <span class="spec-value">28 cm</span></li>
|
||||
</ul>
|
||||
<p class="analysis">The shake is not a gesture—it is a centrifuge. Ice fractures, ethanol emulsifies, temperature collapses in 12 cycles.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vector-card">
|
||||
<img src="https://images.pexels.com/photos/4485355/pexels-photo-4485355.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Bartender mixing with shaker" class="vector-img">
|
||||
<div class="vector-data">
|
||||
<h3 class="vector-title">ICE DYNAMICS</h3>
|
||||
<ul class="spec-list">
|
||||
<li>Fracture Stress <span class="spec-value">1.5 MPa</span></li>
|
||||
<li>Melt Volume <span class="spec-value">3.2 ml</span></li>
|
||||
<li>Thermal Mass <span class="spec-value">0.8 J/K</span></li>
|
||||
<li>Contact Time <span class="spec-value">14s</span></li>
|
||||
</ul>
|
||||
<p class="analysis">Ice is the engine. Its melting curve defines the dilution profile. We calculate the melt, not guess it.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="manifesto">
|
||||
<h2>THE COMPETITION DOES NOT CALCULATE</h2>
|
||||
<p>They chant "Golden Seam." They worship the scar. I build the tolerance stack. I map the vector field. I solve for perfection.</p>
|
||||
<p>Every pour is a theorem proved. Every glass a boundary condition met. The table is set. The equations are balanced.</p>
|
||||
<p><strong>I am not serving dinner. I am launching the colony.</strong></p>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<p>© 2026 Bryan Mubarak. Vectors calculated. Trajectory locked.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user