XPUB
/
gradshow24
6
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' of https://git.xpub.nl/XPUB/gradshow24

Browse Source
master
Stephen 5 months ago
parent 9ac23d2eb8 3a2bb27d5c
commit db4cfea2bf
19 changed files with 226 additions and 262 deletions
Show Stats Download Patch File Download Diff File

79
ada/index.html
Unescape Escape View File

@ -37,26 +37,13 @@
<p><a href="../backplaces">project website</a><br />
</p>
<p>Hi.<br />
I made this play for you. It is a question, for us to hold together.</p>
<p>Is all intimacy about bodies? What is it about our bodies that makes
intimacy? What happens when our bodies distance intimacy from us? This
small anthology of poems and short stories lives with these
questions—about having a body without intimacy and intimacy without a
body. This project is also a homage to everyone who has come before and
alongside me, sharing their vulnerability and emotions on the Internet.
I called the places where these things happen backplaces. They are
small, tender online rooms where people experiencing societally
uncomfortable pain can find relief, ease, and transcendence.<br />
</p>
<p>I made three backplaces for you to see, click, and feel: Solar
Sibling, Hermit Fantasy, and Cake Intimacies. Each of these is the
result of its own unique performance or project. Some of the stories I
will share carry memories of pain—both physical and emotional. As you
sit in the audience, know I am with you, holding your hand through each
scene. If the performance feels overwhelming at any point, you have my
full permission to step out, take a break, or leave. This is not
choreographed, and I care deeply for you.<br />
<p>Hi.<br/>
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?
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.
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.
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>
<figure>
<img src="index.png"
@ -64,62 +51,44 @@ alt="This is the Index, the stage of my play. Each felted item is an act." />
<figcaption aria-hidden="true">This is the Index, the stage of my play.
Each felted item is an act.</figcaption>
</figure>
<p>Solar Sibling is an online performance of shared loss about leaving
and siblings. This project used comments people left on TikTok poetry. I
extracted the emotions from these comments, mixed them with my own, and
crafted them into poems. It is an ongoing performance, ending only when
your feelings are secretly whispered to me. When you do, by typing into
the comment box, your feelings are sent to me and the first act closes
as the sun rises.<br />
<p> 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. <br/>
</p>
<figure>
<img src="solar-1.png"
<img src="solar1.png"
alt="The initial comment shaped poems and their sun count." />
<figcaption aria-hidden="true">The initial comment shaped poems and
their sun count.</figcaption>
</figure>
<figure>
<img src="solar-2.png"
<img src="solar2.png"
alt="The fillable comment where you can whisper your feelings to me." />
<figcaption aria-hidden="true">The fillable comment where you can
whisper your feelings to me.</figcaption>
</figure>
<p>Hermit Fantasy is a short story about a bot who wants to be a hermit.
Inspired by an email response from a survey I conducted about receiving
emotional support on the Internet, this story explores the contradiction
of being online while wanting to disconnect. As an act it’s a series of
letters, click by click.<br />
<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.
<br/>
</p>
<figure>
<img src="one.png" alt="The first letter." />
<img src="hermit1.png" alt="The first letter." />
<figcaption aria-hidden="true">The first letter.</figcaption>
</figure>
<figure>
<img src="two.png" alt="The second letter." />
<figcaption aria-hidden="true">The second letter.</figcaption>
<img src="hermit2.png" alt="The last letter." />
<figcaption aria-hidden="true">The last letter.</figcaption>
</figure>
<p>Cake Intimacies is a performance that took a year to bring together.
It is a small selection of stories people told me and I held to memory
and rewrote here. The stories come from two performances I hosted.
First, I asked participants to eat cake, sitting facing or away from
each other and sharing their stories about cake and the Internet. The
second performance was hosted at the Art Meets Radical Openness
Festival, as part of the Turning of the Internet workshop. For this
performance, I predicted participants’ future lives on the Internet
using felted archetypes and received stories from their Internet past in
return. Now the stories are here, each of them a cake with a filling
that tells a story, merging the bodily with the digital and making a
mess of it all.<br />
<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.<br />
</p>
<figure>
<img src="pie.png"
alt="The first two stories and their memory illustrations." />
<img src="cake1.png"
alt="The first story and its memory illustrations." />
<figcaption aria-hidden="true">The first two stories and their memory
illustrations.</figcaption>
</figure>
<figure>
<img src="phone-pie.png"
alt="The second stories in the way they were meant to be experienced." />
<img src="cake2.png"
alt="Another story on a phone." />
<figcaption aria-hidden="true">The second stories in the way they were
meant to be experienced.</figcaption>
</figure>
@ -137,9 +106,9 @@ intimacy and of bodies. The way it always is. Thankfully.<br />
<figure>
<img src="biscuit.png"
alt="Accept My Cookies, biscuits for the performance." />
<figcaption aria-hidden="true">Accept My Cookies, biscuits and bows for
<figcaption aria-hidden="true">An early prototype of Accept My Cookies, biscuits for
the performance.</figcaption>
</figure>
</div>
</body>
</body>ß
</html>

