XPUB
/
project.xpub.nl
65
1
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity

attempt to rename stephens project

Browse Source
master
Michael Murtaugh 5 months ago
parent 3333e8e2d4 bdb0ba95e4
commit 73b2f2011f
39 changed files with 1043 additions and 107 deletions
Show Stats Download Patch File Download Diff File

BIN
backplaces/fonts/Platypi-Italic[wght].woff2
View File

Binary file not shown.

BIN
backplaces/fonts/Platypi[wght].woff2
View File

Binary file not shown.

BIN
backplaces/fonts/Redaction_35-Regular.woff2
View File

Binary file not shown.

BIN
backplaces/img/cake3.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
backplaces/img/hermitagain.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 292 KiB

BIN
backplaces/img/purple.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 379 KiB

BIN
backplaces/img/solar2.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 226 KiB

103
backplaces/index.html
Unescape Escape View File

@ -4,29 +4,42 @@
<head>
<meta charset="utf-8">
<title>Project Title</title>
<title>BackPlaces</title>
<meta name="description" content="XPUB">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/pages.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/x-icon" href="img/purple.png">
</head>
<body>
<div id='wrapper'></div>
<a href='../' id='homebttn' class='ext'> << home</a>
<header>
<h1 id='project-title'>Project Title <a href='#hleft-text' class='show'> ⓘ</a></h1>
<h2 id='student-name'>Student name</h2>
<h1 id='project-title'>BackPlaces<a href='#hleft-text' class='show'> ⓘ</a></h1>
<h2 id='student-name'>ada varriale, 2024</h2>
<div id='hleft-text'>
<a href=# id='back'>
<div id='inner-hleft-text'>
<div id='ihtp'>
<object>
<div id='about-project'>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit ligula a aenean ultricies, montes venenatis sapien sodales ac dictumst enim porttitor curae porta facilisi massa, consequat sollicitudin libero bibendum in neque suscipit nulla quisque taciti. Hendrerit mauris himenaeos proin sem habitasse per ut est enim elementum eget nisl, pretium id ornare torquent lectus curae interdum conubia vivamus auctor. </p>
</div>
<hr align='left'>
<div id='about-student'>
<p>Bibendum maecenas cum faucibus per tincidunt metus ac, diam aliquam aliquet sociosqu parturient a mollis est, felis sem hendrerit rhoncus nisl urna. Ultricies ut risus class ridiculus vestibulum.</p>
<p><em>ada (just ada please) sometimes calls herself a designer and illustrator, sometimes a writer, sometimes a pastry chef. Mostly she calls her friends. </em></p><br>
<div class="navlinks">
<a href="https://vulnerable-interfaces.xpub.nl/backplaces/" id="navlink"> the project website</a>
<br>
<a href="https://vulnerable-interfaces.xpub.nl/ada/thesis.html" id="navlink"> my thesis (&lt;?water bodies&gt;)</a>
<br>
<a href="https://vulnerable-interfaces.xpub.nl/" id="navlink">vulnerable interfaces</a><br>
</div>
<div id="licensing-information">
<p>This work is free to distribute or modify under the terms of the SIXX
license as published by XPUB, either version one or
any later version. See the license on <a href="vulnerable-interfaces.xpub.nl/license"
class="ext">vulnerable-interfaces.xpub.nl/license</a> for more details.</p>
</div>
</div>
<a id='getback' class='int'> go back </a>
</object>
@ -37,35 +50,53 @@
</header>
<section id='main'>
<div id="galleries">
<div id='work'>
<h3 class='gal-title'>Work</h3>
<ul id='publist'>
<li><a href='https://yourdomain.org' target="_blank" class='ext'>Project Website</a></li>
</ul>
<img src="img/img1.jpg" class='workimg'/>
<img src="img/img2.jpg" class='workimg'/>
<img src="img/img3.jpg" class='workimg'/>
<img src="img/img4.jpg" class='workimg'/>
</div>
<div id='publication'>
<h3 class='gal-title'>Publication</h3>
<ul id='publist'>
<li><a href='thesis.pdf' target="_blank" class='ext'>Publication PDF</a></li>
</ul>
<img src="img/pub1.jpg" class='workimg'/>
<img src="img/pub2.jpg" class='workimg'/>
<img src="img/pub3.jpg" class='workimg'/>
<img src="img/pub4.jpg" class='workimg'/>
</div>
<div id='gradshow'>
<h3 class='gal-title'>Graduation Show</h3>
<img src="img/gradshow1.jpg" class='workimg'/>
<img src="img/gradshow2.jpg" class='workimg'/>
<img src="img/gradshow3.jpg" class='workimg'/>
<img src="img/gradshow4.jpg" class='workimg'/>
</div>
<!-- The iframe thingy -->
<figure>
<iframe src="https://vulnerable-interfaces.xpub.nl/backplaces/" title="backplaces">
</iframe>
</figure>
<!--description -->
<p>
Hi. I made this play for you; it’s a question to keep us alive together. Is all intimacy about bodies? What happens when our bodies distance intimacy from us?<br>
Backplaces is a web-based play. A short anthology of poems and stories about vulnerability, intimacy, and the internet. It explores the internet as a place for holding big feelings and intimacy when it is unbearable. As an homage to those who have been vulnerable with me I created "backplaces". They are tender online spaces for relief and acknowledgement of societal pain.<br> Some of these stories may evoke memories of pain. As you sit in the audience, know I am with you. If it feels overwhelming, you can step out, take a break, or leave. This isn't choreographed, and I care for you.
<br>
I hope you see what I saw in these stories. Sweet dreams now, and I'll talk to you soon.
<br><br>
love, Ada
</p>
<figcaption aria-hidden="true">Solar Sibling.</figcaption>
<br>
<img src="img/solar2.gif"
alt="Solar Sibling" />
<p>Told you I’d talk to you soon. This is the first act of this play, Solar Sibling. It reimagines user comments from TikTok videos about sibling relationships. To do this, I have taken the feelings behind the comments, found where they met my own, and used our shared words to write poems. Solar Sibling celebrates the vulnerabilities nurtured in online communities and invites you to share anonymously on the complexities of sibling relationships. Once you have whispered your sibling feelings to me, they will stay with me and I will never use nor share them.
</p>
<figcaption aria-hidden="true">Hermit Fantasy.</figcaption>
<br>
<img src="img/hermitagain.gif"
alt="Hermit Fantasy" />
<p>Hermit Fantasy is a short story about a bot and a hermit. It started when I conducted a survey about receiving emotional support on the internet. This is an imagined response to an email I received. The story explores the loneliness of both being online and offline. As an act, it's a series of letters, click by click.
</p>
<figcaption aria-hidden="true">Cake Intimacies.</figcaption>
<br>
<img src="img/cake3.gif"
alt="Cake Intimacies" />
<p>Cake Intimacies is a performance that took a year to bring together. It is a small selection of stories people told me that I held to memory and rewrote here. The stories come from two performances I hosted.
<br>
In the first, I asked participants to eat cake, sitting facing or away from each other, and share stories about cake and the internet. I hosted the second performance at the Art Meets Radical Openness Festival. There I predicted participants' future internet lives using felted archetypes. In return I received stories about feeling strong emotions on the internet.
</p>
</div>
</section>
</div>
</body>
</html>
</html>

