-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
396 lines (336 loc) · 18.3 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Populate your mental mind-map of possibilities">
<meta name="author" content="Distractibility Cartographers">
<meta name="twitter:card" content="summary">
<!-- <meta name="twitter:site" content="@TODO"> -->
<meta name="twitter:creator" content="@daiyitastic">
<meta property="og:description" content="Populate your mental mind-map of possibilities">
<meta name="twitter:description" content="Populate your mental mind-map of possibilities">
<meta name="twitter:image" content="https://distractibility.github.io/images/header.jpg">
<meta property="og:image" content="https://distractibility.github.io/images/header.jpg">
<meta property="og:url" content="https://distractibility.github.io">
<meta name="twitter:title" content="Distractibility Cartographers">
<meta property="og:title" content="Distractibility Cartographers">
<meta property="og:type" content="website">
<title>Distractibility Cartographers</title>
<link href="./main.css" rel="stylesheet">
<!-- <link rel="Shortcut Icon" type="image/x-icon" href="TODO"> -->
</head>
<body>
<div class="page portfolio portfolio-projects">
<div class="header">
<div>
<a href="/"><img src="../images/header.jpg" style="width:100%"></a>
</div>
<div class="header-content">
<div class="container longform">
<h1 class="inverse" style="display:none">
Distractibility Cartographers
</h1>
<p>We are a smol group of smol humans chronically distracted by the great open secret that there are worlds of unending fascination tucked into every facet of the mundane. Grab onto our coattails as we organize concepts beyond the point of ludicrosity, precariously tumble down arbitrarily deep rabbitholes of obscure fun facts about things you didn’t know you wanted to know about, and dispense relatable hot tips. Come with no idea what to expect and leave swollen with knowledge!
<span class="nowrap"> <a href="https://instagram.com/distractibility.cartographers">instagram</a> | <a href="https://github.com/distractibility">github</a></span>
</p>
<p>Subscribe to <a href="https://groups.google.com/forum/?nomobile=true#!forum/distractibility-cartographers-updates/join">our mailing list</a> for tantalising updates.
</p>
<p class="center"><img height="300px" src="./images/us_highfiving.png"></p>
</div>
</div>
</div>
<div class="content">
<div class="container">
<a name="events"></a>
<div class="description">
<h2 class="text-inverse">events</h2>
<table>
<tr>
<td class="date-column">Dec 7, 2019</td>
<td><a href="https://www.eastbayalternativebookandzinefest.com/">EBABZ (East Bay Alternative Book & Zine Fest)</a> - Oakland, CA</td>
</tr>
<tr>
<td class="date-column">Nov 11, 2019</td>
<td><a href="https://www.meetup.com/WriteSpeakCode-SFBay/events/261659213/">Write Speak Code Meetup</a> - San Francisco, CA</td>
</tr>
<tr>
<td class="date-column">Dec 8, 2018</td>
<td><a href="https://letssketchtech.splashthat.com/">Let's Sketch Tech!</a> - San Francisco, CA</td>
</tr>
</table>
</div>
</div>
<div class="container">
<a name="collective"></a>
<div class="description">
<h2 class="text-inverse">collective works</h2>
<p></p>
</div>
<div class="projects">
<!--
<div class="project-wrapper">
<div class="project">
<img src="TODO.gif">
<h4>TITLE
</h4>
<p>DESCRIPTION
</p>
</div>
</div>
-->
<div class="project-wrapper">
<div class="project">
<img src="./images/brain_anchor.png">
<h4>Lure Your Ideas Onto Paper: How To Make A Zine
</h4>
<p>A hands-on guided meditation/workshop on how to engagingly explain abstract/complex technical concepts, with tips for generating lots of ideas and creating memorable visuals. Optimized specially to embrace and unblock people who are afraid to draw!! Taught at <a href="https://letssketchtech.splashthat.com">Let's Sketch Tech 2018</a>.</p>
<p><a href="https://gumroad.com/l/EHlsL/">Get the workbook here</a>.</p>
</div>
</div>
<div class="project-wrapper">
<div class="project">
<img src="./images/vegfact1.jpg">
<h4>THAT'S A VEG FACT. vol 1
</h4>
<p>Enjoy receiving your facts from anthropomorphic produce over unsettling food-chain role-reversals in this afternoon zine collab that fell out of our brains after a fateful trip to one of our favourite institutions, the farmer's market.</p>
</div>
</div>
<!--
<div class="project-wrapper">
<div class="project">
<img src="TODO.gif">
<h4>Bash Just Wants To Help!
</h4>
<p>Populate your mental mind-map of possibilities! No matter your wizardry level, bash never ceases to supply a bottomless treasure trove of fresh discoveries for slicing and mashing terminal clutter in new ways.
</p>
</div>
</div>
<div class="project-wrapper">
<div class="project">
<img src="TODO.gif">
<h4>Literal Hot Tips: Backcountry Cooking
</h4>
<p>Backcountry cooking with real flavor, brought to you by Asian Americans
</p>
</div>
</div>
<div class="project-wrapper">
<div class="project">
<img src="TODO.gif">
<h4>Sketchnoting 101: Visualifying Thoughts
</h4>
<p>Do you suffer from wall-of-text syndrome? Here are some hot tips for breathing life into informational arrangements.
</p>
</div>
</div>
-->
</div><!--END collective-->
</div>
<div class="container">
<a name="daiyi"></a>
<div class="description">
<h2 class="text-inverse">by daiyi</h2>
<p>tea-sippin alpine witch bashing computers, making nature journals, sketchnotes, and comic diaries \o/ previously a hitchhiking vagrant dirtbag, recently resettled in california (oakland!) and enjoying the local sun juice. fan of cold oceans, turkish coffee, farmer's markets, dark chocolate, and reducing complex systems into smiling blobs. will appreciate any doggo in the vicinity.
<span class="nowrap"><a href="https://twitter.com/daiyitastic">twitter</a> | <a href="https://daiyi.co">website</a> | <a href="http://instagram.com/sketchdaiyi">instagram</a></span>
</p>
</div>
<div class="projects">
<div class="project-wrapper">
<div class="project">
<img src="./images/which-flour.jpg">
<h4>
Which Flour??
</h4>
<p>Have you ever found yourself frozen with decision paralysis in the bread store or baking aisle? This zine will explain the basics and go further into grain anatomy than you ever need to know. (Also, wheat is...A BERRY??)</p>
</div>
</div>
<div class="project-wrapper">
<div class="project">
<img src="./images/gifts-for-people-who-hate-stuff.jpg">
<h4>
Gifts for People who Hate Stuff but Deserve Love & Appreciation
</h4>
<p>A short visual guide for those who were raised to equate affection & reward with materialism, but must interface with someone who considers physical objects a curse.</p>
</div>
</div>
<div class="project-wrapper">
<div class="project">
<img src="./images/almondmilk.jpg">
<h4>
You Can Make Almond Milk
</h4>
<p>Don't listen to Big Milk's propaganda, you CAN milk a nut just like an ordinary cow. With this comic recipe you will be serving up beverage anarchy from the comfort of your own home in no time.</p>
</div>
</div>
<div class="project-wrapper">
<div class="project">
<img src="./images/alexanderplatz.jpg">
<h4>
Sketchjournals of Berlin
</h4>
<p>daiyi and her bicycle live in Berlin for a few seasons as she goes swimming in many lakes, writes a lot of clojure, and wobbles around committing to a future trajectory.</p>
</div>
</div>
<div class="project-wrapper">
<div class="project">
<img src="./images/west-highland-way.jpg">
<h4>
Sketchjournals of Scotland & Ireland
</h4>
<p>daiyi visits a good friend in Edinburough and learns about veterinary best practices, takes a train through desolate countryside, and walks a portion of the West Highland way in stunningly perfect and exceedingly rare good weather. </p>
</div>
</div>
<!-- <div class="project-wrapper">
<div class="project">
<img src="TODO.gif">
<h4>
Graveyards and Coastlines: Sketchjournal excerpts from Hitchhiking the Balkans
</h4>
<p>daiyi spent a couple months hitchhiking alone with a 35 litre backpack and a sketchbook through former yogoslavia countries, sleeping by the side of the road, looking for people to climb with, being misidentified as Kazakhstani, lugging a kilo of local farmer's market tomatoes up to backcountry huts that are evidently sprinkled around the mountains and free to stay in. </p>
</div>
</div>-->
<div class="project-wrapper">
<div class="project">
<img src="./images/squash.jpg">
<h4>
Squash Gouache
</h4>
<p>An journal of appreciation for daiyi's favourite gourds in gouache rendition and tips on how to eat them/recipes + personal taste notes \o/</p>
</div>
</div>
<div class="project-wrapper">
<div class="project">
<!-- <img src="TODO.gif"> -->
<h4>
Climbing Zines the series
</h4>
<p>daiyi gets excited about drawing knots and topos, the zine series \o/ Topics include: weird climber terminology/slang, types & styles of indoor & outdoor climbing, my favourite places to climb and a notes on their geography, how to read climbing topos, climbing knots!!
</p>
</div>
</div>
</div><!--END daiyi-->
</div>
<div class="container">
<a name="rfong"></a>
<div class="description">
<h2 class="text-inverse">by rfong</h2>
<p>an eldritch wordmancer and gremlin who once covered every kitchen cabinet in pictographic signage after being consumed by vinyl cutter power. derives incomparable satisfaction from handmaking A8 notebooks and overanalyzing craft techniques. weaknesses: bread, hilltops, cognitive deconstruction, and things that are the wrong size yet entirely functional.
<span class="nowrap"><a href="https://skollipsism.gumroad.com/">digital zine shop</a> | <a href="http://instagram.com/skollipsism">instagram</a> | <a href="https://patreon.com/skollipsism">patreon</a></span>
</p>
</div>
<div class="projects">
<div class="project-wrapper">
<div class="project">
<img src="./images/pocketselfcare.jpg">
<h4>Pocket Self-Care (Choose Your Own Adventure!)</h4>
<p>Ever wish your totally sane, level-headed self could drag your depressed self back to vitality? Now you can reach through the mists of time and slap yourself upside the head with this pocket-sized fill-in-the-blank self-care manual, personalized specifically for you by you.<p>
<p>My most popular zine! <a href="https://gum.co/pocketselfcare">Get a digital copy here.</a></p>
</div>
</div>
<div class="project-wrapper">
<div class="project">
<img src="./images/dothething.png">
<h4>Do The Thing: How To Do Anything</h4>
<p>How to start doing something you're stuck on, brainstorm things to do, become more effective at doing something, or identify if you truly lack the resources to do something so you can put it on your mental backburner guilt-free. Works for anything. Really.</p>
<p><a href="https://gumroad.com/l/dothething">Get the worksheet here</a>.</p>
</div>
</div>
<div class="project-wrapper">
<div class="project">
<img src="./images/poo.jpg">
<h4>Nature Is Calling And I Must Go Poo</h4>
<p>Pocket compendium of outdoors bathroom tips and tricks for wilderness late bloomers, folx with anatomical angst, or anyone who's stressed about the thought of doing their business outside.
</p>
<p><a href="https://skollipsism.gumroad.com/l/pooping">Get a digital copy here</a>.</p>
</div>
</div>
<div class="project-wrapper">
<div class="project">
<img src="./images/mind_body_vibes.png">
<h4>The Mind Is In The Body</h4>
<p>6 illustrated mindfulness visualizations for processing and releasing your unwanted vibes or Overwhelming Feelings (TM). A 2020 coping zine. *sobs in brushpen*</p>
<p><a href="https://skollipsism.gumroad.com/l/fTWRo">Get a digital copy here.</a></p>
</div>
</div>
<div class="project-wrapper">
<div class="project">
<img src="./images/hammock_camping.jpg">
<h4>Hammock Camping: I LOVE IT</h4>
<p>Why doesn't your butt get cold? How do you achieve the perfect sag? WHY ARE THERE SO MANY BITS? A superspeed primer to the weird, wonderful, and confusing world of 3-season hammock camping, from which many have never (voluntarily) turned back.</p>
</div>
</div>
<div class="project-wrapper">
<div class="project">
<img src="./images/sourdough_starter.jpg">
<h4>Care and Feeding of your Sourdough Starter</h4>
<p>Tame the beast of wild yeast and embark boldly into the sourdough realms!
</p>
<p><a href="https://skollipsism.gumroad.com/l/sourdough-starter">Get a digital copy here.</a></p>
</div>
</div>
<div class="project-wrapper">
<div class="project">
<img src="./images/direct_comms.jpg">
<h4>Direct & Intentional Communication Workbook</h4>
<p>A pocket-sized workbook for understanding and communicating your wants and needs, which is often trickier than it sounds.
</p>
<p><a href="https://skollipsism.gumroad.com/l/directcomms">Get a digital copy here.</a></p>
</div>
</div>
<div class="project-wrapper">
<div class="project">
<img src="./images/invitations_book.jpg">
<h4>Curious & Whimsical Invitations For All Occasions: How To Convince Your Friends To Attend Anything</h4>
<p>An epistolary of strangely eldritch yet compelling email invitations to friends, sprinkled with proven tips about how to convince people to show up to anything.</p>
<p><a href="http://www.lulu.com/shop/rachel-fong/curious-whimsical-invitations-for-all-occasions/paperback/product-22982752.html">Published here.</a></p>
</div>
</div>
<div class="project-wrapper">
<div class="project">
<img src="./images/ergonomic_workshop.jpg">
<h4>The Hidden Labor of Building an Ergonomic Workshop</h4>
<p>A visual speed-guide to the hidden difficulties of building a workshop that works for many different learning styles, and tips on how to make your workshops more ergonomic and effective.
</p>
</div>
</div>
<div class="project-wrapper">
<div class="project">
<img src="./images/ropedart_diy.jpg">
<h4>Rope dart construction guide</h4>
<p>My comprehensive guide to budget DIYing or choosing a <a href="https://en.wikipedia.org/wiki/Rope_dart">rope dart</a> that fits your body and movement style. I've tried and analyzed pretty much every leash material out there.</p>
<p><a href="https://gum.co/ropedartdiy">Get the PDF here.</a></p>
</div>
</div>
<div class="project-wrapper">
<div class="project">
<img src="./images/bread_rxn.png">
<h4>Delayed-Fermentation Bread: for lazy lovers of rustic breads
</h4>
<p>Eaten fresh ten minutes from the oven, the crust is crisp and golden brown and rounded from the dough’s surface tension, the crumb soft and holey. There are hints both of savory-sour from the yeast fermentation and savory-sweet from the sugars released from the carbohydrates and transformed by the Maillard reaction and by caramelization. It is simply bread.
</p>
</div>
</div>
<div class="project-wrapper">
<div class="project">
<img src="./images/distractibility_micro_1.jpg">
<h4>Distraction Microanthology Vol. I</h4>
<p>A smorgasboard of distracting micro deep-dives; a network of tantalizingly brief gateways to things you didn't know you needed to know.
</p>
</div>
</div>
</div><!--END rfong-->
</div>
</div>
<div class="footer">
<div class="container-fluid">
<div class="footer-image"></div>
</div>
<div class="container-fluid">
<p class="align-center">swollen with knowledge since 2018</p>
</div>
</div>
</div>
</body>
</html>