170
backplaces/pie/styles.css
Unescape Escape View File

@ -26,58 +26,59 @@
}
.content-item {
max-width: 80%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 80%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.content-item > * {
max-width: 50%;
}
.content-item > * {
max-width: 50%;
}
.content-item:nth-child(odd) > * {
align-self: flex-end;
text-align: right;
float: right;
}
.content-item:nth-child(even) > * {
align-self: flex-start;
position: static;
right: 0;
text-align: left;
}
.content-item:nth-child(odd) > * {
align-self: flex-end;
text-align: right;
float: right;
}
.content-item:nth-child(even) > * {
align-self: flex-start;
position: static;
right: 0;
text-align: left;
}
.content-item img {
height: auto;
}
.content-item img {
height: auto;
}
.content-item p {
margin: 10px 0;
font-family: 'Redaction-Regular';
line-height: 1.6rem;
font-size: 1.1rem;
}
.content-item p {
margin: 10px 0;
font-family: 'Redaction-Regular';
line-height: 1.6rem;
font-size: 1.1rem;
}
p::selection {
color: #ee98b1;
}
p::selection {
color: #ee98b1;
}
#home {
#home {
position: relative;
top: 30px;
left: 30px;
width: 100px;
height: auto;
opacity: 1;
}
}
#home:hover {
#home:hover {
cursor: pointer;
}
}
.letterBox {
.letterBox {
font-size: 18px;
padding: 20px;
max-width: 70%;
@ -90,33 +91,32 @@
justify-content: right;
z-index: 1000;
margin: auto;
}
}
.letterContents {
.letterContents {
width: 90%;
position: relative;
}
}
#closeButton {
#closeButton {
font-size: 40px;
cursor: pointer;
height: 30px;
}
}
#about {
#about {
position: relative;
top: -36px;
left: 60px;
width: 80px;
height: auto;
opacity: 1;
}
}
#about:hover {
#about:hover {
cursor: pointer;
}
}
#mute-btn {
#mute-btn {
color: #ee98b1;
font-family: 'Redaction-Regular', serif;
font-weight: bold;
@ -129,20 +129,20 @@
cursor: pointer;
border: none;
background: transparent;
}
}
#mute-btn:hover {
#mute-btn:hover {
color:#FCF6F1ff;
background-color:#ee98b1;
border-radius: 30px;
}
@media only screen and (max-width: 767px) {
body {
font-size: 1rem;
}
@media only screen and (max-width: 767px) {
body {
font-size: 1rem;
}
#about {
#about {
position: absolute;
top: 10px;
left: 40px;
@ -150,52 +150,54 @@
height: auto;
z-index: 1000;
opacity: 1;
}
}
#home {
position: absolute;
top: 20px;
left: 20px;
width: 70px;
height: auto;
opacity: 1;
}
#home {
position: absolute;
top: 20px;
left: 20px;
width: 70px;
height: auto;
opacity: 1;
}
.content-item {
.content-item {
font-size: 1rem;
width: 100%;
line-height: 25px;
}
.content-item > * {
}
.content-item > * {
width: 60%;
}
}
.content-item p {
.content-item p {
margin: 10px 0;
font-family: 'Redaction-Regular';
line-height: 24px;
font-size: 1rem;
width: 200px;
.content-item:first-of-type img {
}
.content-item:first-of-type img {
margin-top: 100px;
}
}
.content-item:last-child {
.content-item:last-child {
margin-bottom: 200px;
}
}
.content-item:nth-child(odd) {
align-self: flex-end;
text-align: right;
}
.content-item:nth-child(odd) {
align-self: flex-end;
text-align: right;
}
.content-item:nth-child(even) {
.content-item:nth-child(even) {
align-items: flex-start;
margin-right: 50px;
}
}
.letterBox {
.letterBox {
font-size: 16px;
padding: 18px;
max-width: 70%;
@ -209,15 +211,15 @@
z-index: 1000;
margin: auto;
margin-top: 110px;
}
}
.ending {
.ending {
display: flex;
flex-wrap: wrap;
justify-content: center;
font-family:'Redaction-Regular';
padding-top: 4rem;
font-size: 1rem;
}
}
}

2
index.html
Unescape Escape View File

