-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
470 lines (424 loc) · 23.9 KB
/
index.html
File metadata and controls
470 lines (424 loc) · 23.9 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
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Amber Shen — Creative Technologist</title>
<meta name="description" content="Creative technologist building at the intersection of product, narrative, and code." />
<meta property="og:title" content="Amber Shen — Creative Technologist" />
<meta property="og:description" content="Creative technologist building at the intersection of product, narrative, and code." />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@whosamberella" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;1,6..72,300&display=swap" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/geist@1/dist/fonts/geist-sans/style.css" rel="stylesheet" />
</head>
<body>
<!-- Mobile top bar -->
<div class="mobile-topbar" id="mobile-topbar">
<button class="mobile-hamburger" id="mobile-hamburger">
<span></span><span></span><span></span>
</button>
<span class="mobile-breadcrumb" id="mobile-breadcrumb">Amber Shen</span>
<button class="theme-toggle mobile-theme" id="mobile-theme-toggle">☾</button>
</div>
<div class="mobile-overlay" id="mobile-overlay"></div>
<div class="portfolio-layout">
<!-- Left Column -->
<aside class="left-column" id="left-column">
<img src="/images/profile-pic.webp" alt="Amber Shen" class="profile-pic" />
<h1 class="name">Amber Shen</h1>
<div class="spacer-16"></div>
<p class="tagline">Creative technologist in San Francisco.<br />Let's connect if you are interested in my work.</p>
<div class="spacer-80"></div>
<hr class="divider" />
<div class="nav-section" data-scroll-to="projects">
<h2 class="section-title">I Build Things</h2>
<ul class="nav-sub-list">
<li><a href="#" data-show-product="product-deskmate">Deskmate</a></li>
<li><a href="#" data-show-product="product-dirty-window">Dirty Window</a></li>
<li><a href="#" data-show-product="product-bento-box">Small Tool Bento Box</a></li>
<li><a href="#" data-show-product="product-agent-skills">Agent Skills</a></li>
</ul>
</div>
<hr class="divider" />
<div class="nav-section" data-scroll-to="art">
<h2 class="section-title">I Make Arts</h2>
<ul class="nav-sub-list">
<li><a href="#" data-scroll-room="room-interactive">Interactive</a></li>
<li><a href="#" data-scroll-room="room-paintings">Paintings & Generative</a></li>
<li><a href="#" data-scroll-room="room-video">Video</a></li>
</ul>
</div>
<hr class="divider" />
<div class="nav-section" id="nav-connect">
<h2 class="section-title">I Connect Worlds</h2>
</div>
<hr class="divider" />
<div class="left-footer">
<button class="theme-toggle" id="theme-toggle" title="Toggle dark mode">☾</button>
<div class="social-links">
<a href="https://x.com/whosamberella" target="_blank" rel="noopener noreferrer">X</a>
<a href="https://instagram.com/whosamberella" target="_blank" rel="noopener noreferrer">Instagram</a>
<a href="https://github.com/ambershen" target="_blank" rel="noopener noreferrer">GitHub</a>
<a href="https://www.linkedin.com/in/amber-hanzi-shen/" target="_blank" rel="noopener noreferrer">LinkedIn</a>
</div>
</div>
</aside>
<!-- Right Column -->
<main class="right-column">
<!-- Default view -->
<div id="default-view">
<!-- Intro -->
<section class="blurb-section" id="about">
<div class="blurb-text">
<p>Hi, I'm Amber. I'm building at the intersection of code, narrative, and aesthetics. I ship products from design-to-code, and bring products to the market from 0-1.</p>
<p>I'm currently doing technical product marketing at <a href="https://www.trae.ai" target="_blank" rel="noopener noreferrer">trae.ai</a>, where we're democratizing software creation for everyone.</p>
<p>I grew up in China and spent my adult years between the US and France. Most of my energy goes into tech and art.</p>
<p class="blurb-subhead">Some random stuffs about me:</p>
<ul class="blurb-list">
<li>I love making creative experiments with AI models, with techno music as the bgm</li>
<li>I consider myself as a modern renaissance person</li>
<li>I'm quite spiritual. I believe the frontier tech should be magnify human creativity and spirituality.</li>
<li>I take photos and paint, turning moments into memories.</li>
<li>I left my most reckless side on my snowboard.</li>
</ul>
</div>
</section>
<!-- Selected Works -->
<section class="works-section" id="works">
<span class="content-label">Selected Works</span>
<hr class="divider" />
<div class="work-card" id="apollinaire">
<div class="work-media">
<video src="/images/apollinaire/frontpage.mp4" data-autoplay loop muted playsinline preload="none"></video>
</div>
<div class="work-info">
<h3 class="work-title">Interactive Calligramme</h3>
<p class="work-desc">An programming art simulating the moods and emotions of calligramme, inspired by Guillaume Apollinaire.</p>
</div>
</div>
<div class="work-card" id="deskmate-card">
<div class="work-info">
<h3 class="work-title">Deskmate</h3>
<p class="work-desc">AI-native app for finding places and people to co-work with - by vibes.</p>
</div>
<div class="work-media">
<video src="/images/deskmate/frontpage.mp4" data-autoplay loop muted playsinline preload="none"></video>
</div>
</div>
<div class="work-card" id="infinite-gallery">
<div class="work-media">
<video src="/images/infinite-gallery/frontpage.mp4" data-autoplay loop muted playsinline preload="none"></video>
</div>
<div class="work-info">
<h3 class="work-title">Infinite Gallery</h3>
<p class="work-desc">A 3D funnel for showcasing artwork or consumer products.</p>
</div>
</div>
<div class="work-card" id="birth-crystal">
<div class="work-info">
<h3 class="work-title">Birth Crystal</h3>
<p class="work-desc">Procedural 3D crystals generated from birthdates spatial data — unique patterns, colors, and geometries for every date in an interactive cosmos.</p>
</div>
<div class="work-media">
<img src="/images/birth-crystal/frontpage.webp" alt="Birth Crystal" loading="lazy" />
</div>
</div>
</section>
</div>
<!-- Product detail views (hidden by default) -->
<div id="product-deskmate" class="product-detail" style="display:none;">
<a href="#" class="product-back" data-show-default>← Back</a>
<h1 class="product-title">Deskmate</h1>
<div class="product-body">
<p>I initially built this product because I have a saved list of good places to cowork, but it's hard to search and share this kind of curation. Now with Deskmate, you can:</p>
<ul>
<li>Search for a curated list of coworking spots with great vibes in cities like SF, NYC and Seattle</li>
<li>Share hidden gems or private spots for coworking</li>
<li>Get agentic recommendation based on your personal preferences</li>
</ul>
</div>
<div class="product-links">
<a href="#" class="product-link" target="_blank" rel="noopener noreferrer">Try Deskmate →</a>
</div>
<div class="product-demo">
<video src="/images/deskmate/frontpage.mp4" data-autoplay loop muted playsinline preload="none"></video>
</div>
</div>
<div id="product-dirty-window" class="product-detail" style="display:none;">
<a href="#" class="product-back" data-show-default>← Back</a>
<h1 class="product-title">Dirty Window</h1>
<div class="product-body">
<p>The most satisfying window you'll ever clean. Turns a mundane chore into interactive art. Wipe away grimes, experience realistic weather simulation, doodle messages on the fog, and capture it all in a built-in photobooth. Part game, part meditation.</p>
<p>The philosophy is to find meditative experiences from mundane life.</p>
</div>
<div class="product-links">
<a href="https://traeglass-effecta68u.vercel.app/" class="product-link" target="_blank" rel="noopener noreferrer">Try Dirty Window →</a>
</div>
<div class="product-demo">
<video src="/images/dirty-window/frontpage.mp4" data-autoplay loop muted playsinline preload="none"></video>
</div>
</div>
<div id="product-bento-box" class="product-detail" style="display:none;">
<a href="#" class="product-back" data-show-default>← Back</a>
<h1 class="product-title">Small Tool Bento Box</h1>
<div class="product-body">
<p>A curated collection of everyday utilities — image processing, QR code generation, PDF conversion — presented with the care of a Japanese bento. Each tool is multi-purpose, instantly usable, and visually cohesive.</p>
<p>The modular architecture makes it trivially easy to add new tools while maintaining the clean, organized aesthetic.</p>
</div>
<div class="product-links">
<a href="https://traesmall-tool-bento-box242w.vercel.app/" class="product-link" target="_blank" rel="noopener noreferrer">Try Bento Box →</a>
</div>
<div class="product-carousel">
<div class="carousel-track">
<img src="/images/small-tool-bento-box/frontpage.webp" alt="Bento Box" loading="lazy" />
<img src="/images/small-tool-bento-box/1st.webp" alt="Bento Box" loading="lazy" />
<img src="/images/small-tool-bento-box/2nd.webp" alt="Bento Box" loading="lazy" />
<img src="/images/small-tool-bento-box/3rd.webp" alt="Bento Box" loading="lazy" />
<img src="/images/small-tool-bento-box/4th.webp" alt="Bento Box" loading="lazy" />
<img src="/images/small-tool-bento-box/5th.webp" alt="Bento Box" loading="lazy" />
<img src="/images/small-tool-bento-box/6th.webp" alt="Bento Box" loading="lazy" />
</div>
<div class="carousel-controls">
<button class="carousel-btn carousel-prev">←</button>
<span class="carousel-counter">1 / 7</span>
<button class="carousel-btn carousel-next">→</button>
</div>
</div>
</div>
<div id="product-agent-skills" class="product-detail" style="display:none;">
<a href="#" class="product-back" data-show-default>← Back</a>
<h1 class="product-title">Agent Skills</h1>
<div class="product-body">
<p>I'm an active contributor to Agent Skills.</p>
<p><strong>Youtube to Slides</strong> — Convert hour-long videos into slides made with infographics.</p>
<p><strong>Infinite Tunnel Effect</strong> — 3D tunnel skills made with three.js and GSAP.</p>
</div>
<div class="product-links">
<a href="https://github.com/ambershen/youtube-to-slides" class="product-link" target="_blank" rel="noopener noreferrer">Youtube to Slides →</a>
<a href="https://github.com/ambershen/infinite-tunnel/tree/main" class="product-link" target="_blank" rel="noopener noreferrer">Infinite Tunnel →</a>
</div>
</div>
<!-- Art Gallery view (hidden by default) -->
<div id="art-gallery" class="art-gallery" style="display:none;">
<a href="#" class="product-back" data-show-default>← Back</a>
<!-- Room 1: Interactive Arts — Exhibition layout -->
<div class="gallery-room" id="room-interactive">
<div class="room-label">
<hr class="divider" />
<span>Interactive</span>
<hr class="divider" />
</div>
<div class="exhibit-grid">
<!-- Row 1: Portrait hero + landscape companion -->
<div class="exhibit-featured">
<div class="exhibit-piece exhibit-portrait">
<div class="exhibit-media">
<video id="places-to-be-video" src="/images/art-interactive/places_to_be.mp4" data-autoplay loop muted playsinline preload="none"></video>
</div>
<div class="exhibit-wall-label">
<span class="exhibit-title">Places to Be</span>
<span class="exhibit-meta">Interactive installation, 2025</span>
</div>
</div>
<div class="exhibit-piece exhibit-companion">
<div class="exhibit-media">
<video src="/images/art-interactive/calligramme.mp4" data-autoplay loop muted playsinline preload="none"></video>
</div>
<div class="exhibit-wall-label">
<span class="exhibit-title">Calligramme — Le Pont Mirabeau</span>
<span class="exhibit-meta">Interactive poem, 2025</span>
</div>
</div>
</div>
<!-- Row 2: Full width landscape -->
<div class="exhibit-piece exhibit-full">
<div class="exhibit-media">
<video src="/images/art-interactive/ascii-art-flow.mp4" data-autoplay loop muted playsinline preload="none"></video>
</div>
<div class="exhibit-wall-label">
<span class="exhibit-title">ASCII Art Flow</span>
<span class="exhibit-meta">Generative typography, 2025</span>
</div>
</div>
<!-- Row 3: Offset right -->
<div class="exhibit-piece exhibit-offset">
<div class="exhibit-media">
<video src="/images/art-interactive/touch-me-motion.mp4" data-autoplay loop muted playsinline preload="none"></video>
</div>
<div class="exhibit-wall-label">
<span class="exhibit-title">Touch Me</span>
<span class="exhibit-meta">Motion reactive, 2024</span>
</div>
</div>
</div>
</div>
<!-- Room 2: Paintings & Generative Arts — Salon wall -->
<div class="gallery-room" id="room-paintings">
<div class="room-label">
<hr class="divider" />
<span>Paintings & Generative</span>
<hr class="divider" />
</div>
<div class="salon-wall">
<!-- Row 1: Dramatic opener — Hopper windows + Cloud house -->
<div class="salon-row">
<div class="salon-piece" style="flex:1.4;">
<img src="/images/art-paintings/amberber_edward_hopper_painting_depicting_a_building_with_two_n_ad1fa9c4-5847-4918-822f-bbbab1a80937.webp" alt="Night Times" loading="lazy" />
<span class="salon-caption">Night Times</span>
</div>
<div class="salon-piece" style="flex:1;">
<img src="/images/art-paintings/amberber_a_surrealist_house_constructed_entirely_of_billowing_7b7428e2-6860-4ad0-80fa-fc25d93e6e35_0 (1).webp" alt="Cloud House" loading="lazy" />
<span class="salon-caption">Cloud House</span>
</div>
</div>
<!-- Row 2: The Seasons — four portrait paintings as a series -->
<div class="salon-row">
<div class="salon-piece" style="flex:1;">
<img src="/images/art-paintings/spring.webp" alt="Spring" loading="lazy" />
<span class="salon-caption">Spring</span>
</div>
<div class="salon-piece" style="flex:1;">
<img src="/images/art-paintings/summer.webp" alt="Summer" loading="lazy" />
<span class="salon-caption">Summer</span>
</div>
<div class="salon-piece" style="flex:1;">
<img src="/images/art-paintings/autumn.webp" alt="Autumn" loading="lazy" />
<span class="salon-caption">Autumn</span>
</div>
<div class="salon-piece" style="flex:1;">
<img src="/images/art-paintings/winter.webp" alt="Winter" loading="lazy" />
<span class="salon-caption">Winter</span>
</div>
</div>
<!-- Row 3: Dreamcore trio — feather bicycle, feather armchair, smoke portrait -->
<div class="salon-row">
<div class="salon-piece" style="flex:1;">
<img src="/images/art-paintings/amberber_dreamcore_surrealist_vintage_bicycle_constructed_ent_866176a6-b66e-4faa-b0d8-7f7c0fd2f855_3.webp" alt="Feather Bicycle" loading="lazy" />
<span class="salon-caption">Feather Bicycle</span>
</div>
<div class="salon-piece" style="flex:1;">
<img src="/images/art-paintings/amberber_httpss.mj.runkFqjjPAJUpw_dreamcore_surrealist_armcha_f7b9c177-225a-44ac-a5da-59f36f1b8123_1 (1).webp" alt="Feather Throne" loading="lazy" />
<span class="salon-caption">Feather Throne</span>
</div>
<div class="salon-piece" style="flex:1;">
<img src="/images/art-paintings/amberber_generate_--v_6.1_e52a4fb6-c6a1-478f-a855-fe2250fb5002_3.webp" alt="Dissolve" loading="lazy" />
<span class="salon-caption">Dissolve</span>
</div>
</div>
<!-- Row 4: Moody pair — driving + dark screens -->
<div class="salon-row">
<div class="salon-piece" style="flex:1;">
<img src="/images/art-paintings/amberber_edward_hopper_painting_depicting_a_guy_driving_in_his__48175de5-bd7b-4eac-9f6a-a5fb59c7dcd0.webp" alt="Highway" loading="lazy" />
<span class="salon-caption">Highway</span>
</div>
<div class="salon-piece" style="flex:1;">
<img src="/images/art-paintings/amberber_httpss.mj.run7whEF-4sqiM_same_scene_and_setting_but__83e6ffd3-c957-44cf-972b-0345a8932674_1.webp" alt="Late Night Terminal" loading="lazy" />
<span class="salon-caption">Late Night Terminal</span>
</div>
</div>
<!-- Row 5: Centered closer — floating island + ripple portrait -->
<div class="salon-row" style="justify-content: center; gap: 24px;">
<div class="salon-piece" style="flex: 0 1 55%;">
<img src="/images/art-paintings/amberber_Generate_--v_7_dac14766-df20-4d4c-8f44-a00456f696fe_1.webp" alt="Floating Island" loading="lazy" />
<span class="salon-caption">Floating Island</span>
</div>
<div class="salon-piece" style="flex: 0 1 35%;">
<img src="/images/art-paintings/amberber_generate_a_--v_6.1_a5217ea3-c8e6-4864-9627-d9e73eb3f2eb_2.webp" alt="Signal" loading="lazy" />
<span class="salon-caption">Signal</span>
</div>
</div>
</div>
</div>
<!-- Room 3: Generated Videos — Screening room -->
<div class="gallery-room screening-room" id="room-video">
<div class="room-label">
<hr class="divider" />
<span>Video</span>
<hr class="divider" />
</div>
<div class="screening-grid">
<div class="screening-piece screening-full">
<video src="/films/Limited-time-FREE-final.mp4" loop muted playsinline preload="none"></video>
<p class="screening-caption">Limited-time FREE</p>
</div>
<div class="screening-piece screening-full">
<video src="/films/cinematic-visual.mp4" loop muted playsinline preload="none"></video>
<p class="screening-caption">Cinematic Visual</p>
</div>
</div>
</div>
</div>
<!-- Connect view (hidden by default) -->
<div id="connect-view" class="connect-view" style="display:none;">
<a href="#" class="product-back" data-show-default>← Back</a>
<!-- Writings -->
<section class="connect-section">
<div class="room-label">
<hr class="divider" />
<span>Writings</span>
<hr class="divider" />
</div>
<div class="connect-list">
<a href="https://whosamberella.substack.com/p/the-four-types-of-people-every-team" target="_blank" rel="noopener noreferrer" class="connect-item">
<span class="connect-item-title">The Four Types of People Every Team Will Need</span>
<span class="connect-item-meta">Jun 2025</span>
</a>
<hr class="divider" />
<a href="https://whosamberella.substack.com/p/why-everyone-should-become-a-builder" target="_blank" rel="noopener noreferrer" class="connect-item">
<span class="connect-item-title">Why Everyone Should Become a Builder (And How AI Makes It Possible)</span>
<span class="connect-item-meta">Jun 2025</span>
</a>
<hr class="divider" />
</div>
</section>
<!-- Podcast -->
<section class="connect-section">
<div class="room-label">
<hr class="divider" />
<span>Podcast</span>
<hr class="divider" />
</div>
<div class="connect-body">
<h3 class="connect-event-title">DancingElephant</h3>
<p class="connect-event-desc">2020 — now</p>
<div class="product-links" style="margin-top: 24px;">
<a href="https://podcasts.apple.com/us/podcast/dancingelephant%E8%B7%B3%E8%88%9E%E7%9A%84%E5%A4%A7%E8%B1%A1/id1521771658" class="product-link" target="_blank" rel="noopener noreferrer">Apple Podcast →</a>
<a href="https://open.spotify.com/show/50bHIkjqGqzUmBz8T7DDcf?si=mUe7ii6LQmax3agwLhooCA" class="product-link" target="_blank" rel="noopener noreferrer">Spotify →</a>
</div>
</div>
</section>
<!-- Community -->
<section class="connect-section">
<div class="room-label">
<hr class="divider" />
<span>Community</span>
<hr class="divider" />
</div>
<div class="connect-body">
<h3 class="connect-event-title">Non-AI AI Event</h3>
<p class="connect-event-desc">SF community events at the intersection of tech and everything else. A gathering for people who care about more than just AI — but use it anyway. Conversations about creativity, identity, and building things that resonate.</p>
</div>
</section>
</div>
</main>
</div>
<!-- Footer -->
<footer class="site-footer">
<div class="footer-content">
<span class="footer-copy">Amber Shen — © made with personality</span>
<div class="footer-links">
<a href="https://x.com/whosamberella" target="_blank" rel="noopener noreferrer">X</a>
<a href="https://instagram.com/whosamberella" target="_blank" rel="noopener noreferrer">Instagram</a>
<a href="https://github.com/ambershen" target="_blank" rel="noopener noreferrer">GitHub</a>
<a href="https://www.linkedin.com/in/amber-hanzi-shen/" target="_blank" rel="noopener noreferrer">LinkedIn</a>
</div>
</div>
</footer>
<script type="module" src="/src/main.ts"></script>
</body>
</html>