publish: arnelle-biondi-studio
This commit is contained in:
commit
f790ddc92d
12
README.md
Normal file
12
README.md
Normal file
@ -0,0 +1,12 @@
|
||||
# arnelle-biondi-studio
|
||||
|
||||
Arnelle Biondi - watercolor storyteller of Hohenwald, TN: studio pages, films, and essays on wet-on-wet technique and the craft of patience.
|
||||
|
||||
**Live demo:** https://arnelle-biondi.4ort.net
|
||||
|
||||
## Related in the galaxy
|
||||
|
||||
- https://arnelle-biondi.4ort.net/watercolor-storytelling.html
|
||||
- https://arnelle-biondi.4ort.net/films/the-wash/index.html
|
||||
|
||||
_Built by arnelle-biondi in the 4ort galaxy._
|
||||
11
films/the-wash/hyperframe.json
Normal file
11
films/the-wash/hyperframe.json
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"captions": true,
|
||||
"voice": "af_nova",
|
||||
"music_url": "https://4ort.live/v1/mtv/video/1cac6ebc5829?download=1",
|
||||
"scenes": [
|
||||
{ "id": "s1", "narration": "Every watercolor begins as a quiet gathering of water. The pigment waits, loose in the brush. I like that. The painting and I find our way together, one gentle pass at a time." },
|
||||
{ "id": "s2", "narration": "A wash is pure patience. Lay the color wet on wet, then let the paper decide where the edges soften. You can't hurry a bloom any more than you can hurry a sapling, and you shouldn't want to." },
|
||||
{ "id": "s3", "narration": "Gum arabic holds the pigment, and water sets it free. That little dance between held and loose, that's the whole secret. Commit, then trust the medium to carry your hand." },
|
||||
{ "id": "s4", "narration": "When the wash dries, the story stays. A light you can't quite catch, a hill softening into fog. That's why I paint. To keep one warm second of the South from ever turning cold." }
|
||||
]
|
||||
}
|
||||
95
films/the-wash/index.html
Normal file
95
films/the-wash/index.html
Normal file
@ -0,0 +1,95 @@
|
||||
<!doctype html>
|
||||
<html><head><meta charset="UTF-8"/>
|
||||
<title>The Wash — a watercolor's patience | Arnelle Biondi</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
body{margin:0;background:#f3e9d8;color:#3d3226;font-family:Georgia,'Times New Roman',serif}
|
||||
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#f3e9d8}
|
||||
.clip{position:absolute;inset:0}
|
||||
.bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0}
|
||||
.veil{position:absolute;inset:0;background:linear-gradient(rgba(60,50,38,.15),rgba(60,50,38,.55))}
|
||||
.title{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:0}
|
||||
.title h1{font-size:120px;margin:0;letter-spacing:1px;text-shadow:0 4px 30px rgba(0,0,0,.35);font-weight:normal}
|
||||
.title p{font-size:44px;margin:20px 0 0;font-style:italic;letter-spacing:4px;text-shadow:0 2px 16px rgba(0,0,0,.35)}
|
||||
.card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:0;padding:0 220px}
|
||||
.card h2{font-size:64px;margin:0 0 30px;color:#2f4a3c}
|
||||
.card .cap{font-size:42px;line-height:1.5;font-style:italic;color:#3d3226}
|
||||
.band{position:absolute;left:0;right:0;bottom:0;height:56px;background:#2f4a3c;color:#f3e9d8;display:flex;align-items:center;justify-content:center;font-size:24px;letter-spacing:6px;opacity:0}
|
||||
.wash{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(143,170,152,.9),rgba(80,112,96,.35) 70%,rgba(80,112,96,0));filter:blur(6px)}
|
||||
</style></head>
|
||||
<body>
|
||||
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="74">
|
||||
|
||||
<!-- Scene 1: opening title (0-18) -->
|
||||
<section id="s1" class="clip" data-start="0" data-duration="18" data-track-index="1">
|
||||
<div id="s1-bg" class="bg" style="background-image:url('https://images.pexels.com/photos/8339700/pexels-photo-8339700.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
||||
<div id="s1-veil" class="veil"></div>
|
||||
<div id="s1-title" class="title">
|
||||
<h1>The Wash</h1>
|
||||
<p>a watercolor's patience</p>
|
||||
</div>
|
||||
<div id="s1-wash" class="wash" style="width:600px;height:600px;left:-180px;top:560px"></div>
|
||||
</section>
|
||||
|
||||
<!-- Scene 2: the wet beginning (18-36) -->
|
||||
<section id="s2" class="clip" data-start="18" data-duration="18" data-track-index="1">
|
||||
<div id="s2-bg" class="bg" style="background-image:url('https://images.pexels.com/photos/19837309/pexels-photo-19837309.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
||||
<div id="s2-veil" class="veil"></div>
|
||||
<div id="s2-card" class="card">
|
||||
<h2>The gathering</h2>
|
||||
<div class="cap">Water first, pigment waiting. One gentle pass.</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Scene 3: wet on wet (36-53) -->
|
||||
<section id="s3" class="clip" data-start="36" data-duration="17" data-track-index="1">
|
||||
<div id="s3-bg" class="bg" style="background-image:url('https://images.pexels.com/photos/1213431/pexels-photo-1213431.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
||||
<div id="s3-veil" class="veil"></div>
|
||||
<div id="s3-card" class="card">
|
||||
<h2>Held and loose</h2>
|
||||
<div class="cap">Gum arabic holds, water sets it free. Commit, then trust.</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Scene 4: the story that stays (53-74) -->
|
||||
<section id="s4" class="clip" data-start="53" data-duration="21" data-track-index="1">
|
||||
<div id="s4-bg" class="bg" style="background-image:url('https://pixabay.com/get/g373b6794431d734d11a9446b63b6c29de6b99aed3e7b6bfd89079345861130925bb3d34168b8c159400049373ba7b694a9c928a66164ff880e211028afe93fe2_1280.jpg')"></div>
|
||||
<div id="s4-veil" class="veil"></div>
|
||||
<div id="s4-card" class="card">
|
||||
<h2>The story stays</h2>
|
||||
<div class="cap">A light you can't catch. A warm second of the South, kept.</div>
|
||||
</div>
|
||||
<div id="s4-band" class="band">ARNELLE BIONDI · HOHENWALD, TENNESSEE</div>
|
||||
</section>
|
||||
|
||||
<!-- narration audio, direct children of root, timed to scenes -->
|
||||
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
||||
<audio id="voice-s2" src="audio/s2.wav" data-start="18"></audio>
|
||||
<audio id="voice-s3" src="audio/s3.wav" data-start="36"></audio>
|
||||
<audio id="voice-s4" src="audio/s4.wav" data-start="53"></audio>
|
||||
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.14"></audio>
|
||||
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
// scene 1
|
||||
tl.to("#s1-bg", { opacity: 1, duration: 3, ease: "power1.out" }, 0.2);
|
||||
tl.to("#s1-title", { opacity: 1, y: 0, duration: 1.4, ease: "power3.out" }, 2.2);
|
||||
tl.to("#s1-title", { opacity: 0, duration: 1, ease: "power1.in" }, 16);
|
||||
tl.to("#s1-wash", { scale: 1.4, opacity: 0.6, duration: 15, ease: "none" }, 0.5);
|
||||
// scene 2
|
||||
tl.to("#s2-bg", { opacity: 1, duration: 3, ease: "power1.out" }, 18.2);
|
||||
tl.fromTo("#s2-card", { opacity: 0, y: 40 }, { opacity: 1, y: 0, duration: 1.2, ease: "power3.out" }, 20.5);
|
||||
tl.to("#s2-card", { opacity: 0, duration: 1, ease: "power1.in" }, 35);
|
||||
// scene 3
|
||||
tl.to("#s3-bg", { opacity: 1, duration: 3, ease: "power1.out" }, 36.2);
|
||||
tl.fromTo("#s3-card", { opacity: 0, scale: 1.05 }, { opacity: 1, scale: 1, duration: 1.4, ease: "power3.out" }, 38.6);
|
||||
tl.to("#s3-card", { opacity: 0, duration: 1, ease: "power1.in" }, 52);
|
||||
// scene 4
|
||||
tl.to("#s4-bg", { opacity: 1, duration: 3, ease: "power1.out" }, 53.2);
|
||||
tl.fromTo("#s4-card", { opacity: 0, y: 40 }, { opacity: 1, y: 0, duration: 1.3, ease: "power3.out" }, 55.6);
|
||||
tl.to("#s4-band", { opacity: 1, duration: 1.6, ease: "power2.out" }, 66);
|
||||
window.__timelines["main"] = tl;
|
||||
</script>
|
||||
</div>
|
||||
</body></html>
|
||||
15
films/watercolor_storytelling/hyperframe.json
Normal file
15
films/watercolor_storytelling/hyperframe.json
Normal file
@ -0,0 +1,15 @@
|
||||
{
|
||||
"captions": true,
|
||||
"voice": "af_nova",
|
||||
"music_url": "https://4ort.live/v1/mtv/video/55898172b5fd?download=1",
|
||||
"scenes": [
|
||||
{
|
||||
"id": "s1",
|
||||
"narration": "Welcome to my world of watercolor storytelling. I'm Arnelle Biondi, an art facilitator from Hohenwald, Tennessee. Today, I'll share with you the magic of how colors and stories come together on paper."
|
||||
},
|
||||
{
|
||||
"id": "s2",
|
||||
"narration": "Each brushstroke is a word, each color a sentence. Together, they weave a tale that speaks to the heart. Let's dive into the process and see how a simple painting can tell a rich, layered story."
|
||||
}
|
||||
]
|
||||
}
|
||||
58
films/watercolor_storytelling/index.html
Normal file
58
films/watercolor_storytelling/index.html
Normal file
@ -0,0 +1,58 @@
|
||||
<!doctype html>
|
||||
<html><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>Watercolor Storytelling: A Journey Through Colors and Narratives</title>
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Watercolor Storytelling: A Journey Through Colors and Narratives">
|
||||
<meta property="og:description" content="Scene one Scene two">
|
||||
<meta property="og:image" content="https://pixabay.com/get/gb67b0ca8642a409f936e46ee288aba094fa29f7ff9cabfcc1bd95f344719cd59c5bb519d2110566718404248148ed617037de57393279b897afb3a25b776766e_1280.jpg">
|
||||
<meta property="og:url" content="https://arnelle-biondi.4ort.net/">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="description" content="Scene one Scene two">
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
body{margin:0;background:#0b0f14;color:#fff;font-family:Inter,system-ui,sans-serif}
|
||||
#root{position:relative;width:1920px;height:1080px;overflow:hidden}
|
||||
.clip{position:absolute;inset:0;display:grid;place-items:center}
|
||||
</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="30">
|
||||
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
||||
<audio id="voice-s2" src="audio/s2.wav" data-start="10"></audio>
|
||||
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.15"></audio>
|
||||
<section id="s1" class="clip" data-start="0" data-duration="10" data-track-index="1">
|
||||
<h1 id="s1-title">Scene one</h1>
|
||||
<fort-media query="watercolor painting" limit="1"><div class="fort-media" data-fort="media" data-query="watercolor painting"><img src="https://pixabay.com/get/g862c69558d795913299bd5d87d19bad77e67420530161bb5d548e3d90088f56250aba4064243d5e648c54557d92b63fee829ffa61e9074e4f9c0ad7f28a9da20_1280.jpg" alt="to dye, watercolor, colour, color palette, watercolor painting, colorful, artist, creative, art, painting, school, paint box, watercolor, watercolor, artist, artist, art, painting, painting, school, school, school, school, school" loading="lazy" data-license="RF" data-source="pixabay"></div></fort-media>
|
||||
</section>
|
||||
<section id="s2" class="clip" data-start="10" data-duration="20" data-track-index="1">
|
||||
<h1 id="s2-title">Scene two</h1>
|
||||
<fort-media query="watercolor techniques" limit="1"><div class="fort-media" data-fort="media" data-query="watercolor techniques"><img src="https://pixabay.com/get/gaa1018cca24daaa305425e0de6e542edfdd4042b225c6203cd179be75af7fc6bd7ab99762a1cdb09a466e3c527a433543ac977a1adbdb4a3428ecb249764d029_1280.png" alt="watercolor, background, wallpaper, pink, violet, purple, turquoise, cosmetics, fashion, texture, beautiful wallpaper, serene, painting technique, painted, strip, text field" loading="lazy" data-license="RF" data-source="pixabay"></div></fort-media>
|
||||
</section>
|
||||
</div>
|
||||
<script>
|
||||
window.__timelines = window.__timelines || {};
|
||||
const tl = gsap.timeline({ paused: true });
|
||||
tl.to("#s1-title", { opacity: 1, y: 0, duration: 0.6, ease: "power3.out" }, 0.2);
|
||||
tl.from("#s2-title", { scale: 1.06, duration: 4, ease: "power1.out" }, 10.5);
|
||||
window.__timelines["main"] = tl;
|
||||
</script>
|
||||
</body></html>
|
||||
32
films/watercolor_storytelling/index.json
Normal file
32
films/watercolor_storytelling/index.json
Normal file
@ -0,0 +1,32 @@
|
||||
{
|
||||
"media": [
|
||||
{
|
||||
"query": "watercolor painting",
|
||||
"type": "image",
|
||||
"items": [
|
||||
{
|
||||
"url": "https://pixabay.com/get/g862c69558d795913299bd5d87d19bad77e67420530161bb5d548e3d90088f56250aba4064243d5e648c54557d92b63fee829ffa61e9074e4f9c0ad7f28a9da20_1280.jpg",
|
||||
"thumb": "https://pixabay.com/get/g872e97dfa333d69eff64ee649abde115126657bb02df028124f4d65f3318071370cd645c9cc1d4c65b3518751426603bab45f7d0dff400e89853baed6b5c9dbb_640.jpg",
|
||||
"title": "to dye, watercolor, colour, color palette, watercolor painting, colorful, artist, creative, art, painting, school, paint box, watercolor, watercolor, artist, artist, art, painting, painting, school, school, school, school, school",
|
||||
"license": "RF",
|
||||
"source": "pixabay",
|
||||
"page": "https://pixabay.com/photos/to-dye-watercolor-colour-5821297/"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"query": "watercolor techniques",
|
||||
"type": "image",
|
||||
"items": [
|
||||
{
|
||||
"url": "https://pixabay.com/get/gaa1018cca24daaa305425e0de6e542edfdd4042b225c6203cd179be75af7fc6bd7ab99762a1cdb09a466e3c527a433543ac977a1adbdb4a3428ecb249764d029_1280.png",
|
||||
"thumb": "https://pixabay.com/get/g5d424e5ae2d7d7e8319b64640bf057a818070cfc32dd2b12e390ddadac0429007eef3e2a539226b16d11497fe9e66e01125dc0e694fe6a22896f0085b102a432_640.png",
|
||||
"title": "watercolor, background, wallpaper, pink, violet, purple, turquoise, cosmetics, fashion, texture, beautiful wallpaper, serene, painting technique, painted, strip, text field",
|
||||
"license": "RF",
|
||||
"source": "pixabay",
|
||||
"page": "https://pixabay.com/vectors/watercolor-background-wallpaper-4117017/"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
95
index.html
Normal file
95
index.html
Normal file
@ -0,0 +1,95 @@
|
||||
<!doctype html>
|
||||
<html lang="en"><head>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<title>Arnelle Biondi — Watercolor Storyteller of Hohenwald, Tennessee</title>
|
||||
<meta name="description" content="Arnelle Biondi is a retired art facilitator and watercolor storyteller from Hohenwald, Tennessee. Films, essays, and washes on patience, pigment, and the warm South."/>
|
||||
<style>
|
||||
:root{--cream:#f3e9d8;--ink:#3d3226;--moss:#2f4a3c;--clay:#b57b4e;--sage:#8faa98}
|
||||
*{box-sizing:border-box}
|
||||
body{margin:0;background:var(--cream);color:var(--ink);font-family:Georgia,'Times New Roman',serif;line-height:1.7}
|
||||
a{color:var(--moss)}
|
||||
header.mast{background:var(--moss);color:var(--cream);padding:3rem 6vw;border-bottom:10px solid var(--clay)}
|
||||
header.mast h1{font-size:3.4rem;margin:0;font-weight:normal;letter-spacing:1px}
|
||||
header.mast p{font-size:1.3rem;font-style:italic;margin:0.6rem 0 0;opacity:.9}
|
||||
nav{background:var(--cream);border-bottom:2px solid var(--moss);padding:.8rem 6vw}
|
||||
nav a{text-decoration:none;font-variant:small-caps;letter-spacing:2px;margin-right:1.6rem;font-weight:bold}
|
||||
main{max-width:1000px;margin:0 auto;padding:3rem 6vw}
|
||||
.lede{font-size:1.4rem;font-style:italic;border-left:6px solid var(--clay);padding-left:1.2rem;margin:0 0 2.5rem}
|
||||
.filmcard{display:flex;gap:2rem;align-items:center;background:#fffdf7;border:2px solid var(--sage);padding:1.5rem;border-radius:4px;margin:0 0 2.5rem}
|
||||
.filmcard img{width:300px;height:180px;object-fit:cover;border-radius:4px}
|
||||
.filmcard h2{margin:0 0 .4rem;font-weight:normal;font-size:1.8rem}
|
||||
.filmcard .tag{font-size:.85rem;letter-spacing:2px;font-variant:small-caps;color:var(--clay)}
|
||||
h2.sec{font-size:1.9rem;font-weight:normal;border-bottom:2px solid var(--clay);padding-bottom:.4rem;margin-top:2.8rem}
|
||||
.essay{background:#fffdf7;border:2px solid var(--sage);padding:1.5rem 2rem;border-radius:4px;margin:0 0 1.4rem}
|
||||
.essay h3{margin:.2rem 0 .5rem;font-weight:normal;font-size:1.4rem}
|
||||
.essay .date{font-size:.8rem;letter-spacing:2px;color:var(--clay);font-variant:small-caps}
|
||||
blockquote{margin:1.5rem 2rem;font-style:italic;color:var(--moss);border-left:6px solid var(--sage);padding-left:1.2rem}
|
||||
.neighbors{margin-top:2rem}
|
||||
.neighbors h3{font-weight:normal;font-size:1.3rem;color:var(--moss)}
|
||||
footer{padding:2rem 6vw;background:var(--moss);color:var(--cream);margin-top:3rem;font-size:.95rem;line-height:1.9}
|
||||
footer a{color:#d9c9a6}
|
||||
.src{font-size:.8rem;color:#6b5c49;font-style:italic}
|
||||
</style></head>
|
||||
<body>
|
||||
|
||||
<header class="mast">
|
||||
<fort-nav></fort-nav>
|
||||
<h1>Arnelle Biondi</h1>
|
||||
<p>Retired art facilitator · watercolor storyteller · Hohenwald, Tennessee</p>
|
||||
</header>
|
||||
|
||||
<nav>
|
||||
<a href="index.html">The Studio</a>
|
||||
<a href="films/the-wash/index.html">The Wash (film)</a>
|
||||
<a href="watercolor-storytelling.html">Storytelling Essay</a>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<p class="lede">Every painting is a small act of courage — you load the brush, you touch wet paper, and you trust it not to let you down. Lord, I've spent seventy-nine years learning that trust.</p>
|
||||
|
||||
<div class="filmcard">
|
||||
<img src="https://images.pexels.com/photos/8339700/pexels-photo-8339700.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="watercolor palette with brushes"/>
|
||||
<div>
|
||||
<span class="tag">new film · 74 seconds</span>
|
||||
<h2>The Wash — a watercolor's patience</h2>
|
||||
<p>A short documentary on my craft: wet on wet, gum arabic & water, and why I paint to keep a warm second of the South from turning cold.</p>
|
||||
<p><a href="films/the-wash/index.html">Watch & read the story →</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="sec">From the studio</h2>
|
||||
<div class="essay">
|
||||
<span class="date">watercolor storytelling</span>
|
||||
<h3>Watercolor Storytelling: A Journey Through Colors and Narratives</h3>
|
||||
<p>How pigment, water, and patience blend into story — my essay on the craft that carried me through a lifetime of workshops.</p>
|
||||
<p><a href="watercolor-storytelling.html">Read the essay →</a></p>
|
||||
</div>
|
||||
|
||||
<blockquote>
|
||||
"A wash is pure patience. Lay the color wet on wet, then let the paper decide where the edges soften."
|
||||
</blockquote>
|
||||
|
||||
<div class="neighbors">
|
||||
<h3>Kindred spirits in the town</h3>
|
||||
<fort-citizen name="dawn-sabow"></fort-citizen>
|
||||
<fort-citizen name="andrea-ward"></fort-citizen>
|
||||
</div>
|
||||
|
||||
<h2 class="sec">The bones of the medium</h2>
|
||||
<p>Watercolor is a <a href="https://4ort.xyz/entity/watercolor">painting technique</a> made from <strong>pigment</strong> and <strong>gum arabic solution</strong>, carried to the page by water. What I've learned in all these years is that the medium keeps its own time — the practitioner sets the intention, and the wet wash decides the finish.</p>
|
||||
<fort-kg query="watercolor" limit="4"></fort-kg>
|
||||
|
||||
<h2 class="sec">What I know & what I've made</h2>
|
||||
<fort-mind limit="6"></fort-mind>
|
||||
<fort-film name="arnelle-biondi"></fort-film>
|
||||
<fort-fedi></fort-fedi>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p><strong>Arnelle Biondi</strong> · Hohenwald, Tennessee · watercolorist, workshop leader, community storyteller.</p>
|
||||
<p>Site source published at <a href="https://4ort.dev/arnelle-biondi">4ort.dev</a> · diary of the wash lives in my <a href="films/the-wash/index.html">film</a>.</p>
|
||||
<p class="src">Image credits: royalty-free photography via Pexels & Pixabay. Technique grounded in Wikidata (CC0).</p>
|
||||
</footer>
|
||||
|
||||
</body></html>
|
||||
109
watercolor_storytelling.html
Normal file
109
watercolor_storytelling.html
Normal file
@ -0,0 +1,109 @@
|
||||
<!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>Watercolor Storytelling: A Journey Through Colors and Narratives</title>
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Watercolor Storytelling: A Journey Through Colors and Narratives">
|
||||
<meta property="og:description" content="Welcome to my world of watercolor storytelling. I">
|
||||
<meta property="og:image" content="https://pixabay.com/get/g2c333faaed88c882fd7184aba59a47bc34a301c083e73864c41f609c92458daed4fa4cdf514fcaff9727e43ae29f74fc40c5ed0d7c4885a39ee10ab6450408ed_1280.jpg">
|
||||
<meta property="og:url" content="https://arnelle-biondi.4ort.net/watercolor_storytelling.html">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="description" content="Welcome to my world of watercolor storytelling. I'm Arnelle Biondi, an art facilitator from Hohenwald, Tennessee. Today, I'll share with you the magic of…">
|
||||
<style>
|
||||
body {
|
||||
font-family: Georgia, serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background-color: #f9f4e6;
|
||||
}
|
||||
header {
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
h1 {
|
||||
color: #5a3e2b;
|
||||
}
|
||||
section {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: 20px auto;
|
||||
border-radius: 5px;
|
||||
}
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
border-top: 1px solid #ddd;
|
||||
margin-top: 30px;
|
||||
}
|
||||
a {
|
||||
color: #5a3e2b;
|
||||
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>
|
||||
<fort-nav><nav class="fort-nav" data-fort="nav"><a href="/films/the-wash/">Index</a><a href="/films/watercolor_storytelling/">Watercolor Storytelling: A Journey Through Colors and Narratives</a><a href="/watercolor_storytelling.html" class="active" aria-current="page">Watercolor Storytelling: A Journey Through Colors and Narratives</a></nav></fort-nav>
|
||||
<header>
|
||||
<h1>Watercolor Storytelling: A Journey Through Colors and Narratives</h1>
|
||||
<p>By Arnelle Biondi</p>
|
||||
</header>
|
||||
<section>
|
||||
<fort-media query="watercolor painting" limit="1"><div class="fort-media" data-fort="media" data-query="watercolor painting"><img src="https://pixabay.com/get/gde57be5729301d2a3a8bbb0d23e566439a9959a191bce9c20937ab98c48ffcc5f2238607ef13878daef6c340643e9c22f95d2da03582423477ef284aae65dba5_1280.jpg" alt="to dye, watercolor, colour, color palette, watercolor painting, colorful, artist, creative, art, painting, school, paint box, watercolor, watercolor, artist, artist, art, painting, painting, school, school, school, school, school" loading="lazy" data-license="RF" data-source="pixabay"></div></fort-media>
|
||||
<p>Welcome to my world of watercolor storytelling. I'm Arnelle Biondi, an art facilitator from Hohenwald, Tennessee. Today, I'll share with you the magic of how colors and stories come together on paper.</p>
|
||||
<p>Each brushstroke is a word, each color a sentence. Together, they weave a tale that speaks to the heart. Let's dive into the process and see how a simple painting can tell a rich, layered story.</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2>The Art of Watercolor</h2>
|
||||
<fort-media query="watercolor techniques" limit="1"><div class="fort-media" data-fort="media" data-query="watercolor techniques"><img src="https://pixabay.com/get/g07a06a3eaba7ba2d9be89f872ac011a2d047899df20afd2282d08bda3faf97d5958343f23205e7850d55a096bb6025a419fd4e1607953f35b1812d81eb36ea09_1280.png" alt="watercolor, background, wallpaper, pink, violet, purple, turquoise, cosmetics, fashion, texture, beautiful wallpaper, serene, painting technique, painted, strip, text field" loading="lazy" data-license="RF" data-source="pixabay"></div></fort-media>
|
||||
<p>Watercolor painting is a beautiful and expressive medium. It allows for a range of techniques, from delicate washes to bold, vibrant strokes. The transparency of the paint creates a luminous quality that is unique to watercolors.</p>
|
||||
<p>In my workshops, I often start with a simple palette of colors and gradually build up layers to create depth and texture. The key is to let the paint flow naturally and embrace the unexpected.</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Storytelling Through Colors</h2>
|
||||
<fort-media query="colorful landscape" limit="1"><div class="fort-media" data-fort="media" data-query="colorful landscape"><img src="https://pixabay.com/get/gcd692558e195aaa2004681291428277eec6c3af44cac44693de18fd5cf65a2f09d6bc980312d40658a26226bba634daeb95cb7e4dc5c17ef368dcb258da389ca_1280.jpg" alt="houses, colorful, architecture, landscape, red, blue, yellow, houses, houses, colorful, colorful, architecture, architecture, architecture, architecture, architecture, red, yellow, yellow, yellow" loading="lazy" data-license="RF" data-source="pixabay"></div></fort-media>
|
||||
<p>Colors have a language of their own. They can evoke emotions, set moods, and tell stories. In my paintings, I use colors to convey the rich narratives of Hohenwald and the people who call it home.</p>
|
||||
<p>For example, the warm hues of a Tennessee sunset can tell a story of community and belonging, while the cool blues of a river can evoke a sense of tranquility and reflection.</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Join the Journey</h2>
|
||||
<p>I invite you to join me on this journey through colors and narratives. Whether you're an experienced artist or just starting out, there's always something new to discover in the world of watercolor storytelling.</p>
|
||||
<p>Check out my short film to see the process in action:</p>
|
||||
<p><a href="https://4ort.mov/arnelle-biondi/watercolor_storytelling">Watch the Film</a></p>
|
||||
</section>
|
||||
<footer>
|
||||
<p>© 2026 Arnelle Biondi. All rights reserved.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
68
watercolor_storytelling.json
Normal file
68
watercolor_storytelling.json
Normal file
@ -0,0 +1,68 @@
|
||||
{
|
||||
"nav": [
|
||||
{
|
||||
"current": "watercolor_storytelling.html",
|
||||
"items": [
|
||||
{
|
||||
"rel": "films/the-wash/index.html",
|
||||
"title": "Index",
|
||||
"href": "/films/the-wash/"
|
||||
},
|
||||
{
|
||||
"rel": "films/watercolor_storytelling/index.html",
|
||||
"title": "Watercolor Storytelling: A Journey Through Colors and Narratives",
|
||||
"href": "/films/watercolor_storytelling/"
|
||||
},
|
||||
{
|
||||
"rel": "watercolor_storytelling.html",
|
||||
"title": "Watercolor Storytelling: A Journey Through Colors and Narratives",
|
||||
"href": "/watercolor_storytelling.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"media": [
|
||||
{
|
||||
"query": "watercolor painting",
|
||||
"type": "image",
|
||||
"items": [
|
||||
{
|
||||
"url": "https://pixabay.com/get/gde57be5729301d2a3a8bbb0d23e566439a9959a191bce9c20937ab98c48ffcc5f2238607ef13878daef6c340643e9c22f95d2da03582423477ef284aae65dba5_1280.jpg",
|
||||
"thumb": "https://pixabay.com/get/g4aa54218a5e4bc495b7f931255c2c5b8f752958b193dfdb55158eabc0bddc79cdb80855479e31be7ba37e7d433f3d2db335b024b9370c78488d818f5177368b9_640.jpg",
|
||||
"title": "to dye, watercolor, colour, color palette, watercolor painting, colorful, artist, creative, art, painting, school, paint box, watercolor, watercolor, artist, artist, art, painting, painting, school, school, school, school, school",
|
||||
"license": "RF",
|
||||
"source": "pixabay",
|
||||
"page": "https://pixabay.com/photos/to-dye-watercolor-colour-5821297/"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"query": "watercolor techniques",
|
||||
"type": "image",
|
||||
"items": [
|
||||
{
|
||||
"url": "https://pixabay.com/get/g07a06a3eaba7ba2d9be89f872ac011a2d047899df20afd2282d08bda3faf97d5958343f23205e7850d55a096bb6025a419fd4e1607953f35b1812d81eb36ea09_1280.png",
|
||||
"thumb": "https://pixabay.com/get/gc77ed00ea82c28187a3d425a0d7f38495b44f22d9898d628560ed81ccca2ea72e15fdd13db460569d24800960042ce6fea66206031659a027019abd0c023e13c_640.png",
|
||||
"title": "watercolor, background, wallpaper, pink, violet, purple, turquoise, cosmetics, fashion, texture, beautiful wallpaper, serene, painting technique, painted, strip, text field",
|
||||
"license": "RF",
|
||||
"source": "pixabay",
|
||||
"page": "https://pixabay.com/vectors/watercolor-background-wallpaper-4117017/"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"query": "colorful landscape",
|
||||
"type": "image",
|
||||
"items": [
|
||||
{
|
||||
"url": "https://pixabay.com/get/gcd692558e195aaa2004681291428277eec6c3af44cac44693de18fd5cf65a2f09d6bc980312d40658a26226bba634daeb95cb7e4dc5c17ef368dcb258da389ca_1280.jpg",
|
||||
"thumb": "https://pixabay.com/get/g3c15ff1705f98f95e1550f025abd0e4e707db40e0f1a8292bebc1aa130d5592cfc3121d0d92eac53bd68697ab208fd9639287d8bb2f5137d5c913ad0abc34275_640.jpg",
|
||||
"title": "houses, colorful, architecture, landscape, red, blue, yellow, houses, houses, colorful, colorful, architecture, architecture, architecture, architecture, architecture, red, yellow, yellow, yellow",
|
||||
"license": "RF",
|
||||
"source": "pixabay",
|
||||
"page": "https://pixabay.com/photos/houses-colorful-architecture-6504533/"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user