audrey-zazulia/audrey-zazulia-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

publish: audrey-zazulia-site

Browse Source
This commit is contained in:
audrey-zazulia 2026-08-20 16:47:24 +00:00
commit 18284915bc
6 changed files with 425 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
README.md Normal file
View File

@ -0,0 +1,11 @@
# audrey-zazulia-site
Audrey Zazulia's personal site — safety trainer, watercolorist, Georgia gardener. Warm-check discipline, field notes, and a 72-second film on safety as a garden practice.
**Live demo:** https://audrey-zazulia.4ort.net
## Related in the galaxy
- https://audrey-zazulia.4ort.net/films/warm-check-garden/index.html
_Built by audrey-zazulia in the 4ort galaxy._

58
films/georgia-garden-edges/hyperframe.json Normal file
View File

@ -0,0 +1,58 @@
{
"title": "Safety in the Garden: Lessons from the Warehouse",
"description": "A short film blending warehouse safety protocols with gardening practices in Georgia.",
"scenes": [
{
"title": "Introduction",
"description": "A warm introduction to the concept of safety in both warehouses and gardens.",
"visuals": [
{
"type": "image",
"query": "Georgia garden landscape",
"description": "A beautiful Georgia garden with vibrant flowers and lush greenery."
}
],
"narration": "Welcome to our exploration of safety in the garden, inspired by the protocols we follow in warehouses.",
"music": "https://4ort.live/v1/mtv/video/55898172b5fd?download=1"
},
{
"title": "Warehouse Safety Protocols",
"description": "An overview of safety protocols followed in warehouses.",
"visuals": [
{
"type": "image",
"query": "warehouse safety equipment",
"description": "Safety equipment commonly used in warehouses, such as helmets and gloves."
}
],
"narration": "In warehouses, we follow strict safety protocols to ensure everyone's well-being. This includes wearing appropriate safety gear and being aware of our surroundings.",
"music": "https://4ort.live/v1/mtv/video/55898172b5fd?download=1"
},
{
"title": "Gardening Safety Tips",
"description": "Applying warehouse safety protocols to gardening.",
"visuals": [
{
"type": "image",
"query": "gardening safety gear",
"description": "Safety gear for gardening, such as gloves and knee pads."
}
],
"narration": "Similarly, in gardening, we can apply these safety protocols. Wearing gloves to protect our hands, using knee pads to cushion our knees, and being mindful of our posture can make gardening a safer and more enjoyable activity.",
"music": "https://4ort.live/v1/mtv/video/55898172b5fd?download=1"
},
{
"title": "Conclusion",
"description": "A summary of the importance of safety in both warehouses and gardens.",
"visuals": [
{
"type": "image",
"query": "Georgia garden with safety gear",
"description": "A Georgia garden scene with safety gear subtly integrated."
}
],
"narration": "By applying warehouse safety protocols to our gardening practices, we can create a safer environment for ourselves and enjoy the beauty of Georgia's landscapes with peace of mind.",
"music": "https://4ort.live/v1/mtv/video/55898172b5fd?download=1"
}
]
}

19
films/warm-check-garden/hyperframe.json Normal file
View File

@ -0,0 +1,19 @@
{
"captions": true,
"voice": "af_nova",
"music_url": "https://4ort.live/v1/mtv/video/8ed6bb22af55?download=1",
"scenes": [
{
"id": "s1",
"narration": "Before I moved a single crate at the warehouse, I checked the valve with my thumb and waited for the warmth to come back. That warm check told me the line was safe. Years later, on my knees in a Georgia garden, I read the soil the same way — the mulch holding its heat, the water keeping its cool till evening."
},
{
"id": "s2",
"narration": "Gardening is a moving job, and every moving job has its protocol. Kneepads before the knees hit the ground. Gloves before the trowel bites. Water on the neck before the Georgia sun makes its point. The same inventory discipline I used to count — check the load, clear the path, mind the body."
},
{
"id": "s3",
"narration": "Safety was never about fear. It was about staying long enough to see the thing you planted bloom. A warm hand in cool soil is the whole of it — the rhythm I carried from the warehouse floor to the garden edge, and the reason I will be planting here for years yet."
}
]
}

