Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
226 lines (210 loc) · 10.5 KB
/
Copy pathindex.html
File metadata and controls
226 lines (210 loc) · 10.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Shake Is Lucky</title>
<meta name="description" content="Lucky Derivative(s) Artisan. Proof of work: Onda Studios goods, software, Post Fiat validators." />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ShakeIsLucky/shake-design-system@main/systems/neo-tactile/css/shake-v2.css" />
<style>
/* type: Departure Mono everywhere — pixel terminal, single weight */
@font-face{
font-family:'Departure Mono';
src:url('assets/fonts/DepartureMono-Regular.woff2') format('woff2');
font-weight:400;font-style:normal;font-display:swap;
}
:root{
--font-display:'Departure Mono',ui-monospace,monospace;
--font-sans:'Departure Mono',ui-monospace,monospace;
--font-code:'Departure Mono',ui-monospace,monospace;
}
h1,h2,h3,h4,strong,b{font-weight:400;}
em{font-style:normal;}
.hero h1{font-size:clamp(30px,4.6vw,52px);text-transform:uppercase;letter-spacing:.01em;line-height:1.18;}
h2{font-size:clamp(20px,2.6vw,30px);text-transform:uppercase;letter-spacing:.01em;}
h3{text-transform:uppercase;}
.topbar nav a,.wordmark,.foot-brand{text-transform:uppercase;letter-spacing:.06em;}
/* de-slop: no glossy pills — square, flat, bracketed */
.btn{border-radius:6px;background-image:none;text-transform:uppercase;letter-spacing:.06em;}
.btn.btn-action::before{content:"[ ";}
.btn.btn-action::after{content:" ]";}
.btn.bare::before{content:"[ ";}
.btn.bare::after{content:" ]";}
.eyebrow,.kicker,.chip,.hangtag{letter-spacing:.1em;}
/* accent: felt sage — no orange, ever */
:root{--action:#3f6b52;--action-deep:#2f5240;--grad-action:linear-gradient(180deg,#3f6b52,#2f5240);}
@media (prefers-color-scheme: dark){:root:not([data-theme]){--action:#8fae8b;--action-deep:#6e8f6a;--grad-action:linear-gradient(180deg,#8fae8b,#6e8f6a);}}
:root[data-theme="dark"]{--action:#8fae8b;--action-deep:#6e8f6a;--grad-action:linear-gradient(180deg,#8fae8b,#6e8f6a);}
.btn.btn-action{background:none;box-shadow:var(--emboss-sm);text-shadow:none;color:var(--action);}
/* page-local: photo plates, X profile card, brand plate — tokens + presets only */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5);margin-top:var(--space-6);}
.work-grid.detail{grid-template-columns:repeat(3,1fr);}
.work-grid .card img{display:block;width:100%;height:auto;border-radius:var(--r-md);box-shadow:var(--deboss-sm);}
.work-grid .card .chip{margin-top:var(--space-3);}
#software .cards{grid-template-columns:repeat(2,1fr);}
.proof-key{display:block;margin-top:var(--space-3);font:var(--type-caption);font-family:var(--font-code);color:var(--ink-mute);word-break:break-all;}
.profile-card{display:block;text-decoration:none;color:inherit;}
.profile-row{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-4);}
.pfp{width:84px;height:84px;border-radius:50%;box-shadow:var(--emboss-sm);flex-shrink:0;}
.pname{font:var(--type-h3);color:var(--ink);}
.phandle{font:var(--type-caption);color:var(--ink-mute);}
.pbio{font:var(--type-body);color:var(--ink-soft);margin:0 0 var(--space-4);}
.brand-plate{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);text-decoration:none;color:inherit;margin:var(--space-7) auto 0;max-width:520px;text-align:center;}
.onda-mark{width:200px;height:auto;color:var(--ink);transition:color .3s ease;}
.brand-plate:hover .onda-mark{color:var(--felt, #3f6b52);}
.mark-well{padding:var(--space-5) var(--space-6);border-radius:var(--r-lg);box-shadow:var(--deboss-sm);}
.mark-spokes{display:flex;gap:var(--space-5);font:var(--type-caption);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-mute);}
@media (max-width:760px){.work-grid,.work-grid.detail,#software .cards{grid-template-columns:1fr;}}
</style>
</head>
<body>
<header class="topbar">
<div class="inner">
<span class="wordmark"><span class="knob"></span>SHAKE IS LUCKY</span>
<nav>
<a href="#onda">Onda</a>
<a href="#software">Software</a>
<a href="/.well-known/pft-ledger.toml">Validators</a>
<button class="theme-toggle" type="button">DARK</button>
</nav>
</div>
</header>
<main>
<!-- HERO -->
<section class="hero">
<div class="wrap hero-grid">
<div class="reveal">
<span class="eyebrow">proof of work</span>
<h1>Lucky Derivative(s)<br><em>Artisan.</em></h1>
<div class="cta-row">
<a class="btn btn-action" href="#onda">See the work</a>
</div>
</div>
<!-- X profile plate -->
<a class="device profile-card reveal" href="https://x.com/Notshake">
<div class="device-head">
<span class="device-title">On X</span>
<div class="leds"><span class="led on"></span><span class="led"></span><span class="led"></span></div>
</div>
<div class="profile-row">
<img class="pfp" src="assets/img/avatar.png" alt="Shake's avatar — cream dot rising over a green field" width="84" height="84" />
<div>
<div class="pname">Shake®</div>
<div class="phandle">@Notshake</div>
</div>
</div>
<p class="pbio">Lucky Derivative(s) Artisan</p>
<div class="tags">
<span class="chip">Concept Artist</span>
<span class="chip">miami</span>
<span class="chip">ondastudios.com</span>
</div>
</a>
</div>
</section>
<!-- ONDA STUDIOS -->
<section class="section reveal" id="onda">
<div class="wrap">
<div class="kicker">§ 01 — Onda Studios</div>
<h2>Brushed flannel, carpenter denim, <em>full-grain leather.</em></h2>
<div class="work-grid">
<figure class="card">
<img src="assets/img/onda-denim.jpg" alt="Onda black double-knee carpenter denim" loading="lazy" />
<span class="chip">carpenter denim · washed black</span>
</figure>
<figure class="card">
<img src="assets/img/onda-tote.jpg" alt="Onda black full-grain leather tote" loading="lazy" />
<span class="chip">leather tote · full grain</span>
</figure>
</div>
<div class="work-grid detail">
<figure class="card">
<img src="assets/img/onda-jacket-detail.jpg" alt="Jacket cuff and rivet detail" loading="lazy" />
<span class="chip">cuff & rivets</span>
</figure>
<figure class="card">
<img src="assets/img/onda-strap-detail.jpg" alt="Studded compass-star strap detail with green stone" loading="lazy" />
<span class="chip">studded star strap</span>
</figure>
<figure class="card">
<img src="assets/img/onda-belts.jpg" alt="Studded leather belt details" loading="lazy" />
<span class="chip">studded belts</span>
</figure>
</div>
<!-- Onda brand plate → ondastudios.com -->
<a class="device brand-plate reveal" href="https://ondastudios.com">
<div class="mark-well">
<svg class="onda-mark" viewBox="0 0 300 190" fill="none" aria-label="Onda Studios mark">
<ellipse cx="150" cy="95" rx="132" ry="74" fill="none" stroke="currentColor" stroke-width="9"/>
<polygon fill="currentColor" points="192,95 158.31,91.56 165.56,79.44 153.44,86.69 150,31 146.56,86.69 134.44,79.44 141.69,91.56 108,95 141.69,98.44 134.44,110.56 146.56,103.31 150,159 153.44,103.31 165.56,110.56 158.31,98.44"/>
</svg>
</div>
<div class="mark-spokes"><span>twill</span><span>·</span><span>denim</span><span>·</span><span>leather</span></div>
<span class="btn bare">ondastudios.com</span>
</a>
</div>
</section>
<!-- SOFTWARE -->
<section class="section reveal" id="software">
<div class="wrap">
<div class="sec-head">
<div class="kicker">§ 02 — Software</div>
<h2>Late night <em>yelling</em> at Claude.</h2>
</div>
<div class="cards">
<div class="card">
<div class="ic"><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7 9l3 3-3 3M12 15h5"/></svg></div>
<h3>headless-ads-manager</h3>
<p>Hacked my way around the Meta Ads SDK so I don't have to look at their horrific dino UI.</p>
<a class="btn bare" href="https://github.com/ShakeIsLucky/headless-ads-manager">View on GitHub</a>
</div>
<div class="card">
<div class="ic"><svg viewBox="0 0 24 24"><path d="M12 2l8 4v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6z"/><path d="M8.5 12l2.5 2.5L16 9.5"/></svg></div>
<h3>Post Fiat validators</h3>
<p>Validator nodes running on the Post Fiat ledger.</p>
<a class="btn bare" href="/.well-known/pft-ledger.toml">View domain proof</a>
<span class="proof-key">nHDEUdawsDpQYxKNohxTaHBVnfdnjSwsPGX5vtRN7m62NvEuxJYF</span>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="reveal">
<div class="wrap">
<div class="foot-panel">
<div>
<div class="foot-brand"><span class="knob"></span>SHAKE IS LUCKY</div>
<p>Proof of work over promises. The page updates when the work does.</p>
</div>
<div class="foot-col">
<h4>Work</h4>
<a href="#onda">Onda Studios</a>
<a href="#software">Software</a>
<a href="/.well-known/pft-ledger.toml">Validator proof</a>
</div>
<div class="foot-col">
<h4>Elsewhere</h4>
<a href="https://x.com/Notshake">X · @Notshake</a>
<a href="https://github.com/ShakeIsLucky">GitHub</a>
<a href="https://ondastudios.com">ondastudios.com</a>
</div>
</div>
<div class="wrap foot-bottom">
<span>© 2026 Shake Is Lucky</span>
<span>set in neo-tactile, a shake design system</span>
</div>
</div>
</footer>
</main>
<script type="module">
import { initThemeToggle } from 'https://cdn.jsdelivr.net/gh/ShakeIsLucky/shake-design-system@main/systems/neo-tactile/scripts/theme-toggle.js';
import { initReveal } from 'https://cdn.jsdelivr.net/gh/ShakeIsLucky/shake-design-system@main/systems/neo-tactile/scripts/reveal.js';
import { initInteractions } from 'https://cdn.jsdelivr.net/gh/ShakeIsLucky/shake-design-system@main/systems/neo-tactile/scripts/interactions.js';
initThemeToggle('.theme-toggle');
initReveal();
initInteractions();
</script>
</body>
</html>