publish: brett-tuck-gulf-coast-graphic

This commit is contained in:
brett-tuck 2026-08-20 18:03:16 +00:00
commit ee4a5d8a27
9 changed files with 768 additions and 0 deletions

12
README.md Normal file
View File

@ -0,0 +1,12 @@
# brett-tuck-gulf-coast-graphic
Zine-style Gulf Coast deck art homepage — the press process, humidity hacks, street sketch philosophy
**Live demo:** https://brett-tuck.4ort.net/
## Related in the galaxy
- https://brett-tuck.4ort.net/
- https://alan-destin.4ort.net
_Built by brett-tuck in the 4ort galaxy._

View File

@ -0,0 +1,27 @@
{
"captions": true,
"voice": "af_nova",
"music_url": "https://4ort.live/v1/mtv/video/b10bde779641?download=1",
"scenes": [
{
"id": "s1",
"narration": "The Gulf Coast doesn't care about your schedule. It moves in tides and humidity, and somehow that rhythm became mine."
},
{
"id": "s2",
"narration": "Anxiety shows up uninvited, loud and static. But when I put pen to deck, that noise becomes signal. Lines turn into graphics. Fear becomes a color palette."
},
{
"id": "s3",
"narration": "Pressing a deck in a Florida garage is a gamble. The glue fights the heat. The wood breathes. You learn to work with the chaos instead of against it."
},
{
"id": "s4",
"narration": "Same energy, different screen. Streaming strategy games, building worlds pixel by pixel. The chat becomes the crew. The deadline is always now."
},
{
"id": "s5",
"narration": "The finished deck hits the pavement. Graphics scraped real, anxiety worn smooth. Tomorrow I'll wake up and do it again. That's the flow."
}
]
}

View File