290
backplaces/style.css
Unescape Escape View File

@ -0,0 +1,290 @@
:root {
--spot-color-1: #1E33FAff;
}
@font-face {
font-family: 'Platypi';
src: url('fonts/Platypi[wght].woff2');
font-weight: 300 800;
font-style: normal;
}
@font-face {
font-family: 'Platypi';
src: url('fonts/Platypi-Italic[wght].woff2');
font-weight: 300 800;
font-style: italic;
}
@font-face {
font-family: 'Redaction_Regular-35';
src: url('fonts/Redaction_Regular-35.woff2');
font-style: regular;
}
a {
color: var(--spot-color-1);
text-decoration: none;
}
#about-student p {
margin: 0;
}
blockquote {
background: linear-gradient(to top left, white, rgba(255, 153, 150, 0), #c048ff), linear-gradient(to top right, #8edf00, rgba(255, 153, 150, 0), #f13d2b) hsl(36deg 100% 50%);
background-size: 150% 150%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: gradientanimator 30s ease infinite;
-moz-animation: gradientanimator 30s ease infinite;
animation: gradientanimator 30s ease infinite;
}
@-webkit-keyframes gradientanimator {
0% { background-position: 0% 70%; }
50% { background-position: 100% 31%; }
100% { background-position: 0% 70%; }
}
@-moz-keyframes gradientanimator {
0% { background-position: 0% 70%; }
50% { background-position: 100% 31%; }
100% { background-position: 0% 70%; }
}
@keyframes gradientanimator {
0% { background-position: 0% 70%; }
50% { background-position: 100% 31%; }
100% { background-position: 0% 70%; }
}
body {
background-color: #fffdfb;
font-family: 'Platypi', serif;
font-size: 1rem;
font-synthesis: none;
line-height: 1.3;
margin: 0;
padding: 4rem;
box-sizing: border-box;
}
.navlinks {
position: relative;
font-family: 'Platypi';
font-style: normal;
font-weight: 300;
text-decoration: none;
padding: 0 0 0.5rem;
line-height: 160%;
}
.navlinks a:hover {
animation: wiggle 0.6s infinite;
}
@keyframes wiggle {
0%, 100% {
transform: scale(1);
}
25% {
transform: scale(0.8, 1.3);
}
50% {
transform: scale(1.1, 0.8);
}
75% {
transform: scale(0.7, 1.2);
}
}
.content-list {
font-size: 41px;
max-width: 40rem;
margin: auto;
margin-right: 0;
line-height: 3.5rem;
}
.content-list a {
color: inherit;
}
.content-list img {
width: 2rem;
height: auto;
vertical-align: middle;
filter: saturate(2);
}
.content-list a:hover img, .content-list img:hover {
animation: wiggle 0.6s infinite;
cursor: pointer;
}
#licensing-information {
font-size: 0.5rem;
position: fixed;
bottom: 0;
left: 0.2rem;
max-width: 23%;
padding: 0.5rem;
opacity: 0.8;
}
.container {
margin: 50px 0;
line-height: 3.5rem;
}
.container h1 {
font-style: normal;
}
.container h2 {
font-size: 20px;
max-width: 30%;
margin: 0;
margin-bottom: -0.5rem;
}
#content {
max-width: 40rem;
margin: auto;
margin-right: 0;
}
header {
line-height: 1.3;
}
h1, #project-title {
font-family: 'Platypi';
font-size: 1.6rem;
}
iframe {
width: 100%;
height: 20rem;
border-radius: 0.5rem;
overflow-x: hidden;
border: none;
}
img {
max-width: 100%;
padding: 0;
border-radius: 0.5rem;
}
figcaption {
font-size: 1rem;
padding: 1rem 0 0;
}
figure {
width: 100%;
margin: 0 0 2rem;
padding: 0;
}
hr {
border: none;
margin: 4rem;
}
#galleries {
width: 74%;
}
nav {
position: fixed;
}
nav a {
color: inherit;
}
nav h1 {
font-style: normal;
}
#script {
max-width: 40rem;
margin: auto;
margin-right: 0;
}
#script p {
margin-left: 12rem;
}
#script p:first-of-type {
margin-left: 0;
}
#script h2, #script h3 {
text-decoration: underline;
text-align: center;
}
#script strong {
position: absolute;
margin-left: -12rem;
width: 11rem;
}
::selection {
background: var(--spot-color-1);
color: #fff;
}
@media only screen and (max-width: 768px) {
body {
line-height: 1.3;
padding: 2rem;
}
.container {
line-height: 2rem;
margin: 70px 0;
}
.container h1 {
font-size: 30px;
font-style: normal;
}
.container h2 {
font-size: 20px;
margin-bottom: -0.25rem;
}
.content-list {
font-size: 22px;
line-height: 2rem;
}
.content-list img {
margin: -50px 0;
overflow-y: visible;
}
nav {
position: static;
}
nav h1 {
font-size: 1.8rem;
}
.gummies {
margin: 0;
}
.gummy {
width: 2.5rem;
}
}