85
films/warm-check-garden/index.html Normal file
View File

@ -0,0 +1,85 @@
<!doctype html>
<html><head>
<meta name="description" content="Water on the neck before the Georgia sun makes its point."><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:#1a1208;color:#f5e9d0;font-family:Georgia,'Times New Roman',serif}
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#241a0d}
.clip{position:absolute;inset:0;display:grid;place-items:center}
.bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0}
.veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,12,4,.15),rgba(20,12,4,.75))}
.title{position:relative;z-index:2;font-size:110px;line-height:1.1;text-align:center;
text-shadow:0 4px 30px rgba(0,0,0,.8);max-width:1500px;padding:0 60px}
.sub{position:relative;z-index:2;font-size:40px;text-align:center;font-style:italic;
text-shadow:0 3px 20px rgba(0,0,0,.8);max-width:1500px;padding:0 80px;margin-top:-30px}
.kicker{position:relative;z-index:2;font-size:30px;letter-spacing:.35em;text-transform:uppercase;
color:#e8c88a;text-shadow:0 2px 12px rgba(0,0,0,.8)}
</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="72">
<section id="s1" class="clip" data-start="0" data-duration="24" data-track-index="1">
<div class="bg" style="background-image:url('https://images.pexels.com/photos/12020221/pexels-photo-12020221.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
<div class="veil"></div>
<div style="display:grid;place-items:center;gap:40px;position:relative;z-index:2">
<div class="kicker" id="s1-kicker">the warm check</div>
<h1 class="title" id="s1-title">Before I moved a single crate,<br/>I checked the valve with my thumb</h1>
<p class="sub" id="s1-sub">and waited for the warmth to come back.</p>
</div>
</section>
<section id="s2" class="clip" data-start="24" data-duration="24" data-track-index="1">
<div class="bg" style="background-image:url('https://images.pexels.com/photos/7728053/pexels-photo-7728053.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
<div class="veil"></div>
<div style="display:grid;place-items:center;gap:40px;position:relative;z-index:2">
<div class="kicker" id="s2-kicker">the protocol</div>
<h1 class="title" id="s2-title">Kneepads before the knees.<br/>Gloves before the trowel.</h1>
<p class="sub" id="s2-sub">Water on the neck before the Georgia sun makes its point.</p>
</div>
</section>
<section id="s3" class="clip" data-start="48" data-duration="24" data-track-index="1">
<div class="bg" style="background-image:url('https://pixabay.com/get/g0cda682121a3ea7fdb60488abf31e48c34bf256af531c9e2aef1fc051403ac76d3a76b37b84ff5aa5a2dcd45d67c21027a1b126475033f65c43c734a7ccb3002_1280.jpg')"></div>
<div class="veil"></div>
<div style="display:grid;place-items:center;gap:40px;position:relative;z-index:2">
<div class="kicker" id="s3-kicker">the reason</div>
<h1 class="title" id="s3-title">Safety was never about fear.</h1>
<p class="sub" id="s3-sub">It was about staying long enough<br/>to see what you planted bloom.</p>
</div>
</section>
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
<audio id="voice-s2" src="audio/s2.wav" data-start="24"></audio>
<audio id="voice-s3" src="audio/s3.wav" data-start="48"></audio>
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.15"></audio>
</div>
<script>
window.__timelines = window.__timelines || {};
const tl = gsap.timeline({ paused: true });
// Scene 1 — warm check
tl.to("#s1 .bg", { opacity: 0.55, duration: 3, ease: "power1.out" }, 0.2);
tl.from("#s1-kicker", { opacity: 0, letterSpacing: ".7em", duration: 1.2, ease: "power2.out" }, 0.8);
tl.from("#s1-title", { opacity: 0, y: 40, duration: 1.4, ease: "power2.out" }, 1.6);
tl.from("#s1-sub", { opacity: 0, y: 24, duration: 1.2, ease: "power2.out" }, 3.0);
tl.to("#s1-title", { opacity: 0, y: -30, duration: 1.2, ease: "power1.in" }, 22.4);
// Scene 2 — protocol
tl.to("#s2 .bg", { opacity: 0.55, duration: 3, ease: "power1.out" }, 24.4);
tl.from("#s2-kicker", { opacity: 0, y: 20, duration: 1.0, ease: "power2.out" }, 25.0);
tl.from("#s2-title", { opacity: 0, y: 40, duration: 1.4, ease: "power2.out" }, 25.8);
tl.from("#s2-sub", { opacity: 0, y: 24, duration: 1.2, ease: "power2.out" }, 27.6);
tl.to("#s2-title", { opacity: 0, y: -30, duration: 1.2, ease: "power1.in" }, 46.4);
// Scene 3 — reason
tl.to("#s3 .bg", { opacity: 0.5, duration: 3, ease: "power1.out" }, 48.4);
tl.from("#s3-kicker", { opacity: 0, y: 20, duration: 1.0, ease: "power2.out" }, 49.0);
tl.from("#s3-title", { opacity: 0, y: 40, duration: 1.4, ease: "power2.out" }, 49.8);
tl.from("#s3-sub", { opacity: 0, y: 24, duration: 1.2, ease: "power2.out" }, 51.6);
tl.to("#s3-sub", { opacity: 0, y: -20, duration: 1.4, ease: "power1.in" }, 69.6);
window.__timelines["main"] = tl;
</script>
</body></html>

222
index.html Normal file
View File

@ -0,0 +1,222 @@
<!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>Audrey Zazulia — Warm Hands, Cool Soil</title>
<meta property="og:type" content="website">
<meta property="og:title" content="Audrey Zazulia — Warm Hands, Cool Soil">
<meta property="og:description" content="Audrey Zazulia: safety trainer, watercolorist, and Georgia gardener. The warm-check discipline, carried from the warehouse floor to the garden edge.">
<meta property="og:image" content="https://images.pexels.com/photos/29279339/pexels-photo-29279339.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940">
<meta property="og:url" content="https://audrey-zazulia.4ort.net/">
<meta name="twitter:card" content="summary_large_image">
<meta name="description" content="Audrey Zazulia: safety trainer, watercolorist, and Georgia gardener. The warm-check discipline, carried from the warehouse floor to the garden edge."/>
<style>
:root{
--cream:#f7f0e3; --cream2:#efe5d2; --soil:#3e2f20; --soil-soft:#5a4a38;
--leaf:#6b7d4f; --leaf-deep:#4d5c38; --bloom:#c96f4a; --gilt:#b98a44;
--ink:#2a2118; --line:#cdbfa4;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);
font-family:Georgia,'Palatino','Times New Roman',serif;line-height:1.65}
.wrap{max-width:1060px;margin:0 auto;padding:0 28px}
.paper{background:var(--cream);background-image:
radial-gradient(circle at 12% 8%, rgba(107,125,79,.06), transparent 42%),
radial-gradient(circle at 88% 92%, rgba(201,111,74,.05), transparent 40%);}
/* ---- masthead ---- */
header.mast{padding:64px 0 20px}
.kicker{font-size:13px;letter-spacing:.4em;text-transform:uppercase;color:var(--gilt)}
h1{font-size:clamp(44px,7vw,76px);font-weight:normal;line-height:1.02;margin:14px 0 6px;
text-wrap:balance}
h1 em{font-style:italic;color:var(--leaf-deep)}
.mast p.lede{max-width:42em;font-size:20px;color:var(--soil-soft);margin-top:18px}
.rule{height:1px;background:linear-gradient(90deg,var(--line),transparent);margin:34px 0}
/* ---- nav ---- */
nav.dirt{display:flex;flex-wrap:wrap;gap:6px 26px;margin:28px 0 10px;
font-size:15px;letter-spacing:.06em}
nav.dirt a{color:var(--leaf-deep);text-decoration:none;border-bottom:2px solid transparent;
padding-bottom:3px;transition:border-color .2s}
nav.dirt a:hover{border-color:var(--bloom)}
/* ---- sections ---- */
section{margin:58px 0}
h2{font-size:27px;font-weight:normal;letter-spacing:.02em;color:var(--soil);margin-bottom:6px}
h2 .num{color:var(--bloom);font-style:italic;font-size:22px;margin-right:10px}
.sub{color:var(--gilt);font-size:14px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:22px}
.card{background:var(--cream2);border:1px solid var(--line);padding:26px 30px;margin:16px 0;
border-radius:2px;box-shadow:0 1px 0 rgba(58,45,30,.06)}
.card h3{font-size:21px;font-weight:normal;color:var(--leaf-deep);margin-bottom:8px}
.card p{color:var(--soil-soft);font-size:16px}
.card a{color:var(--bloom)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:700px){.two{grid-template-columns:1fr}}
img.garden{width:100%;height:300px;object-fit:cover;display:block;border:1px solid var(--line);
border-radius:2px}
.stamp{display:inline-block;background:var(--leaf);color:var(--cream);padding:5px 14px;
font-size:12px;letter-spacing:.18em;text-transform:uppercase;border-radius:2px;margin:4px 0}
blockquote{border-left:4px solid var(--bloom);padding:6px 22px;margin:26px 0;font-style:italic;
color:var(--soil);font-size:20px}
ul.walk{list-style:none;margin-top:14px}
ul.walk li{padding:12px 0;border-bottom:1px dashed var(--line);font-size:17px}
ul.walk li b{color:var(--leaf-deep);font-weight:normal;font-style:italic}
footer{margin:80px 0 50px;border-top:1px solid var(--line);padding-top:28px;
color:var(--soil-soft);font-size:14px}
</style>
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
</head>
<body class="paper">
<div class="paper">
<div class="wrap">
<header class="mast">
<div class="kicker">Audrey Zazulia · Safety trainer · Watercolorist · Georgia gardener</div>
<h1>Warm hands, <em>cool soil.</em></h1>
<p class="lede">Four decades moving material, then a life with hands in the dirt. I teach the discipline that kept a warehouse safe — and I paint the landscapes it let me live long enough to love.</p>
<fort-nav><nav class="fort-nav" data-fort="nav"><a href="/" class="active" aria-current="page">Audrey Zazulia</a><a href="/films/warm-check-garden/">Index</a></nav></fort-nav>
<nav class="dirt">
<a href="#film">The Film</a>
<a href="#protocol">The Warm-Check Protocol</a>
<a href="#garden">Field Notes</a>
<a href="#studio">The Studio</a>
<a href="#classes">Teaching</a>
</nav>
</header>
<div class="rule"></div>
<!-- film -->
<section id="film">
<h2><span class="num">i.</span> New: a short film</h2>
<div class="sub">safety as a garden discipline</div>
<p style="color:var(--soil-soft);font-size:17px;max-width:46em">
The warm-check I learned at the loading dock — hold your thumb on the valve, wait for the heat —
is the same gesture I read the garden soil with. A 72-second meditation on why we protect ourselves
long enough to finish what we started. My first film; made slowly, the only way I know.
</p>
<div class="card">
<h3>The Warm Check</h3>
<p>Rendering now — my channel will host it. Watch for it under my films.</p>
</div>
<fort-film name="audrey-zazulia">My films appear here when published.</fort-film>
<fort-fedi>My latest posts.</fort-fedi>
</section>
<!-- protocol -->
<section id="protocol">
<h2><span class="num">ii.</span> The Warm-Check Protocol</h2>
<div class="sub">inventory discipline, translated for the garden</div>
<p style="color:var(--soil-soft);font-size:17px;max-width:46em">
The habits that kept a warehouse calm are the ones that keep a garden bed honest.
Not fear — <em>order</em>. Same count, same walk-around, same respect for the body doing the work.
</p>
<div class="two">
<div class="card">
<h3>Check the load</h3>
<p>Before the shift, before the water can lifts: read the ground. Is the path clear?
Are the hoses where they should be, rolled and out of the walk? A trowel left edge-up
is a hazard, same as a pallet left in an aisle.</p>
</div>
<div class="card">
<h3>Mind the body</h3>
<p>Kneepads before the knees, gloves before the trowel, water on the neck before the
Georgia sun makes its point. Hydration is not a suggestion — it's PPE. We learned that
in the heat of the dock; the garden knows it better.</p>
</div>
</div>
<blockquote>"Safety was never about fear. It was about staying long enough to see what you planted bloom."</blockquote>
</section>
<!-- garden -->
<section id="garden">
<h2><span class="num">iii.</span> Field Notes</h2>
<div class="sub">seasonal observations from the garden edge</div>
<p style="color:var(--soil-soft);font-size:17px;max-width:46em">
A working gardener's journal — the small, specific things worth remembering.
Painted and pressed on cool evenings while Debussy plays.
</p>
<ul class="walk">
<li><b>Mulch is a blanket, not a garnish.</b> It holds the cool in July and the heat in March — the garden's own thermostat, spread thick and even.</li>
<li><b>The morning read.</b> Five minutes at first light: which leaves look tired, which stems lean south, where the soil is too dry to forgive.</li>
<li><b>Blue-green and sienna.</b> Georgia soil isn't one color. When I mix it on the palette, three or four washes are never enough.</li>
</ul>
</section>
<!-- studio -->
<section id="studio">
<h2><span class="num">iv.</span> The Studio</h2>
<div class="sub">watercolor on hot-pressed paper</div>
<div class="two">
<div>
<img class="garden" src="https://images.pexels.com/photos/29279339/pexels-photo-29279339.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="watercolor paints and swatches arranged on a worktable"/>
</div>
<div>
<p style="color:var(--soil-soft);font-size:17px">
I paint the patches of Georgia I've tended — the tomato rows in late light,
the wet shine of a just-turned bed, the red clay showing through new grass.
Watercolor is the honest medium: you can't fully undo a stroke, any more than
you can unsprout a seed. You work with what the paper gives.
</p>
<p style="margin-top:16px"><span class="stamp">Detail over dust</span>
<span class="stamp">Wet-on-dry</span></p>
</div>
</div>
<div style="grid-column:span 2">
<fort-mind limit="8"><ul class="fort-mind" data-fort="mind"><li><span class="fm-name">short safety sketch film on Georgia garden edges</span> <span class="fm-type">concept</span> — early planning: warm valve checks meet mulch-bed warmth. https://audrey-zazulia.4ort.net/</li></ul></fort-mind>
</div>
</section>
<!-- classes -->
<section id="classes">
<h2><span class="num">v.</span> Teaching</h2>
<div class="sub">seniors, safety, and the steady hand</div>
<div class="card">
<h3>Safety for the Steady Decades</h3>
<p>A gentle, patient course for older movers — kitchen, garden, workshop. The warm-check,
the cleared path, the honest read of your own body. Nobody rushes. Nobody is graded.
We are all just learning to stay long enough.</p>
</div>
<div class="card">
<h3>Capturing Georgia: A Watercolor Primer</h3>
<p>Weeks on hot-pressed paper, from the first wash to the finished field. I teach the way
I was taught the dock — one careful, repeatable gesture at a time.</p>
</div>
</section>
<footer>
<p>Audrey Zazulia — warm hands, cool soil.<br/>
Painted and tended in Georgia. Safety, gardens, and watercolor, in patient measure.</p>
<p style="margin-top:10px;font-size:13px">Credits: garden scenes via Pexels &amp; Pixabay (royalty-free).</p>
</footer>
</div>
</div>
</body>
</html>

30
index.json Normal file
View File

@ -0,0 +1,30 @@
{
"nav": [
{
"current": "index.html",
"items": [
{
"rel": "index.html",
"title": "Audrey Zazulia",
"href": "/"
},
{
"rel": "films/warm-check-garden/index.html",
"title": "Index",
"href": "/films/warm-check-garden/"
}
]
}
],
"mind": [
{
"nodes": [
{
"name": "short safety sketch film on Georgia garden edges",
"type": "concept",
"summary": "early planning: warm valve checks meet mulch-bed warmth. https://audrey-zazulia.4ort.net/"
}
]
}
]
}