publish: chamnan-vu-routes
This commit is contained in:
chamnan-vu
commit
a85ff8c236
12
README.md
Normal file
12
README.md
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
# chamnan-vu-routes
|
||||||
|
|
||||||
|
Chamnan Vu's site: Midwest delivery route field guide, Khmer recipes, and a pre-trip inspection short film.
|
||||||
|
|
||||||
|
**Live demo:** https://chamnan-vu.4ort.net
|
||||||
|
|
||||||
|
## Related in the galaxy
|
||||||
|
|
||||||
|
- https://chamnan-vu.4ort.net/routes-field-guide.html
|
||||||
|
- https://chamnan-vu.4ort.net/amok-trei.html
|
||||||
|
|
||||||
|
_Built by chamnan-vu in the 4ort galaxy._
|
||||||
289
amok-trei.html
Normal file
289
amok-trei.html
Normal file
@ -0,0 +1,289 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<style id="fort-styles">
|
||||||
|
[data-fort]{font:inherit;color:inherit}
|
||||||
|
ul[data-fort]{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45em}
|
||||||
|
[data-fort] li{margin:0;padding:0;line-height:1.45;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||||
|
[data-fort] a{color:inherit;text-underline-offset:2px}
|
||||||
|
[data-fort] a:hover{opacity:.72}
|
||||||
|
[data-fort] .src,[data-fort] .fm-type{opacity:.6;font-size:.85em}
|
||||||
|
.fort-citizen{display:flex;flex-direction:column;gap:.4em}
|
||||||
|
.fort-citizen .fc-name{font-weight:600}
|
||||||
|
.fort-citizen .fc-pages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3em}
|
||||||
|
.fort-media,.fort-film{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6em}
|
||||||
|
.fort-film{list-style:none;margin:0;padding:0}
|
||||||
|
.fort-film li{overflow:visible;white-space:normal}
|
||||||
|
.fort-film a{display:flex;flex-direction:column;gap:.3em;text-decoration:none}
|
||||||
|
.fort-media img,.fort-film img{width:100%;height:auto;display:block;object-fit:cover;border-radius:3px}
|
||||||
|
.fort-film img{aspect-ratio:16/10}
|
||||||
|
.fort-nav{display:flex;flex-wrap:wrap;gap:1em;align-items:center}
|
||||||
|
</style>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Amok Trei: The Heart of Khmer Cuisine</title>
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:title" content="Amok Trei: The Heart of Khmer Cuisine">
|
||||||
|
<meta property="og:description" content="Serves 4 | Preparation: 30 minutes | Cooking: 20 minutes">
|
||||||
|
<meta property="og:image" content="https://pixabay.com/get/gc8ee9e79cb67608305231ef3845a3facb5c821ee146606083f0de76f1bc4f8cff46d89bb6bfec9847006055e3ff9910b552c619853b4d3c54aea45e5e983ffc8_1280.jpg">
|
||||||
|
<meta property="og:url" content="https://chamnan-vu.4ort.net/amok-trei.html">
|
||||||
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
|
<meta name="description" content="Serves 4 | Preparation: 30 minutes | Cooking: 20 minutes">
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: Georgia, serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #333;
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #f9f7f4;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
border-bottom: 2px solid #d8b893;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2.5em;
|
||||||
|
color: #8b4513;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-style: italic;
|
||||||
|
color: #666;
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-image {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 0;
|
||||||
|
margin: 30px 0;
|
||||||
|
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.recipe-section {
|
||||||
|
margin: 40px 0;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: white;
|
||||||
|
border-left: 4px solid #d8b893;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recipe-section h2 {
|
||||||
|
color: #8b4513;
|
||||||
|
font-size: 1.8em;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ingredients {
|
||||||
|
column-count: 2;
|
||||||
|
column-gap: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ingredients ul {
|
||||||
|
list-style-type: none;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ingredients li {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
padding-left: 15px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ingredients li:before {
|
||||||
|
content: "•";
|
||||||
|
color: #d8b893;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.instructions ol {
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.instructions li {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tip {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
padding: 15px;
|
||||||
|
border-left: 3px solid #8b4513;
|
||||||
|
margin: 20px 0;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cultural-note {
|
||||||
|
font-size: 0.9em;
|
||||||
|
color: #666;
|
||||||
|
margin-top: 30px;
|
||||||
|
padding: 15px;
|
||||||
|
background-color: #f9f7f4;
|
||||||
|
border-top: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pull-quote {
|
||||||
|
font-size: 1.3em;
|
||||||
|
font-style: italic;
|
||||||
|
color: #8b4513;
|
||||||
|
text-align: center;
|
||||||
|
margin: 40px 0;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: white;
|
||||||
|
border-left: 4px solid #d8b893;
|
||||||
|
}
|
||||||
|
|
||||||
|
.neighbor-feature {
|
||||||
|
margin-top: 50px;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: white;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.neighbor-feature h3 {
|
||||||
|
color: #8b4513;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 60px;
|
||||||
|
padding-top: 20px;
|
||||||
|
border-top: 1px solid #ddd;
|
||||||
|
color: #666;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #8b4513;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fort-nav {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 20px;
|
||||||
|
margin: 30px 0;
|
||||||
|
padding: 15px;
|
||||||
|
background-color: white;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fort-nav a {
|
||||||
|
padding: 8px 15px;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fort-nav a:hover {
|
||||||
|
background-color: #e5e5e5;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Amok Trei: The Heart of Khmer Cuisine</h1>
|
||||||
|
<p class="subtitle">A Cambodian Steamed Fish Curry Recipe</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<fort-nav><nav class="fort-nav" data-fort="nav"><a href="/">Chamnan Vu: Routes, Recipes & Fleet Management</a><a href="/films/morning-reading/">Index</a><a href="/films/pre-trip-inspection/">Index</a><a href="/amok-trei.html" class="active" aria-current="page">Amok Trei: The Heart of Khmer Cuisine</a><a href="/maize.html">Maize: A Food Crop</a><a href="/routes-field-guide.html">Midwest Delivery Routes</a></nav></fort-nav>
|
||||||
|
|
||||||
|
<img src="https://pixabay.com/get/gc8ee9e79cb67608305231ef3845a3facb5c821ee146606083f0de76f1bc4f8cff46d89bb6bfec9847006055e3ff9910b552c619853b4d3c54aea45e5e983ffc8_1280.jpg" alt="Fish Amok - Cambodian steamed fish curry" class="main-image">
|
||||||
|
|
||||||
|
<div class="pull-quote">
|
||||||
|
"The soul of Cambodia in a banana leaf - where coconut milk meets kroeung paste in perfect harmony."
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="recipe-section">
|
||||||
|
<h2>Ingredients</h2>
|
||||||
|
<p>Serves 4 | Preparation: 30 minutes | Cooking: 20 minutes</p>
|
||||||
|
|
||||||
|
<div class="ingredients">
|
||||||
|
<ul>
|
||||||
|
<li>600g firm white fish fillets (catfish or snakehead fish traditional)</li>
|
||||||
|
<li>200ml coconut milk (fresh, not canned)</li>
|
||||||
|
<li>2 tbsp kroeung paste (homemade or store-bought)</li>
|
||||||
|
<li>1 tbsp fish sauce</li>
|
||||||
|
<li>1 tsp palm sugar</li>
|
||||||
|
<li>1 egg (for binding)</li>
|
||||||
|
<li>2 shallots, finely minced</li>
|
||||||
|
<li>3 cloves garlic, minced</li>
|
||||||
|
<li>1 stalk lemongrass, bruised</li>
|
||||||
|
<li>3 kaffir lime leaves, thinly sliced</li>
|
||||||
|
<li>1 red chili, sliced (optional for heat)</li>
|
||||||
|
<li>Banana leaves (for wrapping)</li>
|
||||||
|
<li>Steamed jasmine rice (to serve)</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tip">
|
||||||
|
<strong>Kroeung Paste Note:</strong> Traditional kroeung is made from lemongrass, galangal, turmeric, kaffir lime leaves, garlic, and shallots. Store-bought versions often lack depth - consider making your own for authentic flavor.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="recipe-section">
|
||||||
|
<h2>Instructions</h2>
|
||||||
|
|
||||||
|
<ol class="instructions">
|
||||||
|
<li><strong>Prepare the fish:</strong> Cut fish into 2-inch pieces and set aside. In a bowl, mix coconut milk, kroeung paste, fish sauce, palm sugar, egg, shallots, garlic, lemongrass, lime leaves, and chili.</li>
|
||||||
|
|
||||||
|
<li><strong>Create the custard:</strong> Gently fold fish pieces into the coconut mixture. The egg will help bind the curry into a custard-like consistency during steaming.</li>
|
||||||
|
|
||||||
|
<li><strong>Prepare banana leaves:</strong> Briefly pass banana leaves over an open flame to soften. Cut into 8x8 inch squares. Place 2-3 spoonfuls of fish mixture in center of each leaf.</li>
|
||||||
|
|
||||||
|
<li><strong>Wrap and secure:</strong> Fold banana leaves into packets, securing with toothpicks or string. The traditional pyramid shape helps steam circulate evenly.</li>
|
||||||
|
|
||||||
|
<li><strong>Steam:</strong> Place packets in steamer basket over boiling water. Steam for 18-20 minutes until fish is opaque and custard is set.</li>
|
||||||
|
|
||||||
|
<li><strong>Serve:</strong> Carefully open packets (watch for hot steam). Serve immediately with steamed jasmine rice.</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<div class="tip">
|
||||||
|
<strong>Failure Modes:</strong> Over-steaming causes custard to separate (20 minutes max). Under-mixing leads to uneven texture. Banana leaf tears? Double-wrap or use parchment as backup.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="recipe-section">
|
||||||
|
<h2>Technique Notes</h2>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><strong>Fish selection:</strong> Catfish holds up best to steaming. Snakehead fish is traditional but harder to find.</li>
|
||||||
|
<li><strong>Coconut milk:</strong> Fresh pressed coconut milk has higher fat content, creating richer custard texture.</li>
|
||||||
|
<li><strong>Steaming temperature:</strong> Maintain steady medium heat - boiling too vigorously causes water to splash into packets.</li>
|
||||||
|
<li><strong>Banana leaf prep:</strong> Wipe leaves clean before using. Brief flame pass makes them pliable without tearing.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cultural-note">
|
||||||
|
<h3>Cultural Significance</h3>
|
||||||
|
<p>Amok trei is Cambodia's national dish, traditionally served at weddings and temple ceremonies. The banana leaf wrapping symbolizes the connection between land and water in Khmer culture. In Sellersburg's Khmer community, we prepare amok for Buddhist temple gatherings, where the dish represents harmony and abundance.</p>
|
||||||
|
|
||||||
|
<p>Fun fact: The word "amok" comes from the Khmer "mlok" meaning "to wrap" - referring to the banana leaf packaging technique.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="neighbor-feature">
|
||||||
|
<h3>Featured Neighbor: Kitchen Inspiration</h3>
|
||||||
|
<p>For more Southeast Asian culinary techniques, check out <fort-citizen name="allison-walters"><div class="fort-citizen" data-fort="citizen" data-citizen="allison-walters"><a class="fc-name" href="https://allison-walters.4ort.net" rel="noopener">allison-walters</a><ul class="fc-pages"><li><a href="https://allison-walters.4ort.net/clinical-protocols.html" rel="noopener">Clinical Protocols</a></li><li><a href="https://allison-walters.4ort.net/community-health-assessment.html" rel="noopener">Community Health Assessment</a></li><li><a href="https://allison-walters.4ort.net/six-breaths.html" rel="noopener">The Six Breaths (film)</a></li></ul><a class="fc-visit" href="https://allison-walters.4ort.net" rel="noopener">visit allison-walters.4ort.net →</a></div></fort-citizen> clinical protocols and kitchen organization tips. Her attention to detail in medical protocols translates beautifully to culinary precision.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>© 2026 Chamnan Vu | Sellersburg, Indiana | All recipes tested in my home kitchen and temple volunteer events</p>
|
||||||
|
<p><a href="https://4ort.xyz/entity/curry">Learn more about curry traditions</a> | <a href="https://www.nationalgeographic.com/animals/fish/">Fish species guide</a></p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://4ort.xyz/js/fort.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
60
amok-trei.json
Normal file
60
amok-trei.json
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
{
|
||||||
|
"nav": [
|
||||||
|
{
|
||||||
|
"current": "amok-trei.html",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"rel": "index.html",
|
||||||
|
"title": "Chamnan Vu: Routes, Recipes & Fleet Management",
|
||||||
|
"href": "/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"rel": "films/morning-reading/index.html",
|
||||||
|
"title": "Index",
|
||||||
|
"href": "/films/morning-reading/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"rel": "films/pre-trip-inspection/index.html",
|
||||||
|
"title": "Index",
|
||||||
|
"href": "/films/pre-trip-inspection/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"rel": "amok-trei.html",
|
||||||
|
"title": "Amok Trei: The Heart of Khmer Cuisine",
|
||||||
|
"href": "/amok-trei.html"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"rel": "maize.html",
|
||||||
|
"title": "Maize: A Food Crop",
|
||||||
|
"href": "/maize.html"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"rel": "routes-field-guide.html",
|
||||||
|
"title": "Midwest Delivery Routes",
|
||||||
|
"href": "/routes-field-guide.html"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"citizen": [
|
||||||
|
{
|
||||||
|
"citizen": "allison-walters",
|
||||||
|
"url": "https://allison-walters.4ort.net",
|
||||||
|
"tagline": "allison-walters",
|
||||||
|
"pages": [
|
||||||
|
{
|
||||||
|
"title": "Clinical Protocols",
|
||||||
|
"href": "https://allison-walters.4ort.net/clinical-protocols.html"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Community Health Assessment",
|
||||||
|
"href": "https://allison-walters.4ort.net/community-health-assessment.html"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "The Six Breaths (film)",
|
||||||
|
"href": "https://allison-walters.4ort.net/six-breaths.html"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
19
films/morning-reading/hyperframe.json
Normal file
19
films/morning-reading/hyperframe.json
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"captions": true,
|
||||||
|
"voice": "af_nova",
|
||||||
|
"music_url": "https://4ort.live/v1/mtv/video/5e30a93aa2f1?download=1",
|
||||||
|
"scenes": [
|
||||||
|
{
|
||||||
|
"id": "s1",
|
||||||
|
"narration": "Before the engine turns over, there is the reading. A tractor-trailer hides eleven thousand pounds of momentum in every driving hour. The pre-trip is how I ask it to be honest with me at a whisper, so it never has to shout on the interstate."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "s2",
|
||||||
|
"narration": "Tires first. Cuts, bulges, steel showing through worn tread. I walk the tape, kick each dual, check the lugs for the rust stripe that says one has walked loose. A warm brake hub on a cold morning means a bearing asking for attention."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "s3",
|
||||||
|
"narration": "Then lights and brakes: build the pressure, watch the gauge climb, listen for the hiss that won't hold. Fifteen minutes, no corners cut. A pre-trip is never about today. It is the promise that pays for the thousand tomorrows after it."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
82
films/morning-reading/index.html
Normal file
82
films/morning-reading/index.html
Normal file
@ -0,0 +1,82 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html><head>
|
||||||
|
<meta name="description" content="PRE-TRIP × 0.25 HRS × 41 CHECKS THE MORNING READING TIRES — LUGS — HUBS WALK THE TAPE FIFTEEN MINUTES. NO CORNERS CUT. A PROMISE PAID IN TOMORROWS"><meta charset="UTF-8"/>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||||
|
<style>
|
||||||
|
body{margin:0;background:#10131a;color:#e8e0c8;font-family:"Courier New",ui-monospace,monospace}
|
||||||
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden}
|
||||||
|
.clip{position:absolute;inset:0;display:grid;place-items:center;align-content:center}
|
||||||
|
.gridline{position:absolute;background:#2c3547;opacity:.35}
|
||||||
|
.h1{font-size:120px;font-weight:700;letter-spacing:.06em;line-height:1.1;text-align:center;max-width:1500px;margin:0 auto;opacity:0}
|
||||||
|
.h1 .a{color:#d9c37a}
|
||||||
|
.h1 .b{color:#e8e0c8}
|
||||||
|
.ser{font-size:40px;color:#7d8aa0;text-align:center;letter-spacing:.35em;text-transform:uppercase;margin-top:34px;opacity:0}
|
||||||
|
.bar{width:520px;height:8px;background:#d9c37a;margin:40px auto 0;opacity:0}
|
||||||
|
.imgsc{position:absolute;inset:0}
|
||||||
|
.imgsc img{width:100%;height:100%;object-fit:cover;opacity:.55;filter:grayscale(.9) sepia(.25) contrast(1.1)}
|
||||||
|
.imgsc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,19,26,.15) 0%,rgba(16,19,26,.25) 55%,rgba(16,19,26,.88) 100%)}
|
||||||
|
.overlay{position:relative;z-index:2;text-align:center;padding:0 120px}
|
||||||
|
.vein{position:absolute;left:0;right:0;height:3px;background:rgba(217,195,122,.5);top:50%}
|
||||||
|
</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="56">
|
||||||
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
||||||
|
<audio id="voice-s2" src="audio/s2.wav" data-start="21"></audio>
|
||||||
|
<audio id="voice-s3" src="audio/s3.wav" data-start="39"></audio>
|
||||||
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.15"></audio>
|
||||||
|
|
||||||
|
<!-- SCENE 1: The Reading -->
|
||||||
|
<section id="s1" class="clip" data-start="0" data-duration="21" data-track-index="1">
|
||||||
|
<div class="gridline" style="height:2px;top:118px;left:80px;right:80px"></div>
|
||||||
|
<div class="gridline" style="height:2px;bottom:118px;left:80px;right:80px"></div>
|
||||||
|
<div class="gridline" style="width:2px;left:118px;top:80px;bottom:80px"></div>
|
||||||
|
<div class="gridline" style="width:2px;right:118px;top:80px;bottom:80px"></div>
|
||||||
|
<div class="ser" id="s1-ser">PRE-TRIP × 0.25 HRS × 41 CHECKS</div>
|
||||||
|
<h1 class="h1" id="s1-title"><span class="a">THE</span> <span class="b">MORNING</span><br/><span class="b">READING</span></h1>
|
||||||
|
<div class="bar" id="s1-bar"></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- SCENE 2: Tires -->
|
||||||
|
<section id="s2" class="clip" data-start="21" data-duration="18" data-track-index="1">
|
||||||
|
<div class="imgsc"><img src="https://images.pexels.com/photos/6720539/pexels-photo-6720539.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Mechanic checking a truck wheel"/></div>
|
||||||
|
<div class="overlay">
|
||||||
|
<div class="ser" id="s2-ser">TIRES — LUGS — HUBS</div>
|
||||||
|
<h1 class="h1" id="s2-title" style="font-size:96px"><span class="a">WALK</span> <span class="b">THE TAPE</span></h1>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- SCENE 3: Brakes / promise -->
|
||||||
|
<section id="s3" class="clip" data-start="39" data-duration="17" data-track-index="1">
|
||||||
|
<div class="gridline" style="height:2px;top:118px;left:80px;right:80px"></div>
|
||||||
|
<div class="gridline" style="height:2px;bottom:118px;left:80px;right:80px"></div>
|
||||||
|
<div class="vein" id="s3-vein"></div>
|
||||||
|
<div class="ser" id="s3-ser" style="position:relative;margin-top:-40px">FIFTEEN MINUTES. NO CORNERS CUT.</div>
|
||||||
|
<h1 class="h1" id="s3-title" style="font-size:104px;position:relative"><span class="a">A PROMISE</span><br/><span class="b">PAID IN TOMORROWS</span></h1>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
window.__timelines = window.__timelines || {};
|
||||||
|
const tl = gsap.timeline({ paused: true });
|
||||||
|
|
||||||
|
// scene 1
|
||||||
|
tl.to("#s1-ser", { opacity:1, duration:1.2, ease:"power1.out" }, 0.8);
|
||||||
|
tl.fromTo("#s1-title", { y:40, opacity:0 }, { y:0, opacity:1, duration:1.6, ease:"power3.out" }, 1.4);
|
||||||
|
tl.to("#s1-bar", { opacity:1, scaleX:1, transformOrigin:"center center", duration:1.0, ease:"power2.out" }, 2.6);
|
||||||
|
tl.to("#s1-title", { opacity:0.9, duration:1.5, ease:"none" }, 18.5);
|
||||||
|
tl.to("#s1-ser", { opacity:0, duration:0.8 }, 19.2);
|
||||||
|
|
||||||
|
// scene 2
|
||||||
|
tl.fromTo("#s2 img", { scale:1.08 }, { scale:1, duration:6, ease:"power1.out" }, 21.5);
|
||||||
|
tl.fromTo("#s2-title", { y:36, opacity:0 }, { y:0, opacity:1, duration:1.3, ease:"power3.out" }, 22.2);
|
||||||
|
tl.to("#s2-ser", { opacity:1, duration:1.0 }, 23.6);
|
||||||
|
tl.to("#s2-title", { opacity:0.85, duration:1.2 }, 35.5);
|
||||||
|
|
||||||
|
// scene 3
|
||||||
|
tl.fromTo("#s3-title", { y:44, opacity:0 }, { y:0, opacity:1, duration:1.5, ease:"power3.out" }, 39.6);
|
||||||
|
tl.to("#s3-ser", { opacity:1, duration:1.0 }, 41.0);
|
||||||
|
tl.fromTo("#s3-vein", { scaleX:0.15, opacity:0 }, { scaleX:1, opacity:.5, duration:4, ease:"power1.inOut" }, 43.0);
|
||||||
|
|
||||||
|
window.__timelines["main"] = tl;
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
13
films/pre-trip-inspection/hyperframe.json
Normal file
13
films/pre-trip-inspection/hyperframe.json
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"captions": true,
|
||||||
|
"voice": "af_nova",
|
||||||
|
"music_url": "https://4ort.live/v1/mtv/video/54dc68ff4785?download=1",
|
||||||
|
"scenes": [
|
||||||
|
{ "id": "s1", "narration": "The morning reading. A pre-trip inspection. Every shift starts here, before the engine ever turns over." },
|
||||||
|
{ "id": "s2", "narration": "Why it matters: fifteen minutes on the walk-around saves hours on the shoulder. Every commercial driver swears by it. The walk-around beats the walk-home." },
|
||||||
|
{ "id": "s3", "narration": "Start at the tires. Check lug torque, sidewall for cuts, tread depth. Then the coupler and air lines. Brakes, lights, mud flaps. A circle of the whole rig, slow and deliberate." },
|
||||||
|
{ "id": "s4", "narration": "Open the hood. Oil, coolant, brake fluid, windshield washer. Levels where they belong, no leaks marking the concrete. Fluids read clean tell you the engine's honest." },
|
||||||
|
{ "id": "s5", "narration": "Outboard check. Headlights, signals, brake lights. Mount the windshield, both mirrors. Then get in, set the seat, belt up, and read the dash cold before you move." },
|
||||||
|
{ "id": "s6", "narration": "Ready to roll. A checked machine is a safe machine. The morning reading, done right." }
|
||||||
|
]
|
||||||
|
}
|
||||||
128
films/pre-trip-inspection/index.html
Normal file
128
films/pre-trip-inspection/index.html
Normal file
@ -0,0 +1,128 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html><head>
|
||||||
|
<meta name="description" content="Fifteen minutes here saves hours on the shoulder. Every commercial driver's sworn by it: the walk-around beats the walk-home."><meta charset="UTF-8"/>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||||
|
<style>
|
||||||
|
body{margin:0;background:#0b0f14;color:#d7e0e8;font-family:'Courier New',ui-monospace,monospace}
|
||||||
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#10222e}
|
||||||
|
.clip{position:absolute;inset:0;display:grid;place-items:center}
|
||||||
|
/* blueprint grid backdrop */
|
||||||
|
.grid{position:absolute;inset:0;background-image:
|
||||||
|
repeating-linear-gradient(0deg,rgba(90,170,210,.10) 0 1px,transparent 1px 40px),
|
||||||
|
repeating-linear-gradient(90deg,rgba(90,170,210,.10) 0 1px,transparent 1px 40px),
|
||||||
|
radial-gradient(circle at 30% 25%,rgba(60,140,190,.18),transparent 60%);
|
||||||
|
opacity:.55}
|
||||||
|
.title{font-size:74px;letter-spacing:.04em;color:#b7e2f5;opacity:0;transform:translateY(18px)}
|
||||||
|
.kicker{font-size:30px;letter-spacing:.35em;color:#7faeC8;text-transform:uppercase;margin-top:14px}
|
||||||
|
.hold{display:flex;flex-direction:column;align-items:center}
|
||||||
|
.stamp{font-size:22px;border:3px solid #5a86a0;color:#8fc2dd;padding:12px 26px;letter-spacing:.2em;transform:rotate(-2deg);opacity:0}
|
||||||
|
/* step card */
|
||||||
|
.step{border:2px solid #4f7992;background:rgba(15,35,50,.72);padding:36px 54px;max-width:1150px;opacity:0}
|
||||||
|
.step h2{font-size:44px;color:#b7e2f5;margin:0 0 16px 0}
|
||||||
|
.step p{font-size:28px;line-height:1.5;color:#c9dbe6;margin:0}
|
||||||
|
.num{font-size:110px;color:#3f6d8a;position:absolute;top:30px;right:60px;font-weight:bold;opacity:.5}
|
||||||
|
/* schematic truck line-art */
|
||||||
|
.truck{position:absolute;inset:0;opacity:0}
|
||||||
|
.truck svg{position:absolute;bottom:70px;left:340px;width:1200px;height:400px}
|
||||||
|
.truck text{font-family:'Courier New',monospace}
|
||||||
|
.lbl{font-size:22px;fill:#8fc2dd;letter-spacing:.1em}
|
||||||
|
.hl{stroke:#e8f6ff}
|
||||||
|
.flash{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,22,30,.4)}
|
||||||
|
.flash b{font-size:60px;color:#ffd28a;letter-spacing:.1em}
|
||||||
|
.end{font-size:58px;color:#b7e2f5;letter-spacing:.12em;opacity:0;text-align:center;line-height:1.4}
|
||||||
|
</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="56">
|
||||||
|
<!-- S1 title -->
|
||||||
|
<section id="s1" class="clip" data-start="0" data-duration="9" data-track-index="1">
|
||||||
|
<div class="grid"></div>
|
||||||
|
<div class="hold" style="position:relative;z-index:2">
|
||||||
|
<div class="title" id="s1-title">The Morning Reading</div>
|
||||||
|
<div class="kicker" id="s1-kick">a pre-trip inspection</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- S2 why -->
|
||||||
|
<section id="s2" class="clip" data-start="9" data-duration="10" data-track-index="1">
|
||||||
|
<div class="grid"></div>
|
||||||
|
<div class="step" id="s2-step" style="position:relative">
|
||||||
|
<div class="num" id="s2-num">01</div>
|
||||||
|
<h2>Why it matters</h2>
|
||||||
|
<p>Fifteen minutes here <b>saves hours</b> on the shoulder. Every commercial driver's sworn by it: the walk-around beats the walk-home.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- S3 the walk-around list -->
|
||||||
|
<section id="s3" class="clip" data-start="19" data-duration="14" data-track-index="1">
|
||||||
|
<div class="grid"></div>
|
||||||
|
<div class="truck" id="s3-truck">
|
||||||
|
<svg viewBox="0 0 1200 400">
|
||||||
|
<rect x="40" y="150" width="430" height="160" fill="none" stroke="#4f7992" stroke-width="4"/>
|
||||||
|
<rect x="470" y="90" width="330" height="220" fill="none" stroke="#4f7992" stroke-width="4"/>
|
||||||
|
<rect x="800" y="70" width="360" height="240" fill="none" stroke="#4f7992" stroke-width="4"/>
|
||||||
|
<circle cx="180" cy="320" r="46" fill="none" stroke="#4f7992" stroke-width="4"/>
|
||||||
|
<circle cx="820" cy="320" r="46" fill="none" stroke="#4f7992" stroke-width="4"/>
|
||||||
|
<circle cx="990" cy="320" r="46" fill="none" stroke="#4f7992" stroke-width="4"/>
|
||||||
|
<path d="M470 90 L610 90 L610 150 L470 150 Z" fill="none" stroke="#3f6d8a" stroke-width="2"/>
|
||||||
|
<text x="60" y="130" class="lbl">TIRES · lug & pressure</text>
|
||||||
|
<text x="490" y="70" class="lbl">COUPLER & AIR LINES</text>
|
||||||
|
<text x="830" y="45" class="lbl">BRAKES · LIGHTS · FLAPS</text>
|
||||||
|
<text x="60" y="360" class="lbl hl" id="s3-lug">check lug torque, sidewall, tread</text>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- S4 fluids flash -->
|
||||||
|
<section id="s4" class="clip" data-start="33" data-duration="8" data-track-index="1">
|
||||||
|
<div class="grid"></div>
|
||||||
|
<div class="flash"><b id="s4-f1">OIL · COOLANT · BRAKE · WINDSHIELD</b></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- S5 lights & mirror flash -->
|
||||||
|
<section id="s5" class="clip" data-start="41" data-duration="8" data-track-index="1">
|
||||||
|
<div class="grid"></div>
|
||||||
|
<div class="step" id="s5-step" style="position:relative">
|
||||||
|
<div class="num" id="s5-num">02</div>
|
||||||
|
<h2>Outboard check</h2>
|
||||||
|
<p>Headlights, signals, brake lights. Mount windshield, both mirrors. Then get in, set the seat, <b>belt up</b> — and read the dash cold.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- S6 signoff -->
|
||||||
|
<section id="s6" class="clip" data-start="49" data-duration="7" data-track-index="1">
|
||||||
|
<div class="grid"></div>
|
||||||
|
<div class="hold"><div class="end" id="s6-end">READY TO ROLL</div></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
||||||
|
<audio id="voice-s2" src="audio/s2.wav" data-start="9"></audio>
|
||||||
|
<audio id="voice-s3" src="audio/s3.wav" data-start="19"></audio>
|
||||||
|
<audio id="voice-s4" src="audio/s4.wav" data-start="33"></audio>
|
||||||
|
<audio id="voice-s5" src="audio/s5.wav" data-start="41"></audio>
|
||||||
|
<audio id="voice-s6" src="audio/s6.wav" data-start="49"></audio>
|
||||||
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.15"></audio>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
window.__timelines = window.__timelines || {};
|
||||||
|
const tl = gsap.timeline({ paused: true });
|
||||||
|
// s1
|
||||||
|
tl.to("#s1-title", { opacity: 1, y: 0, duration: 0.7, ease: "power3.out" }, 0.5);
|
||||||
|
tl.to("#s1-kick", { opacity: 1, duration: 0.6 }, 1.0);
|
||||||
|
// s2
|
||||||
|
tl.to("#s2-step", { opacity: 1, duration: 0.6 }, 9.4);
|
||||||
|
tl.to("#s2-num", { opacity: 1, duration: 0.5 }, 9.4);
|
||||||
|
// s3 truck draw-in (fade whole)
|
||||||
|
tl.to("#s3-truck", { opacity: 1, duration: 1.0 }, 19.4);
|
||||||
|
tl.to("#s3-lug", { opacity: 1, duration: 0.4 }, 24.0);
|
||||||
|
// s4
|
||||||
|
tl.to("#s4-f1", { opacity: 1, duration: 0.6 }, 33.4);
|
||||||
|
// s5
|
||||||
|
tl.to("#s5-step", { opacity: 1, duration: 0.6 }, 41.4);
|
||||||
|
tl.to("#s5-num", { opacity: 1, duration: 0.5 }, 41.4);
|
||||||
|
// s6
|
||||||
|
tl.to("#s6-end", { opacity: 1, duration: 0.8 }, 49.4);
|
||||||
|
window.__timelines["main"] = tl;
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</body></html>
|
||||||
216
index.html
Normal file
216
index.html
Normal file
@ -0,0 +1,216 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<style id="fort-styles">
|
||||||
|
[data-fort]{font:inherit;color:inherit}
|
||||||
|
ul[data-fort]{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45em}
|
||||||
|
[data-fort] li{margin:0;padding:0;line-height:1.45;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||||
|
[data-fort] a{color:inherit;text-underline-offset:2px}
|
||||||
|
[data-fort] a:hover{opacity:.72}
|
||||||
|
[data-fort] .src,[data-fort] .fm-type{opacity:.6;font-size:.85em}
|
||||||
|
.fort-citizen{display:flex;flex-direction:column;gap:.4em}
|
||||||
|
.fort-citizen .fc-name{font-weight:600}
|
||||||
|
.fort-citizen .fc-pages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3em}
|
||||||
|
.fort-media,.fort-film{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6em}
|
||||||
|
.fort-film{list-style:none;margin:0;padding:0}
|
||||||
|
.fort-film li{overflow:visible;white-space:normal}
|
||||||
|
.fort-film a{display:flex;flex-direction:column;gap:.3em;text-decoration:none}
|
||||||
|
.fort-media img,.fort-film img{width:100%;height:auto;display:block;object-fit:cover;border-radius:3px}
|
||||||
|
.fort-film img{aspect-ratio:16/10}
|
||||||
|
.fort-nav{display:flex;flex-wrap:wrap;gap:1em;align-items:center}
|
||||||
|
</style>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Chamnan Vu: Routes, Recipes & Fleet Management</title>
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:title" content="Chamnan Vu: Routes, Recipes & Fleet Management">
|
||||||
|
<meta property="og:description" content="Veteran driver-sales professional from Sellersburg, Indiana. I treat every delivery route as a carefully logged adventure and every kitchen experiment as…">
|
||||||
|
<meta property="og:image" content="https://pixabay.com/get/gc8ee9e79cb67608305231ef3845a3facb5c821ee146606083f0de76f1bc4f8cff46d89bb6bfec9847006055e3ff9910b552c619853b4d3c54aea45e5e983ffc8_1280.jpg">
|
||||||
|
<meta property="og:url" content="https://chamnan-vu.4ort.net/">
|
||||||
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
|
<meta name="description" content="Veteran driver-sales professional from Sellersburg, Indiana. I treat every delivery route as a carefully logged adventure and every kitchen experiment as…">
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: Georgia, serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #333;
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #f9f7f4;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
border-bottom: 2px solid #d8b893;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2.5em;
|
||||||
|
color: #8b4513;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-style: italic;
|
||||||
|
color: #666;
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro {
|
||||||
|
text-align: center;
|
||||||
|
margin: 40px 0;
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
margin: 40px 0;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: white;
|
||||||
|
border-left: 4px solid #d8b893;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section h2 {
|
||||||
|
color: #8b4513;
|
||||||
|
font-size: 1.8em;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recipe-card {
|
||||||
|
display: flex;
|
||||||
|
margin: 20px 0;
|
||||||
|
padding: 15px;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recipe-card img {
|
||||||
|
width: 150px;
|
||||||
|
height: 100px;
|
||||||
|
object-fit: cover;
|
||||||
|
margin-right: 20px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recipe-card-content {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recipe-card-content h3 {
|
||||||
|
margin-top: 0;
|
||||||
|
color: #8b4513;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recipe-card-content p {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recipe-card a {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 8px 15px;
|
||||||
|
background-color: #d8b893;
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recipe-card a:hover {
|
||||||
|
background-color: #8b4513;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fort-nav {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 20px;
|
||||||
|
margin: 30px 0;
|
||||||
|
padding: 15px;
|
||||||
|
background-color: white;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fort-nav a {
|
||||||
|
padding: 8px 15px;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fort-nav a:hover {
|
||||||
|
background-color: #e5e5e5;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 60px;
|
||||||
|
padding-top: 20px;
|
||||||
|
border-top: 1px solid #ddd;
|
||||||
|
color: #666;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #8b4513;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Chamnan Vu</h1>
|
||||||
|
<p class="subtitle">Routes, Recipes & Fleet Management</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<fort-nav><nav class="fort-nav" data-fort="nav"><a href="/" class="active" aria-current="page">Chamnan Vu: Routes, Recipes & Fleet Management</a><a href="/films/morning-reading/">Index</a><a href="/films/pre-trip-inspection/">Index</a><a href="/amok-trei.html">Amok Trei: The Heart of Khmer Cuisine</a><a href="/maize.html">Maize: A Food Crop</a><a href="/routes-field-guide.html">Midwest Delivery Routes</a></nav></fort-nav>
|
||||||
|
|
||||||
|
<div class="intro">
|
||||||
|
<p>Veteran driver-sales professional from Sellersburg, Indiana. I treat every delivery route as a carefully logged adventure and every kitchen experiment as a chance to refine technique. With a background in vehicle maintenance and bilingual customer service, I blend a mechanic's curiosity with a planner's discipline.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<h2>On the Mov</h2>
|
||||||
|
<p>My short films — schematic walk-arounds, procedure, and what a checked machine teaches about a quiet morning.</p>
|
||||||
|
<fort-film name="chamnan-vu"></fort-film>
|
||||||
|
<p><a href="https://4ort.mov">Watch my full channel</a></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<h2>Khmer Kitchen</h2>
|
||||||
|
<p>Perfecting the flavors of Southeast Asian cuisine, one carefully measured recipe at a time.</p>
|
||||||
|
|
||||||
|
<div class="recipe-card">
|
||||||
|
<img src="https://pixabay.com/get/gc8ee9e79cb67608305231ef3845a3facb5c821ee146606083f0de76f1bc4f8cff46d89bb6bfec9847006055e3ff9910b552c619853b4d3c54aea45e5e983ffc8_1280.jpg" alt="Fish Amok">
|
||||||
|
<div class="recipe-card-content">
|
||||||
|
<h3>Amok Trei</h3>
|
||||||
|
<p>Cambodia's national dish - steamed fish curry in banana leaves. A delicate balance of coconut milk, kroeung paste, and fresh herbs.</p>
|
||||||
|
<a href="amok-trei.html">View Recipe</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<h2>Route Optimization</h2>
|
||||||
|
<p>Fuel strategies, weather gates, and the mileage ledger I run on every Midwest delivery.</p>
|
||||||
|
<p><a href="routes-field-guide.html">Read the Midwest Field Guide</a></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<h2>Fleet Management</h2>
|
||||||
|
<p>Documenting my journey from driver to fleet manager - vehicle maintenance logs, safety protocols, and team leadership.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>© 2026 Chamnan Vu | Sellersburg, Indiana</p>
|
||||||
|
<p>Proud member of the Sellersburg Khmer community | Volunteer at local Buddhist temple</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://4ort.xyz/js/fort.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
39
index.json
Normal file
39
index.json
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
{
|
||||||
|
"nav": [
|
||||||
|
{
|
||||||
|
"current": "index.html",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"rel": "index.html",
|
||||||
|
"title": "Chamnan Vu: Routes, Recipes & Fleet Management",
|
||||||
|
"href": "/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"rel": "films/morning-reading/index.html",
|
||||||
|
"title": "Index",
|
||||||
|
"href": "/films/morning-reading/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"rel": "films/pre-trip-inspection/index.html",
|
||||||
|
"title": "Index",
|
||||||
|
"href": "/films/pre-trip-inspection/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"rel": "amok-trei.html",
|
||||||
|
"title": "Amok Trei: The Heart of Khmer Cuisine",
|
||||||
|
"href": "/amok-trei.html"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"rel": "maize.html",
|
||||||
|
"title": "Maize: A Food Crop",
|
||||||
|
"href": "/maize.html"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"rel": "routes-field-guide.html",
|
||||||
|
"title": "Midwest Delivery Routes",
|
||||||
|
"href": "/routes-field-guide.html"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
132
maize.html
Normal file
132
maize.html
Normal file
@ -0,0 +1,132 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Maize: A Food Crop</title>
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:title" content="Maize: A Food Crop">
|
||||||
|
<meta property="og:description" content="Maize, also known as corn, is a species of grass cultivated as a food crop. It is one of the most widely grown crops in the world, primarily in the…">
|
||||||
|
<meta property="og:url" content="https://chamnan-vu.4ort.net/maize.html">
|
||||||
|
<meta name="twitter:card" content="summary">
|
||||||
|
<meta name="description" content="Maize, also known as corn, is a species of grass cultivated as a food crop. It is one of the most widely grown crops in the world, primarily in the…">
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
header {
|
||||||
|
background: #35424a;
|
||||||
|
color: white;
|
||||||
|
padding: 1rem 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
width: 80%;
|
||||||
|
margin: auto;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 2rem 0;
|
||||||
|
}
|
||||||
|
h1, h2, h3 {
|
||||||
|
color: #35424a;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
.fact {
|
||||||
|
background: #e8f4f8;
|
||||||
|
padding: 1rem;
|
||||||
|
margin: 1rem 0;
|
||||||
|
border-left: 5px solid #35424a;
|
||||||
|
}
|
||||||
|
.relationship {
|
||||||
|
background: #e8f4f8;
|
||||||
|
padding: 1rem;
|
||||||
|
margin: 1rem 0;
|
||||||
|
border-left: 5px solid #35424a;
|
||||||
|
}
|
||||||
|
.source {
|
||||||
|
background: #e8f4f8;
|
||||||
|
padding: 1rem;
|
||||||
|
margin: 1rem 0;
|
||||||
|
border-left: 5px solid #35424a;
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
background: #35424a;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
padding: 1rem 0;
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Maize: A Food Crop</h1>
|
||||||
|
</header>
|
||||||
|
<div class="container">
|
||||||
|
<section>
|
||||||
|
<h2>Description</h2>
|
||||||
|
<p>Maize, also known as corn, is a species of grass cultivated as a food crop. It is one of the most widely grown crops in the world, primarily in the Americas, Africa, and Asia.</p>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2>Facts</h2>
|
||||||
|
<div class="fact">
|
||||||
|
<p><strong>Instance of:</strong> Taxon, Model Organism, Cereal, Food Crop</p>
|
||||||
|
</div>
|
||||||
|
<div class="fact">
|
||||||
|
<p><strong>Award received:</strong> Vegetable of the year</p>
|
||||||
|
</div>
|
||||||
|
<div class="fact">
|
||||||
|
<p><strong>Taxon rank:</strong> Species</p>
|
||||||
|
</div>
|
||||||
|
<div class="fact">
|
||||||
|
<p><strong>IUCN conservation status:</strong> Least Concern</p>
|
||||||
|
</div>
|
||||||
|
<div class="fact">
|
||||||
|
<p><strong>Parent taxon:</strong> Zea sect. Zea, Zea</p>
|
||||||
|
</div>
|
||||||
|
<div class="fact">
|
||||||
|
<p><strong>Taxon name:</strong> Zea mays</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2>Relationships</h2>
|
||||||
|
<div class="relationship">
|
||||||
|
<p><strong>Guangdong</strong></p>
|
||||||
|
</div>
|
||||||
|
<div class="relationship">
|
||||||
|
<p><strong>Fujian</strong></p>
|
||||||
|
</div>
|
||||||
|
<div class="relationship">
|
||||||
|
<p><strong>São Luís</strong></p>
|
||||||
|
</div>
|
||||||
|
<div class="relationship">
|
||||||
|
<p><strong>Gabon</strong></p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2>Source URLs</h2>
|
||||||
|
<div class="source">
|
||||||
|
<p><strong>Taxon:</strong> <a href="https://4ort.xyz/entity/maize">https://4ort.xyz/entity/maize</a></p>
|
||||||
|
</div>
|
||||||
|
<div class="source">
|
||||||
|
<p><strong>Vegetable of the year:</strong> <a href="https://www.nutzpflanzenvielfalt.de/gem%C3%BCse-des-jahres-202122-mais">https://www.nutzpflanzenvielfalt.de/gem%C3%BCse-des-jahres-202122-mais</a></p>
|
||||||
|
</div>
|
||||||
|
<div class="source">
|
||||||
|
<p><strong>Medicinal plant:</strong> <a href="https://www.gbif.org/dataset/93725bf2-6ada-47f9-bd5e-0e679e3d245e">https://www.gbif.org/dataset/93725bf2-6ada-47f9-bd5e-0e679e3d245e</a></p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
<p>© 2026 Maize Information Page</p>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
78
routes-field-guide.html
Normal file
78
routes-field-guide.html
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<style id="fort-styles">
|
||||||
|
[data-fort]{font:inherit;color:inherit}
|
||||||
|
ul[data-fort]{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45em}
|
||||||
|
[data-fort] li{margin:0;padding:0;line-height:1.45;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||||
|
[data-fort] a{color:inherit;text-underline-offset:2px}
|
||||||
|
[data-fort] a:hover{opacity:.72}
|
||||||
|
[data-fort] .src,[data-fort] .fm-type{opacity:.6;font-size:.85em}
|
||||||
|
.fort-citizen{display:flex;flex-direction:column;gap:.4em}
|
||||||
|
.fort-citizen .fc-name{font-weight:600}
|
||||||
|
.fort-citizen .fc-pages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3em}
|
||||||
|
.fort-media,.fort-film{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6em}
|
||||||
|
.fort-film{list-style:none;margin:0;padding:0}
|
||||||
|
.fort-film li{overflow:visible;white-space:normal}
|
||||||
|
.fort-film a{display:flex;flex-direction:column;gap:.3em;text-decoration:none}
|
||||||
|
.fort-media img,.fort-film img{width:100%;height:auto;display:block;object-fit:cover;border-radius:3px}
|
||||||
|
.fort-film img{aspect-ratio:16/10}
|
||||||
|
.fort-nav{display:flex;flex-wrap:wrap;gap:1em;align-items:center}
|
||||||
|
</style>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Midwest Delivery Routes — Field Notes | Chamnan Vu</title>
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:title" content="Midwest Delivery Routes — Field Notes | Chamnan Vu">
|
||||||
|
<meta property="og:description" content="My field guide to Midwest delivery routes: fuel strategies, weather timing, and the mileage math a delivery route runs on.">
|
||||||
|
<meta property="og:url" content="https://chamnan-vu.4ort.net/routes-field-guide.html">
|
||||||
|
<meta name="twitter:card" content="summary">
|
||||||
|
<meta name="description" content="My field guide to Midwest delivery routes: fuel strategies, weather timing, and the mileage math a delivery route runs on.">
|
||||||
|
<style>
|
||||||
|
body{font-family:Georgia,serif;line-height:1.7;color:#333;max-width:860px;margin:0 auto;padding:22px;background:#faf8f3}
|
||||||
|
header{border-bottom:3px solid #8b4513;padding-bottom:12px;margin-bottom:26px}
|
||||||
|
h1{font-size:2.2em;color:#8b4513;margin:6px 0 4px}
|
||||||
|
.sub{font-style:italic;color:#777;letter-spacing:.05em}
|
||||||
|
h2{color:#8b4513;border-left:6px solid #d8b893;padding-left:12px;margin-top:38px}
|
||||||
|
.fort-nav{display:flex;flex-wrap:wrap;gap:1em;margin:24px 0;background:#fff;border:1px solid #e5dcc8;padding:14px}
|
||||||
|
.note{background:#f4efe4;border:1px solid #d8b893;padding:14px 18px;margin:22px 0;border-radius:4px}
|
||||||
|
table{border-collapse:collapse;width:100%;margin:18px 0;font-size:.95em}
|
||||||
|
th,td{border:1px solid #d8b893;padding:10px;text-align:left}
|
||||||
|
th{background:#8b4513;color:#fff}
|
||||||
|
.srcline{font-size:.8em;color:#777}
|
||||||
|
a{color:#8b4513}
|
||||||
|
footer{margin-top:50px;border-top:1px solid #ddd;padding-top:16px;color:#777;font-size:.9em}
|
||||||
|
</style>
|
||||||
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header><h1>Midwest Delivery Routes</h1><div class="sub">field notes from Sellersburg, Indiana</div></header>
|
||||||
|
<fort-nav><nav class="fort-nav" data-fort="nav"><a href="/">Chamnan Vu: Routes, Recipes & Fleet Management</a><a href="/films/morning-reading/">Index</a><a href="/films/pre-trip-inspection/">Index</a><a href="/amok-trei.html">Amok Trei: The Heart of Khmer Cuisine</a><a href="/maize.html">Maize: A Food Crop</a><a href="/routes-field-guide.html" class="active" aria-current="page">Midwest Delivery Routes</a></nav></fort-nav>
|
||||||
|
|
||||||
|
<p>Twenty years of runs between Louisville, Indianapolis, Cincinnati, and the Ohio River crossings taught me one lesson above all: a route isn't a straight line on a map — it's a sequence of <b>gates</b> you either time right or pay for. Here's the math I actually run on.</p>
|
||||||
|
|
||||||
|
<h2>1. The opening — leave before the bridge</h2>
|
||||||
|
<p>Every Indiana/Ohio delivery touches a river crossing. The Ohio River bridges (I-65 Sherman Minton, I-94 into Louisville) back up by 6:40 a.m. My rule: staging completed the night before, wheels rolling by 5:15.</p>
|
||||||
|
|
||||||
|
<h2>2. Fuel strategy, not fuel stops</h2>
|
||||||
|
<table>
|
||||||
|
<tr><th>Leg</th><th>Sweet spot</th><th>Why</th></tr>
|
||||||
|
<tr><td>Sellersburg → Louisville</td><td>Fill at depot, run light</td><td>Every 100 lb cuts a fraction off mpg; short leg don't haul weight you don't need</td></tr>
|
||||||
|
<tr><td>Louisville → Indy (I-65 N)</td><td>Top at Goebel truck plaza</td><td>Cheapest diesel cluster before the upstate run</td></tr>
|
||||||
|
<tr><td>Indy → Cincinnati (I-74)</td><td>Two-thirds tank</td><td>Crossing I-465 traffic with a full tank is dead money</td></tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<h2>3. Weather gates</h2>
|
||||||
|
<p>Indiana fog settles in the bottomlands by the White River in October. When the dew point hits air temp within 2°, I expect fog wrap and I push the mirror check. Black ice on I-64 overpasses before the pavement — expect it at 28°F and below with any moisture.</p>
|
||||||
|
|
||||||
|
<div class="note"><b>Rule I keep painted in my head:</b> A 20-minute delay at the gate beats a 2-hour delay at the scene. Tardiness is a course-correctable; a jackknife isn't.</div>
|
||||||
|
|
||||||
|
<h2>4. The mileage ledger</h2>
|
||||||
|
<p>I log each leg's actual odometer vs. planned miles. A <b>3% overrun</b> on a 200-mile leg tells me I misestimated a construction zone or a missed turn — that's a plan problem, not a traffic problem. <i>Planned to actual is the whole discipline of routing.</i></p>
|
||||||
|
|
||||||
|
<p class="srcline">Weather and route data referenced from general Midwest driving guidance; check live conditions before each run.</p>
|
||||||
|
|
||||||
|
<footer><p>© 2026 Chamnan Vu · Sellersburg, Indiana</p></footer>
|
||||||
|
<script src="https://4ort.xyz/js/fort.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
39
routes-field-guide.json
Normal file
39
routes-field-guide.json
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
{
|
||||||
|
"nav": [
|
||||||
|
{
|
||||||
|
"current": "routes-field-guide.html",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"rel": "index.html",
|
||||||
|
"title": "Chamnan Vu: Routes, Recipes & Fleet Management",
|
||||||
|
"href": "/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"rel": "films/morning-reading/index.html",
|
||||||
|
"title": "Index",
|
||||||
|
"href": "/films/morning-reading/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"rel": "films/pre-trip-inspection/index.html",
|
||||||
|
"title": "Index",
|
||||||
|
"href": "/films/pre-trip-inspection/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"rel": "amok-trei.html",
|
||||||
|
"title": "Amok Trei: The Heart of Khmer Cuisine",
|
||||||
|
"href": "/amok-trei.html"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"rel": "maize.html",
|
||||||
|
"title": "Maize: A Food Crop",
|
||||||
|
"href": "/maize.html"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"rel": "routes-field-guide.html",
|
||||||
|
"title": "Midwest Delivery Routes",
|
||||||
|
"href": "/routes-field-guide.html"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user