-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.pug
442 lines (413 loc) · 21.3 KB
/
index.pug
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
mixin carousel
.imagebox
.shadow
.swiper-container-horizontal
.swiper-wrapper
block
.swiper-scrollbar
.shadow
mixin image(link)
img.swiper-img.swiper-lazy(data-src=link)
.swiper-lazy-preloader
mixin image(link)
img.swiper-img.swiper-lazy(data-src=link)
.swiper-lazy-preloader
mixin vSlide(hash)
.swiper-slide(data-hash=hash)
.inner-slide
block
mixin l(link)
a(target="_blank", href=link)
block
doctype html
html(lang="en")
head
meta(charset='utf-8')
meta(name='viewport' content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1')
meta(name='keywords' content='portfolio, art, design, contemporary, post-internet')
meta(name='author' content='Matthias Pitscher')
// facbeook stuff
meta(property="og:url" content="https://xn--mp8h.pitscher.net")
meta(property="og:image" content="https://xn--mp8h.pitscher.net/images/preview.png")
meta(property="og:type" content="website")
meta(property="og:title" content="👁")
meta(property="og:description" content="H👁, m👁 name is Pitscher. ")
title Pitscher
link(rel='shortcut icon' href='favicon.ico')
link(rel='stylesheet' type='text/css' href='css/normalize.css')
link(rel='stylesheet' type='text/css' href='https://unpkg.com/swiper/swiper-bundle.min.css')
link(rel='stylesheet' type='text/css' href='fonts/font.css')
link(rel='stylesheet' type='text/css' href='css/style.css')
script(defer, src="https://unpkg.com/swiper/swiper-bundle.min.js")
script(defer, src="js/swiper-script.js")
script(defer, src="js/eye.js")
script(defer, src="js/toggle.js")
body
img#follower(src="assets/cursor/svg/mouse-drag.svg")
<button id="toggle-info" onclick="toggleInfo()"> info </button>
.swiper-container-vertical
.swiper-wrapper
.swiper-slide(data-hash="👁")
.inner-slide-center
.title.column
h1 H👁,
<br>m👁 name is pitscher.
<br>👁 am an artist and des👁gner working with technology in d👁verse ways.
<br>Here is m👁 #[a(target='_blank' href='mailto:matthias@pitscher.net') contact] — Let's create something n👁ce together!
small typeface by #[a(target='_blank' href='https://eriksachse.com/') Erik Sachse]
img(src="images/keys.svg" width="100" style="position: absolute;bottom: 140px")
small(style= "position: absolute;bottom: 100px; text-align: center;") scroll to 👁 some <br> print & web projects
+vSlide("nc-atelierhaus")
.description
h1 Next Cloud Atelierhaus
h4 03 2022
p.
#[+l('http://davidebevilacqua.com/') Davide Bevilacqua], #[+l('https://sofiabraga.com/') S()fia Braga] and I organized an online residency through the net culture initiative #[+l('https://core.servus.at') servus.at]. With Juan Pablo Linares Ceballos I worked on the visual identity that is reminiscent of an abstract floor plan. <br/>
We also created a custom website generator that takes the content from a Nextcloud folder and builds javascript application with Svelte. <br/>
visit the #[+l('https://atelierhaus.servus.at/') atelierhaus] <br/>
Fonts in use: #[+l('https://www.redaction.us/') redaction]
+carousel
.swiper-slide
+image("images/nca/nca_login.jpg")
.swiper-slide
+image("images/nca/nca (1).jpg")
.swiper-slide
+image("images/nca/nca (2).jpg")
.swiper-slide
+image("images/nca/nca (3).jpg")
.swiper-slide
+image("images/nca/nca (4).jpg")
+vSlide("dwhx")
.description
h1 dwhX
h4 11 2021
p.
The viennese art association #[+l('https://dasweissehaus.at') das weisse haus] wanted a new online space that could serve as a platform for digital experimentation: #[+l('https://dwhx.space') dwhx.space]. Together with the designer Alyona Chiobanu, we drafted a 3D environment that hosts texts, audio and video files. For me it was the first time working with 3D elements on the web in such a scale, which was a challenge. But the open source library react-three-fiber in combination with next.js made things a lot easier. <br/> Fonts in use: Gramatika & Suisse Neue.
+carousel
.swiper-slide
+image("images/dwhx/dwhx-02-01.jpg")
.swiper-slide
+image("images/dwhx/dwhx-02-02.jpg")
.swiper-slide
+image("images/dwhx/dwhx-02-03.jpg")
.swiper-slide
+image("images/dwhx/dwhx-02-04.jpg")
+vSlide("sfc")
.description
h1 Silicon Friend Camp
h4 08 2021
p.
With the net culture initiative #[+l('https://core.servus.at') servus.at] I organized a summer camp in Austrian Alps. For the #[+l('https://cwc.radical-openness.org/siliconfriendcamp/') Open Call] we distributed a website that was designed by Alyona Ciobanu and hand coded by me. <br/>
For the related symposium website I decided to use a more neutral tone that took inspiration from old terminal computers. <br/>
The layout of the posters were generated with JavaScript and the images were generated with ruDalle, a text-to-image AI model.
+carousel
.swiper-slide
+image("images/cwc/open-call.jpg")
.swiper-slide
+image("images/cwc/symposium.jpg")
.swiper-slide
+image("images/cwc/exhibition.jpg")
.swiper-slide
+image("images/cwc/poster.jpg")
+vSlide("lostcloud")
.description
h1 Lost in a garden of clouds
h4 05 2020
p.
As the artist duo #[+l('https://saibao-yangmu.online/') Sai Bao & Yang Mu] we were invited to create the online #[+l('https://cloud.radical-openness.org/lost.html') exhibition] for the festival »Art Meets Radical Openness 2020« in Linz. Early on we decided to create a text adventure, where the visitor walks in circles exploring multiple dimensions of interacting with the artworks. I used a custom shader to render the clouds live. Everything is hand coded using iframes as the core mechanism. <br> Font in use: Fancycube. A remake of #[+l('https://en.wikipedia.org/wiki/Bill_Atkinson') Bill Atkinson]'s Venice.
+carousel
.swiper-slide
+image("images/lost/lost-1.png")
.swiper-slide
<video autoplay muted loop><source src="images/lost/lostgarden.m4v" type="video/mp4"></video>
.swiper-slide
+image("images/lost/lost-2.jpg")
.swiper-slide
+image("images/lost/lost-3.jpg")
.swiper-slide
+image("images/lost/lost-4.jpg")
.swiper-slide
+image("images/lost/lost-5.jpg")
.swiper-slide
+image("images/lost/lost-6.jpg")
.swiper-slide
+image("images/lost/amro_club.jpg")
+vSlide("cocolands")
.description
h1 coco lands
h4 03 2020
p.
With a group of international artists we initiated coco lands to start a collaborative diary during the coronavirus pandemic. With Juan Pablo we created a #[+l('https://cocolands.xyz/') website] to collect our creative outputs. The page is running on tumblr with a custom template, utilizing threejs for 3D rendering.
<br>Font in use: Tomorrow
+carousel
.swiper-slide
+image("images/coco/coco_gif/ani_coco_30.gif")
.swiper-slide
+image("images/coco/coco_web_2.jpg")
.swiper-slide
+image("images/coco/coco_web_3.png")
//- +vSlide("cybersquat")
//- .description
//- h1 Cybersquat
//- h4 02 2020
//- p For #[+l('https://squatted.online') squatted.online] I was living in a small Kiosk in Basel. While I was living inside, people could watch me working through screens from the street and through a livestream online. I collected my stories in a little diary and created a messy installation with the leftovers.
//- p Journal: Edition of 30
//- p #[+l('https://squatted.online/squat/main_entrance/staircase/floor_2/bedroom_1/drawer/index.html') website]
//- +carousel
//- .swiper-slide
//- +image("images/squat/kiosk.jpg")
//- .swiper-slide
//- +image("images/squat/inside.jpg")
//- .swiper-slide
//- +image("images/squat/exhibition.jpg")
//- .swiper-slide
//- +image("images/squat/website.png")
//- .swiper-slide
//- +image("images/squat/diary/ani_diary_30.gif")
+vSlide("shared-habitats-linz")
.description
h1 Shared Habitats
h4 08 2019
p.
As part of the Ars Electronica festival, the Bauhaus Uni organized another Shared Habitats exhibition. I worked with Ursula Damm, Theresa Schubert and Mindaugas Gapševičius on the visual identity. A generative, organic looking, blob was used as the main icon on the #[+l('http://shared-habitats.eu/') website], a poster, booklets & stickers.
<br>Fonts in use: Neue Machina, IBM Plex Mono
+carousel
.swiper-slide
+image("images/sh_2/shared_habitats_poster.jpg")
.swiper-slide
+image("images/sh_2/shared_habitats_web-1-Medium.jpg")
.swiper-slide
+image("images/sh_2/shared_habitats_web-2.jpg")
.swiper-slide
+image("images/sh_2/shared_habitats_web-3-Medium.jpg")
.swiper-slide
+image("images/sh_2/shared_habitats_flyer1.jpg")
.swiper-slide
+image("images/sh_2/shared_habitats_flyer2.jpg")
.swiper-slide
+image("images/sh_2/shared_habitats_flyer3.jpg")
.swiper-slide
+image("images/sh_2/shared_habitats_flyer4.jpg")
.swiper-slide
+image("images/sh_2/shared_habitats_flyer5.jpg")
+vSlide("infields")
.description
h1 infields
h4 07 2019
p infields connects field recordings of a rumanian cell tower site with a printed publication. The site is located close to Făgăraș and consists of 4 towers sending radio and cellular signals. To connect to the soundfiles you need to scan the QR codes in the book.
p The project was published as part of the #[+l('https://m.facebook.com/soundslikeabook/') sounds like a book] residency and the book was produced by Graphomat.
p Size: 25cm by 50cm <br> Edition of 5
p images by Eliot & revista22
+carousel
.swiper-slide
+image('images/infields/infields_DH5.jpg')
.swiper-slide
+image('images/infields/revista22.jpg')
.swiper-slide
+image('images/infields/infields_long_tall-1-page1.jpg')
.swiper-slide
+image('images/infields/infields_long_tall-1-page2.jpg')
.swiper-slide
+image('images/infields/infields_long_tall-1-page3.jpg')
.swiper-slide
+image('images/infields/infields_long_tall-1-page4.jpg')
.swiper-slide
+image('images/infields/infields_long_tall-1-page5.jpg')
.swiper-slide
+image('images/infields/infields_long_tall-1-page6.jpg')
.swiper-slide
+image('images/infields/infields_long_tall-1-page7.jpg')
.swiper-slide
+image('images/infields/infields_long_tall-1-page8.jpg')
.swiper-slide
+image('images/infields/infields_long_tall-1-page9.jpg')
.swiper-slide
+image('images/infields/infields_long_tall-1-page10.jpg')
+vSlide("meanwhile-in-china")
.description
h1 Meanwhile in China
h4 04 & 10 2019
p As part of the artist collective »Sai Bao & Yang Mu« we created two installations that deal with the fact that the app Tik Tok is called Douyin in mainland china and only features chinese content.
p The first version was exhibited at the Xie Zilong Photography Museum in Changsha featuring a 7 channel #[+l('https://vimeo.com/335020808') video] installation with animated graphics.
p The second was exhibited at Ars Electronica with a 6x3m wallpaper and a single channel video.
+carousel
.swiper-slide
+image('images/china/changsha_2.jpg')
.swiper-slide
+image('images/china/changsha_3.jpg')
.swiper-slide
+image('images/china/ars_3.jpg')
.swiper-slide
+image('images/china/ars_1.jpg')
.swiper-slide
+image('images/china/ars_2.jpg')
+vSlide("btbb")
.description
h1 Born to be Bauhaus
h4 2018-2023
p.
Together with #[+l('http://adrianpalko.com/') Adrian Palko] we created the identity for the annual art prize #[+l('https://www.uni-weimar.de/born-to-be-bauhaus/') Born to be Bauhaus]. Each year is represented by a bright neon color. Posters are printed in offset with a special colors.
<br> The page is a progressive web app, built with nuxtjs.
<br> Fonts in use: Monument Grotesk, Pano, Pickle
+carousel
.swiper-slide
+image("images/btbb/btbb_website_1.png")
.swiper-slide
+image("images/btbb/btbb_website_2.png")
.swiper-slide
+image("images/btbb/btbb_website_3-Medium.png")
.swiper-slide
+image("images/btbb/btbb_website_4-Medium.jpg")
.swiper-slide
+image("images/btbb/btbb_plakat_18-Medium.jpg")
.swiper-slide
+image("images/btbb/btbb_plakat_19-Medium.jpg")
.swiper-slide
+image("images/btbb/btbb_plakat_20-Medium.jpg")
+vSlide("thibaut-henz")
.description
h1 Thibaut Henz
h4 03 2018
p.
Online portfolio for the photographer #[a(target='_blank' href='https://thibauthenz.com/') Thibaut Henz]. We decided on a customized version of the wordpress lay theme, which gives him the ability to arrange images in interesting ways.
<br> Font in use: Sinkin Sans
+carousel
.swiper-slide
+image("images/thibaut/thibaut-1-Medium.jpg")
.swiper-slide
+image("images/thibaut/thibaut-2-Medium.jpg")
.swiper-slide
+image("images/thibaut/thibaut-3-Medium.jpg")
.swiper-slide
+image("images/thibaut/thibaut-4-Medium.jpg")
.swiper-slide
+image("images/thibaut/thibaut-5-Medium.jpg")
+vSlide("Prt")
.description
h1 Pr...t
h4 02 2018
p
| Advertisement for two shows at a secret venue in Leipzig. The styles are completely opposit of each other.
| While one is minimalistic with a fine noise texture and showcasing the great font
a(target='_blank' href='http://oxlos.crowdfont.org') Oxlos
|. The other one is completely overloaded with
a(target='_blank' href='https://openclipart.org/') ClipArt
|.
+carousel
.swiper-slide
+image("images/prt/Poster_Pracht_3.3__black.png")
.swiper-slide
+image("images/prt/Poster_Pracht_3.3__white.jpg")
.swiper-slide
+image("images/prt/Prt_15-Feb.jpg")
+vSlide("shared-habitats")
.description
h1 Shared Habitats
h4 06 2017
p
| I had the pleasure to design a Poster for the exhibition “Shared Habitats” in
a(target='_blank' href='https://www.google.de/maps/place/Kaohsiung,+Taiwan/@20.5587299,119.7285306,611404a,35y,25.31t/data=!3m1!1e3!4m5!3m4!1s0x346e43517a7a741b:0x4826a24a54732a37!8m2!3d22.6272784!4d120.3014353?hl=de') Kaohsiung
|.
|Ursula Damm and her students are exhibiting media art works that deal with the environment (Umwelt). The poster can be flipped upside down and two posters together remind us of our shared habitat.
+carousel
.swiper-slide
+image("images/sh_1/Shared_Habitats-Medium.jpg")
.swiper-slide
+image("images/sh_1/Shared_Habitats_mockup-Medium.jpg")
+vSlide("social-media-meditation")
.description
h1 Social Media Meditation
h4 04 2017
p
| For my thesis project I created a visual language that mimics contemporary yoga and meditation institutes.
| This speculative brand is based on the idea of nothingness. The logo got stripped away from any iconic form.
| The promotional pictures resemble stockphotos.
br
| More information:
a(target='_blank' href='http://www.socialmediameditation.net') www.socialmediameditation.net
br
| Even more information in my
a(target='_blank' href='http://www.pitscher.net/Thesis_SMM.pdf') Thesis Book
| (german)
+carousel
.swiper-slide
+image("images/smm/smm_logo.svg")
.swiper-slide
+image("images/smm/smm_promo.jpg")
.swiper-slide
+image("images/smm/smm_website.jpg")
.swiper-slide
+image("images/smm/smm_thesis-Medium.jpg")
.swiper-slide
+image("images/smm/smm_thesis-Medium.jpg")
.swiper-slide
+image("images/smm/smm_-bg_clean.jpg")
.swiper-slide
+image("images/smm/smm_pillow_3.jpg")
.swiper-slide
+image("images/smm/smm_pillow_5.jpg")
+vSlide("spekulative-gesellschaft")
.description
h1 Spekulative Gesellschaft
h4 2016-2017
p
| The Speculative Society (Spekulative Gesellschaft) was an everchanging group of individuals that organized events, happenings and exhibitions.
| I created a lot of the recent graphics, like invitation cards, logos, posters and leaflets.
+carousel
.swiper-slide
+image("images/spege/SpeGe_Logo.png")
.swiper-slide
+image("images/spege/MdSGhdnzt-Large.jpg")
.swiper-slide
+image("images/spege/SpeGe_Einladung1-Large.jpg")
.swiper-slide
+image("images/spege/niche_plakat.jpg")
.swiper-slide
+image("images/spege/GMU_Poster.jpg")
+vSlide("cheap-quick-dirty")
.description
h1 Cheap–Quick–Dirty
h4 03 2016
p
| Cheap and dirty posters for the exhibition called “Cheap Quick Dirty”, where students inventend B-Movies and created additional graphics.
+carousel
.swiper-slide
+image("images/cqd/cheapquickdirty_poster_RED.png")
.swiper-slide
+image("images/cqd/cheapquickdirty_poster_Orange-Medium.jpg")
.swiper-slide
+image("images/cqd/cheapquickdirty_poster_printed-Medium.jpg")
.swiper-slide
+image("images/cqd/cheapquickdirty_poster_glued-Medium.jpg")
+vSlide("mess-wth-tech-sense-thinking")
.description
h1 Mess with tech, sense & thinking
h4 02 2016
p
| Together with Rama Bielewski we designed a foldable Poster/Flyer combination for a hybrid event at
a(target="_blank" href="https://transmediale.de/content/the-mess-with-tech-sense-and-thinking") transmediale16
+carousel
.swiper-slide
+image("images/mtst/mtst_poster-Medium.jpg")
.swiper-slide
+image("images/mtst/mtst_flyer_cover-Medium.jpg")
.swiper-slide
+image("images/mtst/mtst_flyer_front-Medium.jpg")
.swiper-slide
+image("images/mtst/mtst_flyer_back-Medium.jpg")
+vSlide("media-art-award")
.description
h1 Preis der Medienkunst / Mediengestaltung
h4 02 2016
p
| The Media Art Award is an annual competition for recent graduates. With the help of #[+l("http://thegreeneyl.com") Gunnar Green] I created the minimalistic poster for the 2014 edition.
| The octahedron resembles a digital version of a handax, the first human tool. But it also stands for the 8 fields of study in Media Art and Design.
| A 3 dimensional version was given out as the first price.
+carousel
.swiper-slide
+image("images/pdm/pdm_black.jpg")
.swiper-slide
+image("images/pdm/pdm_white.png")
.swiper-slide
+image("images/pdm/pdm_mockup-Medium.jpg")
.swiper-pagination