-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
255 lines (226 loc) · 20.6 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Leslie's Website</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<link rel="icon" type="image/x-icon" href="z-llfavi.svg">
<script src="script.js"></script>
<link rel="stylesheet" href="fonts.css">
<base target="_self">
<style>
body {
font-family: 'FEReg', sans-serif; font-size:15px; letter-spacing: .5px; line-height: 1.3em;
background-color: black;color: white;
max-width:60vw; margin:0.5em auto 2em auto;}
a {color:gray;text-decoration: none}
a:hover {color:white;cursor:alias}
h1 {font-size:1em;font-weight:normal;margin-top: 1em}
nav a {position:fixed;top:1em;left:1em;z-index:3;}
section {border-top: 1px rgb(71,60,60) dotted;}
.borderless {border:none}
#webkeeper p {padding:auto 1em}
.folk:hover{text-decoration: none;}
#wesley:hover{color:deepskyblue}
#kim:hover {background-color: #471a1a;}
#daniela:hover {color: #8A9A5B;}
#charlotte:hover {color: greenyellow}
#omar:hover {color: lightsalmon;}
#staoue:hover {background-color:#b1331b}
#jina:hover {background-color: blue;}
#nico:hover {color: palegoldenrod;}
#katherine:hover {color: gray;}
#shannon:hover {background-color: #006666;}
#daniel:hover {color: #FFC500;}
#trudy:hover {color: #01FF7E;}
#jake:hover {color: lightsteelblue;}
#ange:hover {background-color: royalblue;}
#holly:hover {color: #80B785;}
#mikki:hover {color: azure;}
#lauren:hover {color: lemonchiffon;}
tbody {display:grid; grid-template-columns: 1fr;margin-bottom:1em}
[data-type-primary="ads"] a.ext {color:lightsalmon}
[data-type-primary="interface"] a.ext {color:aquamarine}
[data-type-primary="gaze"] a.ext {color:lightpink}
[data-type-primary="conditional"] a.ext {color:darkorange}
[data-type-primary="media"] a.ext {color:khaki}
[data-type-primary="misc"] a.ext {color:gainsboro}
#filter-ads:checked ~ #shed tr[data-type-primary="ads"] {display: table-row;}
#filter-interface:checked ~ #shed tr[data-type-primary="interface"] {display: table-row;}
#filter-gaze:checked ~ #shed tr[data-type-primary="gaze"] {display: table-row;}
#filter-conditional:checked ~ #shed tr[data-type-primary="conditional"] {display: table-row;}
#filter-media:checked ~ #shed tr[data-type-primary="media"] {display: table-row;}
#filter-misc:checked ~ #shed tr[data-type-primary="misc"] {display: table-row;}
#shed tr {display: none;border-top: 1px dotted rgb(62, 62, 62);padding-top:0.125em}
#shed tr h2 {font-size:1em;font-weight:normal;text-align:center}
#shed tr p {font-family:'FELight'}
#shed tr img {display:block;width:100%;}
details p, section p {padding-left:1em}
details p:last-child, #webkeeper {padding-bottom:1em; border-bottom: 1px dotted rgb(62, 62, 62);}
iframe {width:100%; height:30vh}
@media (max-width:950px) {body {max-width: 100%; margin:1em 2em}}
</style>
</head>
<body>
<main>
<!-- <img src="z-blab360-light.gif" alt="A black line drawing of a smiley blobby figure, rotating in 360 degrees atop a white background."> -->
<img style="padding-top:0.5em;width:100%" src="2025/mbta-pizza.png" alt="a slice of pizza, face down, on the floor of a bus, with empty blue seats above.">
<!-- <img src="https://d2w9rnfcy7mm78.cloudfront.net/20023841/original_1e5a5bf2cfc1c5ae0c88b6d9a751b6a8.gif?1674636214?bc=0" alt="shifting grid of machine-learning-generated images of youtube video thumbnails."> -->
<!-- <img src="2025/20230514.png" alt=""> -->
<section class="borderless">
<h1><details id="webkeeper">
<summary>Leslie Liu</summary>
<p>
I am broadly interested in interfaces and their metaphors, advertising,
and ecstatic experiences of / encounters with technology.
</p>
<p>
What I’m up to <a href="https://liuleslie.github.io/now">now</a>.
</p>
<details style="padding-left:1em">
<summary>Dandelion</summary>
<p style="border:none;padding-bottom:0">Loosely remembered networks of people I find myself thankful for, inspired by,
and want to acknowledge this season, among many others not listed...
<a class="folk" href="https://trust.support">Trust</a>,
<a class="folk" id="kim" class="invert" href="https://www.are.na/kimberly-scott">Kim</a>,
<a class="folk" id="daniela" href="https://notdaniela.com">Daniela</a>,
<a class="folk" id="charlotte" href="https://www.whatexactlyisupchuck.com">Charlotte</a>,
<a class="folk" id="omar" href="https://omar.website">Omar</a>, Rebecca, R,
<a class="folk" id="staoue">Staoue</a>,
<a class="folk" id="jina" class="invert" href="http://jinahyun.glitch.me">Jina</a>,
<a class="folk" id="nico" href="https://nicochilla.com">Nico</a>,
<a class="folk" id="katherine" href="https://kayserifserif.place">Katherine</a>,
<a class="folk" id="shannon" class="invert" href="https://www.instagram.com/petitehoneybee">Shannon</a>,
<a class="folk" id="daniel" href="https://danielum.net">Daniel</a>,
<a class="folk" id="trudy" href="http://www.trudy.computer">Trudy</a>,
<a class="folk" id="jake" href="https://jake.isnt.online">Jake</a>,
<a class="folk" id="holly" href="https://www.thisishollyli.com/">Holly</a>,
<a class="folk" id="ange" class="invert" href="https://www.instagram.com/permadwell">Ange</a>;
<a class="folk" id="mikki" href="https://mikki.studio/">Mikki Janower</a>,
<a class="folk" id="lauren" href="https://laurenfox.work/">Lauren Fox</a>,
<a href="https://studiomoniker.com/">Moniker</a>, <a href="https://www.kickscondor.com/">Kicks Condor</a>
</p>
</details>
</details></h1>
</section>
<section class="borderless" id="ongoing">
<h1 id="categories">Stuff, by theme</h1>
<input type="checkbox" id="filter-ads" name="filter-ads">
<label for="filter-ads">Ads, chum, meme</label><br>
<input type="checkbox" id="filter-interface" name="filter-interface">
<label for="filter-interface">Interfaces, metaphors</label><br>
<input type="checkbox" id="filter-gaze" name="filter-gaze">
<label for="filter-gaze">Touch, vision</label><br>
<input type="checkbox" id="filter-conditional" name="filter-conditional">
<label for="filter-conditional">Conditional design</label><br>
<input type="checkbox" id="filter-media" name="filter-media">
<label for="filter-media">AI/ML media, materiality, marginalia</label><br>
<input type="checkbox" id="filter-misc" name="filter-misc">
<label for="filter-misc">Etc.</label>
<nav><a href="#categories">^ Return to top</a></nav>
<table id="shed"> <!-- cellspacing="0" cellpadding="0"> -->
<tbody>
<tr data-type-primary="ads"><td><a class="ext" href="https://www.covenberlin.com/feelings-at-the-edge-a-chumbox-tour/">Feelings at the Edge: A Chumbox Tour</a></td></tr>
<tr data-type-primary="misc"><td><a class="ext" href="notes/n1.html">on love & joy in being</a></td></tr>
<tr data-type-primary="ads"><td><a class="ext" href="https://gesture-as-meme.glitch.me/">Gestures of Being as Meme</a></td></tr>
<tr data-type-primary="media"><td><a class="ext" href="https://flatjournal.com/work/the-mockup-aesthetic-gestures-of-transgression/">Wheatpaste Mockups: Gestures of Transgression</a></td></tr>
<tr data-type-primary="misc"><td><a class="ext" href="https://www.are.na/blog/on-connection">On Connection</a></td></tr>
<tr data-type-primary="misc"><td><a class="ext" href="essays/e2.html">Layer 29 of the Internet Onion: A Question as a Gift</a></td></tr>
<tr data-type-primary="media"><td><a class="ext" href="essays/e3.html">Feeling From the Margins</a></td></tr>
<tr data-type-primary="interface"><td><a class="ext" href="https://backslashlit.com/issues/5/leslie-liu">oneness</a></td></tr>
<tr data-type-primary="misc"><td><a class="ext" href="https://somewhere-always.glitch.me/">somewhere always</a></td></tr>
<tr data-type-primary="gaze"><td><a class="ext" href="https://www.instagram.com/p/CLi9KhjBhw4/?img_index=1">Who is searching me up on LinkedIn and what do they want from me?</a></td></tr>
<tr data-type-primary="ads"><td><a class="ext" href="https://www.instagram.com/p/CV5_yoVr3RO/?img_index=1">(untitled test)</a></td></tr>
<tr data-type-primary="media"><td><a class="ext" href="https://liuleslie.github.io/essays/e1.html">Existentialism at the grocery store</a></td></tr>
<tr data-type-primary="ads"><td><a class="ext" href="https://liuleslie.github.io/alainifnchm">as long as im not in fullscreen nothing can hurt me</a></td></tr>
<tr data-type-primary="misc"><td><a class="ext" href="https://www.instagram.com/p/CyHeyITRIpc/?img_index=1">Window < > Slippers</a></td></tr>
<!-- <tr data-type-primary="ads">
<td>
<h2>UGTVWMWZ 2-Piece Silverware Flatware Set, Silicone Dishware Safe (City Chic) Adult Diet Tableware, Includes 1 Fork 1 Plate, Modular Configurable for Mealtime Relaxation, Destress Set for Teens Adults Halloween Christmas Gift</h2>
<div style="padding:78.69% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/1043073561?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="UGTVWMWZ 1"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
<p> Investigating the role mealtime videos choreograph expectations around dining,
UGTVWMWZ is a tray with embedded screens (roughly demonstrated above) that maximizes
media absorption. Instead of assigning mealtime videos any moral judgment,
the tray seeks to fuse media and dietary absorption, such that eating and interacting
with food is situated as a means to an end — near-constant immersion into frenetic,
serialized, always-on media. In this clip, the user launches pieces of food at
respective compartments to scroll through media.
</p>
</td>
</tr>
<tr data-type-primary="media">
<td>
<h2>Data Entanglement</h2>
<img src="https://d2w9rnfcy7mm78.cloudfront.net/32393145/original_a9798faa798d923c26778114d71b684c.png?1732150669?bc=0" alt="Photo from front of a small, long rectangular LCD display reading 'Cloudflare, New Jersey, Sunny', positioned atop a small LEGO structure. Wires and cables peek from the back. The background is a green paper.">
<img src="https://d2w9rnfcy7mm78.cloudfront.net/32393144/original_0a75fee5e1c9accb0da357aa4acf2191.png?1732150669?bc=0" alt="Overhead photo of a LCD display hooked up to a microcontroller, wires, rotating knob, and breadboard, all atop a LEGO structure. The paper in the background on which all is set atop is a saturated green color. A light blue, opaque piece of plastic curves around, above the breadboard, diffusing the bright red light of the electronics underneath.">
<div style="padding:125% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/1025476272?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Data Entanglement"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
<p>A reflection on how the data I produce flows through my local internet of things: particularly interested in the materiality of the internet (specifically, my router data), I found a 2021 <a href="https://www.ftc.gov/system/files/documents/reports/look-what-isps-know-about-you-examining-privacy-practices-six-major-internet-service-providers/p195402_isp_6b_staff_report.pdf">Federal Trade Commission report</a> examining how six major internet service providers (mine included) “amass large pools of sensitive data, and that their uses of such data could lead to significant harms, particularly when consumers are classified by demographic characteristics.”</p>
<p>Rotating the knob/dial refreshes server locations between which data packets travel: this includes the hosting service, state, and local weather.</p>
</td>
</tr>
<tr data-type-primary="misc">
<td>
<h2>Shape Grammar</h2>
<img src="https://d2w9rnfcy7mm78.cloudfront.net/32393143/original_e50165e521d9d90bfb3fdf65320d059e.png?1732150670?bc=0" alt="Black text on white background of a flowchart diagram specifying the combination of a set of calligraphic strokes.">
<div style="padding:72.65% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/1025495834?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="SG 1"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
<p>A shape grammar I developed from this thread about the relationship between writing and drawing. Has absurd beginnings from a clip of <em>Nathan For You</em> with the caricature artist, I was taken by the way east Asian scripts are generally represented by those who aren’t familiar with it: see wonton fonts and yellow peril propaganda.</p>
<p>I adapted it as a shakily composed entry for <a href="https://radicalcharacters.org/radical-return">Radical Characters’ <em>Radical Return</em></a>. There was something in it about this question of <em><a href="https://www.are.na/block/13087100">how can I take advantage of my ignorance?</a></em></p>
<p>With influences from asemic writing and botched tattoos of Chinese text, I suppose I am trying to ask, <em>What does it mean when a script, a hand, a calligraphic style becomes adornment for Latin letterforms, positioned as a signifier of some sort of exoticism, edginess, or allure?</em></p>
</td>
</tr>
<tr data-type-primary="misc">
<td>
<h2>TouchDesigner Collage (I)</h2>
<div style="padding:55.58% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/1043078280?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="TD 1"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
<p>Getting to know TouchDesigner as a video editing tool... music is <a href="https://ashleyhelal.bandcamp.com/album/swimming"><em>Glade Springs</em> by Ashley Helal</a>.</p>
</td>
</tr> -->
<!-- <tr data-type-primary="misc"><td><a href=""></a></td></tr>
<tr data-type-primary="misc"><td><a href=""></a></td></tr>
<tr data-type-primary="misc"><td><a href=""></a></td></tr>
<tr data-type-primary="misc"><td><a href=""></a></td></tr>
<tr data-type-primary="misc"><td><a href=""></a></td></tr>
<tr data-type-primary="misc"><td><a href=""></a></td></tr>
<tr data-type-primary="misc"><td><a href=""></a></td></tr> -->
</tbody>
</table>
</section>
<!-- <section>
<h1>Portfolio</h1>
<p><a target="_blank" href="portfolio-test.html">Work from 2020 onwards; opens as a new link.</a></p>
</section> -->
<section>
<h1>Contact</h1>
<p><a href="http://users3.smartgb.com/g/g.php?a=s&i=g36-36279-2f">A guestbook</a>, if it strikes your fancy to leave a message.</p>
</section>
<section>
<h1>Colophon <sup><a href="https://en.wikipedia.org/wiki/Colophon_(publishing)#History">[Rewritten, thank God.]</a></sup></h1>
<details>
<summary>This is self-contained HTML set in <a href="http://osp.kitchen/foundry/fluxisch-else/">Fluxisch Else</a>.</summary>
<p style="padding-left:3em">Why and how, ”self-contained?”</p>
<p>There has always been something charming about a self-contained website to me.
This desire for the potential of expression made compact, travel-size, extends to other things:
sketchbooks, pockets, forms and multipurpose containers of information and thought.
</p>
<p>The infinite recomposability of a single HTML file is exciting to me: as I tab through
different past site-selves there is something resonant in the ways I am trying
to embody something more abstract, something aspirational: if my skeleton could be brutalist,
exacting somehow... and there is the tireless rewriting of a self, of this presence,
through the familiar tags and syntax, the usual sleight of hand by shoving things into
<details>.
</p>
</details>
<p>
Thanks to <a class="folk" id="wesley" href="https://wesleyac.com">Wesley Aptekar-Cassels</a> for their <a href="https://hack.wesleyac.com/pokemon.html">CSS list filtering demo</a>,
Doriane for <a href="https://against.ungual.digital">against</a>, as well as
<a class="folk" href="https://pitscher.net">Pitscher</a>, <a class="folk" href="https://solar.lowtechmagazine.com">Low-tech Magazine</a>,
<a class="folk" href="https://html.energy">HTML Energy</a>, and <a class="folk" href="https://multidimensional.link/southland?">more*</a> for their influence.
</p>
<p><a href="https://gossipsweb.net">Coded from scratch</a> and in constant revision.</p>
</section>
</main>
</body>
</html>