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
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
|
<script lang="ts">
//// var
const videoRegex = /\.(mp4|mov|avi|wmv|flv|mkv|webm|m4v)$/i;
const projects = [
{
content: "<p>This project was a proof-of-concept utilizing node-webkit (circa 2013) to see if it was possible to create a web browser.</p><p>Performance wasn't great but damn it looks good.</p>",
id: "001",
media: [
"/images/projects/aries_01.jpg",
"/images/projects/aries_02.jpg"
],
tagline: "web browser",
title: "Aries"
},
{
content: `<p>This registrar was built upon the Handshake blockchain to sell domain names and provide hosting. I poured everything I've ever wanted in a registrar into this.</p><p>I've stopped working on it due to <a href="https://blog.neuenet.com/post/devlog-014" target="_blank">happenings I didn't agree with</a> happening in the Handshake community. I will come back to beachfront/ when I feel things are better or I <a href="https://dap.sh?ref=webb.page" target="_blank">fork Handshake</a>.</p>`,
id: "002",
media: [
"/images/projects/beachfront_01.jpg",
"/images/projects/beachfront_02.jpg"
],
tagline: "next-generation registrar",
title: "beachfront/"
},
{
content: `<p>In 2019 I was sick of using SemVer so I made something better (for me). Check it out at <a href="https://chronver.org?ref=webb.page">chronver.org</a>!</p>`,
id: "009",
media: [
"/images/projects/chronver.jpg"
],
tagline: "chronologic/calendar-based versioning system",
title: "ChronVer"
},
{
content: `<p>I didn’t like the way things were being run on <a href="https://archive.is/vpZCG?ref=webb.page" target="_blank">the Handshake blockchain</a> but <a href="https://archive.is/TMycF?ref=webb.page" target="_blank">I believe in the vision</a> so I made my own. Dap is the better handshake and it’s entering testnet soon.</p><p>Check it out at <a href="https://dap.sh?ref=webb.page">dap.sh</a>!</p>`,
id: "010",
media: [
"/images/projects/dap.jpg"
],
tagline: "a secure foundation for the neue internet",
title: "Dap"
},
{
content: "<p>In 2014 I had the idea for a “responsive operating system” that could run on any device from a Raspberry Pi to a desktop PC.</p><p>There's no reason why a neat OS GUI shouldn't look as good as anime interfaces.</p>",
id: "003",
media: [
"https://nickel.video/embed/9Ik01L_lK5n1"
],
tagline: "responsive operating system",
title: "hikari"
},
// {
// content: `<p>This registry was built upon the Handshake blockchain to provide infrastructure for my TLDs. I wrote a nameserver in Deno, created a DNSSEC tool to secure said TLDs, and so on. I built and blogged a <strong>lot</strong> about my vision for the internet and freely gave away ideas and a roadmap for others to adopt.</p><p>I've stopped working on it due to <a href="https://archive.is/vpZCG?ref=webb.page" target="_blank">happenings I didn't agree with</a> happening in the Handshake community. I will come back to beachfront/ when I feel things are better or I <a href="https://dap.sh?ref=webb.page" target="_blank">fork Handshake</a>.</p>`,
// id: "004",
// media: [
// "/images/projects/neuenet_01.jpg",
// "/images/projects/neuenet_02.jpg"
// ],
// tagline: "registry for the Neue Internet",
// title: "Neuenet"
// },
{
content: `<p>I just want a place to upload my Fortnite clips and <del>fuck</del> <em>I'm not a fan of</em> Google. No other platform out there makes sense either so once again, I gotta build what I want to use.</p><p>Check it out at <a href="https://nickel.video?ref=webb.page">nickel.video</a>!</p>`,
id: "005",
media: [
"/images/projects/nickel_01.jpg"
],
tagline: "short-form video platform",
title: "Nickel"
},
{
content: "<p>There's no point in competing with Google, they've got a 20 year headstart…but what if you could just ask someone who's knowledgeable af? You do realize Google only has data because of us. Right?</p><p>Anyhoo, there's a lot of parts to make this work and I'm busy with side quests at the moment.</p>",
id: "006",
media: [],
tagline: "P2P search",
title: "queree"
},
{
content: `<p>Around 2017 or so I had the idea of a new kind of social network that brought back the great parts of Myspace while empowering people with comprehensive customization, data, and moderation tools. Bluesky does an excellent job with the latter but being VC-backed means it's only a matter of time before enshittification.</p><p><del>Work in progress.</del> Mastodon and Bluesky are good enough so I decided to stop working on this.</p>`,
id: "007",
media: [
"/images/projects/socii_01.jpg"
],
tagline: "the social network",
title: "socii"
},
{
content: `<p>After I learned about <a href="https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl?ref=webb.page" target="_blank">the OKLCH color space</a> and saw how much more vibrant colors were than HEX, I delved into creating the perfect color palette for me. I spent nearly a year copy/pasting my CSS variables in my projects until I decided to have a unified place for them.</p><p><em>For some reason</em> <a href="https://news.ycombinator.com/item?id=43072338?ref=webb.page" target="_blank">my post on HackerNews</a> about uchū got super popular, which was neat. 600+ points and 900+ Github stars is wild. A handful of weirdos got irate, which was…alarming. Maybe touch grass?</p><p>Check out the site at <a href="https://uchu.style?ref=webb.page" target="_blank">uchu.style</a>!</p>`,
id: "008",
media: [
"/images/projects/uchu_01.jpg"
],
tagline: "the color palette for internet lovers",
title: "uchū"
}
];
let activeProject = "005";
</script>
<style lang="scss">
h2 {
margin: 0 0 calc(var(--padding) * 2); padding: var(--padding) calc(var(--padding) * 2);
background-color: var(--color-border);
color: var(--uchu-yin-7);
font-size: 1rem;
line-height: inherit;
position: sticky;
top: 0;
z-index: 1;
}
ul {
line-height: 1;
margin-left: calc(var(--list-indentation) / 2);
padding: 0 var(--list-indentation) calc(var(--list-indentation) * 4) 0;
li {
margin: 0; padding: 0 0 var(--baseline) calc(var(--baseline) * 2);
position: relative;
&::before,
&::after {
background-color: var(--color-border);
content: "";
left: 0;
position: absolute;
}
&::before {
width: calc(var(--list-indentation) / 2); height: 1px;
top: calc(var(--list-indentation) / 4);
}
&::after {
width: 1px; height: var(--list-indentation);
top: calc(var(--list-indentation) * -0.75);
}
button {
cursor: pointer;
position: relative;
&.active {
padding-left: calc(var(--baseline) * 2);
&::before {
width: calc(var(--list-indentation) * 1.25); height: 1px;
top: 50%; left: calc(calc(var(--baseline) * 2) * -1);
background-color: var(--color-border);
content: "";
position: absolute;
}
}
}
}
}
.player {
align-items: center;
display: flex;
flex-direction: column;
position: relative;
&::before {
width: 1px; height: calc(100% + 0.75rem);
top: -0.75rem; left: calc(var(--list-indentation) * -0.75);
background-color: var(--color-border);
content: "";
position: absolute;
}
}
:global(p) {
line-height: var(--line-height);
margin-bottom: 0;
padding-top: calc(var(--padding) * 2);
text-align: left;
white-space: normal;
width: 100%;
:global(a) {
text-decoration: underline var(--uchu-yin-2);
}
}
figure {
margin-bottom: 0;
}
iframe {
aspect-ratio: 16 / 9;
margin-top: calc(var(--padding) * 2);
width: 100%;
}
video {
padding-top: calc(var(--padding) * 2);
width: 100%;
}
</style>
<h2>projects.webb.page</h2>
<ul>
{#each projects as project (project.id)}
<li>
<button
class:active={activeProject === project.id}
on:click={() => activeProject === project.id ? activeProject = "" : activeProject = project.id}>{project.title} · {project.tagline}</button>
{#if activeProject === project.id}
<div class="player">
{@html project.content}
{#each project.media as mediaItem}
{#if videoRegex.test(mediaItem)}
<figure>
<!-- svelte-ignore a11y-media-has-caption -->
<video controls>
<source src={mediaItem}/>
</video>
</figure>
{:else if mediaItem.includes("nickel.video")}
<iframe src={mediaItem} title=""></iframe>
{:else}
<figure>
<img alt="" src={mediaItem}/>
<figcaption></figcaption>
</figure>
{/if}
{/each}
</div>
{/if}
</li>
{/each}
</ul>
|
