-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
757 lines (752 loc) · 30.8 KB
/
index.html
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
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
<!DOCTYPE html>
<html lang="en">
<head>
<!--
hiya -- anna
--->
<title>anna y lin</title>
<link href="public/favicon-dark.ico" rel="icon" type="image/x-icon">
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="index,follow" name="robots">
<meta content="anna y lin" name="author">
<meta
content="the website of anna y lin. anna is a cantonese-american creative technologist. this is a work in progress..."
name="description">
<meta content="summary_large_image" name="twitter:card">
<meta content="anna y lin" name="twitter:title">
<meta
content="the website of anna y lin. anna is a cantonese-american creative technologist. this is a work in progress..."
name="twitter:description">
<meta content="https://annaylin.com/public/wallpaper.png"
name="twitter:image">
<meta content="en_US" property="og:locale">
<meta content="anna y lin" property="og:title">
<meta
content="the website of anna y lin. anna is a cantonese-american creative technologist. this is a work in progress..."
property="og:description">
<meta content="annaylin.com" property="og:url">
<meta content="https://annaylin.com/public/wallpaper.png"
property="og:image">
<meta content="website" property="og:type">
<link href="index.css" rel="stylesheet"/>
<script src="index.js"></script>
</head>
<body>
<div class="theme" id="container">
<main id="main">
<div id="top">
<div class="mode-container">
<h1 class="name">
<a href="https://annaylin.com/"
title="home">anna y lin</a>
</h1>
<a href="https://annaylin.com/portfolio"
title="external link to anna's work portfolio">☼</a>
</div>
<label for="select">select the page you would like to visit:</label>
<div id="select">
<button>projects</button>
<button>about</button>
</div>
</div>
<div id="left">
<div class="mode-container">
<h1 class="name">
<a href="https://annaylin.com/"
title="home">anna y lin</a>
</h1>
<a href="https://annaylin.com/portfolio"
title="external link to anna's work portfolio">☼</a>
</div>
<table>
<thead>
<tr>
<th>
<h2>projects</h2>
</th>
</tr>
</thead>
<tbody id="projects-table">
</tbody>
<tbody>
<tr>
<td>
<a href="https://annaylin.com/100-days">100 days of
websites</a>
</td>
</tr>
<tr>
<td>
⇱ <a href="https://thehtml.review/03/#anna-y-lin">roots, the
html review 03</a>
</td>
</tr>
<tr>
<td>
⇱ <a href="https://arc.net/l/quote/tcnfvyum">diaspora radicals,
Taper #11</a>
</td>
</tr>
<tr>
<td>
<h3>workshop</h3>
</td>
</tr>
<tr>
<td>⇱ <a
href="https://annaylin.notion.site/April-4th-Hacking-with-the-Browser-Workshop-a89fc8556f3a43d4acd27af132b8c8a8?pvs=4"
target="_blank"
title="external link to hacking with the browser workshop on notion">hacking
with the browser</a></td>
</tr>
</tbody>
</table>
<div style="line-height: 16px;">
<h4>hello, welcome to my website.</h4>
<p>the last time this website was completely changed was in
2018.</p>
<p>websites are always a work in progress; i hope this new website
is a better reflection of how i feel about websites now--they can
be plain
javascript + html, and they can be fun (!) because it leaves room
for more important things--like
accessibility, maintenance, and room to grow.</p>
<p>my <a
href="https://web.archive.org/web/20221211135037/https://annaylin.com/"
target="_blank"
title="link to annaylin.com on the wayback machine"
>old website</a> had ~406 MB of assets; this one has <a
href="https://github.com/iguannalin/congratti/tree/main"
target="_blank"
title="link to the github repo for this website">~50
MB</a></p>
<p>- anna</p>
</div>
</div>
<div id="center">
<div id="greeting">
<img alt="desktop wallpaper" id="wallpaper"/>
</div>
<!-- PHYSICAL -->
<div id="soft">
<h2>soft networks</h2>
<span class="thumbnail">
<span><img
alt="A pink, orange, and dark purple net cascades from the ceiling, obscuring two people hugging nodes inside the net, one person is holding a phone, and the other person is smiling."
loading="lazy"
src="public/touched.jpg"/></span>
<p>The soft networks is a net made of nodes that communicate to each other by touches--when one person hugs a node, a message is sent to all the other nodes which can be felt by another person.</p>
</span>
<h3>Why</h3>
<p>soft networks is crafted with a mixture of mediums and methods
questioning the origins of the technology we use and playing with
the many meanings that the net carries.
</p>
<h3>How</h3>
<p>soft networks is a net made of yarn carrying nodes that will
send messages to each other via sockets on a local network when
touched.</p>
<p>Each node consists of recycled burlap and fleece yarn, a <a
href="public/microcontroller.jpeg">small board</a> with a
Raspberry Pi Zero, which starts a server and listens for
messages, and also controls 2 mini haptic motors.</p>
<h3>Conclusion</h3>
<p>Embodied in the speculative nature of soft networks is the
question to phone users everywhere: what are the different ways
you could be communicating to me?</p>
<p>This project culminated in a 1-day show co-created with jo, sim,
neeti, and angie.</p>
<p>Special thanks to <a
href="https://annaylin.notion.site/special-thanks-76ad47e818754d6aa782f5dccf81e90b?pvs=4">many,
many people</a> who shared their time with me during the process
of making this project.</p>
<a href="https://itp.nyu.edu/thesis/archive/2024/10862-anna-lin/">Read
more about it here.</a>
</div>
<div id="handhold">
<h2
style="text-decoration:underline;cursor:help"
title="the handhold mouse is the mouse you hold that holds you back">
handhold mouse</h2>
<span class="thumbnail">
<span><img
alt="A table display with the handhold mouse, on top of a light blue mousepad, connected to a iMac G4 computer--people to play with an old drawing program called Kid Pix (2000) on the iMac."
loading="lazy"
src="public/handhold.jpg"/></span>
<p>The handhold mouse--connected to a iMac G4 computer, inviting people to play with an old
drawing program called Kid Pix (2000) on the iMac.</p>
</span>
<h3>Why</h3>
<p>Computing can be a lonely experience, and sometimes when you go
through a difficult virtual
experience it would be nice to still have a hand holding you
through it in the physical realm.
</p>
<h3>How</h3>
<p>This was a project created in collaboration with <a
href="https://k--k.net/">Kat Kitay</a>.</p>
<p>The model was a modified version of a <a
href="https://www.turbosquid.com/3d-models/hands-3d-1961009">hand
model</a> that was 3D-printed, and <a
href="public/handpaint.jpg"
title="picture of hand being spray-painted">lovingly
spray-painted</a>.
The hardware was taken from an HP optical mouse, and fit into the
back of the handhold mouse.</p>
<h3>Conclusion</h3>
<p>A conversation that I had with a lot of people who came to play
with this project was about how playful
personal computing was in the past. Thank you to these people for
reminiscing with me, and for sharing these
insights in conversation with me.</p>
<p>What are alternatives for personal computers today? What are the
ways our computer acknowledges the
corporeal?</p>
<p>Special thanks to: pedro, josh, jo, sim, shuang, hank, cindy,
and kai.</p>
<a
href="https://www.notion.so/kkitay/Absurd-Mouse-Absurd-Hotel-decdf9d63cf644c896600ff8cd05982e?pvs=4">Read
more about it here.</a>
</div>
<div id="eeg">
<h2>
eeg cloud
</h2>
<span class="thumbnail">
<span><img
alt="Two kids with black EEG headsets on stand in front of 2 pairs of LEG lights suspended from the ceiling--the pair of lights on the left shine green, and the two on the right shine orange."
loading="lazy"
src="public/eeg.png"/></span>
<p>Twins using the EEG devices, and controlling different sets of the lights in the EEG cloud, based on
activity levels in their brain.</p>
</span>
<h3>Why</h3>
<p>Communication often fails us--mispronunciation,
misinterpretation, other mishaps; we wanted to explore a
different way of communicating our thoughts, and feelings about a
situation, using our brainwaves.</p>
<h3>How</h3>
<p>This project was created in collaboration with <a
href="https://danielwai.myportfolio.com/">Daniel Wai</a>,
and with a lot
of advice on EEG devices, as well as how to read its data from <a
href="https://jasonjsnell.com/">Jason
Snell</a>.
</p>
<p>The EEG cloud consists of two sets of LED lights suspended in
the air. Each pair of lights is connected to
one of the two Muse 2 (EEG sensing device) devices. Participants
are invited in pairs to put on one of the
Muse 2 devices, which will record their brain activity. The EEG
data is sent to the Arduino paired with the
LED lights via WiFi, and the LED lights reflect a different color
based on the state of the participants'
mind.
</p>
<h3>Conclusion</h3>
<p>This was an interesting exploration of what alternate forms of
communication, and expression could look
like. When this project was presented as part of the ITP 2023
Spring Show (for the class Intangible
Interactions by Yeseul Song), we received a lot of interesting
ideas from people.</p>
<p>For example, what if we could have EEG-controlled lighting in
our homes--a pre-anticipation of mood
lighting? Or what if we use this as a trauma recovery therapeutic
device, to guide us in our mental state on
how we feel about a certain subject before we can verbalize it by
allowing us to express it in a gentler,
passive way?</p>
<p></p>
<a
href="https://annaylin.notion.site/Final-Project-EEG-114233b5b4e64bcca9523cfdff4cce7e?pvs=4">Read
more
about it here.</a>
</div>
<div id="ai">
<h2>
ai loves horror
</h2>
<span class="thumbnail">
<span><img
alt="An old tv set with a green screen surround by piles of books sitting atop a lace-covered desk."
loading="lazy"
src="public/ai-loves-horror.png"/></span>
<p>A <a
href="https://iguannalin.github.io/ai-loves-horror/about.html">horror text-based adventure game</a>
made using OpenAI's GPT-3 (Davinci model) API. This project was shown during the ITP Winter Show, 2022.
</p>
</span>
<h3>Why</h3>
<p>It's an homage to old-school text based adventure games, and an
exploration of AI's ability to write an
emotionally compelling story for the player.</p>
<h3>How</h3>
<p>The app sends a prompt to Davinci to write a text-based
adventure game that will give players choices
numbered 1-3. When a choice is made, it is added back to the
entire story, and sent as a prompt to Davinci
to
send more choices, until the story is finished.</p>
<p>The story changes every time it is run, and it is generated live
during gameplay. Ony Davinci has control
over the choices, and when to end the game.</p>
<p>The pace of the text also increases the longer the player
plays.</p>
<h3>Conclusion</h3>
<p>It's interesting how Davinci is able to create a cohesive story
that follows the theme of a horror
adventure game. The stories Davinci generates usually consists of
one spooky figure in a strange place, and
the player is given choices to confront the figure or run
away.</p>
<p>Somehow, the story always ends in about 5 minutes or so, and
Davinci almost always gives a somewhat
optimistic ending.</p>
<a
href="https://annaylin.notion.site/ai-loves-horror-Winter-Show-7298b61fd37d40a9b93778572fbce217">Read
more
about it here.</a>
</div>
<div id="text">
<h2>
text me smth nice
</h2>
<span class="thumbnail">
<span><img
alt="Phone receiving texts from the text-me-smth-nice app."
loading="lazy"
src="public/text-me-smth-nice.gif"
style="max-height: 200px; width: auto;"/></span>
<p>A messaging app that uses the Twilio SMS API to send out nice texts periodically.</p>
</span>
<h3>Why</h3>
<p>During the pandemic, i wanted to remind my friends, and myself
that there are brighter times ahead.</p>
<h3>How</h3>
<p>I created a Python app that runs on a scheduler to use the
Twilio SMS API, sending a text to subscribed
numbers during random times of throughout the day.</p>
<h3>Conclusion</h3>
<p>Texting seems to be a pretty non-intrusive way of reaching out
to people that can be made into a positive
experience.</p>
<p>It made me happy to hear from a friend that the random texts
throughout the day did help them through a
tough time.</p>
<a
href="https://www.notion.so/annaylin/text-me-smth-nice-40c991825d5845ae923595b89e436dde">Read
more about it
here.</a>
</div>
<!-- ANALOG -->
<div id="tableware">
<h2>
tableware zine
</h2>
<div>
<img alt="portrait of family of projects" loading="lazy"
src="public/tableware1.png"
title="tableware - by anna y lin; credits to jaxon wang"/>
</div>
<div>
<img alt="5 small, stacked wooden cups" loading="lazy"
src="public/tableware2.png"
title="cups - sanded plywood"/>
</div>
<div>
<img alt="hand pulling a tissue out of a tissue box"
loading="lazy"
src="public/tableware3.png"
title="tissue box - laser-cut finger joint plywood box"/>
</div>
<div>
<img
alt="a round bowl holding balls of pink, and orange yarn, and crochet hooks"
loading="lazy"
src="public/tableware4.png"
title="topography bowl - laser-cut plywood"/>
</div>
<div>
<img
alt="a wooden candelabra shaped like a fan, and holding colorful birthday candles"
loading="lazy"
src="public/tableware5.png"
title="fan candle holder - cut poplar wood with yarn"/>
</div>
</div>
<div id="reveries">
<h2>
reveries
</h2>
<h3>DALL·E art, curated in collaboration with <a
href="https://mma1226.com/">Michelle Ma</a> & <a
href="https://yichunlan.com/">YiChun Lan</a>
</h3>
<div class="reveries-heading" style="background-color: #b83289;">
<h2>reveries</h2>
</div>
<div style="background-color: #fde725;">
<img
alt="DALL·E generated watercolor-like abstract art for the line: You will know her presence in the half-light,"
loading="lazy"
src="public/reveries/reveries-1.png"
title="You will know her presence in the half-light,"/>
</div>
<div style="background-color: #a0da39;">
<img
alt="DALL·E generated watercolor-like abstract art for the line: New flowers upon her yellow head;"
loading="lazy"
src="public/reveries/reveries-2.png"
title="New flowers upon her yellow head;"/>
</div>
<div style="background-color: #4ac16d;">
<img
alt="DALL·E generated watercolor-like abstract art for the line: Swift as the night, and full with the night,"
loading="lazy"
src="public/reveries/reveries-3.png"
title="Swift as the night, and full with the night,"/>
</div>
<div style="background-color: #1fa187;">
<img
alt="DALL·E generated watercolor-like abstract art for the line: She'll put the water true."
loading="lazy"
src="public/reveries/reveries-4.png"
title="She'll put the water true."/>
</div>
<div style="background-color: #277f8e;">
<img
alt="DALL·E generated watercolor-like abstract art for the line: Making all men as the sea to sea-"
loading="lazy"
src="public/reveries/reveries-5.png"
title="Making all men as the sea to sea-"/>
</div>
<div style="background-color: #0d0887;">
<img
alt="DALL·E generated watercolor-like abstract art for the line: She, the signal to my oxygen;"
loading="lazy"
src="public/reveries/reveries-6.png"
title="She, the signal to my oxygen;"/>
</div>
<div style="background-color: #5302a3;">
<img
alt="DALL·E generated watercolor-like abstract art for the line: High in the haze of the ecstasy,"
loading="lazy"
src="public/reveries/reveries-7.png"
title="High in the haze of the ecstasy,"/>
</div>
<div style="background-color: #8b0aa5;">
<img
alt="DALL·E generated watercolor-like abstract art for the line: Encircle me, and take this hour."
loading="lazy"
src="public/reveries/reveries-8.png"
title="Encircle me, and take this hour."/>
</div>
<div style="background-color: #f0f921;">
<img
alt="DALL·E generated watercolor-like abstract art for the line: Succor in the dark,"
loading="lazy"
src="public/reveries/reveries-9.png"
title="Succor in the dark,"/>
</div>
<div style="background-color: #febd2a;">
<img
alt="DALL·E generated watercolor-like abstract art for the line: be sun in the dark"
loading="lazy"
src="public/reveries/reveries-10.png"
title="be sun in the dark"/>
</div>
<div class="reveries-heading"
style="background-color: #b83289;"></div>
</div>
<div id="badwatercolor">
<h2>
badwatercolor
</h2>
<span class="thumbnail">
<span><img alt="Amateur line illustration of a cat?"
loading="lazy"
src="public/watercolor.png"/></span>
<p><a href='https://www.instagram.com/badwatercolor/'>my instagram blog, badwatercolor</a></p>
</span>
</div>
<!-- FILMOTOGRAPHY -->
<div id="filmotography">
<h2>
filmotography
<input checked class="film-button" name="film" title="yosemite"
type="radio">
<input class="film-button" name="film" title="alaska"
type="radio">
<input class="film-button" name="film" title="east coast"
type="radio">
</h2>
</div>
<div id="yosemite">
<div class="film-heading"
style="background-color: hsl(23deg 81% 73%);">
<h2>Yosemite</h2>
</div>
<div style="background-color: white;">
<img
alt="Waves crashing onto a lone rock on an empty beach, somewhat overcast clouds in the sky."
loading="lazy"
src="public/yosemite/Daytime-Beach.png"
title="Daytime at a beach, somewhere on the north-western coast of California"/>
</div>
<div style="background-color: white">
<img alt="Evening shot of a rock in the ocean." loading="lazy"
src="public/yosemite/Evening-Rock.png"
title="Evening at the beach"/>
</div>
<div style="background-color: white">
<img alt="Evening shot of the waves receding on the beach."
loading="lazy"
src="public/yosemite/Evening-Beach.png"
title="Evening at the beach"/>
</div>
<div style="background-color: hsl(23deg 81% 73%)">
<img alt="The waves crashing onto a beach at sunset."
loading="lazy"
src="public/yosemite/Sunset-Waves.png"
title="Sunset"/>
</div>
<div style="background-color: hsl(23deg 81% 73%)">
<img alt="El Capitan in all its glory at dusk." loading="lazy"
src="public/yosemite/Dusk-ElCapitan.png"
title="Dusk at El Capitan"/>
</div>
<div
style="background-color: hsl(23deg 81% 73%); padding: 0 128px;"></div>
</div>
<div id="alaska">
<div class="film-heading" style="background: #ffc2c4;">
<h2>Alaska</h2>
</div>
<div style="background: #ffc2c4;">
<img alt="Sunrise dawning on the Valdez mountain range."
loading="lazy"
src="public/alaska/mountain-sunrise.png"
title="Sunrise by the seaside in Valdez."/>
</div>
<div style="background: #ffc2c4;">
<img alt="Vertical shot of sunrise on Valdez mountain range."
loading="lazy"
src="public/alaska/mountain-sunrise-vertical.png"/>
</div>
<div style="background: #ffc2c4;">
<img alt="Vertical shot of sunrise" loading="lazy"
src="public/alaska/skater-buds.png"/>
</div>
<div style="background: #ffc2c4;">
<img alt="Near evening shot of a snowy mountainside in Alaska."
loading="lazy"
src="public/alaska/mountain-evening.png"/>
</div>
<div style="background: #ff7827;">
<img
alt="Motion shot of a lady in hiker gear in the middle of an ice field."
loading="lazy"
src="public/alaska/little-friend.png"
title="Hiking a lot in the cold with this one."/>
</div>
<div style="background: #ff7827;">
<img alt="Shot of partially-broken ice in a dry frozen river."
loading="lazy"
src="public/alaska/ice-field.png"
title="Stepping on these are not good for the soul."/>
</div>
<div style="background: #ffffff;">
<img
alt="A big, baby blue shed on the side of the snowy road, with mountains in the background."
loading="lazy"
src="public/alaska/shed-blue.png"/>
</div>
<div style="background: #ffffff;">
<img
alt="A small white shed on the side of the snowy road, with mountains in the background."
loading="lazy"
src="public/alaska/shed-white.png"
title="Blurry shots of lonely sheds on the Alaskan road, from Fairbanks to Valdez."/>
</div>
<div style="background: #ffc2c4;"></div>
</div>
<div id="eastcoast">
<div class="film-heading" style="background: #948590;">
<h2 class="heading">East Coast</h2>
</div>
<div style="background: #656565;">
<img alt="Shot of top of cathedral against the blue sky."
src="public/eastcoast/Cathedral.png"
title="Cathedral, NYC"/>
</div>
<div style="background: #656565;">
<img
alt="Dark shot of the interior of a cathedral, the pews, and the altar lit by candlelight."
src="public/eastcoast/Cathedral-inside.png"
title="Cathedral Interior, NYC"/>
</div>
<div style="background: #656565;">
<img
alt="Vertical shot of window cleaners on side of skyscraper."
src="public/eastcoast/Skyscrapers.png"
title="Sky-scrapers, NYC"/>
</div>
<div style="background: #656565;">
<img alt="Gloomy shot of concrete jungle skyline." loading="lazy"
src="public/eastcoast/Skyline.png"
title="Skyline, NYC"/>
</div>
<div style="background: #968692;">
<img
alt="Shot of domed building reflected on side of mirror-like skyscraper."
loading="lazy"
src="public/eastcoast/Dome.png"
title="Domed building, NYC"/>
</div>
<div style="background: #968692;">
<img
alt="Blue, and white tiles spell out Spring Street, for the metro station."
loading="lazy"
src="public/eastcoast/SpringSt.png"
title="Spring Street Metro Station, NYC"/>
</div>
<div style="background: #C0ABBB;">
<img
alt="A large copper, and red-bricked building at an intersection, against an overcast grey sky."
loading="lazy"
src="public/eastcoast/Downtown.png"
title="Downtown, NYC"/>
</div>
<div style="background: #C0ABBB;">
<img
alt="Colorful tenement buildings side-by-side, against an overcast grey sky."
loading="lazy"
src="public/eastcoast/Storiedbuildings.png"
title="Residential storied-buildings, NYC"/>
</div>
<div style="background: #E1D9D5;">
<img
alt="Large red-brick buildings side-by-side, against an overcast grey sky."
loading="lazy"
src="public/eastcoast/Buildings.png"
title="Buildings, NYC"/>
</div>
<div style="background: #E1D9D5;">
<img
alt="Blurry shot of a bright-green okra dish, a fried fish dish topped with red chili peppers, with a plate of fried rice, and a basket of dumplings in the background."
loading="lazy"
src="public/eastcoast/Brekkie.png"
title="Chinese Breakfast, NYC"/>
</div>
<div style="background: #C3BCB8;">
<img
alt="Shadow of a tree on a softly-lit yellow wood-paneled building."
loading="lazy"
src="public/eastcoast/Treeshadow.png"
title="Brooklyn, NYC"/>
</div>
<div style="background: #C3BCB8;">
<img
alt="Blurry shot of two rapid transit passengers looking down at phone while sitting down on the train."
loading="lazy"
src="public/eastcoast/MBTA.png"
title="MBTA, Boston-Cambridge"/>
</div>
<div style="background: #CD6349;">
<img
alt="Art installation of iridescent geometric shapes together form a mesh wire, hung amidst the buildings."
loading="lazy"
src="public/eastcoast/DowntownArt.png"
title="Art Installation, Boston"/>
</div>
<div style="background: #CD6349;">
<img
alt="People sitting around a lake, generously shaded by a large willow tree hanging low."
loading="lazy"
src="public/eastcoast/BostonCommons1.png"
title="Boston Commons, Boston"/>
</div>
<div style="background: #4C6B45;">
<img
alt="A wedding photoshoot underneath a large willow tree, the vast lake in the foreground."
loading="lazy"
src="public/eastcoast/BostonCommons2.png"
title="Boston Commons, Boston"/>
</div>
<div style="background: #4C6B45;">
<img
alt="Boston skyline from the Charles River, set against an overcast grey sky."
loading="lazy"
src="public/eastcoast/BostonCommons3.png"
title="Boston Commons, Boston"/>
</div>
<div style="background: #948590;"></div>
</div>
</div>
<div id="right">
<table>
<thead>
<tr>
<th>
<h2>about</h2>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>anna y lin (⾋ she/her) is a cantonese-american creative
technologist. her projects are rooted in a
creative process driven by research, and playful media
explorations to subvert, refocus, and speculate
dominating paradigms.</p>
<p>her roots are from <a
href="https://maps.app.goo.gl/5gAxjbdCLApYYQGK8">guangzhou</a>,
transplanted to <a
href="https://maps.app.goo.gl/LJwmr9qvBjJeeJKT8">belize
city</a>, and the <a
href="https://maps.app.goo.gl/KRhcYCZ9VD5M4iLD6">bay
area</a>; currently based in lenapehoking aka <a
href="https://maps.app.goo.gl/dX2h2x4GbhVy2CNF8">brooklyn</a>.
</p>
</td>
</tr>
<tr>
<td><a href="mailto:anna@annaylin.com?subject=🍊%20hello"
target="_top">say hi</a></td>
</tr>
<tr>
<td>
<p>you can find a <a href="#" id="oops">photo of anna here</a>
</p>
</td>
</tr>
<tr>
<td>
<a href="https://annaylin.com/portfolio/" target="_blank"
title="link to portfolio">portfolio</a>,
<a
href="https://www.instagram.com/iguannalin/reels/"
target="_blank"
title="link to instagram">instagram</a>,
<a href="https://www.are.na/anna-y-lin" target="_blank"
title="link to are.na">are.na</a>
</td>
</tr>
<!-- TODO!!
<tr>
<td>
<p>here are the people who inspire me:</p>
<marquee></marquee>
</td>
</tr> -->
</tbody>
</table>
</div>
</main>
<div id="background"></div>
</div>
</body>
</html>