257
css/vulnerable.css
Unescape Escape View File

@ -0,0 +1,257 @@
:root{
--spot-color-1: #009;
}
@font-face {
font-family: 'Platypi';
src: url('../fonts/Platypi[wght].woff2');
font-weight: 300 800;
font-style: normal;
}
@font-face {
font-family: 'Platypi';
src: url('../fonts/Platypi-Italic[wght].woff2');
font-weight: 300 800;
font-style: italic;
}
a {
color: var(--spot-color-1);
text-decoration: none;
}
#about-student p{
margin: 0;
}
blockquote{
background: linear-gradient(to top left, white, rgba(255, 153, 150, 0), #c048ff), linear-gradient(to top right, #8edf00, rgba(255, 153, 150, 0), #f13d2b) hsl(36deg 100% 50%);
background-size: 150% 150%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: gradientanimator 30s ease infinite;
-moz-animation: gradientanimator 30s ease infinite;
animation: gradientanimator 30s ease infinite;
}
@-webkit-keyframes gradientanimator {
0%{background-position:0% 70%}
50%{background-position:100% 31%}
100%{background-position:0% 70%}
}
@-moz-keyframes gradientanimator {
0%{background-position:0% 70%}
50%{background-position:100% 31%}
100%{background-position:0% 70%}
}
@keyframes gradientanimator {
0%{background-position:0% 70%}
50%{background-position:100% 31%}
100%{background-position:0% 70%}
}
body {
background-color: #fffdfb;
font-family: 'Platypi', serif;
font-size: 1.3125rem;
font-synthesis: none;
line-height: 1.3;
margin: 0;
padding: 4rem;
box-sizing: border-box;
}
button{
border: 1px solid var(--spot-color-1);
font-family: 'Platypi';
font-style: italic;
font-weight: 300;
background:none;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
}
button:hover{
animation: wiggle 0.6s infinite;
}
.content-list {
font-size: 41px;
max-width: 40rem;
margin: auto;
margin-right: 0;
line-height: 3.5rem;
a{color: inherit}
img {
width: 2rem;
height: auto;
vertical-align: middle;
filter: saturate(2);
}
a:hover img, img:hover {
animation: wiggle 0.6s infinite;
cursor: pointer;
}
}
.container {
margin: 50px 0;
line-height: 3.5rem;
h1 {font-style: normal}
h2 {
font-size: 40px;
max-width: 30%;
margin: 0;
margin-bottom: -0.5rem;
}
}
#content {
max-width: 40rem;
margin: auto;
margin-right: 0;
}
.desaturate{
filter: grayscale(90%) contrast(1.2) brightness(1.1);
}
.gummies{
display: flex;
margin: 2rem 0;
}
.gummy .caption{
opacity: 0;
transition: opacity 0.5s ease;
}
.gummy:hover .caption{
opacity: 1
}
.gummy img{
width: 4rem;
filter: saturate(2);
}
.gummy img:hover{
scale: 1;
animation: wiggle 0.6s infinite;
cursor: pointer;
}
header{
line-height:1.3;
}
h1, #project-title {
font-family: 'Platypi';
line-height: 1;
font-weight: 700;
font-size: 50px;
font-style: italic;
margin: 0 0 0.5rem;
}
iframe{
width: 100%;
height: 20rem;
border-radius: 0.5rem;
filter: grayscale(70%);
overflow-x: hidden;
border: none;
}
img{
max-width: 100%;
padding: 0;
border-radius: 0.5rem;
}
figcaption{
font-size: 0.6rem;
margin: 0.5rem 0 0 0.5rem;
}
figure{
width: 100%;
margin: 0 0 2rem;
padding: 0;
}
hr{
border: none;
margin: 4rem;
}
#galleries{
width: 74%;
}
nav{
position: fixed;
a{color: inherit;}
h1{font-style: normal;}
}
#script{
max-width: 40rem;
margin: auto;
margin-right: 0;
p{
margin-left: 12rem;
}
p:first-of-type{
margin-left: 0;
}
h2, h3 {
text-decoration: underline;
text-align: center;
}
strong {
position: absolute;
margin-left: -12rem;
width: 11rem;
}
}
::selection{
background: var(--spot-color-1);
color: #fff;
}
@keyframes wiggle {
25% {
transform: scale(0.8, 1.3);
}
50% {
transform: scale(1.1, 0.8);
}
75% {
transform: scale(0.7, 1.2);
}
}
@media only screen and (max-width: 768px){
body {
line-height: 1.3;
padding: 2rem;
}
.container {
line-height: 2rem;
margin: 70px 0; /* Adjusted for mobile */
h1 {
font-size: 30px;
font-style: normal;
}
h2 {
font-size: 20px;
margin-bottom: -0.25rem;
}
}
.content-list {
font-size: 22px;
line-height: 2rem;
img{
margin: -50px 0;
overflow-y:visible;
}
}
nav{
position: static;
h1{font-size: 1.8rem;}
.gummies{margin: 0;}
.gummy{width: 2.5rem;}
}
}