@ -19,7 +19,7 @@
<img src="/img/yellow.png" alt="yellow" class="img">
<a href="/irmak/index.html" class=" content">Wink</a>
<img src="/img/yellow.png" alt="yellow" class="img">
<a href="/irmak/" class=" content">Fair Leads</a>
<a href="/irmak/thesis.html" class=" content">Fair Leads</a>
<img src="/img/red.png" alt="red" class="img">
<a href="/stephen/index.html" class=" content">What do graphic designers do all day, and why do they do it, and what does “graphic design” even mean?</a>
<img src="/img/red.png" alt="red" class="img">

25
irmak/index.html
Unescape Escape View File

@ -36,10 +36,10 @@
<h3 id="a-prototype-for-interactive-childrens-literature">A Prototype
for Interactive Children’s Literature</h3>
<p>Wink is a prototype for an interactive picture book platform. This
platform aims to make reading into a mindfull and thought provoking
platform aims to make reading into a mindful 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
within one narrative and sound elements. Especially today when
consumerism and low attention span are rising issues, 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>
@ -63,15 +63,10 @@ alt="“From the event at Leeszaal West. Some of the results of knotting text”
<figcaption aria-hidden="true">“From the event at Leeszaal West. Some of
the results of knotting text”</figcaption>
</figure>
<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 more 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,
<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 a 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 as many options
for children as there are for adults; such as ebooks, audiobooks etc. But
moreover, a “book” that can be redefined, reread or interacted with.
So I revisited an old story I wrote, translated it to English and named it
“Bee Within”.</p>
<figure>
<img src="../irmak/print3.jpg"
@ -110,7 +105,7 @@ book”</figcaption>
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
and eventually re-formed non digitally to be reachable to all
children.</p>
<figure>
<img src="../irmak/twine.png"
@ -125,8 +120,8 @@ alt="“Click game story of the Queen Bee that is reachable within Maya’s main
<figcaption aria-hidden="true">“Click game story of the Queen Bee that
is reachable within Maya’s main storyline.”</figcaption>
</figure>
<p>Here is some more documentation from the beggining of this journey
towards making accesible interactive narratives…</p>
<p>Here is some documentation from the beginning of this journey
towards making accessible interactive narratives…</p>
<figure>
<img src="../irmak/animationseq.png"
alt="“A small sequence of onclick animation for Bee Within”" />

0
talking_documents/act0_storyline.mp3 → talking-documents/act0_storyline.mp3
Unescape Escape View File

0
talking_documents/act1_postal-address.mp3 → talking-documents/act1_postal-address.mp3
Unescape Escape View File

0
talking_documents/act2_call.mp3 → talking-documents/act2_call.mp3
Unescape Escape View File

0
talking_documents/act3_objection.mp3 → talking-documents/act3_objection.mp3
Unescape Escape View File

0
talking_documents/act4_uni-question-[deleted_scene].mp3 → talking-documents/act4_uni-question-[deleted_scene].mp3
Unescape Escape View File

0
talking_documents/act5_deposit.mp3 → talking-documents/act5_deposit.mp3
Unescape Escape View File

0
talking_documents/act6-departure-form.mp3 → talking-documents/act6-departure-form.mp3
Unescape Escape View File

0
talking_documents/act7_confirmation-deregistration.mp3 → talking-documents/act7_confirmation-deregistration.mp3
Unescape Escape View File

0
talking_documents/appendix_passport.mp3 → talking-documents/appendix_passport.mp3
Unescape Escape View File

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