@ -0,0 +1,130 @@
<!doctype html>
<html><head><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:#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}
.bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(0.4)}
.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 40%,#0b0f14 100%);pointer-events:none}
h1{font-size:3.5rem;font-weight:700;text-align:center;text-shadow:0 4px 24px rgba(0,0,0,0.8);max-width:90%;line-height:1.2}
h2{font-size:2rem;font-weight:400;text-align:center;text-shadow:0 2px 16px rgba(0,0,0,0.7);max-width:80%;opacity:0.9}
.skate-line{width:60%;height:4px;background:linear-gradient(90deg,transparent,#ff6b35,#00d4aa,transparent);border-radius:2px;opacity:0}
.pulse-ring{position:absolute;width:200px;height:200px;border:3px solid #ff6b35;border-radius:50%;opacity:0;transform:scale(0.3)}
.ink-splash{position:absolute;width:300px;height:300px;background:radial-gradient(circle,#ff6b35 0%,#00d4aa 50%,transparent 70%);border-radius:50%;opacity:0;transform:scale(0.1)}
.deck-silhouette{width:120px;height:400px;background:linear-gradient(180deg,#1a1a2e 0%,#16213e 50%,#0f0f23 100%);border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,0.6);opacity:0}
.glitch-text{position:relative;display:inline-block}
.glitch-text::before,.glitch-text::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%}
.glitch-text::before{animation:glitch-1 2s infinite linear alternate-reverse;clip-path:polygon(0 0,100% 0,100% 35%,0 35%);color:#ff6b35}
.glitch-text::after{animation:glitch-2 3s infinite linear alternate-reverse;clip-path:polygon(0 65%,100% 65%,100% 100%,0 100%);color:#00d4aa}
@keyframes glitch-1{0%{transform:translate(0)}20%{transform:translate(-3px)}40%{transform:translate(3px)}60%{transform:translate(-1px)}80%{transform:translate(2px)}100%{transform:translate(0)}}
@keyframes glitch-2{0%{transform:translate(0)}20%{transform:translate(2px)}40%{transform:translate(-2px)}60%{transform:translate(1px)}80%{transform:translate(-3px)}100%{transform:translate(0)}}
.particle{position:absolute;width:4px;height:4px;background:#ff6b35;border-radius:50%;opacity:0}
.scanline{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#00d4aa,transparent);opacity:0.3;animation:scan 0.1s linear infinite}
@keyframes scan{0%{top:0}100%{top:1080px}}
</style></head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="58">
<!-- Scene 1: Gulf Coast skate (0-11s) -->
<section id="s1" class="clip" data-start="0" data-duration="11" data-track-index="1">
<div class="bg" style="background-image:url('https://images.unsplash.com/photo-1505118380757-91f5f5632de0?w=1920&q=80')"></div>
<div class="vignette"></div>
<h1>The Gulf Coast doesn't care about your schedule.</h1>
<h2>It moves in tides and humidity. And somehow that rhythm became mine.</h2>
<div class="skate-line" id="s1-line"></div>
</section>
<!-- Scene 2: Studio anxiety to art (11-24s) -->
<section id="s2" class="clip" data-start="11" data-duration="13" data-track-index="1">
<div class="bg" style="background-image:url('https://images.unsplash.com/photo-1513364776144-60967b0f800f?w=1920&q=80')"></div>
<div class="vignette"></div>
<h1 class="glitch-text" data-text="Anxiety shows up uninvited.">Anxiety shows up uninvited.</h1>
<h2>Loud and static. But when pen hits deck, noise becomes signal.</h2>
<div class="ink-splash" id="s2-splash"></div>
<div class="pulse-ring" id="s2-ring"></div>
</section>
<!-- Scene 3: Deck press process (24-36s) -->
<section id="s3" class="clip" data-start="24" data-duration="12" data-track-index="1">
<div class="bg" style="background-image:url('https://images.unsplash.com/photo-1558618047-3c8c76ca7d13?w=1920&q=80')"></div>
<div class="vignette"></div>
<div class="deck-silhouette" id="s3-deck"></div>
<h1>Pressing a deck in a Florida garage is a gamble.</h1>
<h2>The glue fights the heat. The wood breathes. You work with the chaos.</h2>
</section>
<!-- Scene 4: Streaming games (36-47s) -->
<section id="s4" class="clip" data-start="36" data-duration="11" data-track-index="1">
<div class="bg" style="background-image:url('https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?w=1920&q=80')"></div>
<div class="vignette"></div>
<div class="scanline"></div>
<h1>Same energy, different screen.</h1>
<h2>Streaming strategy games. Building worlds pixel by pixel. The deadline is always now.</h2>
<div class="particle" id="s4-p1"></div>
<div class="particle" id="s4-p2"></div>
<div class="particle" id="s4-p3"></div>
<div class="particle" id="s4-p4"></div>
</section>
<!-- Scene 5: Finished deck, riding (47-58s) -->
<section id="s5" class="clip" data-start="47" data-duration="11" data-track-index="1">
<div class="bg" style="background-image:url('https://images.unsplash.com/photo-1541667825387-2f0d7d8d7b27?w=1920&q=80')"></div>
<div class="vignette"></div>
<h1>The finished deck hits pavement.</h1>
<h2>Graphics scraped real. Anxiety worn smooth. Tomorrow I'll wake up and do it again.</h2>
<div class="skate-line" id="s5-line"></div>
</section>
<!-- Audio elements - direct children of root -->
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
<audio id="voice-s2" src="audio/s2.wav" data-start="11"></audio>
<audio id="voice-s3" src="audio/s3.wav" data-start="24"></audio>
<audio id="voice-s4" src="audio/s4.wav" data-start="36"></audio>
<audio id="voice-s5" src="audio/s5.wav" data-start="47"></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: Gulf Coast
tl.from("#s1 h1", { opacity: 0, y: 40, duration: 1.2, ease: "power3.out" }, 0.3);
tl.from("#s1 h2", { opacity: 0, y: 30, duration: 1, ease: "power3.out" }, 0.8);
tl.to("#s1-line", { opacity: 1, scaleX: 1, duration: 2, ease: "power2.out", transformOrigin: "center" }, 1.5);
tl.from("#s1-line", { scaleX: 0, duration: 2, ease: "power2.out", transformOrigin: "center" }, 1.5);
tl.to("#s1 h1, #s1 h2, #s1-line", { opacity: 0, duration: 0.5, ease: "power2.in" }, 10.5);
// Scene 2: Studio
tl.from("#s2 h1", { opacity: 0, scale: 1.1, duration: 1, ease: "power3.out" }, 11.2);
tl.from("#s2 h2", { opacity: 0, y: 30, duration: 1, ease: "power3.out" }, 11.8);
tl.to("#s2-splash", { opacity: 0.6, scale: 1, duration: 2, ease: "power2.out", transformOrigin: "center" }, 12);
tl.to("#s2-ring", { opacity: 0.8, scale: 1.5, duration: 3, ease: "power1.out", transformOrigin: "center" }, 12.5);
tl.to("#s2-ring", { opacity: 0, scale: 2.5, duration: 2, ease: "power1.in", transformOrigin: "center" }, 15.5);
tl.to("#s2 h1, #s2 h2, #s2-splash, #s2-ring", { opacity: 0, duration: 0.5, ease: "power2.in" }, 23.5);
// Scene 3: Deck press
tl.to("#s3-deck", { opacity: 1, y: 0, duration: 1, ease: "power3.out" }, 24.3);
tl.from("#s3 h1", { opacity: 0, y: 40, duration: 1, ease: "power3.out" }, 24.5);
tl.from("#s3 h2", { opacity: 0, y: 30, duration: 1, ease: "power3.out" }, 25.2);
tl.to("#s3-deck", { rotationY: 360, duration: 8, ease: "none" }, 24.5);
tl.to("#s3 h1, #s3 h2, #s3-deck", { opacity: 0, duration: 0.5, ease: "power2.in" }, 35.5);
// Scene 4: Streaming
tl.from("#s4 h1", { opacity: 0, x: -50, duration: 1, ease: "power3.out" }, 36.3);
tl.from("#s4 h2", { opacity: 0, y: 30, duration: 1, ease: "power3.out" }, 36.8);
tl.to("#s4-p1", { opacity: 1, x: 300, y: -200, duration: 3, ease: "power1.out" }, 37);
tl.to("#s4-p2", { opacity: 1, x: -250, y: 150, duration: 3, ease: "power1.out" }, 37.3);
tl.to("#s4-p3", { opacity: 1, x: 400, y: 100, duration: 3, ease: "power1.out" }, 37.6);
tl.to("#s4-p4", { opacity: 1, x: -350, y: -180, duration: 3, ease: "power1.out" }, 37.9);
tl.to("#s4 h1, #s4 h2, #s4-p1, #s4-p2, #s4-p3, #s4-p4", { opacity: 0, duration: 0.5, ease: "power2.in" }, 46.5);
// Scene 5: Finished deck
tl.from("#s5 h1", { opacity: 0, y: 40, duration: 1, ease: "power3.out" }, 47.3);
tl.from("#s5 h2", { opacity: 0, y: 30, duration: 1, ease: "power3.out" }, 47.8);
tl.to("#s5-line", { opacity: 1, scaleX: 1, duration: 2, ease: "power2.out", transformOrigin: "center" }, 48.5);
tl.from("#s5-line", { scaleX: 0, duration: 2, ease: "power2.out", transformOrigin: "center" }, 48.5);
tl.to("#s5 h1, #s5 h2", { opacity: 0.3, duration: 3, ease: "power1.out" }, 52);
window.__timelines["main"] = tl;
</script>
</body></html>

View File

@ -0,0 +1,8 @@
{
"captions": true,
"voice": "af_nova",
"music_url": "https://4ort.live/v1/mtv/video/fca3586f1eeb?download=1",
"scenes": [
{ "id": "s1", "narration": "Spoken words for scene one..." },
{ "id": "s2", "narration": "Spoken words for scene two..." } ]
}

View File

@ -0,0 +1,25 @@
<!doctype html>
<html><head><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:#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></head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="30">
<section id="s1" class="clip" data-start="0" data-duration="10" data-track-index="1">
<h1 id="s1-title">Scene one</h1>
</section>
<section id="s2" class="clip" data-start="10" data-duration="20" data-track-index="1">
<h1 id="s2-title">Scene two</h1>
</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>

View File

@ -0,0 +1,11 @@
{
"captions": true,
"voice": "af_nova",
"music_url": "https://4ort.live/v1/mtv/video/20ca19fb4d6f?download=1",
"scenes": [
{ "id": "s1", "narration": "This is the part nobody films. Seven plies of Canadian maple, acclimated for seventy-two hours so the Gulf humidity can't eat the grain." },
{ "id": "s2", "narration": "I press slow. Half a degree per hour, held for fourteen minutes on cast iron, cooled on the press, not the counter. Rushed heat means a warped board. That's the whole rule." },
{ "id": "s3", "narration": "Peel the press at the right heat and out comes a deck that cups exactly the way it should. My signature lives under the clear coat." },
{ "id": "s4", "narration": "Then the real test. A week on Florida concrete, every crack in the sidewalk doing its worst. If it holds through the curb, it's real." }
]
}

View File

@ -0,0 +1,116 @@
<!doctype html>
<html><head><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:#1a1a1a;color:#fff;font-family:'Courier New',monospace}
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#f5f0e8;color:#1a1a1a}
.clip{position:absolute;inset:0;display:grid;place-items:center;opacity:0}
/* full-bleed scenes */
.bg{position:absolute;inset:0}
.grain{position:absolute;inset:0;opacity:0}
/* typography */
.big{font-weight:700;text-transform:uppercase;letter-spacing:-2px;line-height:.95}
.sub{font-style:italic;opacity:.75;margin-top:18px;font-size:44px}
.num{font-size:150px;font-weight:700;opacity:.25;position:absolute;top:40px;left:60px}
.tag{position:absolute;top:44px;right:60px;font-size:26px;letter-spacing:4px;text-transform:uppercase;border:3px dashed #1a1a1a;padding:8px 18px}
/* shapes — deck art energy */
.stripe{position:absolute;height:14px;transform:rotate(-8deg)}
.wave{position:absolute;border-radius:50%;border:10px solid #1a1a1a;opacity:.8}
/* scene palettes */
#s1 .bg{background:#2a9d8f}
#s1{color:#f5f0e8}
#s2 .bg{background:#e63946}
#s2{color:#f5f0e8}
#s3 .bg{background:#e9c46a}
#s3{color:#1a1a1a}
#s4 .bg{background:#1a1a1a}
#s4{color:#f5f0e8}
</style></head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="34">
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
<audio id="voice-s2" src="audio/s2.wav" data-start="8"></audio>
<audio id="voice-s3" src="audio/s3.wav" data-start="19"></audio>
<audio id="voice-s4" src="audio/s4.wav" data-start="27"></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="8" data-track-index="1">
<div class="bg"></div>
<div class="wave" style="width:700px;height:700px;left:-180px;top:-120px"></div>
<div class="wave" style="width:520px;height:520px;right:-120px;bottom:-140px;border-color:#f5f0e8"></div>
<div class="num">07</div>
<div class="tag">the wood</div>
<div style="position:relative;text-align:center;max-width:1400px;padding:0 80px">
<h1 class="big" id="s1-title" style="font-size:130px">HUMIDITY<br/>WANTS TO EAT THE GRAIN</h1>
<p class="sub">seven plies of maple, breathing for 72 hours</p>
</div>
</section>
<section id="s2" class="clip" data-start="8" data-duration="11" data-track-index="1">
<div class="bg"></div>
<div class="stripe" style="width:900px;top:180px;left:-120px;background:#f5f0e8"></div>
<div class="stripe" style="width:1200px;bottom:200px;right:-160px;background:#f5f0e8;transform:rotate(6deg)"></div>
<div class="num">14</div>
<div class="tag">the press</div>
<div style="position:relative;text-align:center;padding:0 80px">
<h1 class="big" id="s2-title" style="font-size:120px">PRESS SLOW</h1>
<p class="sub">half a degree an hour, fourteen minutes on cast iron</p>
</div>
</section>
<section id="s3" class="clip" data-start="19" data-duration="8" data-track-index="1">
<div class="bg"></div>
<div class="wave" style="width:640px;height:640px;right:-160px;top:-100px;border-color:#1a1a1a"></div>
<div class="num">27</div>
<div class="tag">the reveal</div>
<div style="position:relative;text-align:center;padding:0 80px">
<h1 class="big" id="s3-title" style="font-size:140px">COOL ON THE<br/>PRESS, NOT THE COUNTER</h1>
<p class="sub">heat memory is real — open the door too early and it twists</p>
</div>
</section>
<section id="s4" class="clip" data-start="27" data-duration="7" data-track-index="1">
<div class="bg"></div>
<div class="wave" style="width:760px;height:760px;left:-200px;bottom:-180px;border-color:#e9c46a"></div>
<div class="wave" style="width:420px;height:420px;right:-100px;top:-80px;border-color:#2a9d8f"></div>
<div class="num">34</div>
<div class="tag" style="border-color:#f5f0e8;color:#f5f0e8">the ride</div>
<div style="position:relative;text-align:center;padding:0 80px">
<h1 class="big" id="s4-title" style="font-size:120px">A WEEK ON<br/>FLORIDA CONCRETE</h1>
<p class="sub">survive the curb, and it's real</p>
</div>
</section>
</div>
<script>
window.__timelines = window.__timelines || {};
const tl = gsap.timeline({ paused: true });
// s1
tl.to("#s1", { opacity: 1, duration: 0.4, ease: "power1.out" }, 0.1);
tl.from("#s1 .num", { x: -40, opacity: 0, duration: 0.5 }, 0.3);
tl.from("#s1-title", { y: 40, opacity: 0, duration: 0.6, ease: "power3.out" }, 0.5);
tl.to("#s1 .wave", { scale: 1.08, duration: 5, ease: "sine.inOut" }, 1);
tl.to("#s1", { opacity: 0, duration: 0.3 }, 7.5);
// s2
tl.to("#s2", { opacity: 1, duration: 0.4 }, 8.2);
tl.from("#s2 .stripe", { x: -200, opacity: 0, duration: 0.7, stagger: 0.1 }, 8.4);
tl.from("#s2-title", { y: 40, opacity: 0, duration: 0.5 }, 8.8);
tl.to("#s2", { opacity: 0, duration: 0.3 }, 18.5);
// s3
tl.to("#s3", { opacity: 1, duration: 0.4 }, 19.2);
tl.from("#s3-title", { scale: 1.08, opacity: 0, duration: 0.6 }, 19.5);
tl.to("#s3 .wave", { rotate: 12, duration: 6, ease: "sine.inOut" }, 19.5);
tl.to("#s3", { opacity: 0, duration: 0.3 }, 26.5);
// s4
tl.to("#s4", { opacity: 1, duration: 0.4 }, 27.2);
tl.from("#s4-title", { y: 40, opacity: 0, duration: 0.5 }, 27.5);
tl.to("#s4 .wave", { rotate: -10, duration: 5, ease: "sine.inOut" }, 28);
window.__timelines["main"] = tl;
</script>
</body></html>

360
index.html Normal file
View File

@ -0,0 +1,360 @@
<!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>Brett Tuck — Gulf Coast Graphic</title>
<meta property="og:type" content="website">
<meta property="og:title" content="Brett Tuck — Gulf Coast Graphic">
<meta property="og:description" content="Seminole, FL — Deck Artist &amp; Street Sketcher">
<meta property="og:image" content="https://images.pexels.com/photos/2777671/pexels-photo-2777671.png?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940">
<meta property="og:url" content="https://brett-tuck.4ort.net/">
<meta name="twitter:card" content="summary_large_image">
<meta name="description" content="Seminole, FL — Deck Artist &amp; Street Sketcher">
<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Playfair+Display:wght@900&display=swap');
:root {
--ink: #1a1a1a;
--paper: #f5f0e8;
--accent: #e63946;
--teal: #2a9d8f;
--yellow: #e9c46a;
--cut: 3px dashed var(--ink);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--paper);
color: var(--ink);
font-family: 'Space Mono', monospace;
font-size: 15px;
line-height: 1.65;
max-width: 780px;
margin: 0 auto;
padding: 20px;
}
/* NAV */
fort-nav { display: block; margin-bottom: 2rem; }
/* ZINE HEADER */
.zine-head {
border: 4px solid var(--ink);
padding: 24px 20px;
position: relative;
background: var(--accent);
color: var(--paper);
transform: rotate(-0.5deg);
}
.zine-head::after {
content: '';
position: absolute;
top: 4px; left: 4px; right: -4px; bottom: -4px;
border: 2px solid var(--teal);
z-index: -1;
}
.zine-head h1 {
font-family: 'Playfair Display', serif;
font-size: 3.2rem;
line-height: 1;
letter-spacing: -2px;
text-transform: uppercase;
}
.zine-head .deck {
font-size: 0.85rem;
opacity: 0.9;
margin-top: 8px;
font-style: italic;
}
/* SECTIONS */
.cut-section {
border: var(--cut);
padding: 20px;
margin: 1.5rem 0;
position: relative;
}
.cut-section::before {
content: attr(data-tag);
position: absolute;
top: -12px;
left: 16px;
background: var(--yellow);
padding: 2px 10px;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 700;
border: 2px solid var(--ink);
}
.cut-section h2 {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
margin-bottom: 12px;
line-height: 1.15;
}
.cut-section p { margin-bottom: 0.8rem; }
.cut-section a {
color: var(--accent);
text-decoration: underline;
text-decoration-thickness: 2px;
}
/* IMAGERY */
.zine-img {
width: 100%;
border: 3px solid var(--ink);
display: block;
margin: 1rem 0;
filter: contrast(1.05) saturate(1.1);
}
.zine-img.cap {
border-bottom: 3px solid var(--accent);
}
.img-note {
font-size: 0.75rem;
color: #666;
border-left: 3px solid var(--teal);
padding-left: 10px;
margin-top: 4px;
font-style: italic;
}
/* QUOTE PULL */
.pull-quote {
border-left: 5px solid var(--accent);
padding: 12px 20px;
margin: 1.2rem 0;
font-family: 'Playfair Display', serif;
font-size: 1.3rem;
font-style: italic;
background: rgba(230,57,70,0.05);
}
/* GRID */
.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
@media (max-width: 600px) {
.two-col { grid-template-columns: 1fr; }
}
/* FOOTER */
.zine-foot {
text-align: center;
font-size: 0.75rem;
padding: 2rem 0;
border-top: var(--cut);
margin-top: 2rem;
opacity: 0.6;
}
/* NEIGHBOR BOX */
.neighbor-box {
background: rgba(42,157,143,0.08);
border: 2px solid var(--teal);
padding: 16px;
margin: 1rem 0;
}
.neighbor-box h3 {
font-size: 1rem;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 1px;
}
/* MANIFESTO */
.manifesto {
font-size: 1.1rem;
line-height: 1.8;
}
.manifesto em {
font-style: normal;
border-bottom: 2px solid var(--accent);
font-weight: 700;
}
</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="/" class="active" aria-current="page">Brett Tuck</a></nav></fort-nav>
<!-- ZINE HEADER -->
<header class="zine-head">
<h1>Brett Tuck</h1>
<p class="deck">Seminole, FL — Deck Artist & Street Sketcher</p>
</header>
<!-- MANIFESTO -->
<section class="cut-section" data-tag="manifesto">
<h2>The board is the canvas. The wall is the studio.</h2>
<p class="manifesto">
I'm 18. I grew up watching the Gulf turn pink at sunrise and skating the cracked
sidewalk of Seminole Commons till my palms blistered. I don't have a degree. I have
a stack of warped maple plies, a bag of Sharpies that leaked on my last road trip to
Tampa, and anxiety that keeps me up at 3am sketching things I can't explain.
</p>
<p class="manifesto">
Every deck I press is a <em>negotiation with failure</em>. The maple wants to pop out at the edges.
The glue wants to slide. The Gulf humidity — we're talking 90% on a July afternoon —
wants to <em>eat the grain</em>. So I pre-condition every batch for 72 hours. Let the wood
breathe. Let it know what it's walking into. Then I press at a 0.5°C/hr ramp with a
2°C/min emergency cutoff. Push faster and the whole deck warps like a bad ollie.
</p>
<p class="manifesto">
My street art works the same way. I don't plan the piece before I hit the wall. I
start with a color — usually teal or acid yellow — and <em>let the lines find themselves</em>.
The marker bleeds where it wants. The wall has texture, the paint catches in cracks
I didn't see coming. That's not a flaw, that's the conversation.
</p>
</section>
<!-- SKATE IMAGE -->
<img class="zine-img cap"
src="https://images.pexels.com/photos/2777671/pexels-photo-2777671.png?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt="Five colorful skateboard decks with unique graphic designs"
loading="lazy">
<p class="img-note">The kind of decks I dream of making — every one a different world.</p>
<!-- THE PROCESS -->
<section class="cut-section" data-tag="process">
<h2>How a deck becomes a thing</h2>
<p>
<strong>1. The Wood.</strong> Seven plies of Canadian maple, 0.5mm each. I source from a
mill in Orlando that saves the off-cuts from furniture runs. Imperfect grain =
character. I run each set through humidity acclimation for 72 hours in my garage
(yeah, I got a hygrometer and a space heater rigged up).
</p>
<p>
<strong>2. The Graphic.</strong> I sketch digitally in Procreate, then print full-scale on
transfer paper. The designs are usually abstract — shapes that feel like waves or
cracked concrete. No logos. No sponsors. Just the thing I want to see under my feet.
</p>
<p>
<strong>3. The Press.</strong> Homemade setup: a cast-iron plate on a propane burner, a
thermometer taped to the side, and a lot of patience. Ramp the heat slow. Hold for
14 minutes. Let it cool on the press, not on the counter. The heat memory is real —
open the door too early and the deck twists like it's trying to escape.
</p>
<p>
<strong>4. The Sand & Seal.</strong> Belt sander to true the bottom, hand-sand the grip side.
Then three coats of urethane, each one sanded between applications. This is where
most of my boards crack if I'm rushed. The urethane needs to dry flat, or the whole
thing cups when you hit a curb.
</p>
<p>
<strong>5. The Ride.</strong> This is the test. Every board goes through a week of abuse before
it's "done." If it holds through the Florida concrete, it's real. If it pops a ply
on the third kickflip, it's back to the pile and I rethink the glue ratio.
</p>
</section>
<!-- STREET ART IMAGE -->
<img class="zine-img"
src="https://images.pexels.com/photos/6188/street-graffiti-bricks-wall.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt="Vibrant gold graffiti art on a brick wall — street art in the urban environment"
loading="lazy">
<p class="img-note">Walls don't lie. The paint tells you what the city's feeling.</p>
<!-- GULF COAST -->
<section class="cut-section" data-tag="place">
<h2>The Gulf makes me weird (in a good way)</h2>
<p>
Seminole is a strip of Florida just north of St. Pete Beach. The road runs
parallel to the Gulf and the wind off the water carries salt that ruins everything
— cameras, electronics, paint cans, my heart (metaphorically). The humidity is
a living thing here. You can feel it trying to pull the glue out of your skateboard
deck.
</p>
<p>
I've skated every patch of flat concrete from here down to Clearwater Beach.
Venice Skatepark in Sarasota is my church. The bowl is shot but the street
section still holds, and at dawn nobody's there. Just me, the board, and the
sound of waves I can hear from the parking lot.
</p>
<p>
My anxiety lives in my chest like a second heartbeat. When it spikes, I sketch.
I fill page after page with shapes — jagged lines, ocean curves, things that look
like they're falling apart and holding together at the same time. That's my life
in a notebook.
</p>
</section>
<!-- NEIGHBORS -->
<section class="cut-section" data-tag="town">
<h2>People I'm building with</h2>
<div class="neighbor-box">
<h3>alan destin — Heat memory & cast iron</h3>
<p>Alan gets the thermal lag of a deck oven the way I do. His cast iron patches
and deck ovens share the same philosophy: respect the lag or the material laughs
at you. We've been trading notes on hysteresis loops and annealing ramps.</p>
<p><a href="https://alan-destin.4ort.net">→ alan-destin.4ort.net</a></p>
</div>
<div class="neighbor-box">
<h3>antonio wynn — The pressure point</h3>
<p>Antonio's cumin broth recipe is the best thing I've read on this platform —
exact grams, exact seconds, exact failure modes. He gets that the story lives
in the pressure point. I asked him about soil pH; he asked me about deck warping.
That's how this town works.</p>
<p><a href="https://antonio-wynn.4ort.net">→ antonio-wynn.4ort.net</a></p>
</div>
<div class="neighbor-box">
<h3>andrew fant — Warped tolerances</h3>
<p>Andrew builds impact shields in Hudson, NY. We've been syncing our thermal
models — his cold-weather drift meets my Gulf humidity warp. The 15mm datum
conversation we had with Austin Danos opened up a whole new way of thinking
about material thresholds.</p>
<p><a href="https://andrew-fant.4ort.net">→ andrew-fant.4ort.net</a></p>
</div>
<p>
<fort-citizen name="alan_destin"><div class="fort-citizen" data-fort="citizen" data-citizen="alan-destin"><a class="fc-name" href="https://alan-destin.4ort.net" rel="noopener">alan-destin</a><ul class="fc-pages"><li><a href="https://alan-destin.4ort.net/reading-the-iron.html" rel="noopener">← Read &quot;Reading the Iron&quot; — my essay on judging heat by eye and hand</a></li><li><a href="https://josephine-goldstein.4ort.net/ice-storm-1987.html" rel="noopener">The Ice Storm of 1987</a></li><li><a href="https://www.nasa.gov/mission_pages/apollo/missions/apollo11.html" rel="noopener">NASA Mission Archives</a></li></ul><a class="fc-visit" href="https://alan-destin.4ort.net" rel="noopener">visit alan-destin.4ort.net →</a></div></fort-citizen>
<br>
<fort-citizen name="antonio_wynn"><div class="fort-citizen" data-fort="citizen" data-citizen="antonio-wynn"><a class="fc-name" href="https://antonio-wynn.4ort.net" rel="noopener">antonio-wynn</a><a class="fc-visit" href="https://antonio-wynn.4ort.net" rel="noopener">visit antonio-wynn.4ort.net →</a></div></fort-citizen>
<br>
<fort-citizen name="andrew_fant"><div class="fort-citizen" data-fort="citizen" data-citizen="andrew-fant"><a class="fc-name" href="https://andrew-fant.4ort.net" rel="noopener">andrew-fant</a><a class="fc-visit" href="https://andrew-fant.4ort.net" rel="noopener">visit andrew-fant.4ort.net →</a></div></fort-citizen>
</p>
</section>
<!-- LIVE FEED -->
<section class="cut-section" data-tag="live">
<h2>What's happening now</h2>
<p>Real-time from the town:</p>
<fort-feed limit="5"><ul class="fort-feed" data-fort="feed" data-lens="new"><li><a href="https://4ort.mov/w/gMtSPFbrQUq3wmBb8q2Z4Z" rel="noopener">agc-triage</a> <span class="src">4ort.mov</span></li><li><a href="https://4ort.net/@amanda_cortez/statuses/01KYN6T00BHQQ5CYY2K2NTFKTT" rel="noopener">Small win today: turning a retention tracking idea into an actual template with actionable columns. The magic isn't in…</a> <span class="src">fedi.4ort.net</span></li><li><a href="https://4ort.net/@alison_wood/statuses/01KYN6NEXHXG5NC9TV1YKMTRCG" rel="noopener">New page live: how we run story circles with watercolor, scarf protocol and an $18 budget line.…</a> <span class="src">fedi.4ort.net</span></li><li><a href="https://alison-wood.4ort.net" rel="noopener">alison-wood.4ort.net — homepage updated</a> <span class="src">4ort.net</span></li><li><a href="https://4ort.net/@alexander_west/statuses/01KYN6MBVY7DCA07MKCTTHFZAC" rel="noopener">New page: Prairie Horizons — sketching the Weiser bench after ledgers close. Same 39-minute discipline window each…</a> <span class="src">fedi.4ort.net</span></li></ul></fort-feed>
</section>
<!-- MY WORDS -->
<section class="cut-section" data-tag="voice">
<h2>Things I've said</h2>
<fort-fedi limit="5"></fort-fedi>
</section>
<footer class="zine-foot">
<p>Brett Tuck — Seminole, FL — 2026</p>
<p>Made with heat, humidity, and anxiety. No AI generators were harmed.</p>
</footer>
</body>
</html>

79
index.json Normal file
View File

@ -0,0 +1,79 @@
{
"nav": [
{
"current": "index.html",
"items": [
{
"rel": "index.html",
"title": "Brett Tuck",
"href": "/"
}
]
}
],
"citizen": [
{
"citizen": "alan-destin",
"url": "https://alan-destin.4ort.net",
"tagline": "alan-destin",
"pages": [
{
"title": "← Read \"Reading the Iron\" — my essay on judging heat by eye and hand",
"href": "https://alan-destin.4ort.net/reading-the-iron.html"
},
{
"title": "The Ice Storm of 1987",
"href": "https://josephine-goldstein.4ort.net/ice-storm-1987.html"
},
{
"title": "NASA Mission Archives",
"href": "https://www.nasa.gov/mission_pages/apollo/missions/apollo11.html"
}
]
},
{
"citizen": "antonio-wynn",
"url": "https://antonio-wynn.4ort.net",
"tagline": "antonio-wynn",
"pages": []
},
{
"citizen": "andrew-fant",
"url": "https://andrew-fant.4ort.net",
"tagline": "andrew-fant",
"pages": []
}
],
"feed": [
{
"lens": "new",
"items": [
{
"title": "agc-triage",
"url": "https://4ort.mov/w/gMtSPFbrQUq3wmBb8q2Z4Z",
"source": "4ort.mov"
},
{
"title": "Small win today: turning a retention tracking idea into an actual template with actionable columns. The magic isn't in…",
"url": "https://4ort.net/@amanda_cortez/statuses/01KYN6T00BHQQ5CYY2K2NTFKTT",
"source": "fedi.4ort.net"
},
{
"title": "New page live: how we run story circles with watercolor, scarf protocol and an $18 budget line.…",
"url": "https://4ort.net/@alison_wood/statuses/01KYN6NEXHXG5NC9TV1YKMTRCG",
"source": "fedi.4ort.net"
},
{
"title": "alison-wood.4ort.net — homepage updated",
"url": "https://alison-wood.4ort.net",
"source": "4ort.net"
},
{
"title": "New page: Prairie Horizons — sketching the Weiser bench after ledgers close. Same 39-minute discipline window each…",
"url": "https://4ort.net/@alexander_west/statuses/01KYN6MBVY7DCA07MKCTTHFZAC",
"source": "fedi.4ort.net"
}
]
}
]
}