BIN
do-you-ever-dream-about-work/amro.jpeg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 212 KiB

BIN
do-you-ever-dream-about-work/dizzy.jpeg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 85 KiB

142
do-you-ever-dream-about-work/index.html
Unescape Escape View File

@ -4,29 +4,40 @@
<head>
<meta charset="utf-8">
<title>Project Title</title>
<title>do you ever dream about work?</title>
<meta name="description" content="XPUB">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/pages.css">
<link rel="stylesheet" type="text/css" href="../css/vulnerable.css">
<link rel="icon" type="image/x-icon" href="../img/red.png">
</head>
<body>
<div id='wrapper'></div>
<a href='../' id='homebttn' class='ext'> << home</a>
<header>
<h1 id='project-title'>Project Title <a href='#hleft-text' class='show'> ⓘ</a></h1>
<h2 id='student-name'>Student name</h2>
<h1 id='project-title'>do you ever dream about work?<a href='#hleft-text' class='show'> ⓘ</a></h1>
<h2 id='student-name'>stephen kerr<br> 2024</h2>
<div id='hleft-text'>
<a href=# id='back'>
<div id='inner-hleft-text'>
<div id='ihtp'>
<object>
<div id='about-project'>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit ligula a aenean ultricies, montes venenatis sapien sodales ac dictumst enim porttitor curae porta facilisi massa, consequat sollicitudin libero bibendum in neque suscipit nulla quisque taciti. Hendrerit mauris himenaeos proin sem habitasse per ut est enim elementum eget nisl, pretium id ornare torquent lectus curae interdum conubia vivamus auctor. </p>
</div>
<hr align='left'>
<div id='about-student'>
<p>Bibendum maecenas cum faucibus per tincidunt metus ac, diam aliquam aliquet sociosqu parturient a mollis est, felis sem hendrerit rhoncus nisl urna. Ultricies ut risus class ridiculus vestibulum.</p>
<p><em>stephen is a graphic designer or a musician or a very weird
and long dream.</em></p><br>
<button>
<a href="https://stephenkerrdesign.com" class="ext">stephenkerrdesign.com</a>
</button><br>
<button>
<a
href="https://pzwiki.wdka.nl/mediadesign/User:Ssstephen/Final_presentation"
class="ext">Wiki: more about the project</a>
</button><br>
<button>
<a href="https://stephenkerrdesign.com/theeeeesis/" class="ext">⊞ (the
research thesis)</a>
</button><br>
</div>
<a id='getback' class='int'> go back </a>
</object>
@ -37,35 +48,94 @@
</header>
<section id='main'>
<div id="galleries">
<div id='work'>
<h3 class='gal-title'>Work</h3>
<ul id='publist'>
<li><a href='https://yourdomain.org' target="_blank" class='ext'>Project Website</a></li>
</ul>
<img src="img/img1.jpg" class='workimg'/>
<img src="img/img2.jpg" class='workimg'/>
<img src="img/img3.jpg" class='workimg'/>
<img src="img/img4.jpg" class='workimg'/>
</div>
<div id='publication'>
<h3 class='gal-title'>Publication</h3>
<ul id='publist'>
<li><a href='thesis.pdf' target="_blank" class='ext'>Publication PDF</a></li>
</ul>
<img src="img/pub1.jpg" class='workimg'/>
<img src="img/pub2.jpg" class='workimg'/>
<img src="img/pub3.jpg" class='workimg'/>
<img src="img/pub4.jpg" class='workimg'/>
</div>
<div id='gradshow'>
<h3 class='gal-title'>Graduation Show</h3>
<img src="img/gradshow1.jpg" class='workimg'/>
<img src="img/gradshow2.jpg" class='workimg'/>
<img src="img/gradshow3.jpg" class='workimg'/>
<img src="img/gradshow4.jpg" class='workimg'/>
</div>
<!-- The iframe thingy -->
<figure>
<iframe src="https://stephenkerrdesign.com/typing/" title="typing">
</iframe>
<figcaption>
Interactive dream telling. Click then type your story.
</figcaption>
</figure>
<!-- Main description -->
<p>Reading an email in a dream and you can hear the voices of every word
you read. Or the one where you’re on a computer working, frantically
typing, late, stressed, rushed. What about that dream where you had no
idea how to do your job, everyone is going to know you’re a fake. In
this project I have made spaces for us to share our dreams about labour,
and through that allow conversations about our work, our working
conditions, and the feelings we’re left with when we fall asleep each
night.</p>
<p>For the past year I have spoken with designers, artists and makers
finding out how they spend their time in everyday life, what they
believe and how they feel. In our dreams we feel the weird bits the
most: hmm a bit uncomfortable, ooh that gave me a fright, aah so, so
sad. Through performances, online tools and storytelling, I want to hold
these dreams together, to unite our experiences. Online I have made <a
href="https://stephenkerrdesign.com/dream/" class="ext">tools to gather
stories</a> and <a href="https://stephenkerrdesign.com/typing/"
class="ext">tools to tell them</a>. I have facilitated <a
href="https://worm.org/production/opening-experimental-publishing-graduation-show-2024/"
class="ext">group dream re-enactments</a> (<a
href="https://art-meets.radical-openness.org/2024/program/turning-off-the-internet-slot-1/"
class="ext">a few times</a>), using felt dolls to share our night time
theatre.</p>
<!-- Cute pics -->
<figure>
<img src="keyboard24.jpeg"
alt="Keyboard of things designers have said. Our feelings about work." />
<figcaption aria-hidden="true">Keyboard of things designers have said.
Our feelings about work.</figcaption>
</figure>
<figure>
<img src="keyboard25.jpeg"
alt="The messages on the keys were gathered using experimental interview methods and questions." />
<figcaption aria-hidden="true">The messages on the keys were gathered
using experimental interview methods and questions.</figcaption>
</figure>
<figure>
<img src="keyboard26.jpeg"
alt="Except “it’s ok”: my brother said that to me on the phone one day." />
<figcaption aria-hidden="true">Except “it’s ok”: my brother said that to
me on the phone one day.</figcaption>
</figure>
<!-- Disabled for now cos broken -->
<!-- <figure>
<iframe src="https://stephenkerrdesign.com/dream" title="dream">
</iframe>
<figcaption>
Web page to share and read labour dreams. Scroll down for more.
</figcaption>
</figure> -->
<figure>
<img src="peecee.jpg" class="desaturate"
alt="Re-enacting dreams about work at Piet Zwart Institute, Rotterdam." />
<figcaption aria-hidden="true">Re-enacting dreams about work at Piet
Zwart Institute, Rotterdam.</figcaption>
</figure>
<figure>
<img src="amro.jpeg" class="desaturate"
alt="Collective dream re-enactment at Art Meets Radical Openness, Linz." />
<figcaption aria-hidden="true">Collective dream re-enactment at Art
Meets Radical Openness, Linz.</figcaption>
</figure>
<figure>
<img src="dizzy.jpeg" alt="Where do dreams come from?" />
<figcaption aria-hidden="true">Where do dreams come from?</figcaption>
</figure>
<h3 id="licensing-information">Licensing information</h3>
<p>This work is free to distribute or modify under the terms of the SIXX
license as published by XPUB, either version one of the SIXX License or
any later version. See the SIXX License for more details. A copy of the
license can be found on <a href="vulnerable-interfaces.xpub.nl/license"
class="ext">vulnerable-interfaces.xpub.nl/license</a>.</p>
</div>
</section>
</div>
</body>
</html>
</html>