@ -0,0 +1,105 @@
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Graduation_Project</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<style>
.opac {
background-image: url('taftotita.jpg');
background-size: cover;
opacity: 0.7;
margin-top: 0%;
position: static;
}
h1 {
font-size: 25pt;
font-family: 'Courier New', Courier, monospace;
font-weight: 800;
color: red;
}
h2 {
font-size: 18pt;
font-family: 'Courier New', Courier, monospace;
font-weight: 800;
color: red;
}
h3 {
font-size: 12pt;
font-family: 'Courier New', Courier, monospace;
font-weight: 300;
color: red;
}
</style>
<body><pre>
<h1>Talking Documents</h1>
<p style="font-family:'courier' font-size:10pt; color:red;"></p>
<div class="opac">
<p style="background-image: url('taftotita.jpg');"></p>
</div>
<h2>Act -1</div></h2><h3>Introduction to the project</h3><audio controls="controls">
<source src="intro_scenario.mp3" type="audio/mp3">Your browser does not support the audio element.</audio>
<h2>Act 0</h2><h3>Storyline</h3><audio controls="controls">
<source src="act0_storyline.mp3" type="audio/mp3">Your browser does not support the audio element.
</audio>
<h2>Act 1</h2><h3>Postal Address Application</h3><audio controls="controls">
<source src="act1_postal-address.mp3" type="audio/mp3">Your browser does not support the audio element.
</audio>
<h2>Act 2</h2><h3>Call with the municipality of Rotterdam</h3><audio controls="controls">
<source src="act2_call.mp3" type="audio/mp3">Your browser does not support the audio element.
</audio>
<h2>Act 3</h2><h3>Objection Letter</h3><audio controls="controls">
<source src="act3_objection.mp3" type="audio/mp3">Your browser does not support the audio element.
</audio>
<h2>Act 4</h2><h3>Communication with the University [Deleted Scene]</h3><audio controls="controls">
<source src="act4_uni-question-[deleted_scene].mp3" type="audio/mp3">Your browser does not support the audio element.
</audio>
<h2>Act 5</h2><h3>Asking for my deposit</h3><audio controls="controls">
<source src="act5_deposit.mp3" type="audio/mp3">Your browser does not support the audio element.
</audio>
<h2>Act 6</h2><h3>Deregistartion from the Netherlands Application form</h3><audio controls="controls">
<source src="act6-departure-form.mp3" type="audio/mp3">Your browser does not support the audio element.
</audio>
<h2>Act 7</h2><h3>Confirmation of deregistration from the Netherlands</h3><audio controls="controls">
<source src="act7_confirmation-deregistration.mp3" type="audio/mp3">Your browser does not support the audio element.
</audio>
<h2>Appendix</h2><h3>Reading our identification documents</h3><audio controls="controls">
<source src="appendix_passport.mp3" type="audio/mp3">Your browser does not support the audio element.
</audio>
<!-- <h1><a href= "http://127.0.0.1:3000/thesis/thesis.html">Performing the Bureaucratic Border(line)s</a></h1> -->
</body>

0
talking_documents/intro_scenario.mp3 → talking-documents/intro_scenario.mp3
Unescape Escape View File

0
talking_documents/taftotita.jpg → talking-documents/taftotita.jpg
Unescape Escape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 340 KiB

After

Width:  |  Height:  |  Size: 340 KiB

0
talking_documents/thesis.html → talking-documents/thesis.html
Unescape Escape View File

23
talking_documents/hover.html
Unescape Escape View File

@ -1,23 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<style>
.hide {
display: none;
}
.myDIV:hover + .hide {
display: block;
color: red;
}
</style>
</head>
<body>
<h2>Display an Element on Hover</h2>
<div class="myDIV">Hover over me.</div>
<div class="hide">I am shown when someone hovers over the div above.</div>
</body>
</html>

84
talking_documents/talking_documents.html
Unescape Escape View File

@ -1,84 +0,0 @@
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Graduation_Project</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<style>
body {
background-image: url('taftotita.jpg');
}
</style>
<body><pre>
<h1>Talking Documents</h2>
<p style="font-family:'courier' font-size:10pt; color:red;" ></p>
<p style="background-image: url('taftotita.jpg');">
<h3><div class="myDIV">Act -1 introduction to the project</div></h3><audio controls="controls">
<source src="intro_scenario.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<h3>Act 0 - story line - Winjhaven building February 2024</h3><audio controls="controls">
<source src="act0_storyline.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<h3>Act 1 - Postal Address Application Scenario - Wijnhaven </h3><audio controls="controls">
<source src="act1_postal-address.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<h3>Act 2 - Call with the municipality of Rotterdam after the rejection of my application for a postal address - Art Meets Radical Openess Festival at Linz</h3><audio controls="controls">
<source src="act2_call.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<h3>Act 3 - Objection Letter - Art Meets Radical Openess Festival at Linz May 2024</h3><audio controls="controls">
<source src="act3_objection.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<h3>Act 4 - deregistartion Question/Email communication with the University [Deleted Scene]</h3><audio controls="controls">
<source src="act4_uni-question-[deleted_scene].mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<h3>Act 5 - Email communication with the agency asking for my deposit - Gemeente May 2024 </h3><audio controls="controls">
<source src="act5_deposit.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<h3>Act 6 - Deregistartion from the Netherlands Application form - Gemeente Rotterdam May 2024 </h3><audio controls="controls">
<source src="act6-departure-form.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<h3>Act 7 - Confirmation document of deregistration from the Netherlands application - read alone at my illegal sublet- </h3><audio controls="controls">
<source src="act7_confirmation-deregistration.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<h3>Appendix - Passport reading session - XPUB studio February 2024</h3><audio controls="controls">
<source src="appendix_passport.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<h1><a href= "http://127.0.0.1:3000/thesis/thesis.html">Performing the Bureaucratic Border(line)s</a></h1>
</body>
Write Preview
Loading…
Cancel
Save