publish: brett-tuck-gulf-coast-graphic
This commit is contained in:
brett-tuck
commit
ee4a5d8a27
12
README.md
Normal file
12
README.md
Normal 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._
|
||||
27
films/anxiety-to-art/hyperframe.json
Normal file
27
films/anxiety-to-art/hyperframe.json
Normal 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."
|
||||
}
|
||||
]
|
||||
}
|
||||
130
films/anxiety-to-art/index.html
Normal file
130
films/anxiety-to-art/index.html
Normal 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>
|
||||
8
films/deck-press-process/hyperframe.json
Normal file
8
films/deck-press-process/hyperframe.json
Normal 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..." } ]
|
||||
}
|
||||
25
films/deck-press-process/index.html
Normal file
25
films/deck-press-process/index.html
Normal 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>
|
||||
11
films/press-process/hyperframe.json
Normal file
11
films/press-process/hyperframe.json
Normal 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." }
|
||||
]
|
||||
}
|
||||
116
films/press-process/index.html
Normal file
116
films/press-process/index.html
Normal 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
360
index.html
Normal 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 & Street Sketcher">
|
||||
<meta property="og:image" content="https://images.pexels.com/photos/2777671/pexels-photo-2777671.png?auto=compress&cs=tinysrgb&dpr=2&h=650&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 & 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 "Reading the Iron" — 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
79
index.json
Normal 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"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user