BIN
do-you-ever-dream-about-work/keyboard24.jpeg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 148 KiB

BIN
do-you-ever-dream-about-work/keyboard25.jpeg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 147 KiB

BIN
do-you-ever-dream-about-work/keyboard26.jpeg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 221 KiB

BIN
do-you-ever-dream-about-work/peecee.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

BIN
do-you-ever-dream-about-work/red.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 371 KiB

257
do-you-ever-dream-about-work/style.css
Unescape Escape View File

@ -0,0 +1,257 @@
:root{
--spot-color-1: #009;
}
@font-face {
font-family: 'Platypi';
src: url('../fonts/Platypi[wght].woff2');
font-weight: 300 800;
font-style: normal;
}
@font-face {
font-family: 'Platypi';
src: url('../fonts/Platypi-Italic[wght].woff2');
font-weight: 300 800;
font-style: italic;
}
a {
color: var(--spot-color-1);
text-decoration: none;
}
#about-student p{
margin: 0;
}
blockquote{
background: linear-gradient(to top left, white, rgba(255, 153, 150, 0), #c048ff), linear-gradient(to top right, #8edf00, rgba(255, 153, 150, 0), #f13d2b) hsl(36deg 100% 50%);
background-size: 150% 150%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: gradientanimator 30s ease infinite;
-moz-animation: gradientanimator 30s ease infinite;
animation: gradientanimator 30s ease infinite;
}
@-webkit-keyframes gradientanimator {
0%{background-position:0% 70%}
50%{background-position:100% 31%}
100%{background-position:0% 70%}
}
@-moz-keyframes gradientanimator {
0%{background-position:0% 70%}
50%{background-position:100% 31%}
100%{background-position:0% 70%}
}
@keyframes gradientanimator {
0%{background-position:0% 70%}
50%{background-position:100% 31%}
100%{background-position:0% 70%}
}
body {
background-color: #fffdfb;
font-family: 'Platypi', serif;
font-size: 1.3125rem;
font-synthesis: none;
line-height: 1.3;
margin: 0;
padding: 4rem;
box-sizing: border-box;
}
button{
border: 1px solid var(--spot-color-1);
font-family: 'Platypi';
font-style: italic;
font-weight: 300;
background:none;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
}
button:hover{
animation: wiggle 0.6s infinite;
}
.content-list {
font-size: 41px;
max-width: 40rem;
margin: auto;
margin-right: 0;
line-height: 3.5rem;
a{color: inherit}
img {
width: 2rem;
height: auto;
vertical-align: middle;
filter: saturate(2);
}
a:hover img, img:hover {
animation: wiggle 0.6s infinite;
cursor: pointer;
}
}
.container {
margin: 50px 0;
line-height: 3.5rem;
h1 {font-style: normal}
h2 {
font-size: 40px;
max-width: 30%;
margin: 0;
margin-bottom: -0.5rem;
}
}
#content {
max-width: 40rem;
margin: auto;
margin-right: 0;
}
.desaturate{
filter: grayscale(90%) contrast(1.2) brightness(1.1);
}
.gummies{
display: flex;
margin: 2rem 0;
}
.gummy .caption{
opacity: 0;
transition: opacity 0.5s ease;
}
.gummy:hover .caption{
opacity: 1
}
.gummy img{
width: 4rem;
filter: saturate(2);
}
.gummy img:hover{
scale: 1;
animation: wiggle 0.6s infinite;
cursor: pointer;
}
header{
line-height:1.3;
}
h1, #project-title {
font-family: 'Platypi';
line-height: 1;
font-weight: 700;
font-size: 50px;
font-style: italic;
margin: 0 0 0.5rem;
}
iframe{
width: 100%;
height: 20rem;
border-radius: 0.5rem;
filter: grayscale(70%);
overflow-x: hidden;
border: none;
}
img{
max-width: 100%;
padding: 0;
border-radius: 0.5rem;
}
figcaption{
font-size: 0.6rem;
margin: 0.5rem 0 0 0.5rem;
}
figure{
width: 100%;
margin: 0 0 2rem;
padding: 0;
}
hr{
border: none;
margin: 4rem;
}
#galleries{
width: 74%;
}
nav{
position: fixed;
a{color: inherit;}
h1{font-style: normal;}
}
#script{
max-width: 40rem;
margin: auto;
margin-right: 0;
p{
margin-left: 12rem;
}
p:first-of-type{
margin-left: 0;
}
h2, h3 {
text-decoration: underline;
text-align: center;
}
strong {
position: absolute;
margin-left: -12rem;
width: 11rem;
}
}
::selection{
background: var(--spot-color-1);
color: #fff;
}
@keyframes wiggle {
25% {
transform: scale(0.8, 1.3);
}
50% {
transform: scale(1.1, 0.8);
}
75% {
transform: scale(0.7, 1.2);
}
}
@media only screen and (max-width: 768px){
body {
line-height: 1.3;
padding: 2rem;
}
.container {
line-height: 2rem;
margin: 70px 0; /* Adjusted for mobile */
h1 {
font-size: 30px;
font-style: normal;
}
h2 {
font-size: 20px;
margin-bottom: -0.25rem;
}
}
.content-list {
font-size: 22px;
line-height: 2rem;
img{
margin: -50px 0;
overflow-y:visible;
}
}
nav{
position: static;
h1{font-size: 1.8rem;}
.gummies{margin: 0;}
.gummy{width: 2.5rem;}
}
}

BIN
img/red.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 371 KiB

BIN
talking-documents/act1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 768 KiB

BIN
talking-documents/act2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 375 KiB

BIN
talking-documents/act3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 255 KiB

BIN
talking-documents/act7.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 292 KiB

BIN
talking-documents/amro.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 998 KiB

BIN
talking-documents/gemeente_front.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 374 KiB

51
talking-documents/index.html
Unescape Escape View File

@ -4,7 +4,7 @@
<head>
<meta charset="utf-8">
<title>Project Title</title>
<title>Talking Documents</title>
<meta name="description" content="XPUB">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/pages.css">
@ -14,19 +14,26 @@
<div id='wrapper'></div>
<a href='../' id='homebttn' class='ext'> << home</a>
<header>
<h1 id='project-title'>Project Title <a href='#hleft-text' class='show'> ⓘ</a></h1>
<h2 id='student-name'>Student name</h2>
<h1 id='project-title'>Talking Documents <a href='#hleft-text' class='show'> ⓘ</a></h1>
<h2 id='student-name'>Aglaia Petta</h2>
<div id='hleft-text'>
<a href=# id='back'>
<div id='inner-hleft-text'>
<div id='ihtp'>
<object>
<div id='about-project'>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit ligula a aenean ultricies, montes venenatis sapien sodales ac dictumst enim porttitor curae porta facilisi massa, consequat sollicitudin libero bibendum in neque suscipit nulla quisque taciti. Hendrerit mauris himenaeos proin sem habitasse per ut est enim elementum eget nisl, pretium id ornare torquent lectus curae interdum conubia vivamus auctor. </p>
<p>Talking Documents are performative bureaucratic text inspections that intend to create temporal public interventions through performative readings. I utilized the paperwork interface of my smaller-scale bureaucratic story in order to unravel and foreground questions related to the role of bureaucracy as less material border and as a regulatory mechanism reflecting narratives, ideologies, policies.</p>
<p>Central element of this project is a seven-act scenario that construct my personal paperwork story, unraveling the actual struggles of my communication with the government due to my eviction. I ended up conducting accidentally auto-ethnography as the project was dynamically being reshaped due to the material constraints of the bureaucratic timeline.</p>
<p>The body of the text of the “theatrical” script is sourced from the original documents, email threads as well as recordings of the conversations with the municipality of Rotterdam I documented and archived throughout this period. I preserved the sequence of the given sentences and by discarding the graphic design of the initial forms, I structured and repurposed the text into a playable scenario.</p>
<p>The transformation of the materiality of a document into a scenario to be enacted collectively in public aims to examine these artifacts and highlight the shrouded performative elements of these processes. The collective readings of these scenarios introduce an instant publishing method and a communal tool of inspecting bureaucratic bordering infrastructures. I organized a series of performative readings in different (institutional) contexts, public and semi-public like WDKA, Art Meets Radical Openness Festival in Linz, the City Hall of Rotterdam where I invited people to perform the play together, like a tiny theater.</p>
<p>The marginal voices of potential applicants are embodying and enacting a role. “The speech does not only describe but brings things into existence”(Austin, 1975). My intention was to stretch the limits of dramaturgical speech through vocalizing a document and turn individual administrative cases into public ones. How do the inscribed words in the documents are not descriptive but on the contrary “are instrumentalised in getting things done” (Butler,1997). Words as active agents. Bodies as low-tech “human microphones”.</p>
<p>A tiny website holds the vocal archive of the different recordings and soundscapes from these public moments published in the graduation exhibition of XPUB in June 2024. </p>
</div>
<hr align='left'>
<div id='about-student'>
<p>Bibendum maecenas cum faucibus per tincidunt metus ac, diam aliquam aliquet sociosqu parturient a mollis est, felis sem hendrerit rhoncus nisl urna. Ultricies ut risus class ridiculus vestibulum.</p>
<p>Aglaia Petta (she/her) was trained as an architect but finds herself mostly somewhere between artistic research and making. Her work floats in between performative archives, counter-mapping practices, the politics of public space and activism. She happened to come from Greece.<br></p>
<p>aglaiapetta@gmail.com</p>
</div>
<a id='getback' class='int'> go back </a>
</object>
@ -40,29 +47,31 @@
<div id='work'>
<h3 class='gal-title'>Work</h3>
<ul id='publist'>
<li><a href='https://yourdomain.org' target="_blank" class='ext'>Project Website</a></li>
<li><a href='https://vulnerable-interfaces.xpub.nl/aglaia/index.html' target="_blank" class='ext'>Collective Website: Vulnerable Interfaces</a></li>
<li><a href='' target="_blank" class='ext'>Tiny Website-Talking Documents</a></li>
<li><a href='https://pzwiki.wdka.nl/mediadesign/User:Aglaia' target="_blank" class='ext'>Workspace</a></li>
</ul>
<img src="img/img1.jpg" class='workimg'/>
<img src="img/img2.jpg" class='workimg'/>
<img src="img/img3.jpg" class='workimg'/>
<img src="img/img4.jpg" class='workimg'/>
<img src="act1.png" class='workimg'/>
<img src="act2.png" class='workimg'/>
<img src="act3.png" class='workimg'/>
<img src="act7.png" class='workimg'/>
</div>
<div id='publication'>
<h3 class='gal-title'>Publication</h3>
<h3 class='gal-title'>Publication [... pending]</h3>
<ul id='publist'>
<li><a href='thesis.pdf' target="_blank" class='ext'>Publication PDF</a></li>
<li><a href='thesis.pdf' target="_blank" class='ext'>Thesis </a></li>
<li><a href='sceanrio_A6_booklet.pdf' target="_blank" class='ext'>A6 Booklet of the Scenario </a></li>
</ul>
<img src="img/pub1.jpg" class='workimg'/>
<img src="img/pub2.jpg" class='workimg'/>
<img src="img/pub3.jpg" class='workimg'/>
<img src="img/pub4.jpg" class='workimg'/>
<img src="statue.jpg" class='workimg'/>
<img src="pub1.jpg" class='workimg'/>
</div>
<div id='gradshow'>
<h3 class='gal-title'>Graduation Show</h3>
<img src="img/gradshow1.jpg" class='workimg'/>
<img src="img/gradshow2.jpg" class='workimg'/>
<img src="img/gradshow3.jpg" class='workimg'/>
<img src="img/gradshow4.jpg" class='workimg'/>
<h3 class='gal-title'>Graduation Show - Installation [...pending]</h3>
</div>
</div>
</section>

BIN
talking-documents/pub1.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 281 KiB

BIN
talking-documents/sceanrio_A6_booklet.pdf
View File

Binary file not shown.

BIN
talking-documents/statue.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 277 KiB

BIN
wink/animationseq.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 553 KiB

BIN
wink/clickgame.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 931 KiB

50
wink/index.html
Unescape Escape View File

@ -4,7 +4,7 @@
<head>
<meta charset="utf-8">
<title>Project Title</title>
<title>Wink</title>
<meta name="description" content="XPUB">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/pages.css">
@ -14,19 +14,37 @@
<div id='wrapper'></div>
<a href='../' id='homebttn' class='ext'> << home</a>
<header>
<h1 id='project-title'>Project Title <a href='#hleft-text' class='show'> ⓘ</a></h1>
<h2 id='student-name'>Student name</h2>
<h1 id='project-title'>Wink! <a href='#hleft-text' class='show'> ⓘ</a></h1>
<h2 id='student-name'>Irmak Suzan Ertas</h2>
<div id='hleft-text'>
<a href=# id='back'>
<div id='inner-hleft-text'>
<div id='ihtp'>
<object>
<div id='about-project'>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit ligula a aenean ultricies, montes venenatis sapien sodales ac dictumst enim porttitor curae porta facilisi massa, consequat sollicitudin libero bibendum in neque suscipit nulla quisque taciti. Hendrerit mauris himenaeos proin sem habitasse per ut est enim elementum eget nisl, pretium id ornare torquent lectus curae interdum conubia vivamus auctor. </p>
<p>Wink is a prototype for an interactive picture book platform.
This platform aims to make reading into a mindfull and thought provoking process by using interactive and playful elements,
multiple stories within one narrative and sound elements. Especially today where consumerism and low attention span is a rising
issue especially amongst young readers, this was an important task to tackle. The thought of Wink emerged to find a more sustainable
and creative way of reading for elementary school children. </p>
<p>Working as a children’s literature editor for years, I came to a realisation that picture books were turning into another object
that kids read and consume on daily basis. At least this is what I observed in Turkey. Teachers and parents were finding it difficult
to find new books constantly or were tired of rereading the same book. As a young person in the publishing sector, I believe there
should be equal options for children as there is for adults; such as ebooks, audiobooks etc. But moreover a “book” that can be
redefined, reread or be interacted with. So I revisited an old story I wrote, translated to English and named it, “Bee Within”.</p>
<p>Bee Within, is a story about grief and it is based on my experiences throughout the years. I erased it, rewrote it, edited it, destroyed it multiple
times over the past years, simultaneously with new experiences of loss. In the end, I believe the story turned out to be an ode to
remembering or might I say an ode to not being able to forget or an ode to the fear of forgetting which I now think is a great
and sweet battle between death and life. I think it is an important subject to touch upon, especially for children dealing with
trauma in many parts of the world.</p>
<p>Over the past two years, experimenting with storytelling techniques, interactivity options and workshops with children and adults, around reading and doing various exercises on Bee Within, I improved the story to be a more playful and interactive one which can be re-read,
re-played and eventually re-formed non digitally to be reachable for all children.</p>
</div>
<hr align='left'>
<div id='about-student'>
<p>Bibendum maecenas cum faucibus per tincidunt metus ac, diam aliquam aliquet sociosqu parturient a mollis est, felis sem hendrerit rhoncus nisl urna. Ultricies ut risus class ridiculus vestibulum.</p>
<p>irmak ertaş (?rmak erta?) is an experimental publisher, writer, human rights activist and editor. She is the manager of the young writers platform İlkyaz, which aims to globally promote young writers from Turkey. She likes to play with impossible ways of forming a sentence, words that need a massage and punctuation in her poetry.
She is currently interested in and involved in research projects that engage with creativity for children, interactive literature, collective memory, healing and concrete poetry. Her work examines the implications of knot theory in relation to narratives, phonetic transcriptions and inscription. She enjoys using coding as an art form,
open source and digital tools in expanding or exhibiting her work. After completing her masters degree at Piet Zwart Institute, she would like to pursue her project on interactive e- books for children and keep promoting young literature. She lives in between Turkey and The Netherlands.</p>
</div>
<a id='getback' class='int'> go back </a>
</object>
@ -40,22 +58,26 @@
<div id='work'>
<h3 class='gal-title'>Work</h3>
<ul id='publist'>
<li><a href='https://yourdomain.org' target="_blank" class='ext'>Project Website</a></li>
<li><a href='https://vulnerable-interfaces.xpub.nl/irmak/index.html' target="_blank" class='ext'>Collective Website: Vulnerable Interfaces</a></li>
<li><a href='https://pzwiki.wdka.nl/mediadesign/User:Suzan' target="_blank" class='ext'>Wiki documentation</a></li>
</ul>
<img src="img/img1.jpg" class='workimg'/>
<img src="img/img2.jpg" class='workimg'/>
<img src="img/img3.jpg" class='workimg'/>
<img src="img/img4.jpg" class='workimg'/>
<img src="printp1.jpg" class='workimg'/>
<img src="printp2.jpg" class='workimg'/>
<img src="printp3.jpg" class='workimg'/>
<img src="clickgame.png" class='workimg'/>
<img src="leeszaalknotpoems.png" class='workimg'/>
</div>
<div id='publication'>
<h3 class='gal-title'>Publication</h3>
<ul id='publist'>
<li><a href='thesis.pdf' target="_blank" class='ext'>Publication PDF</a></li>
</ul>
<img src="img/pub1.jpg" class='workimg'/>
<img src="img/pub2.jpg" class='workimg'/>
<img src="img/pub3.jpg" class='workimg'/>
<img src="img/pub4.jpg" class='workimg'/>
<img src="twine.png" class='workimg'/>
<img src="animationseq.png" class='workimg'/>
<img src="unnamed.jpg" class='workimg'/>
<img src="printp1.png" class='workimg'/>
</div>
<div id='gradshow'>
<h3 class='gal-title'>Graduation Show</h3>

BIN
wink/leeszaalknotpoems.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 675 KiB

BIN
wink/printp1.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 MiB

BIN
wink/printp2.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 MiB

BIN
wink/printp3.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
wink/twine.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 265 KiB

BIN
wink/unnamed.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

Write Preview
Loading…
Cancel
Save