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
suzan 6 months ago
parent f46aafcec7 b82f4a8001
commit 27a71b4dc9
94 changed files with 3340 additions and 3139 deletions
Show Stats Download Patch File Download Diff File

82
ada/index.html
Unescape Escape View File

@ -5,33 +5,36 @@
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../style.css"> <link rel="stylesheet" type="text/css" href="../style.css">
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/x-icon" href="/img/red.png">
</head> </head>
<body> <body>
<!-- Nav bar --> <!-- Nav bar -->
<nav> <nav>
<a href="../index.html" class="title">vulnerable interfaces</a> <h1><a href="../index.html" class="title">vulnerable <br>interfaces</a></h1>
<div class="gummies">
<div class="gummy-1"> <div class="gummy">
<a href="ada/index.html"><img src="img/purple.png" class="img2"></a> <a href="../ada/index.html"><img src="../img/purple.png" class="img2"></a>
<div class="caption">ada</div> <div class="caption">ada</div>
</div> </div>
<div class="gummy-2"> <div class="gummy">
<a href="aglaia/index.html"><img src="img/green.png" class="img2"></a> <a href="../aglaia/index.html"><img src="../img/green.png" class="img2"></a>
<div class="caption">aglaia</div> <div class="caption">aglaia</div>
</div> </div>
<div class="gummy-3"> <div class="gummy">
<a href="irmak/index.html"><img src="img/yellow.png" class="img2"></a> <a href="../irmak/index.html"><img src="../img/yellow.png" class="img2"></a>
<div class="caption">irmak</div> <div class="caption">irmak</div>
</div> </div>
<div class="gummy-4"> <div class="gummy">
<a href="stephen/index.html"><img src="img/red.png" class="img2"></a> <a href="../stephen/index.html"><img src="../img/red.png" class="img2"></a>
<div class="caption">stephen</div> <div class="caption">stephen</div>
</div> </div>
</div>
</nav> </nav>
<div id="content"><h1 id="backplaces">Backplaces</h1> <div id="content"><h1 id="backplaces">Backplaces</h1>
<p>adadesign.nl/backplaces<br /> <p>adadesign.nl/backplaces<br />
Hi.<br /> </p>
<p>Hi.<br />
I made this play for you. It is a question, for us to hold together.</p> 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 <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 intimacy? What happens when our bodies distance intimacy from us? This
@ -51,8 +54,13 @@ 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 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 full permission to step out, take a break, or leave. This is not
choreographed, and I care deeply for you.<br /> choreographed, and I care deeply for you.<br />
</p>
<figure>
<img src="index.png" <img src="index.png"
alt="This is the Index, the stage of my play. Each felted item is an act." /></p> 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 <p>Solar Sibling is an online performance of shared loss about leaving
and siblings. This project used comments people left on TikTok poetry. I and siblings. This project used comments people left on TikTok poetry. I
extracted the emotions from these comments, mixed them with my own, and extracted the emotions from these comments, mixed them with my own, and
@ -60,18 +68,33 @@ 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 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 the comment box, your feelings are sent to me and the first act closes
as the sun rises.<br /> as the sun rises.<br />
</p>
<figure>
<img src="solar-1.png" <img src="solar-1.png"
alt="The initial comment shaped poems and their sun count." /> <img alt="The initial comment shaped poems and their sun count." />
src="solar-2.png" <figcaption aria-hidden="true">The initial comment shaped poems and
alt="The fillable comment where you can whisper your feelings to me." /></p> their sun count.</figcaption>
</figure>
<figure>
<img src="solar-2.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. <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 Inspired by an email response from a survey I conducted about receiving
emotional support on the Internet, this story explores the contradiction 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 of being online while wanting to disconnect. As an act it’s a series of
letters, click by click.<br /> letters, click by click.<br />
</p> </p>
<p><img src="one.png" alt="The first letter." /> <img src="two.png" <figure>
alt="The second letter." /></p> <img src="one.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>
</figure>
<p>Cake Intimacies is a performance that took a year to bring together. <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 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. and rewrote here. The stories come from two performances I hosted.
@ -85,10 +108,18 @@ 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 that tells a story, merging the bodily with the digital and making a
mess of it all.<br /> mess of it all.<br />
</p> </p>
<p><img src="pie.png" <figure>
alt="The first two stories and their memory illustrations." /> <img <img src="pie.png"
src="phone-pie.png" alt="The first two stories and their memory illustrations." />
alt="The second stories in the way they were meant to be experienced." /></p> <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." />
<figcaption aria-hidden="true">The second stories in the way they were
meant to be experienced.</figcaption>
</figure>
<p>The play ends as all plays do. The curtains close, the website stays <p>The play ends as all plays do. The curtains close, the website stays
but the stories will never sound the same. For the final act, I give you but the stories will never sound the same. For the final act, I give you
the stories. It’s one last game, one last joke to ask my question again. the stories. It’s one last game, one last joke to ask my question again.
@ -99,8 +130,13 @@ yourself and with me, by eating sweets together. Sweets about digital
intimacies that never had a body. There is no moral, no bow to wrap the intimacies that never had a body. There is no moral, no bow to wrap the
story in. A great big mess of transcendence into the digital, of story in. A great big mess of transcendence into the digital, of
intimacy and of bodies. The way it always is. Thankfully.<br /> intimacy and of bodies. The way it always is. Thankfully.<br />
<img src="biscuits.png" </p>
alt="Accept My Cookies, biscuits and bows for the performance." /></p> <figure>
<img src="biscuit.png"
alt="Accept My Cookies, biscuits and bows for the performance." />
<figcaption aria-hidden="true">Accept My Cookies, biscuits and bows for
the performance.</figcaption>
</figure>
</div> </div>
</body> </body>
</html> </html>

24
ada/thesis.html
Unescape Escape View File

@ -5,28 +5,30 @@
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../style.css"> <link rel="stylesheet" type="text/css" href="../style.css">
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/x-icon" href="/img/red.png">
</head> </head>
<body> <body>
<!-- Nav bar --> <!-- Nav bar -->
<nav> <nav>
<a href="../index.html" class="title">vulnerable interfaces</a> <h1><a href="../index.html" class="title">vulnerable <br>interfaces</a></h1>
<div class="gummies">
<div class="gummy-1"> <div class="gummy">
<a href="ada/index.html"><img src="img/purple.png" class="img2"></a> <a href="../ada/index.html"><img src="../img/purple.png" class="img2"></a>
<div class="caption">ada</div> <div class="caption">ada</div>
</div> </div>
<div class="gummy-2"> <div class="gummy">
<a href="aglaia/index.html"><img src="img/green.png" class="img2"></a> <a href="../aglaia/index.html"><img src="../img/green.png" class="img2"></a>
<div class="caption">aglaia</div> <div class="caption">aglaia</div>
</div> </div>
<div class="gummy-3"> <div class="gummy">
<a href="irmak/index.html"><img src="img/yellow.png" class="img2"></a> <a href="../irmak/index.html"><img src="../img/yellow.png" class="img2"></a>
<div class="caption">irmak</div> <div class="caption">irmak</div>
</div> </div>
<div class="gummy-4"> <div class="gummy">
<a href="stephen/index.html"><img src="img/red.png" class="img2"></a> <a href="../stephen/index.html"><img src="../img/red.png" class="img2"></a>
<div class="caption">stephen</div> <div class="caption">stephen</div>
</div> </div>
</div>
</nav> </nav>
<div id="content"><h1 id="water-bodies">&lt;?water bodies&gt;</h1> <div id="content"><h1 id="water-bodies">&lt;?water bodies&gt;</h1>
@ -183,7 +185,7 @@ emphasizing their tangible bodily experiences. The community’s claim to
authenticity thus had to lie in the physical experiences of its members— authenticity thus had to lie in the physical experiences of its members—
the visible bodies and hearable voices, the weddings, births, and the visible bodies and hearable voices, the weddings, births, and
funerals (1993).<sup><span class="margin-note">You’re dreaming again, funerals (1993).<sup><span class="margin-note">You’re dreaming again,
good. Would you feel closer to me if you could hear my voice?<br> Is my good. Would you feel closer to me if you could hear my voice? Is my
voice a sound? Could it be a feeling?</span></sup></p> voice a sound? Could it be a feeling?</span></sup></p>
<p>Even then, and even by people with no interest in undermining the <p>Even then, and even by people with no interest in undermining the
value of the virtual, the distinction between physical and virtual was value of the virtual, the distinction between physical and virtual was

22
aglaia/index.html
Unescape Escape View File

@ -5,28 +5,30 @@
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../style.css"> <link rel="stylesheet" type="text/css" href="../style.css">
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/x-icon" href="/img/red.png">
</head> </head>
<body> <body>
<!-- Nav bar --> <!-- Nav bar -->
<nav> <nav>
<a href="../index.html" class="title">vulnerable interfaces</a> <h1><a href="../index.html" class="title">vulnerable <br>interfaces</a></h1>
<div class="gummies">
<div class="gummy-1"> <div class="gummy">
<a href="ada/index.html"><img src="img/purple.png" class="img2"></a> <a href="../ada/index.html"><img src="../img/purple.png" class="img2"></a>
<div class="caption">ada</div> <div class="caption">ada</div>
</div> </div>
<div class="gummy-2"> <div class="gummy">
<a href="aglaia/index.html"><img src="img/green.png" class="img2"></a> <a href="../aglaia/index.html"><img src="../img/green.png" class="img2"></a>
<div class="caption">aglaia</div> <div class="caption">aglaia</div>
</div> </div>
<div class="gummy-3"> <div class="gummy">
<a href="irmak/index.html"><img src="img/yellow.png" class="img2"></a> <a href="../irmak/index.html"><img src="../img/yellow.png" class="img2"></a>
<div class="caption">irmak</div> <div class="caption">irmak</div>
</div> </div>
<div class="gummy-4"> <div class="gummy">
<a href="stephen/index.html"><img src="img/red.png" class="img2"></a> <a href="../stephen/index.html"><img src="../img/red.png" class="img2"></a>
<div class="caption">stephen</div> <div class="caption">stephen</div>
</div> </div>
</div>
</nav> </nav>
<div id="content"><h1 id="talking-documents">Talking Documents</h1> <div id="content"><h1 id="talking-documents">Talking Documents</h1>

209
aglaia/thesis.html
Unescape Escape View File

@ -5,32 +5,35 @@
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../style.css"> <link rel="stylesheet" type="text/css" href="../style.css">
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/x-icon" href="/img/red.png">
</head> </head>
<body> <body>
<!-- Nav bar --> <!-- Nav bar -->
<nav> <nav>
<a href="../index.html" class="title">vulnerable interfaces</a> <h1><a href="../index.html" class="title">vulnerable <br>interfaces</a></h1>
<div class="gummies">
<div class="gummy-1"> <div class="gummy">
<a href="ada/index.html"><img src="img/purple.png" class="img2"></a> <a href="../ada/index.html"><img src="../img/purple.png" class="img2"></a>
<div class="caption">ada</div> <div class="caption">ada</div>
</div> </div>
<div class="gummy-2"> <div class="gummy">
<a href="aglaia/index.html"><img src="img/green.png" class="img2"></a> <a href="../aglaia/index.html"><img src="../img/green.png" class="img2"></a>
<div class="caption">aglaia</div> <div class="caption">aglaia</div>
</div> </div>
<div class="gummy-3"> <div class="gummy">
<a href="irmak/index.html"><img src="img/yellow.png" class="img2"></a> <a href="../irmak/index.html"><img src="../img/yellow.png" class="img2"></a>
<div class="caption">irmak</div> <div class="caption">irmak</div>
</div> </div>
<div class="gummy-4"> <div class="gummy">
<a href="stephen/index.html"><img src="img/red.png" class="img2"></a> <a href="../stephen/index.html"><img src="../img/red.png" class="img2"></a>
<div class="caption">stephen</div> <div class="caption">stephen</div>
</div> </div>
</div>
</nav> </nav>
<div id="content"><h1 id="performing-the-bureaucratic-borderlines">Performing the <div id="content"><h1 id="performing-the-bureaucratic-borderlines">Performing the
Bureaucratic Border(line)s</h1> Bureaucratic Border(line)s</h1>
<hr />
<h2 id="introduction">introduction</h2> <h2 id="introduction">introduction</h2>
<p>This thesis is an assemblage<sup><span class="margin-note">I live <p>This thesis is an assemblage<sup><span class="margin-note">I live
somewhere in the margins of scattered references, footnotes, citations, somewhere in the margins of scattered references, footnotes, citations,
@ -130,6 +133,7 @@ through performative readings. The intention is to underline how the
vocalization of bureaucracies as a tool can potentially reveal their vocalization of bureaucracies as a tool can potentially reveal their
territorial exclusive function and provide space for the invisible territorial exclusive function and provide space for the invisible
vulnerability.</p> vulnerability.</p>
<hr />
<blockquote> <blockquote>
<p>“on the other side is the river<br /> <p>“on the other side is the river<br />
and I cannot cross it<br /> and I cannot cross it<br />
@ -333,6 +337,7 @@ where everybody feels included. Democracy is a rule of law where
everybody feels * We, undocumented people, we don’t feel a sense of everybody feels * We, undocumented people, we don’t feel a sense of
belonging from the system.”</p> belonging from the system.”</p>
</blockquote> </blockquote>
<hr />
<h2 id="bureaucracy-as-immaterial-border">bureaucracy as immaterial <h2 id="bureaucracy-as-immaterial-border">bureaucracy as immaterial
border</h2> border</h2>
<p>Apart from the rigid visible borders, bureaucracy related to <p>Apart from the rigid visible borders, bureaucracy related to
@ -631,6 +636,7 @@ experiments - closely related to language as well as the performative
“nature” of these texts themselves. I was intrigued by how transforming “nature” of these texts themselves. I was intrigued by how transforming
the material conditions of a piece of text could influence the potential the material conditions of a piece of text could influence the potential
understandings and perceptions of its meaning.</p> understandings and perceptions of its meaning.</p>
<hr />
<h2 id="prototypes">prototypes</h2> <h2 id="prototypes">prototypes</h2>
<h4 id="section">1.</h4> <h4 id="section">1.</h4>
<p><strong>Title:</strong> “Quality Assurance Questionnaire <p><strong>Title:</strong> “Quality Assurance Questionnaire
@ -638,25 +644,25 @@ Censoring”<br />
<strong>When:</strong> October 2023<br /> <strong>When:</strong> October 2023<br />
<strong>Where:</strong> XPUB studio wall<br /> <strong>Where:</strong> XPUB studio wall<br />
<strong>Who:</strong> myself</p> <strong>Who:</strong> myself</p>
<p>Description: Some months ago my classmates and I received an email <p><strong>Description:</strong> Some months ago my classmates and I
with a questionnaire aimed at preparing us for the upcoming quality received an email with a questionnaire aimed at preparing us for the
assurance meeting within the school. Ada and I had a meeting, in an upcoming quality assurance meeting within the school. Ada and I had a
empty white room with closed doors, with an external collaborator of the meeting, in an empty white room with closed doors, with an external
university. The main request was to rate and answer the pre-formulated collaborator of the university. The main request was to rate and answer
questions covering issues about performance, different and multiple the pre-formulated questions covering issues about performance,
topics related to the course, the teaching staff, the facilities, the different and multiple topics related to the course, the teaching staff,
tools provided. The micro linguistic experiment of highlighting, the facilities, the tools provided. The micro linguistic experiment of
censoring and annotating this document aimed for an understanding of highlighting, censoring and annotating this document aimed for an
what a quality assurance meeting is within an educational understanding of what a quality assurance meeting is within an
institution.</p> educational institution.</p>
<p>Reflections-Thoughts: This experiment was my first attempt to start <p><strong>Reflections-Thoughts:</strong> This experiment was my first
interrogating and observing the language and the structure of a attempt to start interrogating and observing the language and the
bureaucratic document. How these “desired” standards propagated through structure of a bureaucratic document. How these “desired” standards
text. What is the role of the student-client in these processes as an propagated through text. What is the role of the student-client in these
esoteric gaze of control over the course and their teachers? My focus processes as an esoteric gaze of control over the course and their
was to locate and accumulate all the wording related to measurements, teachers? My focus was to locate and accumulate all the wording related
rate, quantity, assessments, statistics. Highlighting the to measurements, rate, quantity, assessments, statistics. Highlighting
disproportionate amount of metrics-related vocabulary was enough to the disproportionate amount of metrics-related vocabulary was enough to
craft the narrative around this process.</p> craft the narrative around this process.</p>
<p>These ‘rituals’ are components of a larger “culture of evidence”, <p>These ‘rituals’ are components of a larger “culture of evidence”,
serving as a tool that blurs the distinction between discourse and serving as a tool that blurs the distinction between discourse and
@ -672,6 +678,7 @@ alt="The linguistic experiment of the Quality Assurance Questionnaire Document"
<figcaption aria-hidden="true">The linguistic experiment of the Quality <figcaption aria-hidden="true">The linguistic experiment of the Quality
Assurance Questionnaire Document</figcaption> Assurance Questionnaire Document</figcaption>
</figure> </figure>
<hr />
<h4 id="section-1">2.</h4> <h4 id="section-1">2.</h4>
<p><strong>Title:</strong> “Department of Bureaucracy and Administration <p><strong>Title:</strong> “Department of Bureaucracy and Administration
Customs Enforcement”<br /> Customs Enforcement”<br />
@ -679,38 +686,38 @@ Customs Enforcement”<br />
<strong>Where:</strong> Leeszaal<sup><span class="margin-note">Community <strong>Where:</strong> Leeszaal<sup><span class="margin-note">Community
Library in Rotterdam West</span></sup><br /> Library in Rotterdam West</span></sup><br />
<strong>Who:</strong> XPUB peers, tutors, friends, alumni</p> <strong>Who:</strong> XPUB peers, tutors, friends, alumni</p>
<p>Description: During the first public moment at Leeszaal, I decided to <p><strong>Description:</strong> During the first public moment at
embody and enact the traditional role of a bureaucrat in a graphic and Leeszaal, I decided to embody and enact the traditional role of a
possibly absurd way performing a small “theatrical play”. I prepared a bureaucrat in a graphic and possibly absurd way performing a small
3-page and a 1-page document incorporating bureaucratic-form aesthetics “theatrical play”. I prepared a 3-page and a 1-page document
and requesting applicants’ fake data and their answers for questions incorporating bureaucratic-form aesthetics and requesting applicants’
related to educational bureaucracy. People receiving an applicant number fake data and their answers for questions related to educational
at the entrance of Leeszaal, queuing to collect their documents from the bureaucracy. People receiving an applicant number at the entrance of
administration “office”, filling forms, waiting, receiving stamps, Leeszaal, queuing to collect their documents from the administration
giving fingerprints and signing, waiting again were the main components “office”, filling forms, waiting, receiving stamps, giving fingerprints
of this act.</p> and signing, waiting again were the main components of this act.</p>
<p>Reflections-Thoughts: Beyond the information gathered through my <p><strong>Reflections-Thoughts:</strong> Beyond the information
bureaucratic-like questionnaires, the most crucial element of this gathered through my bureaucratic-like questionnaires, the most crucial
experiment was the understanding and highlighting of the hidden element of this experiment was the understanding and highlighting of the
performative elements that entrench these “rituals”. It was amazing hidden performative elements that entrench these “rituals”. It was
seeing the audience becoming instantly actors of the play enacting amazing seeing the audience becoming instantly actors of the play
willingly a administrative ritualistic scene. The provided context of enacting willingly a administrative ritualistic scene. The provided
this “play” was a social library hosting a masters course public event context of this “play” was a social library hosting a masters course
on graduation projects. I am wondering whether this asymphony between public event on graduation projects. I am wondering whether this
the repetitive bureaucratic acts within the space of Leeszaal, where asymphony between the repetitive bureaucratic acts within the space of
such acts are not expected to be performed, evoked contradictory Leeszaal, where such acts are not expected to be performed, evoked
feelings or thoughts. Over-identifying with a role was being contradictory feelings or thoughts. Over-identifying with a role was
instrumentalized as an “interrogation” of one’s own involvement in the being instrumentalized as an “interrogation” of one’s own involvement in
reproduction of social discourses, power, authority, hegemony.</p> the reproduction of social discourses, power, authority, hegemony.</p>
<figure> <figure>
<img src="../aglaia/queue.jpg" <img src="../aglaia/queue.jpg"
alt="Leeszaal West Rotterdam - November 2023 – People queuingI was thinking of queues as a spatial oppressive tool used often by (bureaucratic) authorities. The naturalized image of bodies-in-a-line waiting for “something” to happen at “some point” under the public gaze in an efficiently defined area. to receive their documents and sign" /> alt="Leeszaal West Rotterdam - November 2023 – People queuing to receive their documents and sign. I was thinking of queues as a spatial oppressive tool used often by (bureaucratic) authorities. The naturalized image of bodies-in-a-line waiting for “something” to happen at “some point” under the public gaze in an efficiently defined area." />
<figcaption aria-hidden="true">Leeszaal West Rotterdam - November 2023 – <figcaption aria-hidden="true">Leeszaal West Rotterdam - November 2023 –
People queuing<sup><span class="margin-note">I was thinking of queues as People queuing to receive their documents and sign. I was thinking of
a spatial oppressive tool used often by (bureaucratic) authorities. The queues as a spatial oppressive tool used often by (bureaucratic)
naturalized image of bodies-in-a-line waiting for “something” to happen authorities. The naturalized image of bodies-in-a-line waiting for
at “some point” under the public gaze in an efficiently defined “something” to happen at “some point” under the public gaze in an
area.</span></sup> to receive their documents and sign</figcaption> efficiently defined area.</figcaption>
</figure> </figure>
<figure> <figure>
<img src="../aglaia/mitsi.jpg" <img src="../aglaia/mitsi.jpg"
@ -718,21 +725,22 @@ alt="One of the forms that the audience had to fill out during the Lesszaal even
<figcaption aria-hidden="true">One of the forms that the audience had to <figcaption aria-hidden="true">One of the forms that the audience had to
fill out during the Lesszaal event</figcaption> fill out during the Lesszaal event</figcaption>
</figure> </figure>
<hr />
<h4 id="section-2">3.</h4> <h4 id="section-2">3.</h4>
<p><strong>Title:</strong> “Passport Reading Session”<br /> <p><strong>Title:</strong> “Passport Reading Session”<br />
<strong>When:</strong> January 2024<br /> <strong>When:</strong> January 2024<br />
<strong>Where:</strong> XML – XPUB studio<br /> <strong>Where:</strong> XML – XPUB studio<br />
<strong>Who:</strong> Ada, Aglaia, Stephen, Joseph</p> <strong>Who:</strong> Ada, Aglaia, Stephen, Joseph</p>
<p>Description: This prototype is a collective passport reading session. <p><strong>Description:</strong> This prototype is a collective passport
I asked my classmates to bring their passports or IDs and sitting in a reading session. I asked my classmates to bring their passports or IDs
circular set up we attempted to “scan” our documents. Every contributor and sitting in a circular set up we attempted to “scan” our documents.
took some time to browse, annotate verbally, interpret, understand, Every contributor took some time to browse, annotate verbally,
analyze, vocalize their thoughts on these artifacts, approaching them interpret, understand, analyze, vocalize their thoughts on these
from various perspectives. The three passports and one ID card were all artifacts, approaching them from various perspectives. The three
coming from European countries.</p> passports and one ID card were all coming from European countries.</p>
<p>Reflections-Thoughts: For the first time I observed this object so <p><strong>Reflections-Thoughts:</strong> For the first time I observed
closely. The documentation medium was a recording device, Ada’s mobile this object so closely. The documentation medium was a recording device,
phone. The recording was transcribed by vosk<sup><span Ada’s mobile phone. The recording was transcribed by vosk<sup><span
class="margin-note">Vosk is an offline open-source speech recognition class="margin-note">Vosk is an offline open-source speech recognition
toolkit.</span></sup> and myself and a small booklet of our passport toolkit.</span></sup> and myself and a small booklet of our passport
readings was created.</p> readings was created.</p>
@ -754,22 +762,27 @@ paths, how departure or arrival is smooth or cruel. Are there emotions
along the way? For some people these are documents “that embody power — along the way? For some people these are documents “that embody power —
minimal or no waiting, peaceful departure, warm and confident arrival” minimal or no waiting, peaceful departure, warm and confident arrival”
(Khosravi, 2021).</p> (Khosravi, 2021).</p>
<p><a href="../aglaia/passport1.png">Part of the A6 booklet of the <figure>
transcription of the passport readings session</a></p> <img src="../aglaia/passport1.png"
<p><a href="../aglaia/passport2.png"></a></p> alt="Part of the A6 booklet of the transcription of the passport readings session" />
<figcaption aria-hidden="true">Part of the A6 booklet of the
transcription of the passport readings session</figcaption>
</figure>
<p><img src="../aglaia/passport2.png" /></p>
<hr />
<h4 id="section-3">4.</h4> <h4 id="section-3">4.</h4>
<p><strong>Title:</strong> “Postal Address Application Scenario”<br /> <p><strong>Title:</strong> “Postal Address Application Scenario”<br />
<strong>When:</strong> February 2024<br /> <strong>When:</strong> February 2024<br />
<strong>Where:</strong> Room in Wijnhaven Building, 4th floor<br /> <strong>Where:</strong> Room in Wijnhaven Building, 4th floor<br />
<strong>Who:</strong> XPUB 1,2,3, tutors, Leslie</p> <strong>Who:</strong> XPUB 1,2,3, tutors, Leslie</p>
<p>Description: This scenario is the first part of a series of small <p><strong>Description:</strong> This scenario is the first part of a
episodes that construct a bureaucratic story unfolding the processes of series of small episodes that construct a bureaucratic story unfolding
my communication with the government. The body of the text of the the processes of my communication with the government. The body of the
“theatrical” script is sourced from the original documents as well as text of the “theatrical” script is sourced from the original documents
recordings of the conversation I had with the municipality throughout as well as recordings of the conversation I had with the municipality
this process. I preserved the sequence of the given sentences and by throughout this process. I preserved the sequence of the given sentences
discarding the graphic design of the initial form, I structured and and by discarding the graphic design of the initial form, I structured
repurposed the text into a scenario. The main actors were two and repurposed the text into a scenario. The main actors were two
bureaucrats vocalizing the questions addressed in the form, in turns and bureaucrats vocalizing the questions addressed in the form, in turns and
sometimes speaking simultaneously like a choir, three applicants sometimes speaking simultaneously like a choir, three applicants
answering the questions similarly while a narrator mainly provided the answering the questions similarly while a narrator mainly provided the
@ -784,24 +797,29 @@ standing still behind them while they were surrounded by the audience.
The main documentation media of the act were a camera on a tripod, a The main documentation media of the act were a camera on a tripod, a
recorder in the middle of the table and myself reconstructing the memory recorder in the middle of the table and myself reconstructing the memory
of the re-enactement at that present - 6 days later.</p> of the re-enactement at that present - 6 days later.</p>
<p>Reflections-Thoughts: Vocalizing and embodying the bureaucratic <p><strong>Reflections-Thoughts:</strong> Vocalizing and embodying the
questions was quite useful in acknowledging the government’s voice and bureaucratic questions was quite useful in acknowledging the
presence as something tangible rather than a floating, arbitrary entity. government’s voice and presence as something tangible rather than a
It was interesting observing the bureaucrats performing their role with floating, arbitrary entity. It was interesting observing the bureaucrats
confidence and entitlement, contrasting with the applicants who appeared performing their role with confidence and entitlement, contrasting with
to be more stressed to respond convincingly and promptly. There is a the applicants who appeared to be more stressed to respond convincingly
notable distinction between performativity and performance. Performing and promptly. There is a notable distinction between performativity and
consciously and theatrically amplifying real bureaucratic texts by performance. Performing consciously and theatrically amplifying real
occupying roles and overidentifying with them can constitute a bureaucratic texts by occupying roles and overidentifying with them can
diffractive moment, a tool itself. From bureaucratic text to constitute a diffractive moment, a tool itself. From bureaucratic text
performative text scenarios to speech. The embedded (but rather to performative text scenarios to speech. The embedded (but rather
unconscious) performativity of “real” bureaucratic rituals establishes unconscious) performativity of “real” bureaucratic rituals establishes
and empowers (bureaucratic) institutions through repetitive acts. These and empowers (bureaucratic) institutions through repetitive acts. These
theatrical moments attempt to highlight the shrouded performative theatrical moments attempt to highlight the shrouded performative
elements of these processes.</p> elements of these processes.</p>
<p><a href="../aglaia/postal.png">A6 booklet of the first chapter of the <figure>
<img src="../aglaia/postal.png"
alt="A6 booklet of the first chapter of the “theatrical” scenario created out of the Postal Address Application documents and performed by XPUB peers" />
<figcaption aria-hidden="true">A6 booklet of the first chapter of the
“theatrical” scenario created out of the Postal Address Application “theatrical” scenario created out of the Postal Address Application
documents and performed by XPUB peers</a></p> documents and performed by XPUB peers</figcaption>
</figure>
<hr />
<h2 id="conclusion">conclusion</h2> <h2 id="conclusion">conclusion</h2>
<h3 <h3
id="next-chapters-of-the-case-with-reference-number-a.b.2024.4.03188">next id="next-chapters-of-the-case-with-reference-number-a.b.2024.4.03188">next
@ -842,8 +860,10 @@ future applicants, traumatized students, injured bearers, bureaucratic
border crossers, stressed expired document holders or just curious border crossers, stressed expired document holders or just curious
people to share, vocalize, talk through, read out loud, amplify, people to share, vocalize, talk through, read out loud, amplify,
(un)name, unplace, dismantle the injurious words of these artifacts.</p> (un)name, unplace, dismantle the injurious words of these artifacts.</p>
<p><a href="../aglaia/objection1.png"></a> <a <hr />
href="../aglaia/objection2.png"></a></p> <p><img src="../aglaia/objection1.png" /> <img
src="../aglaia/objection2.png" /></p>
<hr />
<h4 id="we-didnt-cross-the-border-the-border-crossed-us20">“we didn’t <h4 id="we-didnt-cross-the-border-the-border-crossed-us20">“we didn’t
cross the border, the border crossed us”(20)</h4> cross the border, the border crossed us”(20)</h4>
<p>As I sit in the waiting area at the gate B7 in the airport preparing <p>As I sit in the waiting area at the gate B7 in the airport preparing
@ -856,6 +876,7 @@ multifaceted borders and get crossed and entrenched by them, but on the
contrary we start interrogating and shouting at the contexts and the contrary we start interrogating and shouting at the contexts and the
frameworks that construct them and render them invisible, natural and frameworks that construct them and render them invisible, natural and
powerful.</p> powerful.</p>
<hr />
<h2 id="references">references</h2> <h2 id="references">references</h2>
<p>Agamben, G. (2000) Means without end: Notes on politics. Minneapolis, <p>Agamben, G. (2000) Means without end: Notes on politics. Minneapolis,
MN: University of Minnesota Press.</p> MN: University of Minnesota Press.</p>

20
aglaia/thesis.md
Unescape Escape View File

@ -6,6 +6,7 @@ author: Aglaia
# Performing the Bureaucratic Border(line)s # Performing the Bureaucratic Border(line)s
---
## introduction ## introduction
@ -29,6 +30,8 @@ In the second chapter, I unpack bureaucracy and focus on its bordering function.
In the third and last chapter, I bridge the written text with the ongoing project that runs simultaneously as part of my graduation work in Experimental Publishing, where I mainly speak through my prototypes. Talking documents(5) are performative bureaucratic text inspections, vocal and non-vocal, that intend to create temporal public interventions through performative readings. The intention is to underline how the vocalization of bureaucracies as a tool can potentially reveal their territorial exclusive function and provide space for the invisible vulnerability. In the third and last chapter, I bridge the written text with the ongoing project that runs simultaneously as part of my graduation work in Experimental Publishing, where I mainly speak through my prototypes. Talking documents(5) are performative bureaucratic text inspections, vocal and non-vocal, that intend to create temporal public interventions through performative readings. The intention is to underline how the vocalization of bureaucracies as a tool can potentially reveal their territorial exclusive function and provide space for the invisible vulnerability.
---
> “on the other side is the river > “on the other side is the river
> and I cannot cross it > and I cannot cross it
> on the other side is the sea > on the other side is the sea
@ -91,6 +94,8 @@ According to Hannah Arendt, the right to have rights and claim somebody else’
> “…<sup><span class="margin-note">This is a transcribed recording of my phone during a protest on migration at Dam Square in Amsterdam. I insert part of the speech of a Palestinian woman addressing the matter of undocumentedness. Date and time of the recording 18th of June 2023, 15:05.</span></sup> I am here for the rights of the children which haven't be in the taking part in the education since they have undocumented mothers and they are more than *<sup><span class="margin-note">“*” means undecipherable</span></sup> years. I am here to represent mothers who are looking for a place to have a sense of belonging or how long are you trying to continue humiliating them and the female gender. I am here to express my frustration with IND<sup><span class="margin-note">Immigratie- en Naturalisatiedienst - Dutch Immigration and Naturalisation Service</span></sup>. So frustrated. And I will not stop talking about democracy. Democracy is the rule of law where everybody feels included. Democracy is a rule of law where everybody feels * We, undocumented people, we don't feel a sense of belonging from the system." > “…<sup><span class="margin-note">This is a transcribed recording of my phone during a protest on migration at Dam Square in Amsterdam. I insert part of the speech of a Palestinian woman addressing the matter of undocumentedness. Date and time of the recording 18th of June 2023, 15:05.</span></sup> I am here for the rights of the children which haven't be in the taking part in the education since they have undocumented mothers and they are more than *<sup><span class="margin-note">“*” means undecipherable</span></sup> years. I am here to represent mothers who are looking for a place to have a sense of belonging or how long are you trying to continue humiliating them and the female gender. I am here to express my frustration with IND<sup><span class="margin-note">Immigratie- en Naturalisatiedienst - Dutch Immigration and Naturalisation Service</span></sup>. So frustrated. And I will not stop talking about democracy. Democracy is the rule of law where everybody feels included. Democracy is a rule of law where everybody feels * We, undocumented people, we don't feel a sense of belonging from the system."
---
## bureaucracy as immaterial border ## bureaucracy as immaterial border
Apart from the rigid visible borders, bureaucracy related to migrants, refugees and asylum seekers can also constitute an in-between less visible borderland. I used to perceive bureaucracy as an immaterial and intangible entity. However, now I can claim that this assumption is not true. Bureaucracy is material and spatial and can be seen as an apparatus, a machine, a circuitry, an institution, a territory, a borderland, a body, a zone – a “dead zone of imagination” as Graeber claims. It can be inscribed on piles of papers, folders, drawers, booklets, passports, IDs, documents, screens, tapes, bodies, hospital corridors, offices, permissions to enter, stay, work, travel, exist, come and go, leave, visit family, bury a friend. Apart from the rigid visible borders, bureaucracy related to migrants, refugees and asylum seekers can also constitute an in-between less visible borderland. I used to perceive bureaucracy as an immaterial and intangible entity. However, now I can claim that this assumption is not true. Bureaucracy is material and spatial and can be seen as an apparatus, a machine, a circuitry, an institution, a territory, a borderland, a body, a zone – a “dead zone of imagination” as Graeber claims. It can be inscribed on piles of papers, folders, drawers, booklets, passports, IDs, documents, screens, tapes, bodies, hospital corridors, offices, permissions to enter, stay, work, travel, exist, come and go, leave, visit family, bury a friend.
@ -164,6 +169,8 @@ How performing a collection of small bureaucratic stories can function as an ins
I started working and engaging more with different bureaucratic material that my peers and I encountered regularly or appeared in our (e)mail (in)boxes and are partly related to our identities as foreign students coming from different places. I chose to start touching and looking for various bureaucracies that surround me as a personal filter towards it. From identification documents and application forms to rental contracts, funding applications, visa applications, quality assurance questionnaires related to the university, assessment criteria, supermarket point gathering cards, receipts. A sequence of locked doors to be unlocked more or less easily via multiple bureaucratic keys. The methods and tools used to scrutinize the administrative artifacts are not rigid or distinct. It is mainly a “collection” of small bureaucratic experiments - closely related to language as well as the performative “nature” of these texts themselves. I was intrigued by how transforming the material conditions of a piece of text could influence the potential understandings and perceptions of its meaning. I started working and engaging more with different bureaucratic material that my peers and I encountered regularly or appeared in our (e)mail (in)boxes and are partly related to our identities as foreign students coming from different places. I chose to start touching and looking for various bureaucracies that surround me as a personal filter towards it. From identification documents and application forms to rental contracts, funding applications, visa applications, quality assurance questionnaires related to the university, assessment criteria, supermarket point gathering cards, receipts. A sequence of locked doors to be unlocked more or less easily via multiple bureaucratic keys. The methods and tools used to scrutinize the administrative artifacts are not rigid or distinct. It is mainly a “collection” of small bureaucratic experiments - closely related to language as well as the performative “nature” of these texts themselves. I was intrigued by how transforming the material conditions of a piece of text could influence the potential understandings and perceptions of its meaning.
---
## prototypes ## prototypes
#### 1. #### 1.
@ -180,6 +187,8 @@ These 'rituals' are components of a larger “culture of evidence”, serving as
![The linguistic experiment of the Quality Assurance Questionnaire Document](../aglaia/quality.jpg) ![The linguistic experiment of the Quality Assurance Questionnaire Document](../aglaia/quality.jpg)
---
#### 2. #### 2.
**Title:** “Department of Bureaucracy and Administration Customs Enforcement” **Title:** “Department of Bureaucracy and Administration Customs Enforcement”
**When:** November 2023 **When:** November 2023
@ -195,6 +204,8 @@ The provided context of this “play” was a social library hosting a masters c
![One of the forms that the audience had to fill out during the Lesszaal event](../aglaia/mitsi.jpg) ![One of the forms that the audience had to fill out during the Lesszaal event](../aglaia/mitsi.jpg)
---
#### 3. #### 3.
**Title:** “Passport Reading Session” **Title:** “Passport Reading Session”
**When:** January 2024 **When:** January 2024
@ -214,6 +225,8 @@ We read the embedded signs, symbols, categories, texts, magical numbers in our p
![ ](../aglaia/passport2.png) ![ ](../aglaia/passport2.png)
---
#### 4. #### 4.
**Title:** “Postal Address Application Scenario” **Title:** “Postal Address Application Scenario”
**When:** February 2024 **When:** February 2024
@ -228,6 +241,8 @@ The first and the last moment of the performance was during a semi-public tryout
![A6 booklet of the first chapter of the “theatrical” scenario created out of the Postal Address Application documents and performed by XPUB peers](../aglaia/postal.png) ![A6 booklet of the first chapter of the “theatrical” scenario created out of the Postal Address Application documents and performed by XPUB peers](../aglaia/postal.png)
---
## conclusion ## conclusion
### next chapters of the case with reference number A.B.2024.4.03188 ### next chapters of the case with reference number A.B.2024.4.03188
@ -238,14 +253,19 @@ My case has finished by this time. I withdrew my objection [7/03/2024] and I de-
My intention is to facilitate a series of collective performative readings of bureaucratic scenarios or other portable paperwork stories as a way of publishing and inspecting bureaucratic bordering infrastructures. The marginal voices of potential applicants are embodying and performing a role. “The speech does not only describe but brings things into existence” (Austin, 1975). I would like to stretch the limits of dramaturgical speech through vocalizing a document in public with others and turn an individual administrative case into a public one. How do the inscribed words in the documents are not descriptive but on the contrary “are instrumentalized in getting things done” (Butler, 1997). Words as active agents. I am inviting past and future applicants, traumatized students, injured bearers, bureaucratic border crossers, stressed expired document holders or just curious people to share, vocalize, talk through, read out loud, amplify, (un)name, unplace, dismantle the injurious words of these artifacts. My intention is to facilitate a series of collective performative readings of bureaucratic scenarios or other portable paperwork stories as a way of publishing and inspecting bureaucratic bordering infrastructures. The marginal voices of potential applicants are embodying and performing a role. “The speech does not only describe but brings things into existence” (Austin, 1975). I would like to stretch the limits of dramaturgical speech through vocalizing a document in public with others and turn an individual administrative case into a public one. How do the inscribed words in the documents are not descriptive but on the contrary “are instrumentalized in getting things done” (Butler, 1997). Words as active agents. I am inviting past and future applicants, traumatized students, injured bearers, bureaucratic border crossers, stressed expired document holders or just curious people to share, vocalize, talk through, read out loud, amplify, (un)name, unplace, dismantle the injurious words of these artifacts.
---
![ ](../aglaia/objection1.png) ![ ](../aglaia/objection1.png)
![ ](../aglaia/objection2.png) ![ ](../aglaia/objection2.png)
---
#### “we didn’t cross the border, the border crossed us”(20) #### “we didn’t cross the border, the border crossed us”(20)
As I sit in the waiting area at the gate B7 in the airport preparing to come back to the Netherlands, I am writing the last lines of this text. I am thinking of all these borders and gates that my body was able to pass through smoothly, carrying my magical object through which I embody power- at least within this context. However, I yearn for a reality where we stop looking at those bodies that cross the multifaceted borders and get crossed and entrenched by them, but on the contrary we start interrogating and shouting at the contexts and the frameworks that construct them and render them invisible, natural and powerful. As I sit in the waiting area at the gate B7 in the airport preparing to come back to the Netherlands, I am writing the last lines of this text. I am thinking of all these borders and gates that my body was able to pass through smoothly, carrying my magical object through which I embody power- at least within this context. However, I yearn for a reality where we stop looking at those bodies that cross the multifaceted borders and get crossed and entrenched by them, but on the contrary we start interrogating and shouting at the contexts and the frameworks that construct them and render them invisible, natural and powerful.
---
## references ## references
Agamben, G. (2000) Means without end: Notes on politics. Minneapolis, MN: University of Minnesota Press. Agamben, G. (2000) Means without end: Notes on politics. Minneapolis, MN: University of Minnesota Press.

4
backplaces/README.md
Unescape Escape View File

@ -1,4 +0,0 @@
# backplaces
hi

BIN
backplaces/audio/mystic-forest.mp3
View File

Binary file not shown.

BIN
backplaces/css/.DS_Store vendored
View File

Binary file not shown.

0
backplaces/css/fonts/Redaction/webfonts/.DS_Store → backplaces/css/Redaction/.DS_Store vendored
Unescape Escape View File

0
backplaces/css/fonts/Redaction/webfonts/Redaction-Bold.woff2 → backplaces/css/Redaction/Redaction-Bold.woff2
Unescape Escape View File

0
backplaces/css/fonts/Redaction/webfonts/Redaction-Italic.woff2 → backplaces/css/Redaction/Redaction-Italic.woff2
Unescape Escape View File

0
backplaces/css/fonts/Redaction/webfonts/Redaction-Regular.woff2 → backplaces/css/Redaction/Redaction-Regular.woff2
Unescape Escape View File

0
backplaces/css/fonts/Redaction/webfonts/Redaction_10-Bold.woff2 → backplaces/css/Redaction/Redaction_10-Bold.woff2
Unescape Escape View File

0
backplaces/css/fonts/Redaction/webfonts/Redaction_10-Italic.woff2 → backplaces/css/Redaction/Redaction_10-Italic.woff2
Unescape Escape View File

0
backplaces/css/fonts/Redaction/webfonts/Redaction_10-Regular.woff2 → backplaces/css/Redaction/Redaction_10-Regular.woff2
Unescape Escape View File

0
backplaces/css/fonts/Redaction/webfonts/Redaction_100-Bold.woff2 → backplaces/css/Redaction/Redaction_100-Bold.woff2
Unescape Escape View File

0
backplaces/css/fonts/Redaction/webfonts/Redaction_100-Italic.woff2 → backplaces/css/Redaction/Redaction_100-Italic.woff2
Unescape Escape View File

0
backplaces/css/fonts/Redaction/webfonts/Redaction_100-Regular.woff2 → backplaces/css/Redaction/Redaction_100-Regular.woff2
Unescape Escape View File

0
backplaces/css/fonts/Redaction/webfonts/Redaction_20-Bold.woff2 → backplaces/css/Redaction/Redaction_20-Bold.woff2
Unescape Escape View File

0
backplaces/css/fonts/Redaction/webfonts/Redaction_20-Italic.woff2 → backplaces/css/Redaction/Redaction_20-Italic.woff2
Unescape Escape View File

0
backplaces/css/fonts/Redaction/webfonts/Redaction_20-Regular.woff2 → backplaces/css/Redaction/Redaction_20-Regular.woff2
Unescape Escape View File

0
backplaces/css/fonts/Redaction/webfonts/Redaction_35-Bold.woff2 → backplaces/css/Redaction/Redaction_35-Bold.woff2
Unescape Escape View File

0
backplaces/css/fonts/Redaction/webfonts/Redaction_35-Italic.woff2 → backplaces/css/Redaction/Redaction_35-Italic.woff2
Unescape Escape View File

0
backplaces/css/fonts/Redaction/webfonts/Redaction_35-Regular.woff2 → backplaces/css/Redaction/Redaction_35-Regular.woff2
Unescape Escape View File

0
backplaces/css/fonts/Redaction/webfonts/Redaction_50-Bold.woff2 → backplaces/css/Redaction/Redaction_50-Bold.woff2
Unescape Escape View File

0
backplaces/css/fonts/Redaction/webfonts/Redaction_50-Italic.woff2 → backplaces/css/Redaction/Redaction_50-Italic.woff2
Unescape Escape View File

0
backplaces/css/fonts/Redaction/webfonts/Redaction_50-Regular.woff2 → backplaces/css/Redaction/Redaction_50-Regular.woff2
Unescape Escape View File

0
backplaces/css/fonts/Redaction/webfonts/Redaction_70-Bold.woff2 → backplaces/css/Redaction/Redaction_70-Bold.woff2
Unescape Escape View File

0
backplaces/css/fonts/Redaction/webfonts/Redaction_70-Italic.woff2 → backplaces/css/Redaction/Redaction_70-Italic.woff2
Unescape Escape View File

0
backplaces/css/fonts/Redaction/webfonts/Redaction_70-Regular.woff2 → backplaces/css/Redaction/Redaction_70-Regular.woff2
Unescape Escape View File

42
backplaces/css/fonts.css
Unescape Escape View File

@ -1,75 +1,47 @@
@font-face { @font-face {
font-family: 'Redaction-Regular'; font-family: 'Redaction-Regular';
src: url('../css/fonts/Redaction/webfonts/Redaction-Regular.woff2') format('opentype'); src: url('./Redaction//Redaction-Regular.woff2')format('opentype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Redaction_10-Regular'; font-family: 'Redaction_10-Regular';
src: url('../css/fonts/Redaction/webfonts/Redaction_10-Regular.woff2') format('opentype'); src: url('./Redaction//Redaction_10-Regular.woff2') format('opentype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Redaction_20-Regular'; font-family: 'Redaction_20-Regular';
src: url('../css/fonts/Redaction/webfonts/Redaction_20-Regular.woff2') format('opentype'); src: url('./Redaction//Redaction_20-Regular.woff2') format('opentype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Redaction_35-Regular'; font-family: 'Redaction_35-Regular';
src: url('../css/fonts/Redaction/webfonts/Redaction_35-Regular.woff2') format('opentype'); src: url('./Redaction//Redaction_35-Regular.woff2') format('opentype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Redaction_50-Regular'; font-family: 'Redaction_50-Regular';
src: url('../css/fonts/Redaction/webfonts/Redaction_50-Regular.woff2') format('opentype'); src: url('./Redaction//Redaction_50-Regular.woff2') format('opentype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Redaction_70-Regular'; font-family: 'Redaction_70-Regular';
src: url('../css/fonts/Redaction/webfonts/Redaction_70-Regular.woff2') format('opentype'); src: url('./Redaction/Redaction_70-Regular.woff2') format('opentype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Redaction_100-Regular'; font-family: 'Redaction_100-Regular';
src: url('../css/fonts/Redaction/webfonts/Redaction_100-Regular.woff2') format('opentype'); src: url('./Redaction//Redaction_100-Regular.woff2') format('opentype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Karrik-Regular';
src: url('../css/fonts/karrik_fonts-main/WOFF/Karrik-Regular.woff') format('opentype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'VG5000-Regular';
src: url('../css/fonts/vg5000-master/webfonts/VG5000-Regular_web.woff') format('opentype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'WorkSans-Thin';
src: url('css/fonts/worksans/WorkSans-Thin.woff') format('opentype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'WorkSans-Medium';
src: url('../css/fonts/worksans/WorkSans-Medium.woff2') format('opentype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }

BIN
backplaces/css/fonts/Redaction/.DS_Store vendored
View File

Binary file not shown.

BIN
backplaces/css/fonts/Redaction/OTF/Redaction-Bold.otf
View File

Binary file not shown.

BIN
backplaces/css/fonts/Redaction/OTF/Redaction-Italic.otf
View File

Binary file not shown.

BIN
backplaces/css/fonts/Redaction/OTF/Redaction-Regular.otf
View File

Binary file not shown.

BIN
backplaces/css/fonts/Redaction/OTF/Redaction10-Bold.otf
View File

Binary file not shown.

BIN
backplaces/css/fonts/Redaction/OTF/Redaction10-Italic.otf
View File

Binary file not shown.

BIN
backplaces/css/fonts/Redaction/OTF/Redaction10-Regular.otf
View File

Binary file not shown.

BIN
backplaces/css/fonts/Redaction/OTF/Redaction100-Bold.otf
View File

Binary file not shown.

BIN
backplaces/css/fonts/Redaction/OTF/Redaction100-Italic.otf
View File

Binary file not shown.

BIN
backplaces/css/fonts/Redaction/OTF/Redaction100-Regular.otf
View File

Binary file not shown.

BIN
backplaces/css/fonts/Redaction/OTF/Redaction20-Bold.otf
View File

Binary file not shown.

BIN
backplaces/css/fonts/Redaction/OTF/Redaction20-Italic.otf
View File

Binary file not shown.

BIN
backplaces/css/fonts/Redaction/OTF/Redaction20-Regular.otf
View File

Binary file not shown.

BIN
backplaces/css/fonts/Redaction/OTF/Redaction35-Bold.otf
View File

Binary file not shown.

BIN
backplaces/css/fonts/Redaction/OTF/Redaction35-Italic.otf
View File

Binary file not shown.

BIN
backplaces/css/fonts/Redaction/OTF/Redaction35-Regular.otf
View File

Binary file not shown.

BIN
backplaces/css/fonts/Redaction/OTF/Redaction50-Bold.otf
View File

Binary file not shown.

BIN
backplaces/css/fonts/Redaction/OTF/Redaction50-Italic.otf
View File

Binary file not shown.

BIN
backplaces/css/fonts/Redaction/OTF/Redaction50-Regular.otf
View File

Binary file not shown.

BIN
backplaces/css/fonts/Redaction/OTF/Redaction70-Bold.otf
View File

Binary file not shown.

BIN
backplaces/css/fonts/Redaction/OTF/Redaction70-Italic.otf
View File

Binary file not shown.

BIN
backplaces/css/fonts/Redaction/OTF/Redaction70-Regular.otf
View File

Binary file not shown.

110
backplaces/css/style_index.css
Unescape Escape View File

@ -1,6 +1,11 @@
body { body {
background-color: rgb(53, 67, 196); background-color: rgb(53, 67, 196);
min-height: 100vH; min-height: 100vh;
font-family: 'Redaction-Regular', serif;
padding: 0.2rem;
display: flex;
justify-content: center;
align-items: center;
} }
.container { .container {
@ -13,7 +18,6 @@ body {
font-family: 'Redaction_35-Regular', serif; font-family: 'Redaction_35-Regular', serif;
color: #FCF6F1ff; color: #FCF6F1ff;
font-size: 8rem; font-size: 8rem;
flex: 0 0 auto;
text-align: left; text-align: left;
margin-bottom: 20px; margin-bottom: 20px;
} }
@ -39,33 +43,52 @@ body {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
padding: 20px; align-items: center;
} }
.photos, img { .img-container {
height: 250px; flex: 0 0 250px;
display: flex;
flex-direction: column;
align-items: center;
margin: 10px; margin: 10px;
margin-top: 10px; text-decoration: none;
flex: auto;
} }
.img-container { .img-container:nth-child(2) {
position: relative; order: 3;
margin: 10px;
} }
.img-container img { .img {
display: block; height: 250px;
width: auto;
} }
.img-container .caption { .caption {
position: absolute; display: flex;
left: 0; align-items: center;
width: 100%; justify-content: center;
text-align: center; padding-top: 1rem;
font-size: 2rem;
font-family: 'Redaction-Regular';
color: #FCF6F1ff; color: #FCF6F1ff;
font-size: 20px; opacity: 0;
transition: opacity 0.3s ease;
}
.img-container:hover .caption {
opacity: 1;
}
.caption {
display: flex;
align-items: center;
justify-content: center;
padding-top: 1rem;
font-size: 2rem;
font-family: 'Redaction-Regular'; font-family: 'Redaction-Regular';
color: #FCF6F1ff;
opacity: 0; opacity: 0;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
} }
@ -74,13 +97,30 @@ body {
opacity: 1; opacity: 1;
} }
/* Ensures the second image is vertically aligned */
.img2 { .img2 {
margin-top: 250px; margin-top: 10px;
}
.caption {
display: flex;
align-items: center;
justify-content: center;
padding-top: 1rem;
font-size: 2rem;
font-family: 'Redaction-Regular';
color: #FCF6F1ff;
opacity: 0;
transition: opacity 0.3s ease;
}
.img-container:hover .caption {
opacity: 1;
} }
.letterBox { .letterBox {
line-height: 150%; line-height: 150%;
font-size: 17px; font-size: 1.3rem;
padding: 30px; padding: 30px;
margin: 60px; margin: 60px;
max-width: 99%; max-width: 99%;
@ -95,7 +135,7 @@ body {
flex-wrap: wrap; flex-wrap: wrap;
justify-content: right; justify-content: right;
position: absolute; position: absolute;
font-family: 'WorkSans-Medium';
} }
.letterContents { .letterContents {
@ -126,6 +166,7 @@ body {
.container { .container {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
flex-wrap: nowrap
} }
.title { .title {
@ -138,28 +179,31 @@ body {
.title-full { .title-full {
display: none; display: none;
} }
.subtitle {
display: none;
}
.title-mobile { .title-mobile {
display: block; display: block;
font-family: 'Redaction_35-Regular', serif; font-family: 'Redaction_35-Regular', serif;
color: #FCF6F1ff; color: #FCF6F1ff;
font-size: 5rem; /* Adjust font size */ font-size: 5rem;
position: relative;
left: -3rem;
margin-bottom: 10px; margin-bottom: 10px;
margin-top: -40px; margin-top: -40px;
margin-left: -20px;
line-height: 100%; line-height: 100%;
} }
.subtitle { .sub-mobile {
font-size: 1rem; font-size: 1rem;
display: inline-block;
width: 50px; width: 50px;
right: 140px; line-height: 1.5rem;
text-align: left;
position: absolute;
top: 50px;
} }
.images img { .photos img {
margin: 20px; margin: 20px;
margin-top: 20px; margin-top: 20px;
height: 200px; height: 200px;
@ -176,7 +220,7 @@ body {
.letterBox { .letterBox {
line-height: 130%; line-height: 130%;
font-size: 11px; font-size: 1rem;
padding: 30px; padding: 30px;
margin: 30px; margin: 30px;
max-width: 99%; max-width: 99%;
@ -191,7 +235,11 @@ body {
flex-wrap: wrap; flex-wrap: wrap;
justify-content: right; justify-content: right;
position: absolute; position: absolute;
font-family: 'WorkSans-Medium';
}
.letterBox p {
margin-top: 0 ;
} }
.img-container .caption { .img-container .caption {

2
backplaces/hermit/hermit.html
Unescape Escape View File

@ -13,7 +13,7 @@
</head> </head>
<body> <body>
<!-- nav --> <!-- nav -->
<a href="/index.html" target="_self"> <a href="../index.html" target="_self">
<img id="home" src="../photos/home-closed.png" alt="home"> <img id="home" src="../photos/home-closed.png" alt="home">
</a> </a>

10
backplaces/hermit/script.js
Unescape Escape View File

@ -84,12 +84,18 @@ document.addEventListener('DOMContentLoaded', (event) => {
event.target.src = '../photos/home-closed.png'; event.target.src = '../photos/home-closed.png';
}); });
}); });
//audio //audio
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
const audioElement = document.getElementById('background-audio'); const audioElement = document.getElementById('background-audio');
const muteButton = document.getElementById('mute-btn'); const muteButton = document.getElementById('mute-btn');
// Function to set the volume
const setVolume = () => {
audioElement.volume = 0.1; // Set volume to 10%
};
setVolume(); // Set initial volume
// Set initial mute state from localStorage // Set initial mute state from localStorage
let isMuted = localStorage.getItem('mute') === 'true'; let isMuted = localStorage.getItem('mute') === 'true';
audioElement.muted = isMuted; audioElement.muted = isMuted;
@ -98,6 +104,7 @@ document.addEventListener("DOMContentLoaded", function() {
// Start audio playback on user interaction // Start audio playback on user interaction
const startAudio = () => { const startAudio = () => {
audioElement.play(); audioElement.play();
setVolume(); // Ensure volume is set after play
document.removeEventListener('click', startAudio); document.removeEventListener('click', startAudio);
}; };
@ -110,3 +117,4 @@ document.addEventListener("DOMContentLoaded", function() {
muteButton.textContent = isMuted ? "SOUND ON" : "MUTE"; muteButton.textContent = isMuted ? "SOUND ON" : "MUTE";
}); });
}); });

2
backplaces/hermit/styles.css
Unescape Escape View File

@ -161,7 +161,7 @@ body {
@media only screen and (max-width: 767px) { @media only screen and (max-width: 767px) {
body { body {
font-size: 13px; font-size: 14px;
} }
#about { #about {

20
backplaces/index.html
Unescape Escape View File

@ -20,23 +20,23 @@
<div class="title"> <div class="title">
<span class="title-full">BackPlaces</span> <span class="title-full">BackPlaces</span>
<span class="title-mobile">Back Places</span> <span class="title-mobile">Back <span class="sub-mobile">a play by ada</span><br>Places</span>
</div> </div>
<div class="subtitle">a play by ada</div> <div class="subtitle">a play by ada</div>
<div class="photos"> <div class="photos">
<div class="img-container"> <a href="sunrise/sunrise.html" class="img-container">
<a href="sunrise/sunrise.html"><img src="./photos/sunrise.webp" class="img1"></a> <img src="./photos/sunrise.webp" class="img" alt="Sunrise">
<div class="caption">act one</div> <div class="caption">act one</div>
</div> </a>
<div class="img-container"> <a href="hermit/hermit.html" class="img-container">
<a href="hermit/hermit.html"><img src="./photos/hand.webp" class="img2"></a> <img src="./photos/hand.webp" class="img" alt="Hand">
<div class="caption">act two</div> <div class="caption">act two</div>
</div> </a>
<div class="img-container"> <a href="pie/pie.html" class="img-container">
<a href="pie/pie.html"><img src="./photos/pie.webp" class="img3"></a> <img src="./photos/pie.webp" class="img" alt="Pie">
<div class="caption">act three</div> <div class="caption">act three</div>
</div> </a>
</div> </div>

36
backplaces/js/script.js
Unescape Escape View File

@ -1,21 +1,21 @@
document.addEventListener('DOMContentLoaded', () => { // document.addEventListener('DOMContentLoaded', () => {
const title = document.querySelector('.title'); // const title = document.querySelector('.title');
const fonts = [ // const fonts = [
'Redaction-Regular', // 'Redaction-Regular',
'Redaction_10-Regular', // 'Redaction_10-Regular',
'Redaction_20-Regular', // 'Redaction_20-Regular',
'Redaction_35-Regular', // 'Redaction_35-Regular',
'Redaction_50-Regular', // 'Redaction_50-Regular',
'Redaction_70-Regular', // 'Redaction_70-Regular',
'Redaction_100-Regular' // 'Redaction_100-Regular'
]; // ];
let currentFontIndex = 0; // let currentFontIndex = 0;
title.addEventListener('click', () => { // title.addEventListener('click', () => {
currentFontIndex = (currentFontIndex + 1) % fonts.length; // currentFontIndex = (currentFontIndex + 1) % fonts.length;
title.style.fontFamily = fonts[currentFontIndex]; // title.style.fontFamily = fonts[currentFontIndex];
}); // });
}); // });
function openLetter() { function openLetter() {
$('#letterContents').html(` $('#letterContents').html(`
@ -25,7 +25,7 @@ function openLetter() {
<br><br> <br><br>
I created three backplaces for you: Solar Sibling, Hermit Fantasy, and Cake Intimacies. Each represents a unique performance or project. Some stories may evoke memories of pain. As you sit in the audience, know I am with you, holding your hand through each scene. If it feels overwhelming, you can step out, take a break, or leave. This isn't choreographed, and I care deeply for you. I created three backplaces for you: Solar Sibling, Hermit Fantasy, and Cake Intimacies. Each represents a unique performance or project. Some stories may evoke memories of pain. As you sit in the audience, know I am with you, holding your hand through each scene. If it feels overwhelming, you can step out, take a break, or leave. This isn't choreographed, and I care deeply for you.
<br><br> <br><br>
I hope you see what I saw in these stories. Safe dreams now. I'll talk to you soon. I hope you see what I saw in these stories. Safe dreams now, and I'll talk to you soon.
<br> <br>
ada ada
</p> </p>

2
backplaces/sunrise/form.json
Unescape Escape View File

@ -1 +1 @@
[{"name":"test","post":"test"},{"name":"ddwdede","post":"ada"},{"name":"test","post":"test"},{"name":"work?","post":"this"},{"name":"hello ada! thanks for this amazing website. welove you too","post":"fofi"},{"name":"hello ada! thanks for this amazing website. welove you too","post":"fofi"},{"name":"my brother is autistic","post":"mati"},{"name":"","post":""},{"name":"vv","post":"vv"},{"name":"vv","post":"vv"},{"name":"","post":""},{"name":"vv","post":"vv"},{"name":"","post":""},{"name":"","post":""},{"name":"c","post":"c"},{"name":"f","post":"f"},{"name":"f","post":"f"},{"name":"f","post":"f"},{"name":"","post":""},{"name":"","post":""},{"name":"siblings are real","post":"f"},{"name":"","post":""},{"name":"","post":""}] [{"name":"test","post":"test"}]

2
backplaces/sunrise/sunrise.html
Unescape Escape View File

@ -19,7 +19,7 @@
<button id="mute-btn">MUTE</button> <button id="mute-btn">MUTE</button>
<a href="/index.html" target="_blank"> <a href="../index.html" target="_blank">
<img id="home" src="../photos/home-closed.png" alt="home"> <img id="home" src="../photos/home-closed.png" alt="home">
</a> </a>

4
backplaces/sunrise/sunrise.js
Unescape Escape View File

@ -34,7 +34,7 @@ getdata();
//write //write
async function writeData(post_number){ async function writeData(post_number){
var url = 'write.php?post='+ post_number; var url = './write.php?post='+ post_number;
let response = await fetch(url); let response = await fetch(url);
console.log(response); console.log(response);
console.log(response.text()); console.log(response.text());
@ -62,7 +62,7 @@ async function writePost(){
var post = document.getElementById('username2').value; var post = document.getElementById('username2').value;
var name = document.getElementById('user-message2').value; var name = document.getElementById('user-message2').value;
console.log(post,name); console.log(post,name);
var url = 'writepost.php?post='+ post + '&name=' + name; var url = './writepost.php?post='+ post + '&name=' + name;
let response = await fetch(url); let response = await fetch(url);
console.log(response); console.log(response);
console.log(response.text()); console.log(response.text());

0
fonts/webfonts/Platypi-Italic[wght].woff2 → fonts/Platypi-Italic[wght].woff2
Unescape Escape View File

0
fonts/webfonts/Platypi[wght].woff2 → fonts/Platypi[wght].woff2
Unescape Escape View File

BIN
fonts/variable/Platypi-Italic[wght].ttf
View File

Binary file not shown.

BIN
fonts/variable/Platypi[wght].ttf
View File

Binary file not shown.

BIN
fonts/webfonts/Platypi-Bold.woff2
View File

Binary file not shown.

BIN
fonts/webfonts/Platypi-BoldItalic.woff2
View File

Binary file not shown.

BIN
fonts/webfonts/Platypi-ExtraBold.woff2
View File

Binary file not shown.

BIN
fonts/webfonts/Platypi-ExtraBoldItalic.woff2
View File

Binary file not shown.

BIN
fonts/webfonts/Platypi-Italic.woff2
View File

Binary file not shown.

BIN
fonts/webfonts/Platypi-Light.woff2
View File

Binary file not shown.

BIN
fonts/webfonts/Platypi-LightItalic.woff2
View File

Binary file not shown.

BIN
fonts/webfonts/Platypi-Medium.woff2
View File

Binary file not shown.

BIN
fonts/webfonts/Platypi-MediumItalic.woff2
View File

Binary file not shown.

BIN
fonts/webfonts/Platypi-Regular.woff2
View File

Binary file not shown.

BIN
fonts/webfonts/Platypi-SemiBold.woff2
View File

Binary file not shown.

BIN
fonts/webfonts/Platypi-SemiBoldItalic.woff2
View File

Binary file not shown.

6
index.html
Unescape Escape View File

@ -41,13 +41,13 @@
</div> </div>
<div class=" container"> <div class=" container">
<h2>xpub 22–24</h2> <h2>xpub <br>22–24</h2>
<h1>vulnerable interfaces</h1> <h1>vulnerable <br>interfaces</h1>
</div> </div>
<div id="row2"> <div id="row2">
<div id="content"><h1 id="introduction">Introduction</h1> <div id="script">
<h2 id="act-1.">Act 1.</h2> <h2 id="act-1.">Act 1.</h2>
<h3 id="scene-1.">Scene 1.</h3> <h3 id="scene-1.">Scene 1.</h3>
<p><em>Internal. A visitor holds a website in their hands. The first page of <p><em>Internal. A visitor holds a website in their hands. The first page of

22
introduction/index.html
Unescape Escape View File

@ -5,28 +5,30 @@
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../style.css"> <link rel="stylesheet" type="text/css" href="../style.css">
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/x-icon" href="/img/red.png">
</head> </head>
<body> <body>
<!-- Nav bar --> <!-- Nav bar -->
<nav> <nav>
<a href="../index.html" class="title">vulnerable interfaces</a> <h1><a href="../index.html" class="title">vulnerable <br>interfaces</a></h1>
<div class="gummies">
<div class="gummy-1"> <div class="gummy">
<a href="ada/index.html"><img src="img/purple.png" class="img2"></a> <a href="../ada/index.html"><img src="../img/purple.png" class="img2"></a>
<div class="caption">ada</div> <div class="caption">ada</div>
</div> </div>
<div class="gummy-2"> <div class="gummy">
<a href="aglaia/index.html"><img src="img/green.png" class="img2"></a> <a href="../aglaia/index.html"><img src="../img/green.png" class="img2"></a>
<div class="caption">aglaia</div> <div class="caption">aglaia</div>
</div> </div>
<div class="gummy-3"> <div class="gummy">
<a href="irmak/index.html"><img src="img/yellow.png" class="img2"></a> <a href="../irmak/index.html"><img src="../img/yellow.png" class="img2"></a>
<div class="caption">irmak</div> <div class="caption">irmak</div>
</div> </div>
<div class="gummy-4"> <div class="gummy">
<a href="stephen/index.html"><img src="img/red.png" class="img2"></a> <a href="../stephen/index.html"><img src="../img/red.png" class="img2"></a>
<div class="caption">stephen</div> <div class="caption">stephen</div>
</div> </div>
</div>
</nav> </nav>
<div id="content"><h1 id="introduction">Introduction</h1> <div id="content"><h1 id="introduction">Introduction</h1>

127
irmak/index.html
Unescape Escape View File

@ -5,28 +5,30 @@
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../style.css"> <link rel="stylesheet" type="text/css" href="../style.css">
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/x-icon" href="/img/red.png">
</head> </head>
<body> <body>
<!-- Nav bar --> <!-- Nav bar -->
<nav> <nav>
<a href="../index.html" class="title">vulnerable interfaces</a> <h1><a href="../index.html" class="title">vulnerable <br>interfaces</a></h1>
<div class="gummies">
<div class="gummy-1"> <div class="gummy">
<a href="ada/index.html"><img src="img/purple.png" class="img2"></a> <a href="../ada/index.html"><img src="../img/purple.png" class="img2"></a>
<div class="caption">ada</div> <div class="caption">ada</div>
</div> </div>
<div class="gummy-2"> <div class="gummy">
<a href="aglaia/index.html"><img src="img/green.png" class="img2"></a> <a href="../aglaia/index.html"><img src="../img/green.png" class="img2"></a>
<div class="caption">aglaia</div> <div class="caption">aglaia</div>
</div> </div>
<div class="gummy-3"> <div class="gummy">
<a href="irmak/index.html"><img src="img/yellow.png" class="img2"></a> <a href="../irmak/index.html"><img src="../img/yellow.png" class="img2"></a>
<div class="caption">irmak</div> <div class="caption">irmak</div>
</div> </div>
<div class="gummy-4"> <div class="gummy">
<a href="stephen/index.html"><img src="img/red.png" class="img2"></a> <a href="../stephen/index.html"><img src="../img/red.png" class="img2"></a>
<div class="caption">stephen</div> <div class="caption">stephen</div>
</div> </div>
</div>
</nav> </nav>
<div id="content"><h1 id="wink">Wink!</h1> <div id="content"><h1 id="wink">Wink!</h1>
@ -40,13 +42,26 @@ consumerism and low attention span is a rising issue especially amongst
young readers, this was an important task to tackle. The thought of Wink 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 emerged to find a more sustainable and creative way of reading for
elementary school children.</p> elementary school children.</p>
<p><img src="../irmak/improv.JPG" <figure>
alt="A tag made by a participant in the public moment at XPUB studio. Trying to understand different approaches to certain emotions/states for a bee" /> <img src="../irmak/improv.JPG"
<img src="../irmak/leeszaal knot poems.jpg" alt="“a tag made by a participant in the public moment at XPUB studio. Trying to understand different approaches to certain emotions/states for a bee”" />
alt="From the event at Leeszaal West, experimenting with knots and poetry. How can we see movement in text?" /> <figcaption aria-hidden="true">“a tag made by a participant in the
<img src="../irmak/knotpoems2.jpg" public moment at XPUB studio. Trying to understand different approaches
alt="From the event at Leeszaal West. Some of the results of knotting text." /> to certain emotions/states for a bee”</figcaption>
</p> </figure>
<figure>
<img src="../irmak/leeszaalknotpoems.jpg"
alt="“From the event at Leeszaal West, experimenting with knots and poetry. How can we see movement in text?”" />
<figcaption aria-hidden="true">“From the event at Leeszaal West,
experimenting with knots and poetry. How can we see movement in
text?”</figcaption>
</figure>
<figure>
<img src="../irmak/knotpoems2.jpg"
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 <p>Working as a children’s literature editor for years, I came to a
realisation that picture books were turning into another object that realisation that picture books were turning into another object that
kids read and consume on daily basis. At least this is what I observed kids read and consume on daily basis. At least this is what I observed
@ -57,11 +72,18 @@ 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. 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, So I revisited an old story I wrote, translated to English and named it,
“Bee Within”.</p> “Bee Within”.</p>
<p><img src="../irmak/printp3.jpg" <figure>
alt="Example page from the print version of the picture book." /> <img src="../irmak/print3.jpg"
<img src="../irmak/printp4.jpg" alt="“Example page from the print version of the picture book.”" />
alt="Example page from the print version of the picture book." /> <figcaption aria-hidden="true">“Example page from the print version of
</p> the picture book.”</figcaption>
</figure>
<figure>
<img src="../irmak/print4.jpg"
alt="“Example page from the print version of the picture book.”" />
<figcaption aria-hidden="true">“Example page from the print version of
the picture book.”</figcaption>
</figure>
<p>Bee Within, is a story about grief and it is based on my experiences <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 throughout the years. I erased it, rewrote it, edited it, destroyed it
multiple times over the past years, simultaneously with new experiences multiple times over the past years, simultaneously with new experiences
@ -71,30 +93,51 @@ 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 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 upon, especially for children dealing with trauma in many parts of the
world.</p> world.</p>
<p><img src="../irmak/printp1.jpg" <figure>
alt="Example page from the print version of the picture book." /> <img src="../irmak/print1p.jpg"
<img src="../irmak/printp2.jpg" alt="“example page from the picture book”" />
alt="Example page from the print version of the picture book." /> <figcaption aria-hidden="true">“example page from the picture
</p> book”</figcaption>
</figure>
<figure>
<img src="../irmak/printp2.jpg"
alt="“example page from the picture book”" />
<figcaption aria-hidden="true">“example page from the picture
book”</figcaption>
</figure>
<p>Over the past two years, experimenting with storytelling techniques, <p>Over the past two years, experimenting with storytelling techniques,
interactivity options and workshops with children and adults, around interactivity options and workshops with children and adults, around
reading and doing various exercises on Bee Within, I improved the story 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 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. and eventually re-formed non digitally to be reachable for all
</p> children.</p>
<p><img src="../irmak/twine.png" <figure>
alt="The twine map of text based story, reachable from Bee Within by clicking to hear more about Gray the tree." /> <img src="../irmak/twine.png"
<img src="../irmak/clickgame.png" alt="“The twine map of text based story, reachable from Bee Within by clicking to hear more about Gray the tree.”" />
alt="Click game story of the Queen Bee that is reachable within Maya's main storyline." /> <figcaption aria-hidden="true">“The twine map of text based story,
</p> reachable from Bee Within by clicking to hear more about Gray the
<p> tree.”</figcaption>
Here is some documentation from the beggining of this journey towards </figure>
making accesible interactive narratives…</p> <figure>
<p><img src="../irmak/animationseq.png" <img src="clickgame.png"
alt="A small sequence of onclick animation for Bee Within." /> alt="“Click game story of the Queen Bee that is reachable within Maya’s main storyline.”" />
<img src="../irmak/fictionfriction.CR3" <figcaption aria-hidden="true">“Click game story of the Queen Bee that
alt="Fiction Friction cards from SI20, working on storytelling of collective traumas." /> is reachable within Maya’s main storyline.”</figcaption>
</p> </figure>
<p>Here is some more documentation from the beggining of this journey
towards making accesible interactive narratives…</p>
<figure>
<img src="../irmak/animationseq.png"
alt="“A small sequence of onclick animation for Bee Within”" />
<figcaption aria-hidden="true">“A small sequence of onclick animation
for Bee Within”</figcaption>
</figure>
<figure>
<img src="../irmak/fictionfriction.CR3"
alt="“Fiction Friction cards from SI20, working on storytelling of collective traumas”" />
<figcaption aria-hidden="true">“Fiction Friction cards from SI20,
working on storytelling of collective traumas”</figcaption>
</figure>
</div> </div>
</body> </body>
</html> </html>

64
irmak/thesis.html
Unescape Escape View File

@ -5,33 +5,36 @@
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../style.css"> <link rel="stylesheet" type="text/css" href="../style.css">
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/x-icon" href="/img/red.png">
</head> </head>
<body> <body>
<!-- Nav bar --> <!-- Nav bar -->
<nav> <nav>
<a href="../index.html" class="title">vulnerable interfaces</a> <h1><a href="../index.html" class="title">vulnerable <br>interfaces</a></h1>
<div class="gummies">
<div class="gummy-1"> <div class="gummy">
<a href="ada/index.html"><img src="img/purple.png" class="img2"></a> <a href="../ada/index.html"><img src="../img/purple.png" class="img2"></a>
<div class="caption">ada</div> <div class="caption">ada</div>
</div> </div>
<div class="gummy-2"> <div class="gummy">
<a href="aglaia/index.html"><img src="img/green.png" class="img2"></a> <a href="../aglaia/index.html"><img src="../img/green.png" class="img2"></a>
<div class="caption">aglaia</div> <div class="caption">aglaia</div>
</div> </div>
<div class="gummy-3"> <div class="gummy">
<a href="irmak/index.html"><img src="img/yellow.png" class="img2"></a> <a href="../irmak/index.html"><img src="../img/yellow.png" class="img2"></a>
<div class="caption">irmak</div> <div class="caption">irmak</div>
</div> </div>
<div class="gummy-4"> <div class="gummy">
<a href="stephen/index.html"><img src="img/red.png" class="img2"></a> <a href="../stephen/index.html"><img src="../img/red.png" class="img2"></a>
<div class="caption">stephen</div> <div class="caption">stephen</div>
</div> </div>
</div>
</nav> </nav>
<div id="content"><h1 id="fair-leads">Fair Leads</h1> <div id="content"><h1 id="fair-leads">Fair Leads</h1>
<h3 id="fair-leads-or-fair-winds-is-a-saying-sailors-and-knotters-use-to-greet-each-other.-it-comes-from-the-working-end-of-a-string-that-will-soon-be-forming-a-knot."> <h3
Fair leads or Fair winds is a saying sailors and knotters use to greet each id="fair-leads-or-fair-winds-is-a-saying-sailors-and-knotters-use-to-greet-each-other.-it-comes-from-the-working-end-of-a-string-that-will-soon-be-forming-a-knot.">Fair
leads or Fair winds is a saying sailors and knotters use to greet each
other. It comes from the working end of a string that will soon be other. It comes from the working end of a string that will soon be
forming a knot.</h3> forming a knot.</h3>
<p>I would like to clarify and introduce some terms for you in order to <p>I would like to clarify and introduce some terms for you in order to
@ -41,11 +44,6 @@ on how interactive picture books can be used to foster curiosity for
reading and creativity for children. I am building a web platform called reading and creativity for children. I am building a web platform called
Wink that aims to contain a children’s story I wrote and am making into Wink that aims to contain a children’s story I wrote and am making into
an interactive experience, in relation to my research.</p> an interactive experience, in relation to my research.</p>
<figure>
<img src="../irmak/unnamed.png"
alt="knot words from Leeszaal" />
<figcaption aria-hidden="true">knot words from Leeszaal</figcaption>
</figure>
<p>Through this bight of the thesis, I feel the necessity to clarify my <p>Through this bight of the thesis, I feel the necessity to clarify my
intention of using knots as a “thinking and writing object” throughout intention of using knots as a “thinking and writing object” throughout
my research journey. Although knots are physical objects and technically my research journey. Although knots are physical objects and technically
@ -120,11 +118,12 @@ past years, where you think with the object and imagine it vividly
during the process and address meanings to it as you read or write during the process and address meanings to it as you read or write
along. This way it’s easier to compartmentalize or attribute certain along. This way it’s easier to compartmentalize or attribute certain
parts of a text to an imagined or real physical item which makes the parts of a text to an imagined or real physical item which makes the
mind at ease with complex chains of thought. </p> mind at ease with complex chains of thought.</p>
<p>Imagine you are reading a story… What if you think of the string itself <p>Imagine you are reading a story… What if you think of the string
as the journey and the slip knot (which is a type of stopper knot) as a itself as the journey and the slip knot (which is a type of stopper
representation of an antagonist because of its specific use in hunting, knot) as a representation of an antagonist because of its specific use
would this change your approach to reading this story? I believe so…</p> in hunting, would this change your approach to reading this story? I
believe so…</p>
<p>What if instead of a slip knot a Bowline was on the string, would <p>What if instead of a slip knot a Bowline was on the string, would
that represent something else in the story because of its usage in that represent something else in the story because of its usage in
practice. A Bowline is commonly used to form a fixed loop at the end of practice. A Bowline is commonly used to form a fixed loop at the end of
@ -147,10 +146,9 @@ camelid string that would be knotted in a specific way to record, store
and transmit information ranging from accounting and census data to and transmit information ranging from accounting and census data to
communicate complex mathematical and narrative information (Medrano, communicate complex mathematical and narrative information (Medrano,
Urton, 2018). Another example is the Yakima Time Ball, which was used by Urton, 2018). Another example is the Yakima Time Ball, which was used by
North-American Yakama people to show life events and family aff airs. North-American Yakama people to show life events and family aff
</p> airs.</p>
<p> <p>This is why I humbly decided to document my research process with a
This is why I humbly decided to document my research process with a
Quipu of my own. I am trying to symbolize the twists, decisions and Quipu of my own. I am trying to symbolize the twists, decisions and
practices throughout this year with knots of my choosing. I was inspired practices throughout this year with knots of my choosing. I was inspired
by Nayeli Vega’s question, “What can a knot become and what can become a by Nayeli Vega’s question, “What can a knot become and what can become a
@ -162,12 +160,11 @@ start reading from a certain section according to the type of reader you
are and read the loops one by one until the end, weaving through the are and read the loops one by one until the end, weaving through the
text. To determine the string or mode of reading, there are some simple text. To determine the string or mode of reading, there are some simple
questions to answer.</p> questions to answer.</p>
<p> The three modes of reading are combine, slide, <p>The three modes of reading are combine, slide, build . After you
build . After you discover the starting point with the yes or no map in discover the starting point with the yes or no map in the upcoming
the upcoming pages, you will continue the reading journey through the pages, you will continue the reading journey through the strings of diff
strings of diff erent colors that will get you through the text. This erent colors that will get you through the text. This way, the linear
way, the linear text will become in a way, non-linear by your personal text will become in a way, non-linear by your personal experience.</p>
experience.</p>
<p>Bear in mind that you can choose to read this thesis from beginning <p>Bear in mind that you can choose to read this thesis from beginning
to end as a single string too if you wish so.</p> to end as a single string too if you wish so.</p>
<p>Combine mode of reading is for readers who are more interested in the <p>Combine mode of reading is for readers who are more interested in the
@ -652,7 +649,8 @@ it is winter. Trees didn’t move at all and the bees were buzzing all
around. “The kid” usually sat near the tree, on the tree (as in the around. “The kid” usually sat near the tree, on the tree (as in the
other performers’ lap or hugged them).</p> other performers’ lap or hugged them).</p>
<p>Overall only 2 groups used the option to say a sentence which were, <p>Overall only 2 groups used the option to say a sentence which were,
“I want to go on an adventure” “I don’t wanna leave Gray(the tree)”</p> &gt; “I want to go on an adventure”<br />
&gt; “I don’t wanna leave Gray(the tree)”</p>
<p>This was a good feedback for me because I realized they are very <p>This was a good feedback for me because I realized they are very
perceptive of actions and facial expressions rather than words. The perceptive of actions and facial expressions rather than words. The
workshop we did in the studio with XPUB 2 students was harder than the workshop we did in the studio with XPUB 2 students was harder than the

4153
print/index.html
View File

File diff suppressed because it is too large Load Diff

9
print/print_style.css
Unescape Escape View File

@ -11,13 +11,15 @@
@font-face { @font-face {
font-family: 'Platypi'; font-family: 'Platypi';
src: url('../fonts/webfonts/Platypi-Regular.woff2'); src: url('../fonts/Platypi[wght].woff2');
font-weight: 300 800;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Platypi'; font-family: 'Platypi';
src: url('../fonts/webfonts/Platypi-Italic.woff2'); src: url('../fonts/Platypi-Italic[wght].woff2');
font-weight: 300 800;
font-style: italic; font-style: italic;
} }
notes{ notes{
@ -105,7 +107,8 @@ body .margin-note{
white-space: pre-wrap; white-space: pre-wrap;
} }
body{ body{
font-family: 'Platypi-Regular','platypi' ; font-family: 'Platypi',serif ;
font-synthesis: none;
line-height: 1.3; line-height: 1.3;
font-size: 9pt; font-size: 9pt;
letter-spacing: -0.1px; letter-spacing: -0.1px;

BIN
reviews/martino.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

22
specialissue19/index.html
Unescape Escape View File

@ -5,28 +5,30 @@
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../style.css"> <link rel="stylesheet" type="text/css" href="../style.css">
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/x-icon" href="/img/red.png">
</head> </head>
<body> <body>
<!-- Nav bar --> <!-- Nav bar -->
<nav> <nav>
<a href="../index.html" class="title">vulnerable interfaces</a> <h1><a href="../index.html" class="title">vulnerable <br>interfaces</a></h1>
<div class="gummies">
<div class="gummy-1"> <div class="gummy">
<a href="ada/index.html"><img src="img/purple.png" class="img2"></a> <a href="../ada/index.html"><img src="../img/purple.png" class="img2"></a>
<div class="caption">ada</div> <div class="caption">ada</div>
</div> </div>
<div class="gummy-2"> <div class="gummy">
<a href="aglaia/index.html"><img src="img/green.png" class="img2"></a> <a href="../aglaia/index.html"><img src="../img/green.png" class="img2"></a>
<div class="caption">aglaia</div> <div class="caption">aglaia</div>
</div> </div>
<div class="gummy-3"> <div class="gummy">
<a href="irmak/index.html"><img src="img/yellow.png" class="img2"></a> <a href="../irmak/index.html"><img src="../img/yellow.png" class="img2"></a>
<div class="caption">irmak</div> <div class="caption">irmak</div>
</div> </div>
<div class="gummy-4"> <div class="gummy">
<a href="stephen/index.html"><img src="img/red.png" class="img2"></a> <a href="../stephen/index.html"><img src="../img/red.png" class="img2"></a>
<div class="caption">stephen</div> <div class="caption">stephen</div>
</div> </div>
</div>
</nav> </nav>
<div id="content"><h1 id="garden-leeszaal">Garden Leeszaal</h1> <div id="content"><h1 id="garden-leeszaal">Garden Leeszaal</h1>

22
specialissue20/index.html
Unescape Escape View File

@ -5,28 +5,30 @@
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../style.css"> <link rel="stylesheet" type="text/css" href="../style.css">
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/x-icon" href="/img/red.png">
</head> </head>
<body> <body>
<!-- Nav bar --> <!-- Nav bar -->
<nav> <nav>
<a href="../index.html" class="title">vulnerable interfaces</a> <h1><a href="../index.html" class="title">vulnerable <br>interfaces</a></h1>
<div class="gummies">
<div class="gummy-1"> <div class="gummy">
<a href="ada/index.html"><img src="img/purple.png" class="img2"></a> <a href="../ada/index.html"><img src="../img/purple.png" class="img2"></a>
<div class="caption">ada</div> <div class="caption">ada</div>
</div> </div>
<div class="gummy-2"> <div class="gummy">
<a href="aglaia/index.html"><img src="img/green.png" class="img2"></a> <a href="../aglaia/index.html"><img src="../img/green.png" class="img2"></a>
<div class="caption">aglaia</div> <div class="caption">aglaia</div>
</div> </div>
<div class="gummy-3"> <div class="gummy">
<a href="irmak/index.html"><img src="img/yellow.png" class="img2"></a> <a href="../irmak/index.html"><img src="../img/yellow.png" class="img2"></a>
<div class="caption">irmak</div> <div class="caption">irmak</div>
</div> </div>
<div class="gummy-4"> <div class="gummy">
<a href="stephen/index.html"><img src="img/red.png" class="img2"></a> <a href="../stephen/index.html"><img src="../img/red.png" class="img2"></a>
<div class="caption">stephen</div> <div class="caption">stephen</div>
</div> </div>
</div>
</nav> </nav>
<div id="content"><h1 id="console">Console</h1> <div id="content"><h1 id="console">Console</h1>

22
specialissue21/index.html
Unescape Escape View File

@ -5,28 +5,30 @@
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../style.css"> <link rel="stylesheet" type="text/css" href="../style.css">
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/x-icon" href="/img/red.png">
</head> </head>
<body> <body>
<!-- Nav bar --> <!-- Nav bar -->
<nav> <nav>
<a href="../index.html" class="title">vulnerable interfaces</a> <h1><a href="../index.html" class="title">vulnerable <br>interfaces</a></h1>
<div class="gummies">
<div class="gummy-1"> <div class="gummy">
<a href="ada/index.html"><img src="img/purple.png" class="img2"></a> <a href="../ada/index.html"><img src="../img/purple.png" class="img2"></a>
<div class="caption">ada</div> <div class="caption">ada</div>
</div> </div>
<div class="gummy-2"> <div class="gummy">
<a href="aglaia/index.html"><img src="img/green.png" class="img2"></a> <a href="../aglaia/index.html"><img src="../img/green.png" class="img2"></a>
<div class="caption">aglaia</div> <div class="caption">aglaia</div>
</div> </div>
<div class="gummy-3"> <div class="gummy">
<a href="irmak/index.html"><img src="img/yellow.png" class="img2"></a> <a href="../irmak/index.html"><img src="../img/yellow.png" class="img2"></a>
<div class="caption">irmak</div> <div class="caption">irmak</div>
</div> </div>
<div class="gummy-4"> <div class="gummy">
<a href="stephen/index.html"><img src="img/red.png" class="img2"></a> <a href="../stephen/index.html"><img src="../img/red.png" class="img2"></a>
<div class="caption">stephen</div> <div class="caption">stephen</div>
</div> </div>
</div>
</nav> </nav>
<div id="content"><h1 id="tty">TTY</h1> <div id="content"><h1 id="tty">TTY</h1>

22
specialissuesintro/index.html
Unescape Escape View File

@ -5,28 +5,30 @@
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../style.css"> <link rel="stylesheet" type="text/css" href="../style.css">
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/x-icon" href="/img/red.png">
</head> </head>
<body> <body>
<!-- Nav bar --> <!-- Nav bar -->
<nav> <nav>
<a href="../index.html" class="title">vulnerable interfaces</a> <h1><a href="../index.html" class="title">vulnerable <br>interfaces</a></h1>
<div class="gummies">
<div class="gummy-1"> <div class="gummy">
<a href="ada/index.html"><img src="img/purple.png" class="img2"></a> <a href="../ada/index.html"><img src="../img/purple.png" class="img2"></a>
<div class="caption">ada</div> <div class="caption">ada</div>
</div> </div>
<div class="gummy-2"> <div class="gummy">
<a href="aglaia/index.html"><img src="img/green.png" class="img2"></a> <a href="../aglaia/index.html"><img src="../img/green.png" class="img2"></a>
<div class="caption">aglaia</div> <div class="caption">aglaia</div>
</div> </div>
<div class="gummy-3"> <div class="gummy">
<a href="irmak/index.html"><img src="img/yellow.png" class="img2"></a> <a href="../irmak/index.html"><img src="../img/yellow.png" class="img2"></a>
<div class="caption">irmak</div> <div class="caption">irmak</div>
</div> </div>
<div class="gummy-4"> <div class="gummy">
<a href="stephen/index.html"><img src="img/red.png" class="img2"></a> <a href="../stephen/index.html"><img src="../img/red.png" class="img2"></a>
<div class="caption">stephen</div> <div class="caption">stephen</div>
</div> </div>
</div>
</nav> </nav>
<div id="content"><h1 id="special-issues">Special Issues</h1> <div id="content"><h1 id="special-issues">Special Issues</h1>

840
stephen/index.html
Unescape Escape View File

@ -5,40 +5,58 @@
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../style.css"> <link rel="stylesheet" type="text/css" href="../style.css">
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/x-icon" href="/img/red.png">
</head> </head>
<body> <body>
<!-- Nav bar --> <!-- Nav bar -->
<nav> <nav>
<a href="../index.html" class="title">vulnerable interfaces</a> <h1><a href="../index.html" class="title">vulnerable <br>interfaces</a></h1>
<div class="gummies">
<div class="gummy-1"> <div class="gummy">
<a href="ada/index.html"><img src="img/purple.png" class="img2"></a> <a href="../ada/index.html"><img src="../img/purple.png" class="img2"></a>
<div class="caption">ada</div> <div class="caption">ada</div>
</div> </div>
<div class="gummy-2"> <div class="gummy">
<a href="aglaia/index.html"><img src="img/green.png" class="img2"></a> <a href="../aglaia/index.html"><img src="../img/green.png" class="img2"></a>
<div class="caption">aglaia</div> <div class="caption">aglaia</div>
</div> </div>
<div class="gummy-3"> <div class="gummy">
<a href="irmak/index.html"><img src="img/yellow.png" class="img2"></a> <a href="../irmak/index.html"><img src="../img/yellow.png" class="img2"></a>
<div class="caption">irmak</div> <div class="caption">irmak</div>
</div> </div>
<div class="gummy-4"> <div class="gummy">
<a href="stephen/index.html"><img src="img/red.png" class="img2"></a> <a href="../stephen/index.html"><img src="../img/red.png" class="img2"></a>
<div class="caption">stephen</div> <div class="caption">stephen</div>
</div> </div>
</div>
</nav> </nav>
<div id="content"><h1 <div id="content"><h1 id="do-you-ever-dream-about-work">do you ever dream about work?</h1>
id="what-do-graphic-designers-do-all-day-and-why-do-they-do-it-and-what-does-graphic-design-even-mean1">What <h2 id="stephen-kerr">Stephen Kerr</h2>
do graphic designers do all day and why do they do it and what does <p>Practice-led artistic research into the 21st century phenomenon of
“graphic design” even mean?!????!!1!?</h1> the graphic designer. I held graphic design in my hands using
<figure> ethnography, toolmaking and performance as research methods. I examined
<img src="../stephen/its-ok.jpg" how designers spend their time in everyday life, this designer, me, as
alt="Custom keyboard mapping for efficient design practice." /> well as you, what are we doing? What are our worldviews, belief systems,
<figcaption aria-hidden="true">Custom keyboard mapping for efficient mythologies and ideologies?</p>
design practice.</figcaption> <p>Stephen Kerr is a designer, musician, bread-baker and occasional
</figure> tent-builder based in Rotterdam. He fidgets between making graphic
design and performances, questioning and playing with methods and tools.
Coming from a serious and realistic background in a big city on a big
island (Dublin), he is interested in making people out of designers and
a wizard out of himself. Currently he is very very busy making
technologies sillier, inefficienter, questionabler, questioneder and
collaborativer.</p>
<p>https://stephenkerrdesign.com/</p>
<hr />
<blockquote>
<p>Secondly, during my studies at XPUB, I plan to combine different
strands of my practices (design, music, programming, theatre). Being a
designer is an important part of my identity, and I am keen to make work
true to who I am.</p>
</blockquote>
<p>Excerpt from xpub application letter, March 15th 2022.</p>
<hr />
<p>I cut my thumb so every time I type i can feel it in my nerve <p>I cut my thumb so every time I type i can feel it in my nerve
endings. Not true, it’s my left thumb so I don’t type with it. Not true, endings. Not true, it’s my left thumb so I don’t type with it. Not true,
I feel it anyway. Why are most of the function keys on the left of the I feel it anyway. Why are most of the function keys on the left of the
@ -59,6 +77,12 @@ I was thinking about you and I was in the same place as a friend of mine
and I was in the studio and we were in the studio and we were in the and I was in the studio and we were in the studio and we were in the
studio and we were in the studio and we were in the</p> studio and we were in the studio and we were in the</p>
<figure> <figure>
<img src="../stephen/its-ok.jpg"
alt="Custom keyboard mapping for efficient design practice." />
<figcaption aria-hidden="true">Custom keyboard mapping for efficient
design practice.</figcaption>
</figure>
<figure>
<img src="../stephen/keylogger.jpeg" <img src="../stephen/keylogger.jpeg"
alt="Keylogging research. I recorded the buttons a graphic designer (me) presses while working, as an autoethnographic research method into what exactly it is that designers do. To celebrate this labour, I then used a pen plotter to make a series of posters. Three minutes of the designers keypresses took about eight hours to plot. October 24th 2023." /> alt="Keylogging research. I recorded the buttons a graphic designer (me) presses while working, as an autoethnographic research method into what exactly it is that designers do. To celebrate this labour, I then used a pen plotter to make a series of posters. Three minutes of the designers keypresses took about eight hours to plot. October 24th 2023." />
<figcaption aria-hidden="true">Keylogging research. I recorded the <figcaption aria-hidden="true">Keylogging research. I recorded the
@ -68,12 +92,6 @@ do. To celebrate this labour, I then used a pen plotter to make a series
of posters. Three minutes of the designers keypresses took about eight of posters. Three minutes of the designers keypresses took about eight
hours to plot. October 24th 2023.</figcaption> hours to plot. October 24th 2023.</figcaption>
</figure> </figure>
<p>Practice-led artistic research into the 21st century phenomenon of
the graphic designer. I held graphic design in my hands using
ethnography, toolmaking and performance as research methods. I examined
how designers spend their time in everyday life, this designer, me, as
well as you, what are we doing? What are our worldviews, belief systems,
mythologies and ideologies?</p>
<figure> <figure>
<img src="../stephen/email.jpg" <img src="../stephen/email.jpg"
alt="Email answering performance using Google’s Gmail service. To reveal the work of the designer clearly, I performed the designer’s task of answering email in front of an audience. Due to the performance happening at 7pm, out of office hours, there was extensive use of the Scheduled Email feature. Some stories emerged about our precarity including overdue rent and invalid payment information for Adobe Creative Cloud subscriptions. Leeszaal, Rotterdam, November 7th 2023." /> alt="Email answering performance using Google’s Gmail service. To reveal the work of the designer clearly, I performed the designer’s task of answering email in front of an audience. Due to the performance happening at 7pm, out of office hours, there was extensive use of the Scheduled Email feature. Some stories emerged about our precarity including overdue rent and invalid payment information for Adobe Creative Cloud subscriptions. Leeszaal, Rotterdam, November 7th 2023." />
@ -95,13 +113,6 @@ The less the designer uses the mouse, the longer a line the pen plotter
draws, it creates a record of the tiny moments between the draws, it creates a record of the tiny moments between the
work.</figcaption> work.</figcaption>
</figure> </figure>
<blockquote>
<p>Secondly, during my studies at XPUB, I plan to combine different
strands of my practices (design, music, programming, theatre). Being a
designer is an important part of my identity, and I am keen to make work
true to who I am.</p>
</blockquote>
<p>Excerpt from xpub application letter, March 15th 2022.</p>
<figure> <figure>
<img src="../stephen/peecee.jpg" <img src="../stephen/peecee.jpg"
alt="Re-enacting dreams about work at Piet Zwart Institute, Rotterdam, Netherlands. Participants use felt dolls to tell stories of our dreams on the small and squishy stage. We’re trying to balance design labour with other labour like making food for our loved ones, we can’t stop brushing our teeth, brushing, brushing, brushing. February 5th 2024." /> alt="Re-enacting dreams about work at Piet Zwart Institute, Rotterdam, Netherlands. Participants use felt dolls to tell stories of our dreams on the small and squishy stage. We’re trying to balance design labour with other labour like making food for our loved ones, we can’t stop brushing our teeth, brushing, brushing, brushing. February 5th 2024." />
@ -139,388 +150,391 @@ alt="Keyboard of things designers have said. Our feelings about work." />
<figcaption aria-hidden="true">Keyboard of things designers have said. <figcaption aria-hidden="true">Keyboard of things designers have said.
Our feelings about work.</figcaption> Our feelings about work.</figcaption>
</figure> </figure>
<!-- # felt cute might delete later
<section id="keylogger"> <section id="keylogger">
<p>2023-11-24 17:52:55,103 - Key.tab<br /> 2023-11-24 17:52:55,103 - Key.tab
2023-11-24 17:52:57,175 - Key.alt_l<br /> 2023-11-24 17:52:57,175 - Key.alt_l
2023-11-24 17:52:57,368 - Key.tab<br /> 2023-11-24 17:52:57,368 - Key.tab
2023-11-24 17:52:57,959 - Key.tab<br /> 2023-11-24 17:52:57,959 - Key.tab
2023-11-24 17:52:58,239 - Key.tab<br /> 2023-11-24 17:52:58,239 - Key.tab
2023-11-24 17:52:59,055 - Key.cmd<br /> 2023-11-24 17:52:59,055 - Key.cmd
2023-11-24 17:52:59,208 - ‘e’<br /> 2023-11-24 17:52:59,208 - 'e'
2024-06-06 15:51:56,169 - Key.alt_l<br /> 2024-06-06 15:51:56,169 - Key.alt_l
2024-06-06 15:51:56,273 - Key.tab<br /> 2024-06-06 15:51:56,273 - Key.tab
2024-06-06 15:51:57,017 - Key.tab<br /> 2024-06-06 15:51:57,017 - Key.tab
2024-06-06 15:51:58,130 - Key.tab<br /> 2024-06-06 15:51:58,130 - Key.tab
2024-06-06 15:51:58,385 - Key.tab<br /> 2024-06-06 15:51:58,385 - Key.tab
2024-06-06 15:52:04,257 - Key.alt_l<br /> 2024-06-06 15:52:04,257 - Key.alt_l
2024-06-06 15:52:04,370 - Key.tab<br /> 2024-06-06 15:52:04,370 - Key.tab
2024-06-06 15:52:05,041 - Key.tab<br /> 2024-06-06 15:52:05,041 - Key.tab
2024-06-06 15:52:05,281 - Key.tab<br /> 2024-06-06 15:52:05,281 - Key.tab
2024-06-06 15:52:39,050 - Key.ctrl_l<br /> 2024-06-06 15:52:39,050 - Key.ctrl_l
2024-06-06 15:52:39,443 - ‘’<br /> 2024-06-06 15:52:39,443 - '\x03'
2024-06-06 15:52:53,985 - Key.ctrl_l<br /> 2024-06-06 15:52:53,985 - Key.ctrl_l
2024-06-06 15:52:54,363 - ‘’<br /> 2024-06-06 15:52:54,363 - '\x16'
2024-06-06 15:52:57,545 - Key.left<br /> 2024-06-06 15:52:57,545 - Key.left
2024-06-06 15:52:57,761 - Key.left<br /> 2024-06-06 15:52:57,761 - Key.left
2024-06-06 15:52:57,921 - Key.left<br /> 2024-06-06 15:52:57,921 - Key.left
2024-06-06 15:52:58,057 - Key.left<br /> 2024-06-06 15:52:58,057 - Key.left
2024-06-06 15:52:58,201 - Key.left<br /> 2024-06-06 15:52:58,201 - Key.left
2024-06-06 15:52:58,337 - Key.left<br /> 2024-06-06 15:52:58,337 - Key.left
2024-06-06 15:52:58,585 - Key.shift<br /> 2024-06-06 15:52:58,585 - Key.shift
2024-06-06 15:52:58,682 - Key.ctrl_l<br /> 2024-06-06 15:52:58,682 - Key.ctrl_l
2024-06-06 15:52:58,785 - Key.right<br /> 2024-06-06 15:52:58,785 - Key.right
2024-06-06 15:52:59,121 - Key.right<br /> 2024-06-06 15:52:59,121 - Key.right
2024-06-06 15:52:59,417 - Key.right<br /> 2024-06-06 15:52:59,417 - Key.right
2024-06-06 15:53:00,530 - ‘k’<br /> 2024-06-06 15:53:00,530 - 'k'
2024-06-06 15:53:00,626 - ‘e’<br /> 2024-06-06 15:53:00,626 - 'e'
2024-06-06 15:53:00,890 - ‘y’<br /> 2024-06-06 15:53:00,890 - 'y'
2024-06-06 15:53:01,370 - ‘l’<br /> 2024-06-06 15:53:01,370 - 'l'
2024-06-06 15:53:01,546 - ‘o’<br /> 2024-06-06 15:53:01,546 - 'o'
2024-06-06 15:53:01,754 - ‘g’<br /> 2024-06-06 15:53:01,754 - 'g'
2024-06-06 15:53:01,882 - ‘g’<br /> 2024-06-06 15:53:01,882 - 'g'
2024-06-06 15:53:01,994 - ‘e’<br /> 2024-06-06 15:53:01,994 - 'e'
2024-06-06 15:53:02,162 - ‘r’<br /> 2024-06-06 15:53:02,162 - 'r'
2024-06-06 15:53:02,778 - ‘.’<br /> 2024-06-06 15:53:02,778 - '.'
2024-06-06 15:53:03,146 - ‘j’<br /> 2024-06-06 15:53:03,146 - 'j'
2024-06-06 15:53:03,394 - ‘p’<br /> 2024-06-06 15:53:03,394 - 'p'
2024-06-06 15:53:03,562 - ‘e’<br /> 2024-06-06 15:53:03,562 - 'e'
2024-06-06 15:53:03,818 - ‘g’<br /> 2024-06-06 15:53:03,818 - 'g'
2024-06-06 15:53:05,569 - Key.ctrl_l<br /> 2024-06-06 15:53:05,569 - Key.ctrl_l
2024-06-06 15:53:06,079 - Key.ctrl_l<br /> 2024-06-06 15:53:06,079 - Key.ctrl_l
2024-06-06 15:53:06,110 - Key.ctrl_l<br /> 2024-06-06 15:53:06,110 - Key.ctrl_l
2024-06-06 15:53:06,140 - Key.ctrl_l<br /> 2024-06-06 15:53:06,140 - Key.ctrl_l
2024-06-06 15:53:06,172 - Key.ctrl_l<br /> 2024-06-06 15:53:06,172 - Key.ctrl_l
2024-06-06 15:53:06,203 - Key.ctrl_l<br /> 2024-06-06 15:53:06,203 - Key.ctrl_l
2024-06-06 15:53:06,235 - Key.ctrl_l<br /> 2024-06-06 15:53:06,235 - Key.ctrl_l
2024-06-06 15:53:06,282 - Key.ctrl_l<br /> 2024-06-06 15:53:06,282 - Key.ctrl_l
2024-06-06 15:53:06,313 - Key.ctrl_l<br /> 2024-06-06 15:53:06,313 - Key.ctrl_l
2024-06-06 15:53:06,344 - Key.ctrl_l<br /> 2024-06-06 15:53:06,344 - Key.ctrl_l
2024-06-06 15:53:06,374 - Key.ctrl_l<br /> 2024-06-06 15:53:06,374 - Key.ctrl_l
2024-06-06 15:53:06,405 - Key.ctrl_l<br /> 2024-06-06 15:53:06,405 - Key.ctrl_l
2024-06-06 15:53:06,436 - Key.ctrl_l<br /> 2024-06-06 15:53:06,436 - Key.ctrl_l
2024-06-06 15:53:06,467 - Key.ctrl_l<br /> 2024-06-06 15:53:06,467 - Key.ctrl_l
2024-06-06 15:53:06,499 - Key.ctrl_l<br /> 2024-06-06 15:53:06,499 - Key.ctrl_l
2024-06-06 15:53:06,545 - Key.ctrl_l<br /> 2024-06-06 15:53:06,545 - Key.ctrl_l
2024-06-06 15:53:06,578 - Key.ctrl_l<br /> 2024-06-06 15:53:06,578 - Key.ctrl_l
2024-06-06 15:53:06,609 - Key.ctrl_l<br /> 2024-06-06 15:53:06,609 - Key.ctrl_l
2024-06-06 15:53:06,641 - Key.ctrl_l<br /> 2024-06-06 15:53:06,641 - Key.ctrl_l
2024-06-06 15:53:06,672 - Key.ctrl_l<br /> 2024-06-06 15:53:06,672 - Key.ctrl_l
2024-06-06 15:53:06,702 - Key.ctrl_l<br /> 2024-06-06 15:53:06,702 - Key.ctrl_l
2024-06-06 15:53:06,733 - Key.ctrl_l<br /> 2024-06-06 15:53:06,733 - Key.ctrl_l
2024-06-06 15:53:06,765 - Key.ctrl_l<br /> 2024-06-06 15:53:06,765 - Key.ctrl_l
2024-06-06 15:53:06,795 - Key.ctrl_l<br /> 2024-06-06 15:53:06,795 - Key.ctrl_l
2024-06-06 15:53:06,841 - Key.ctrl_l<br /> 2024-06-06 15:53:06,841 - Key.ctrl_l
2024-06-06 15:53:06,872 - Key.ctrl_l<br /> 2024-06-06 15:53:06,872 - Key.ctrl_l
2024-06-06 15:53:06,904 - Key.ctrl_l<br /> 2024-06-06 15:53:06,904 - Key.ctrl_l
2024-06-06 15:53:06,934 - Key.ctrl_l<br /> 2024-06-06 15:53:06,934 - Key.ctrl_l
2024-06-06 15:53:06,964 - Key.ctrl_l<br /> 2024-06-06 15:53:06,964 - Key.ctrl_l
2024-06-06 15:53:06,995 - Key.ctrl_l<br /> 2024-06-06 15:53:06,995 - Key.ctrl_l
2024-06-06 15:53:07,040 - Key.ctrl_l<br /> 2024-06-06 15:53:07,040 - Key.ctrl_l
2024-06-06 15:53:07,073 - Key.ctrl_l<br /> 2024-06-06 15:53:07,073 - Key.ctrl_l
2024-06-06 15:53:07,103 - Key.ctrl_l<br /> 2024-06-06 15:53:07,103 - Key.ctrl_l
2024-06-06 15:53:07,134 - Key.ctrl_l<br /> 2024-06-06 15:53:07,134 - Key.ctrl_l
2024-06-06 15:53:07,165 - Key.ctrl_l<br /> 2024-06-06 15:53:07,165 - Key.ctrl_l
2024-06-06 15:53:07,196 - Key.ctrl_l<br /> 2024-06-06 15:53:07,196 - Key.ctrl_l
2024-06-06 15:53:07,228 - Key.ctrl_l<br /> 2024-06-06 15:53:07,228 - Key.ctrl_l
2024-06-06 15:53:07,250 - ‘’<br /> 2024-06-06 15:53:07,250 - '\x18'
2024-06-06 15:53:08,753 - Key.enter<br /> 2024-06-06 15:53:08,753 - Key.enter
2024-06-06 15:53:08,881 - Key.enter<br /> 2024-06-06 15:53:08,881 - Key.enter
2024-06-06 15:53:08,937 - Key.ctrl_l<br /> 2024-06-06 15:53:08,937 - Key.ctrl_l
2024-06-06 15:53:09,058 - ‘’<br /> 2024-06-06 15:53:09,058 - '\x16'
2024-06-06 15:53:10,218 - Key.up<br /> 2024-06-06 15:53:10,218 - Key.up
2024-06-06 15:53:10,441 - Key.backspace<br /> 2024-06-06 15:53:10,441 - Key.backspace
2024-06-06 15:53:10,970 - Key.down<br /> 2024-06-06 15:53:10,970 - Key.down
2024-06-06 15:53:11,169 - Key.down<br /> 2024-06-06 15:53:11,169 - Key.down
2024-06-06 15:53:11,577 - Key.left<br /> 2024-06-06 15:53:11,577 - Key.left
2024-06-06 15:53:11,777 - Key.enter<br /> 2024-06-06 15:53:11,777 - Key.enter
2024-06-06 15:53:11,921 - Key.enter<br /> 2024-06-06 15:53:11,921 - Key.enter
2024-06-06 15:53:27,769 - Key.alt_l<br /> 2024-06-06 15:53:27,769 - Key.alt_l
2024-06-06 15:53:27,882 - Key.tab<br /> 2024-06-06 15:53:27,882 - Key.tab
2024-06-06 15:53:28,585 - Key.tab<br /> 2024-06-06 15:53:28,585 - Key.tab
2024-06-06 15:53:28,833 - Key.tab<br /> 2024-06-06 15:53:28,833 - Key.tab
2024-06-06 15:53:31,809 - ‘z’<br /> 2024-06-06 15:53:31,809 - 'z'
2024-06-06 15:53:32,090 - ‘e’<br /> 2024-06-06 15:53:32,090 - 'e'
2024-06-06 15:53:32,682 - ‘n’<br /> 2024-06-06 15:53:32,682 - 'n'
2024-06-06 15:53:32,753 - ‘o’<br /> 2024-06-06 15:53:32,753 - 'o'
2024-06-06 15:53:38,450 - Key.space<br /> 2024-06-06 15:53:38,450 - Key.space
2024-06-06 15:53:38,713 - ‘q’<br /> 2024-06-06 15:53:38,713 - 'q'
2024-06-06 15:53:38,858 - ‘u’<br /> 2024-06-06 15:53:38,858 - 'u'
2024-06-06 15:53:38,937 - ‘o’<br /> 2024-06-06 15:53:38,937 - 'o'
2024-06-06 15:53:39,082 - ‘t’<br /> 2024-06-06 15:53:39,082 - 't'
2024-06-06 15:53:39,129 - ‘e’<br /> 2024-06-06 15:53:39,129 - 'e'
2024-06-06 15:53:39,201 - Key.enter<br /> 2024-06-06 15:53:39,201 - Key.enter
2024-06-06 15:53:44,858 - ‘w’<br /> 2024-06-06 15:53:44,858 - 'w'
2024-06-06 15:53:44,953 - ‘i’<br /> 2024-06-06 15:53:44,953 - 'i'
2024-06-06 15:53:45,129 - ‘k’<br /> 2024-06-06 15:53:45,129 - 'k'
2024-06-06 15:53:45,250 - ‘i’<br /> 2024-06-06 15:53:45,250 - 'i'
2024-06-06 15:53:48,817 - Key.enter<br /> 2024-06-06 15:53:48,817 - Key.enter
2024-06-06 15:53:55,257 - Key.ctrl_l<br /> 2024-06-06 15:53:55,257 - Key.ctrl_l
2024-06-06 15:53:55,513 - ‘’<br /> 2024-06-06 15:53:55,513 - '\x06'
2024-06-06 15:53:56,418 - ‘z’<br /> 2024-06-06 15:53:56,418 - 'z'
2024-06-06 15:53:56,642 - ‘e’<br /> 2024-06-06 15:53:56,642 - 'e'
2024-06-06 15:53:56,882 - ‘n’<br /> 2024-06-06 15:53:56,882 - 'n'
2024-06-06 15:53:56,946 - ‘o’<br /> 2024-06-06 15:53:56,946 - 'o'
2024-06-06 15:54:05,473 - Key.alt_l<br /> 2024-06-06 15:54:05,473 - Key.alt_l
2024-06-06 15:54:05,609 - Key.tab<br /> 2024-06-06 15:54:05,609 - Key.tab
2024-06-06 15:54:08,185 - Key.shift<br /> 2024-06-06 15:54:08,185 - Key.shift
2024-06-06 15:54:08,693 - Key.shift<br /> 2024-06-06 15:54:08,693 - Key.shift
2024-06-06 15:54:08,723 - Key.shift<br /> 2024-06-06 15:54:08,723 - Key.shift
2024-06-06 15:54:08,754 - Key.shift<br /> 2024-06-06 15:54:08,754 - Key.shift
2024-06-06 15:54:08,786 - Key.shift<br /> 2024-06-06 15:54:08,786 - Key.shift
2024-06-06 15:54:08,831 - Key.shift<br /> 2024-06-06 15:54:08,831 - Key.shift
2024-06-06 15:54:08,862 - Key.shift<br /> 2024-06-06 15:54:08,862 - Key.shift
2024-06-06 15:54:08,893 - Key.shift<br /> 2024-06-06 15:54:08,893 - Key.shift
2024-06-06 15:54:08,923 - Key.shift<br /> 2024-06-06 15:54:08,923 - Key.shift
2024-06-06 15:54:08,952 - Key.shift<br /> 2024-06-06 15:54:08,952 - Key.shift
2024-06-06 15:54:08,983 - Key.shift<br /> 2024-06-06 15:54:08,983 - Key.shift
2024-06-06 15:54:09,010 - ‘A’<br /> 2024-06-06 15:54:09,010 - 'A'
2024-06-06 15:54:09,177 - Key.space<br /> 2024-06-06 15:54:09,177 - Key.space
2024-06-06 15:54:09,778 - ‘s’<br /> 2024-06-06 15:54:09,778 - 's'
2024-06-06 15:54:09,842 - ‘a’<br /> 2024-06-06 15:54:09,842 - 'a'
2024-06-06 15:54:10,026 - ‘n’<br /> 2024-06-06 15:54:10,026 - 'n'
2024-06-06 15:54:10,130 - ‘e’<br /> 2024-06-06 15:54:10,130 - 'e'
2024-06-06 15:54:10,242 - Key.space<br /> 2024-06-06 15:54:10,242 - Key.space
2024-06-06 15:54:10,634 - ‘p’<br /> 2024-06-06 15:54:10,634 - 'p'
2024-06-06 15:54:10,754 - ‘e’<br /> 2024-06-06 15:54:10,754 - 'e'
2024-06-06 15:54:10,850 - ‘r’<br /> 2024-06-06 15:54:10,850 - 'r'
2024-06-06 15:54:11,281 - ‘s’<br /> 2024-06-06 15:54:11,281 - 's'
2024-06-06 15:54:11,442 - ‘o’<br /> 2024-06-06 15:54:11,442 - 'o'
2024-06-06 15:54:11,538 - ‘n’<br /> 2024-06-06 15:54:11,538 - 'n'
2024-06-06 15:54:13,689 - Key.shift<br /> 2024-06-06 15:54:13,689 - Key.shift
2024-06-06 15:54:13,818 - ‘“’<br /> 2024-06-06 15:54:13,818 - '"'
2024-06-06 15:54:14,225 - Key.left<br /> 2024-06-06 15:54:14,225 - Key.left
2024-06-06 15:54:14,731 - Key.left<br /> 2024-06-06 15:54:14,731 - Key.left
2024-06-06 15:54:14,760 - Key.left<br /> 2024-06-06 15:54:14,760 - Key.left
2024-06-06 15:54:14,791 - Key.left<br /> 2024-06-06 15:54:14,791 - Key.left
2024-06-06 15:54:14,839 - Key.left<br /> 2024-06-06 15:54:14,839 - Key.left
2024-06-06 15:54:14,869 - Key.left<br /> 2024-06-06 15:54:14,869 - Key.left
2024-06-06 15:54:14,899 - Key.left<br /> 2024-06-06 15:54:14,899 - Key.left
2024-06-06 15:54:14,930 - Key.left<br /> 2024-06-06 15:54:14,930 - Key.left
2024-06-06 15:54:14,962 - Key.left<br /> 2024-06-06 15:54:14,962 - Key.left
2024-06-06 15:54:14,992 - Key.left<br /> 2024-06-06 15:54:14,992 - Key.left
2024-06-06 15:54:15,023 - Key.left<br /> 2024-06-06 15:54:15,023 - Key.left
2024-06-06 15:54:15,055 - Key.left<br /> 2024-06-06 15:54:15,055 - Key.left
2024-06-06 15:54:15,281 - Key.left<br /> 2024-06-06 15:54:15,281 - Key.left
2024-06-06 15:54:15,513 - Key.left<br /> 2024-06-06 15:54:15,513 - Key.left
2024-06-06 15:54:15,625 - Key.shift<br /> 2024-06-06 15:54:15,625 - Key.shift
2024-06-06 15:54:15,705 - ‘“’<br /> 2024-06-06 15:54:15,705 - '"'
2024-06-06 15:54:16,009 - Key.right<br /> 2024-06-06 15:54:16,009 - Key.right
2024-06-06 15:54:16,514 - Key.right<br /> 2024-06-06 15:54:16,514 - Key.right
2024-06-06 15:54:16,546 - Key.right<br /> 2024-06-06 15:54:16,546 - Key.right
2024-06-06 15:54:16,576 - Key.right<br /> 2024-06-06 15:54:16,576 - Key.right
2024-06-06 15:54:16,623 - Key.right<br /> 2024-06-06 15:54:16,623 - Key.right
2024-06-06 15:54:16,653 - Key.right<br /> 2024-06-06 15:54:16,653 - Key.right
2024-06-06 15:54:16,684 - Key.right<br /> 2024-06-06 15:54:16,684 - Key.right
2024-06-06 15:54:16,715 - Key.right<br /> 2024-06-06 15:54:16,715 - Key.right
2024-06-06 15:54:16,746 - Key.right<br /> 2024-06-06 15:54:16,746 - Key.right
2024-06-06 15:54:16,777 - Key.right<br /> 2024-06-06 15:54:16,777 - Key.right
2024-06-06 15:54:16,809 - Key.right<br /> 2024-06-06 15:54:16,809 - Key.right
2024-06-06 15:54:16,840 - Key.right<br /> 2024-06-06 15:54:16,840 - Key.right
2024-06-06 15:54:16,886 - Key.right<br /> 2024-06-06 15:54:16,886 - Key.right
2024-06-06 15:54:16,916 - Key.right<br /> 2024-06-06 15:54:16,916 - Key.right
2024-06-06 15:54:17,289 - Key.space<br /> 2024-06-06 15:54:17,289 - Key.space
2024-06-06 15:54:18,058 - ‘s’<br /> 2024-06-06 15:54:18,058 - 's'
2024-06-06 15:54:18,130 - ‘a’<br /> 2024-06-06 15:54:18,130 - 'a'
2024-06-06 15:54:18,314 - ‘y’<br /> 2024-06-06 15:54:18,314 - 'y'
2024-06-06 15:54:18,394 - ‘s’<br /> 2024-06-06 15:54:18,394 - 's'
2024-06-06 15:54:19,242 - Key.space<br /> 2024-06-06 15:54:19,242 - Key.space
2024-06-06 15:54:19,409 - Key.shift<br /> 2024-06-06 15:54:19,409 - Key.shift
2024-06-06 15:54:19,634 - ‘Z’<br /> 2024-06-06 15:54:19,634 - 'Z'
2024-06-06 15:54:19,866 - ‘e’<br /> 2024-06-06 15:54:19,866 - 'e'
2024-06-06 15:54:20,034 - ‘n’<br /> 2024-06-06 15:54:20,034 - 'n'
2024-06-06 15:54:20,114 - ‘o’<br /> 2024-06-06 15:54:20,114 - 'o'
2024-06-06 15:54:20,336 - Key.alt_l<br /> 2024-06-06 15:54:20,336 - Key.alt_l
2024-06-06 15:54:20,441 - Key.tab<br /> 2024-06-06 15:54:20,441 - Key.tab
2024-06-06 15:54:21,433 - Key.alt_l<br /> 2024-06-06 15:54:21,433 - Key.alt_l
2024-06-06 15:54:21,521 - Key.tab<br /> 2024-06-06 15:54:21,521 - Key.tab
2024-06-06 15:54:22,586 - ‘,’<br /> 2024-06-06 15:54:22,586 - ','
2024-06-06 15:54:22,665 - Key.left<br /> 2024-06-06 15:54:22,665 - Key.left
2024-06-06 15:54:23,177 - Key.left<br /> 2024-06-06 15:54:23,177 - Key.left
2024-06-06 15:54:23,207 - Key.left<br /> 2024-06-06 15:54:23,207 - Key.left
2024-06-06 15:54:23,239 - Key.left<br /> 2024-06-06 15:54:23,239 - Key.left
2024-06-06 15:54:23,270 - Key.left<br /> 2024-06-06 15:54:23,270 - Key.left
2024-06-06 15:54:23,301 - Key.left<br /> 2024-06-06 15:54:23,301 - Key.left
2024-06-06 15:54:23,332 - Key.left<br /> 2024-06-06 15:54:23,332 - Key.left
2024-06-06 15:54:23,378 - Key.left<br /> 2024-06-06 15:54:23,378 - Key.left
2024-06-06 15:54:23,409 - Key.left<br /> 2024-06-06 15:54:23,409 - Key.left
2024-06-06 15:54:23,440 - Key.left<br /> 2024-06-06 15:54:23,440 - Key.left
2024-06-06 15:54:23,577 - Key.left<br /> 2024-06-06 15:54:23,577 - Key.left
2024-06-06 15:54:23,826 - ‘,’<br /> 2024-06-06 15:54:23,826 - ','
2024-06-06 15:54:23,937 - Key.right<br /> 2024-06-06 15:54:23,937 - Key.right
2024-06-06 15:54:24,446 - Key.right<br /> 2024-06-06 15:54:24,446 - Key.right
2024-06-06 15:54:24,477 - Key.right<br /> 2024-06-06 15:54:24,477 - Key.right
2024-06-06 15:54:24,508 - Key.right<br /> 2024-06-06 15:54:24,508 - Key.right
2024-06-06 15:54:24,539 - Key.right<br /> 2024-06-06 15:54:24,539 - Key.right
2024-06-06 15:54:24,570 - Key.right<br /> 2024-06-06 15:54:24,570 - Key.right
2024-06-06 15:54:24,616 - Key.right<br /> 2024-06-06 15:54:24,616 - Key.right
2024-06-06 15:54:24,648 - Key.right<br /> 2024-06-06 15:54:24,648 - Key.right
2024-06-06 15:54:24,889 - Key.right<br /> 2024-06-06 15:54:24,889 - Key.right
2024-06-06 15:54:25,049 - Key.right<br /> 2024-06-06 15:54:25,049 - Key.right
2024-06-06 15:54:25,289 - Key.right<br /> 2024-06-06 15:54:25,289 - Key.right
2024-06-06 15:54:25,425 - Key.space<br /> 2024-06-06 15:54:25,425 - Key.space
2024-06-06 15:54:25,737 - Key.alt_l<br /> 2024-06-06 15:54:25,737 - Key.alt_l
2024-06-06 15:54:25,825 - Key.tab<br /> 2024-06-06 15:54:25,825 - Key.tab
2024-06-06 15:54:26,554 - Key.alt_l<br /> 2024-06-06 15:54:26,554 - Key.alt_l
2024-06-06 15:54:26,617 - Key.tab<br /> 2024-06-06 15:54:26,617 - Key.tab
2024-06-06 15:54:26,993 - Key.shift<br /> 2024-06-06 15:54:26,993 - Key.shift
2024-06-06 15:54:27,506 - Key.shift<br /> 2024-06-06 15:54:27,506 - Key.shift
2024-06-06 15:54:27,537 - Key.shift<br /> 2024-06-06 15:54:27,537 - Key.shift
2024-06-06 15:54:27,568 - Key.shift<br /> 2024-06-06 15:54:27,568 - Key.shift
2024-06-06 15:54:27,599 - Key.shift<br /> 2024-06-06 15:54:27,599 - Key.shift
2024-06-06 15:54:27,610 - ‘“’<br /> 2024-06-06 15:54:27,610 - '"'
2024-06-06 15:54:27,946 - ‘d’<br /> 2024-06-06 15:54:27,946 - 'd'
2024-06-06 15:54:28,090 - ‘o’<br /> 2024-06-06 15:54:28,090 - 'o'
2024-06-06 15:54:28,218 - ‘e’<br /> 2024-06-06 15:54:28,218 - 'e'
2024-06-06 15:54:28,322 - ‘s’<br /> 2024-06-06 15:54:28,322 - 's'
2024-06-06 15:54:28,394 - ‘n’<br /> 2024-06-06 15:54:28,394 - 'n'
2024-06-06 15:54:28,897 -”’”<br /> 2024-06-06 15:54:28,897 - "'"
2024-06-06 15:54:28,978 - ’t’<br /> 2024-06-06 15:54:28,978 - 't'
2024-06-06 15:54:29,105 - Key.space<br /> 2024-06-06 15:54:29,105 - Key.space
2024-06-06 15:54:29,274 - ‘a’<br /> 2024-06-06 15:54:29,274 - 'a'
2024-06-06 15:54:29,418 - ‘n’<br /> 2024-06-06 15:54:29,418 - 'n'
2024-06-06 15:54:29,522 - ‘a’<br /> 2024-06-06 15:54:29,522 - 'a'
2024-06-06 15:54:29,850 - ‘l’<br /> 2024-06-06 15:54:29,850 - 'l'
2024-06-06 15:54:30,090 - ‘y’<br /> 2024-06-06 15:54:30,090 - 'y'
2024-06-06 15:54:30,241 - ‘s’<br /> 2024-06-06 15:54:30,241 - 's'
2024-06-06 15:54:30,394 - ‘e’<br /> 2024-06-06 15:54:30,394 - 'e'
2024-06-06 15:54:30,609 - Key.space<br /> 2024-06-06 15:54:30,609 - Key.space
2024-06-06 15:54:30,930 - ‘h’<br /> 2024-06-06 15:54:30,930 - 'h'
2024-06-06 15:54:31,002 - ‘i’<br /> 2024-06-06 15:54:31,002 - 'i'
2024-06-06 15:54:31,137 - ‘m’<br /> 2024-06-06 15:54:31,137 - 'm'
2024-06-06 15:54:31,322 - ‘s’<br /> 2024-06-06 15:54:31,322 - 's'
2024-06-06 15:54:31,458 - ‘e’<br /> 2024-06-06 15:54:31,458 - 'e'
2024-06-06 15:54:31,633 - ‘l’<br /> 2024-06-06 15:54:31,633 - 'l'
2024-06-06 15:54:31,730 - ‘f’<br /> 2024-06-06 15:54:31,730 - 'f'
2024-06-06 15:54:32,241 - Key.alt_l<br /> 2024-06-06 15:54:32,241 - Key.alt_l
2024-06-06 15:54:32,353 - Key.tab<br /> 2024-06-06 15:54:32,353 - Key.tab
2024-06-06 15:54:33,737 - Key.alt_l<br /> 2024-06-06 15:54:33,737 - Key.alt_l
2024-06-06 15:54:33,833 - Key.tab<br /> 2024-06-06 15:54:33,833 - Key.tab
2024-06-06 15:54:34,442 - ‘,’<br /> 2024-06-06 15:54:34,442 - ','
2024-06-06 15:54:34,585 - Key.space<br /> 2024-06-06 15:54:34,585 - Key.space
2024-06-06 15:54:34,834 - ‘d’<br /> 2024-06-06 15:54:34,834 - 'd'
2024-06-06 15:54:34,954 - ‘o’<br /> 2024-06-06 15:54:34,954 - 'o'
2024-06-06 15:54:35,090 - ‘e’<br /> 2024-06-06 15:54:35,090 - 'e'
2024-06-06 15:54:35,170 - ‘s’<br /> 2024-06-06 15:54:35,170 - 's'
2024-06-06 15:54:35,298 - ‘n’<br /> 2024-06-06 15:54:35,298 - 'n'
2024-06-06 15:54:35,898 -”’”<br /> 2024-06-06 15:54:35,898 - "'"
2024-06-06 15:54:35,954 - ‘t’<br /> 2024-06-06 15:54:35,954 - 't'
2024-06-06 15:54:35,978 - ‘t’<br /> 2024-06-06 15:54:35,978 - 't'
2024-06-06 15:54:36,209 - Key.space<br /> 2024-06-06 15:54:36,209 - Key.space
2024-06-06 15:54:36,378 - ‘l’<br /> 2024-06-06 15:54:36,378 - 'l'
2024-06-06 15:54:36,546 - ‘o’<br /> 2024-06-06 15:54:36,546 - 'o'
2024-06-06 15:54:36,666 - ‘o’<br /> 2024-06-06 15:54:36,666 - 'o'
2024-06-06 15:54:36,730 - ‘k’<br /> 2024-06-06 15:54:36,730 - 'k'
2024-06-06 15:54:36,881 - Key.space<br /> 2024-06-06 15:54:36,881 - Key.space
2024-06-06 15:54:37,034 - ‘i’<br /> 2024-06-06 15:54:37,034 - 'i'
2024-06-06 15:54:37,090 - ‘n’<br /> 2024-06-06 15:54:37,090 - 'n'
2024-06-06 15:54:37,257 - Key.space<br /> 2024-06-06 15:54:37,257 - Key.space
2024-06-06 15:54:37,410 - ‘t’<br /> 2024-06-06 15:54:37,410 - 't'
2024-06-06 15:54:37,482 - ‘h’<br /> 2024-06-06 15:54:37,482 - 'h'
2024-06-06 15:54:37,586 - ‘e’<br /> 2024-06-06 15:54:37,586 - 'e'
2024-06-06 15:54:37,681 - Key.space<br /> 2024-06-06 15:54:37,681 - Key.space
2024-06-06 15:54:37,874 - ‘m’<br /> 2024-06-06 15:54:37,874 - 'm'
2024-06-06 15:54:38,017 - ‘i’<br /> 2024-06-06 15:54:38,017 - 'i'
2024-06-06 15:54:38,233 - ‘r’<br /> 2024-06-06 15:54:38,233 - 'r'
2024-06-06 15:54:38,562 - ‘r’<br /> 2024-06-06 15:54:38,562 - 'r'
2024-06-06 15:54:38,898 - ‘o’<br /> 2024-06-06 15:54:38,898 - 'o'
2024-06-06 15:54:39,210 - ‘r’<br /> 2024-06-06 15:54:39,210 - 'r'
2024-06-06 15:54:39,945 - Key.shift<br /> 2024-06-06 15:54:39,945 - Key.shift
2024-06-06 15:54:40,448 - Key.shift<br /> 2024-06-06 15:54:40,448 - Key.shift
2024-06-06 15:54:40,478 - Key.shift<br /> 2024-06-06 15:54:40,478 - Key.shift
2024-06-06 15:54:40,525 - Key.shift<br /> 2024-06-06 15:54:40,525 - Key.shift
2024-06-06 15:54:40,556 - Key.shift<br /> 2024-06-06 15:54:40,556 - Key.shift
2024-06-06 15:54:40,587 - Key.shift<br /> 2024-06-06 15:54:40,587 - Key.shift
2024-06-06 15:54:40,594 - ‘“’<br /> 2024-06-06 15:54:40,594 - '"'
2024-06-06 15:54:41,033 - Key.alt_l<br /> 2024-06-06 15:54:41,033 - Key.alt_l
2024-06-06 15:54:41,137 - Key.tab<br /> 2024-06-06 15:54:41,137 - Key.tab
2024-06-06 15:54:42,545 - Key.alt_l<br /> 2024-06-06 15:54:42,545 - Key.alt_l
2024-06-06 15:54:42,650 - Key.tab<br /> 2024-06-06 15:54:42,650 - Key.tab
2024-06-06 15:54:44,257 - Key.ctrl_l<br /> 2024-06-06 15:54:44,257 - Key.ctrl_l
2024-06-06 15:54:44,466 - ‘’<br /> 2024-06-06 15:54:44,466 - '\x13'
2024-06-06 15:54:45,105 - Key.alt_l<br /> 2024-06-06 15:54:45,105 - Key.alt_l
2024-06-06 15:54:45,217 - Key.tab<br /> 2024-06-06 15:54:45,217 - Key.tab
2024-06-06 15:54:46,361 - Key.tab<br /> 2024-06-06 15:54:46,361 - Key.tab
2024-06-06 15:54:46,537 - Key.tab<br /> 2024-06-06 15:54:46,537 - Key.tab
2024-06-06 15:54:46,729 - Key.tab<br /> 2024-06-06 15:54:46,729 - Key.tab
2024-06-06 15:54:48,706 - ‘g’<br /> 2024-06-06 15:54:48,706 - 'g'
2024-06-06 15:54:48,770 - ‘e’<br /> 2024-06-06 15:54:48,770 - 'e'
2024-06-06 15:54:48,914 - ‘n’<br /> 2024-06-06 15:54:48,914 - 'n'
2024-06-06 15:54:49,034 - ‘e’<br /> 2024-06-06 15:54:49,034 - 'e'
2024-06-06 15:54:49,140 - ‘r’<br /> 2024-06-06 15:54:49,140 - 'r'
2024-06-06 15:54:49,570 - ‘a’<br /> 2024-06-06 15:54:49,570 - 'a'
2024-06-06 15:54:49,786 - ‘t’<br /> 2024-06-06 15:54:49,786 - 't'
2024-06-06 15:54:49,866 - ‘e’<br /> 2024-06-06 15:54:49,866 - 'e'
2024-06-06 15:54:50,785 - Key.backspace<br /> 2024-06-06 15:54:50,785 - Key.backspace
2024-06-06 15:54:51,295 - Key.backspace<br /> 2024-06-06 15:54:51,295 - Key.backspace
2024-06-06 15:54:51,325 - Key.backspace<br /> 2024-06-06 15:54:51,325 - Key.backspace
2024-06-06 15:54:51,356 - Key.backspace<br /> 2024-06-06 15:54:51,356 - Key.backspace
2024-06-06 15:54:51,388 - Key.backspace<br /> 2024-06-06 15:54:51,388 - Key.backspace
2024-06-06 15:54:51,418 - Key.backspace<br /> 2024-06-06 15:54:51,418 - Key.backspace
2024-06-06 15:54:51,450 - Key.backspace<br /> 2024-06-06 15:54:51,450 - Key.backspace
2024-06-06 15:54:51,497 - Key.backspace<br /> 2024-06-06 15:54:51,497 - Key.backspace
2024-06-06 15:54:51,527 - Key.backspace<br /> 2024-06-06 15:54:51,527 - Key.backspace
2024-06-06 15:54:51,558 - Key.backspace<br /> 2024-06-06 15:54:51,558 - Key.backspace
2024-06-06 15:54:51,589 - Key.backspace<br /> 2024-06-06 15:54:51,589 - Key.backspace
2024-06-06 15:54:51,620 - Key.backspace<br /> 2024-06-06 15:54:51,620 - Key.backspace
2024-06-06 15:54:51,651 - Key.backspace<br /> 2024-06-06 15:54:51,651 - Key.backspace
2024-06-06 15:54:51,682 - Key.backspace<br /> 2024-06-06 15:54:51,682 - Key.backspace
2024-06-06 15:54:51,728 - Key.backspace<br /> 2024-06-06 15:54:51,728 - Key.backspace
2024-06-06 15:54:52,162 - ‘p’<br /> 2024-06-06 15:54:52,162 - 'p'
2024-06-06 15:54:52,649 - ‘y’<br /> 2024-06-06 15:54:52,649 - 'y'
2024-06-06 15:54:52,970 - ‘t’<br /> 2024-06-06 15:54:52,970 - 't'
2024-06-06 15:54:53,082 - ‘h’<br /> 2024-06-06 15:54:53,082 - 'h'
2024-06-06 15:54:53,122 - ‘o’<br /> 2024-06-06 15:54:53,122 - 'o'
2024-06-06 15:54:53,265 - ‘n’<br /> 2024-06-06 15:54:53,265 - 'n'
2024-06-06 15:54:53,817 - Key.space<br /> 2024-06-06 15:54:53,817 - Key.space
2024-06-06 15:54:54,410 - ‘g’<br /> 2024-06-06 15:54:54,410 - 'g'
2024-06-06 15:54:54,442 - ‘e’<br /> 2024-06-06 15:54:54,442 - 'e'
2024-06-06 15:54:54,609 - ‘n’<br /> 2024-06-06 15:54:54,609 - 'n'
2024-06-06 15:54:54,714 - ‘e’<br /> 2024-06-06 15:54:54,714 - 'e'
2024-06-06 15:54:54,810 - ‘r’<br /> 2024-06-06 15:54:54,810 - 'r'
2024-06-06 15:54:55,073 - ‘a’<br /> 2024-06-06 15:54:55,073 - 'a'
2024-06-06 15:54:55,202 - ‘t’<br /> 2024-06-06 15:54:55,202 - 't'
2024-06-06 15:54:55,306 - ‘e’<br /> 2024-06-06 15:54:55,306 - 'e'
2024-06-06 15:54:55,809 - ‘-’<br /> 2024-06-06 15:54:55,809 - '-'
2024-06-06 15:54:56,465 - Key.tab<br /> 2024-06-06 15:54:56,465 - Key.tab
2024-06-06 15:54:58,945 - Key.enter<br /> 2024-06-06 15:54:58,945 - Key.enter
2024-06-06 15:55:06,353 - Key.alt_l<br /> 2024-06-06 15:55:06,353 - Key.alt_l
2024-06-06 15:55:06,473 - Key.tab<br /> 2024-06-06 15:55:06,473 - Key.tab
2024-06-06 15:55:07,265 - Key.tab<br /> 2024-06-06 15:55:07,265 - Key.tab
2024-06-06 15:55:10,985 - Key.ctrl_l<br /> 2024-06-06 15:55:10,985 - Key.ctrl_l
2024-06-06 15:55:11,492 - Key.ctrl_l<br /> 2024-06-06 15:55:11,492 - Key.ctrl_l
2024-06-06 15:55:11,523 - Key.ctrl_l<br /> 2024-06-06 15:55:11,523 - Key.ctrl_l
2024-06-06 15:55:11,554 - Key.ctrl_l<br /> 2024-06-06 15:55:11,554 - Key.ctrl_l
2024-06-06 15:55:11,586 - Key.ctrl_l<br /> 2024-06-06 15:55:11,586 - Key.ctrl_l
2024-06-06 15:55:11,630 - Key.ctrl_l<br /> 2024-06-06 15:55:11,630 - Key.ctrl_l
2024-06-06 15:55:11,642 - ‘’<br /> 2024-06-06 15:55:11,642 - '\x12'
2024-06-06 15:55:15,457 - Key.ctrl_l<br /> 2024-06-06 15:55:15,457 - Key.ctrl_l
2024-06-06 15:55:15,730 - ‘’<br /> 2024-06-06 15:55:15,730 - '\x06'
2024-06-06 15:55:16,210 - ‘z’<br /> 2024-06-06 15:55:16,210 - 'z'
2024-06-06 15:55:16,434 - ‘e’<br /> 2024-06-06 15:55:16,434 - 'e'
2024-06-06 15:55:16,626 - ‘n’<br /> 2024-06-06 15:55:16,626 - 'n'
2024-06-06 15:55:16,714 - ‘o’<br /> 2024-06-06 15:55:16,714 - 'o'
2024-06-06 15:55:20,953 - Key.alt_l<br /> 2024-06-06 15:55:20,953 - Key.alt_l
2024-06-06 15:55:21,049 - Key.tab<br /> 2024-06-06 15:55:21,049 - Key.tab
2024-06-06 15:55:22,681 - Key.tab<br /> 2024-06-06 15:55:22,681 - Key.tab
2024-06-06 15:55:22,881 - Key.tab<br /> 2024-06-06 15:55:22,881 - Key.tab
2024-06-06 15:55:23,113 - Key.tab<br /> 2024-06-06 15:55:23,113 - Key.tab
2024-06-06 15:55:26,001 - Key.ctrl_l<br /> 2024-06-06 15:55:26,001 - Key.ctrl_l
2024-06-06 15:55:26,338 - ‘’<br /> 2024-06-06 15:55:26,338 - '\x03'
2024-06-06 15:55:27,760 - Key.ctrl_l<br /> 2024-06-06 15:55:27,760 - Key.ctrl_l
2024-06-06 15:55:28,267 - Key.ctrl_l<br /> 2024-06-06 15:55:28,267 - Key.ctrl_l
2024-06-06 15:55:28,298 - Key.ctrl_l<br /> 2024-06-06 15:55:28,298 - Key.ctrl_l
2024-06-06 15:55:28,330 - ‘1a’<br /> 2024-06-06 15:55:28,330 - '\x1a'
2024-06-06 15:55:28,665 - Key.ctrl_l<br /> 2024-06-06 15:55:28,665 - Key.ctrl_l
2024-06-06 15:55:28,834 - ‘’<br /> 2024-06-06 15:55:28,834 - '\x18'
2024-06-06 15:55:29,441 - Key.alt_l<br /> 2024-06-06 15:55:29,441 - Key.alt_l
2024-06-06 15:55:29,545 - Key.tab<br /> 2024-06-06 15:55:29,545 - Key.tab
2024-06-06 15:55:29,945 - Key.tab<br /> 2024-06-06 15:55:29,945 - Key.tab
2024-06-06 15:55:30,353 - Key.tab<br /> 2024-06-06 15:55:30,353 - Key.tab
2024-06-06 15:55:30,561 - Key.tab<br /> 2024-06-06 15:55:30,561 - Key.tab
2024-06-06 15:55:33,281 - Key.cmd<br /> 2024-06-06 15:55:33,281 - Key.cmd
2024-06-06 15:55:33,617 - ‘e’</p> 2024-06-06 15:55:33,617 - 'e'
</section> </section>
<!-- # felt cute might delete later
*What do graphic designers do all day and why do they do it and what does "graphic design" even mean?!????!!1!?* is an assessment of what the term "graphic design" means to its practitioners today. Through experimental ethnographic research methods and the development of reflexive tools, the project highlights and questions the boundaries that exist around this apparent category. The research focuses on my own practices as well as other people and groups that identify with "graphic designer" as a label. The research was both conducted by and shared with interested parties in the form of the tools themselves, as well as a series of performances. There is no strict distinction between the research and its publication. The tools were released in an iterative cycle throughout the process of the project, and the research is conducted through the performative use and development of these tools. *What do graphic designers do all day and why do they do it and what does "graphic design" even mean?!????!!1!?* is an assessment of what the term "graphic design" means to its practitioners today. Through experimental ethnographic research methods and the development of reflexive tools, the project highlights and questions the boundaries that exist around this apparent category. The research focuses on my own practices as well as other people and groups that identify with "graphic designer" as a label. The research was both conducted by and shared with interested parties in the form of the tools themselves, as well as a series of performances. There is no strict distinction between the research and its publication. The tools were released in an iterative cycle throughout the process of the project, and the research is conducted through the performative use and development of these tools.

26
stephen/index.md
Unescape Escape View File

@ -4,24 +4,34 @@ author: Stephen
--- ---
# What do graphic designers do all day and why do they do it and what does "graphic design" even mean?!????!!1!? # do you ever dream about work?
![Custom keyboard mapping for efficient design practice.](../stephen/its-ok.jpg) ## Stephen Kerr
I cut my thumb so every time I type i can feel it in my nerve endings. Not true, it's my left thumb so I don't type with it. Not true, I feel it anyway. Why are most of the function keys on the left of the keyboard. What's so functional about pressing buttons. Stephen Kerr is a designer and musician based in. Have you ever loved an instrument? The Ctrl key broke like four times since I moved here. I have one more replacement because I bought a bunch of them but at some point I gave up and use an external keyboard. I dunno I'm more confused than ever. It was something to do with dreams and working. It's the middle of the night I'm writing this on my phone. If I had a dream this is when I would be writing it. The memory is fuzzy: either I don't remember or it didn't make sense in the first place. It was something to do with fuzziness and memory no wait. Phones don't have keyboards in real life this doesn't make sense. I'm trying to type but I don't think I can get it on the way to the office for the weekend and I think it was a good idea to do it and I was thinking about you and I was thinking of you and I was thinking about you and I was in the same place as a friend of mine and I was in the studio and we were in the studio and we were in the studio and we were in the studio and we were in the
![Keylogging research. I recorded the buttons a graphic designer (me) presses while working, as an autoethnographic research method into what exactly it is that designers do. To celebrate this labour, I then used a pen plotter to make a series of posters. Three minutes of the designers keypresses took about eight hours to plot. October 24th 2023.](../stephen/keylogger.jpeg)
Practice-led artistic research into the 21st century phenomenon of the graphic designer. I held graphic design in my hands using ethnography, toolmaking and performance as research methods. I examined how designers spend their time in everyday life, this designer, me, as well as you, what are we doing? What are our worldviews, belief systems, mythologies and ideologies? Practice-led artistic research into the 21st century phenomenon of the graphic designer. I held graphic design in my hands using ethnography, toolmaking and performance as research methods. I examined how designers spend their time in everyday life, this designer, me, as well as you, what are we doing? What are our worldviews, belief systems, mythologies and ideologies?
![Email answering performance using Google's Gmail service. To reveal the work of the designer clearly, I performed the designer's task of answering email in front of an audience. Due to the performance happening at 7pm, out of office hours, there was extensive use of the Scheduled Email feature. Some stories emerged about our precarity including overdue rent and invalid payment information for Adobe Creative Cloud subscriptions. Leeszaal, Rotterdam, November 7th 2023.](../stephen/email.jpg) Stephen Kerr is a designer, musician, bread-baker and occasional tent-builder based in Rotterdam. He fidgets between making graphic design and performances, questioning and playing with methods and tools. Coming from a serious and realistic background in a big city on a big island (Dublin), he is interested in making people out of designers and a wizard out of himself. Currently he is very very busy making technologies sillier, inefficienter, questionabler, questioneder and collaborativer.
![A performative tool that measures the laziness of the designer as they work and graphs it on a pen plotter. The less the designer uses the mouse, the longer a line the pen plotter draws, it creates a record of the tiny moments between the work.](../stephen/laziness.jpg) https://stephenkerrdesign.com/
---
> Secondly, during my studies at XPUB, I plan to combine different strands of my practices (design, music, programming, theatre). Being a designer is an important part of my identity, and I am keen to make work true to who I am. > Secondly, during my studies at XPUB, I plan to combine different strands of my practices (design, music, programming, theatre). Being a designer is an important part of my identity, and I am keen to make work true to who I am.
Excerpt from xpub application letter, March 15th 2022. Excerpt from xpub application letter, March 15th 2022.
---
I cut my thumb so every time I type i can feel it in my nerve endings. Not true, it's my left thumb so I don't type with it. Not true, I feel it anyway. Why are most of the function keys on the left of the keyboard. What's so functional about pressing buttons. Stephen Kerr is a designer and musician based in. Have you ever loved an instrument? The Ctrl key broke like four times since I moved here. I have one more replacement because I bought a bunch of them but at some point I gave up and use an external keyboard. I dunno I'm more confused than ever. It was something to do with dreams and working. It's the middle of the night I'm writing this on my phone. If I had a dream this is when I would be writing it. The memory is fuzzy: either I don't remember or it didn't make sense in the first place. It was something to do with fuzziness and memory no wait. Phones don't have keyboards in real life this doesn't make sense. I'm trying to type but I don't think I can get it on the way to the office for the weekend and I think it was a good idea to do it and I was thinking about you and I was thinking of you and I was thinking about you and I was in the same place as a friend of mine and I was in the studio and we were in the studio and we were in the studio and we were in the studio and we were in the
![Custom keyboard mapping for efficient design practice.](../stephen/its-ok.jpg)
![Keylogging research. I recorded the buttons a graphic designer (me) presses while working, as an autoethnographic research method into what exactly it is that designers do. To celebrate this labour, I then used a pen plotter to make a series of posters. Three minutes of the designers keypresses took about eight hours to plot. October 24th 2023.](../stephen/keylogger.jpeg)
![Email answering performance using Google's Gmail service. To reveal the work of the designer clearly, I performed the designer's task of answering email in front of an audience. Due to the performance happening at 7pm, out of office hours, there was extensive use of the Scheduled Email feature. Some stories emerged about our precarity including overdue rent and invalid payment information for Adobe Creative Cloud subscriptions. Leeszaal, Rotterdam, November 7th 2023.](../stephen/email.jpg)
![A performative tool that measures the laziness of the designer as they work and graphs it on a pen plotter. The less the designer uses the mouse, the longer a line the pen plotter draws, it creates a record of the tiny moments between the work.](../stephen/laziness.jpg)
![Re-enacting dreams about work at Piet Zwart Institute, Rotterdam, Netherlands. Participants use felt dolls to tell stories of our dreams on the small and squishy stage. We're trying to balance design labour with other labour like making food for our loved ones, we can't stop brushing our teeth, brushing, brushing, brushing. February 5th 2024. ](../stephen/peecee.jpg) ![Re-enacting dreams about work at Piet Zwart Institute, Rotterdam, Netherlands. Participants use felt dolls to tell stories of our dreams on the small and squishy stage. We're trying to balance design labour with other labour like making food for our loved ones, we can't stop brushing our teeth, brushing, brushing, brushing. February 5th 2024. ](../stephen/peecee.jpg)
![Collective dream re-enactment at Art Meets Radical Openness, Linz, Austria. Inside a tent, a group of people perform eachother's dreams about work and discuss and analyse them together. We feel like impostors, we don't know how to work these machines, we're going to crash. March 11th 2024. ](../stephen/amro.jpeg) ![Collective dream re-enactment at Art Meets Radical Openness, Linz, Austria. Inside a tent, a group of people perform eachother's dreams about work and discuss and analyse them together. We feel like impostors, we don't know how to work these machines, we're going to crash. March 11th 2024. ](../stephen/amro.jpeg)

59
stephen/thesis.html
Unescape Escape View File

@ -5,32 +5,34 @@
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../style.css"> <link rel="stylesheet" type="text/css" href="../style.css">
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/x-icon" href="/img/red.png">
</head> </head>
<body> <body>
<!-- Nav bar --> <!-- Nav bar -->
<nav> <nav>
<a href="../index.html" class="title">vulnerable interfaces</a> <h1><a href="../index.html" class="title">vulnerable <br>interfaces</a></h1>
<div class="gummies">
<div class="gummy-1"> <div class="gummy">
<a href="ada/index.html"><img src="img/purple.png" class="img2"></a> <a href="../ada/index.html"><img src="../img/purple.png" class="img2"></a>
<div class="caption">ada</div> <div class="caption">ada</div>
</div> </div>
<div class="gummy-2"> <div class="gummy">
<a href="aglaia/index.html"><img src="img/green.png" class="img2"></a> <a href="../aglaia/index.html"><img src="../img/green.png" class="img2"></a>
<div class="caption">aglaia</div> <div class="caption">aglaia</div>
</div> </div>
<div class="gummy-3"> <div class="gummy">
<a href="irmak/index.html"><img src="img/yellow.png" class="img2"></a> <a href="../irmak/index.html"><img src="../img/yellow.png" class="img2"></a>
<div class="caption">irmak</div> <div class="caption">irmak</div>
</div> </div>
<div class="gummy-4"> <div class="gummy">
<a href="stephen/index.html"><img src="img/red.png" class="img2"></a> <a href="../stephen/index.html"><img src="../img/red.png" class="img2"></a>
<div class="caption">stephen</div> <div class="caption">stephen</div>
</div> </div>
</div>
</nav> </nav>
<div id="content"><h1 id="section">⊞</h1> <div id="content"><h1 id="section">⊞</h1>
<h3 id="empty-title">empty title</h3> <hr />
<p>Stephen Kerr</p> <p>Stephen Kerr</p>
<p>⊞</p> <p>⊞</p>
<p>Thesis submitted to the Department of Experimental Publishing, Piet <p>Thesis submitted to the Department of Experimental Publishing, Piet
@ -95,7 +97,7 @@ The Po Valley, The Roman Empire, 268 BCE.
<figcaption aria-hidden="true">Monogram, Piet Zwart, <figcaption aria-hidden="true">Monogram, Piet Zwart,
c. 1968.</figcaption> c. 1968.</figcaption>
</figure> </figure>
<h3 id="empty-title-1">empty title</h3> <hr />
<h4 id="introduction">Introduction</h4> <h4 id="introduction">Introduction</h4>
<p>This document is a collection of fragments exploring beliefs about <p>This document is a collection of fragments exploring beliefs about
labour in the creative industries, in particular graphic ⊞. Each labour in the creative industries, in particular graphic ⊞. Each
@ -144,7 +146,6 @@ than last week when there was no work. ⊞ers look at their phone and see
their alarm is going to go off in ten minutes, so they switch it off and their alarm is going to go off in ten minutes, so they switch it off and
get up.</em></li> get up.</em></li>
</ol> </ol>
<h3 id="empty-title-2">empty title</h3>
<p>The precarity of working in the creative industries, in particular as <p>The precarity of working in the creative industries, in particular as
a freelancer or within a small studio, induces anxiety. There is a a freelancer or within a small studio, induces anxiety. There is a
belief that the ⊞er as freelancer is empowered by their autonomy, but in belief that the ⊞er as freelancer is empowered by their autonomy, but in
@ -243,7 +244,7 @@ recipient of the Catherine Donnelly Lifetime Achievement Award for his
contribution to ⊞ in Ireland and is the Course Director of ⊞ West, an contribution to ⊞ in Ireland and is the Course Director of ⊞ West, an
international summer ⊞ school located in the beautiful village of international summer ⊞ school located in the beautiful village of
Letterfrack on the West Coast of Ireland</em>. (⊞west.eu, 2023)</p> Letterfrack on the West Coast of Ireland</em>. (⊞west.eu, 2023)</p>
<h3 id="empty-title-3">empty title</h3> <hr />
<ul> <ul>
<li>SK: What do you think is the best shape?</li> <li>SK: What do you think is the best shape?</li>
<li>CC: Oh yeah, good god. square.</li> <li>CC: Oh yeah, good god. square.</li>
@ -341,7 +342,7 @@ postcard.”</li>
<li>Description of Steve McCaffrey’s <em>CARNIVAL</em><br /> <li>Description of Steve McCaffrey’s <em>CARNIVAL</em><br />
(The Idea of the Book, 2024)</li> (The Idea of the Book, 2024)</li>
</ul> </ul>
<h3 id="empty-title-4">empty title</h3> <hr />
<p>The developments of the written word and its relationship to form in <p>The developments of the written word and its relationship to form in
the 20th century is very much a part of the history of ⊞. I care about the 20th century is very much a part of the history of ⊞. I care about
this story because it affects contemporary practitioners. I believe this story because it affects contemporary practitioners. I believe
@ -356,7 +357,7 @@ assigning or finding meanings in ⊞</h4>
<p>This autoethnographic annotation attempts to really miss as many <p>This autoethnographic annotation attempts to really miss as many
cultural and technical cues as possible. It’s watching the ⊞er, me, and cultural and technical cues as possible. It’s watching the ⊞er, me, and
being totally mystified by their behaviour. </p> being totally mystified by their behaviour. </p>
<h3 id="empty-title-5">empty title</h3> <hr />
<ol type="1"> <ol type="1">
<li><em>A rhythm exists and I wonder why. There is music and there are <li><em>A rhythm exists and I wonder why. There is music and there are
voices, and my fingers press the keys and the colours of the screen voices, and my fingers press the keys and the colours of the screen
@ -415,7 +416,7 @@ catalogues. ⊞ is just work, chill. Is a ⊞er a user or a server? Maybe ⊞
is an example of our general belief in this dichotomy not quite making is an example of our general belief in this dichotomy not quite making
sense or fitting reality. The ⊞er is working for whom? Themselves? Their sense or fitting reality. The ⊞er is working for whom? Themselves? Their
clients?</p> clients?</p>
<h3 id="empty-title-6">empty title</h3> <hr />
<ul> <ul>
<li><em>“</em>attempts to undo the privileged position of the agentive <li><em>“</em>attempts to undo the privileged position of the agentive
subject can help us understand the strange status of repetitive and subject can help us understand the strange status of repetitive and
@ -563,7 +564,7 @@ misplaced and there is a human urge to stop, just stop.</p>
and as soon as we feel ourselves becoming ridiculous”</li> and as soon as we feel ourselves becoming ridiculous”</li>
<li>Adolf Loos, <em>On Thrift,</em> 1924 (Loos, 2019)</li> <li>Adolf Loos, <em>On Thrift,</em> 1924 (Loos, 2019)</li>
</ul> </ul>
<h3 id="empty-title-7">empty title</h3> <hr />
<p>Adolf Loos was a modernist architect whose writings such as <p>Adolf Loos was a modernist architect whose writings such as
<em>Ornament and Crime</em> in 1910 influenced modernist ideals of <em>Ornament and Crime</em> in 1910 influenced modernist ideals of
functionalism and minimalism. He rejected ornament and favoured the use functionalism and minimalism. He rejected ornament and favoured the use
@ -621,7 +622,7 @@ inherited from a wider cultural belief of the same general drive: to
order and simplify. Humans try to make sense of the world. ⊞ers make order and simplify. Humans try to make sense of the world. ⊞ers make
sense of ⊞ briefs and structure them into something understandable to an sense of ⊞ briefs and structure them into something understandable to an
audience or target market. </p> audience or target market. </p>
<h3 id="empty-title-8">empty title</h3> <hr />
<ul> <ul>
<li>◱: for fucks sake why don’t we use those grids</li> <li>◱: for fucks sake why don’t we use those grids</li>
</ul> </ul>
@ -647,7 +648,7 @@ even more outrageous than what we assumed of the beer fans, or the beer
fans were in fact taking their own conference seriously? As both seem fans were in fact taking their own conference seriously? As both seem
unbelievable the true funniness of the joke hits home in it’s implied unbelievable the true funniness of the joke hits home in it’s implied
meaning: ⊞ers are boring as fuck.</p> meaning: ⊞ers are boring as fuck.</p>
<h3 id="empty-title-9">empty title</h3> <hr />
<h4 <h4
id="an-annotation-of-my-practices-as-a-graphic-er-on-a-typical-working-day-23rd-october-2023">An id="an-annotation-of-my-practices-as-a-graphic-er-on-a-typical-working-day-23rd-october-2023">An
annotation of my practices as a graphic ⊞er on a typical working day, annotation of my practices as a graphic ⊞er on a typical working day,
@ -660,7 +661,7 @@ annotation of my practices as a graphic ⊞er on a typical working day,
ctrl v ctrl c ctrl v ctrl c ctrl v ctrl c ctrl v ctrl v ctrl v ctrl v ctrl v ctrl c ctrl v ctrl c ctrl v ctrl c ctrl v ctrl v ctrl v ctrl v
ctrl v ctrl v ctrl v</em></li> ctrl v ctrl v ctrl v</em></li>
</ol> </ol>
<h3 id="empty-title-10">empty title</h3> <hr />
<p>⊞ers interact with the computer through keyboard and mouse usage. <p>⊞ers interact with the computer through keyboard and mouse usage.
Compared to other computer users, my interaction involves lots of Compared to other computer users, my interaction involves lots of
pressing of function keys, something common with other technical pressing of function keys, something common with other technical
@ -764,7 +765,7 @@ proprietary font. There is a visual difference between these fonts too
which is also relevant buuuuut this description is getting very detailed which is also relevant buuuuut this description is getting very detailed
maybe not right now.</em></li> maybe not right now.</em></li>
</ol> </ol>
<h3 id="empty-title-11">empty title</h3> <hr />
<p>Similarly to the software changes, this documentation of my practice <p>Similarly to the software changes, this documentation of my practice
sees me choosing open source fonts. I’m really ambivalent about this. I sees me choosing open source fonts. I’m really ambivalent about this. I
do like the idea of being able to modify a font when needed, but I have do like the idea of being able to modify a font when needed, but I have
@ -798,7 +799,7 @@ beliefs around copyright? Do ⊞ers believe in intellectual property? What
value do ⊞ers, specifically typographers, see in their work and that of value do ⊞ers, specifically typographers, see in their work and that of
their close peers, the font ⊞ers, and how does copyright relate to these their close peers, the font ⊞ers, and how does copyright relate to these
values?</p> values?</p>
<h3 id="empty-title-12">empty title</h3> <hr />
<h4 id="follow-up-questions-for-conor">Follow up questions for <h4 id="follow-up-questions-for-conor">Follow up questions for
Conor</h4> Conor</h4>
<p>Hey Conor, hope you’re keeping well these days? I’ve been going <p>Hey Conor, hope you’re keeping well these days? I’ve been going
@ -817,7 +818,7 @@ field like graphic ⊞? Curious to know what you think.</p>
totally fine with anonymising, removing, or editing.  </p> totally fine with anonymising, removing, or editing.  </p>
<p>Thanks,<br /> <p>Thanks,<br />
Stephen</p> Stephen</p>
<h3 id="empty-title-13">empty title</h3> <hr />
<h4 id="follow-up-questions-for">Follow up questions for ◱</h4> <h4 id="follow-up-questions-for">Follow up questions for ◱</h4>
<p>Yo ◱, hope all’s good with you these days? </p> <p>Yo ◱, hope all’s good with you these days? </p>
<p>I’ve been piecing together the interviews from December and I’d love <p>I’ve been piecing together the interviews from December and I’d love
@ -841,7 +842,7 @@ way, or maybe it’s something else to you and I’m projecting :)</p>
totally fine with anonymising, removing, or editing.</p> totally fine with anonymising, removing, or editing.</p>
<p>Thanks,<br /> <p>Thanks,<br />
Stephen</p> Stephen</p>
<h3 id="empty-title-14">empty title</h3> <hr />
<h4 id="follow-up-questions-for-1">Follow up questions for ◳</h4> <h4 id="follow-up-questions-for-1">Follow up questions for ◳</h4>
<p>Hey ◳, hope youre good! </p> <p>Hey ◳, hope youre good! </p>
<p>I’m thinking of putting this section of the interview we did back in <p>I’m thinking of putting this section of the interview we did back in
@ -887,7 +888,7 @@ thinking” (Brodine, 1990) or “⊞er without qualities” (Lorusso, 2023).
The fragments have been situated and subjective rather than objective, The fragments have been situated and subjective rather than objective,
they have been outside of categories because the categories are broken they have been outside of categories because the categories are broken
anyway. </p> anyway. </p>
<h3 id="empty-title-15">empty title</h3> <hr />
<h4 id="conclusion-1">Conclusion</h4> <h4 id="conclusion-1">Conclusion</h4>
<p>Last night I dreamt I was standing on a hill in the Swiss Alps and <p>Last night I dreamt I was standing on a hill in the Swiss Alps and
you were there and all of our friends and the hill was covered in little you were there and all of our friends and the hill was covered in little
@ -912,9 +913,9 @@ surfboards were Quiksilver and some they had built themselves from a git
repository but the sun was a walnut and it was definitely moving but I repository but the sun was a walnut and it was definitely moving but I
couldnt tell was it rising or setting but it didn’t matter to us the couldnt tell was it rising or setting but it didn’t matter to us the
surf was great and everything smelled like magnolias.</p> surf was great and everything smelled like magnolias.</p>
<h3 id="empty-title-16">empty title</h3> <hr />
<h3 id="empty-title-17">empty title</h3> <hr />
<h3 id="empty-title-18">empty title</h3> <hr />
<h4 id="acknowledgements">Acknowledgements</h4> <h4 id="acknowledgements">Acknowledgements</h4>
<p>Thanks to Ada, Aglaia, Ben, Chae, Conor, Irmak, Jenny, Joseph, kamo, <p>Thanks to Ada, Aglaia, Ben, Chae, Conor, Irmak, Jenny, Joseph, kamo,
Leslie, Manetta, Marloes, Michael, Rossi.</p> Leslie, Manetta, Marloes, Michael, Rossi.</p>

224
style.css
Unescape Escape View File

@ -1,87 +1,101 @@
:root{
--spot-color-1: 009;;
}
@font-face { @font-face {
font-family: 'Platypi-Regular'; font-family: 'Platypi';
src: url('./fonts/webfonts/Platypi-Regular.woff2'); src: url('../fonts/Platypi[wght].woff2');
font-weight: 300 800;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Platypi-Bold'; font-family: 'Platypi';
src: url('./fonts/webfonts/Platypi-Bold.woff2'); src: url('../fonts/Platypi-Italic[wght].woff2');
font-style: bold; font-weight: 300 800;
font-style: italic;
}
a {
color: inherit;
text-decoration: none;
}
blockquote{
background: linear-gradient(to top left, white, rgba(255, 153, 150, 0), #c048ff), linear-gradient(to top right, #c9f183, rgba(255, 153, 150, 0), #f13d2b) hsl(36deg 100% 50%);
/* background: linear-gradient(320deg, #2bce3e, #ce512b, #5e2bce, #cace2b); */
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: gradientanimator 3s ease infinite;
-moz-animation: gradientanimator 3s ease infinite;
animation: gradientanimator 3s 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 { body {
background-color: #fffdfb; background-color: #fffdfb;
font-family: 'Platypi-Regular', serif; font-family: 'Platypi', serif;
font-size: 41px; font-size: 1.3125rem;
line-height: 3.5rem; font-synthesis: none;
line-height: 1.3;
margin: 0; margin: 0;
padding: 0 70px; padding: 4rem;
box-sizing: border-box; box-sizing: border-box;
} }
.content-list { .content-list {
max-width: 633px; font-size: 41px;
max-width: 40rem;
margin: auto; margin: auto;
margin-right: 0; margin-right: 0;
margin-top: 50px; line-height: 3.5rem;
}
.content-list a {
color: black;
text-decoration: none;
}
.content-list img { img {
width: 35px; width: 2rem;
height: auto; height: auto;
vertical-align: middle; vertical-align: middle;
filter: saturate(2); filter: saturate(2);
}
a:hover img, img:hover {
animation: wiggle 0.6s infinite;
cursor: pointer;
}
} }
.container { .container {
margin: 50px 0; margin: 50px 0;
} line-height: 3.5rem;
h1 {font-style: normal}
h1 {
font-family: 'Platypi-Bold', serif;
font-size: 50px;
max-width: 20%;
margin: 0;
}
.container h2 { h2 {
font-family: 'Platypi-Regular', serif;
font-size: 40px; font-size: 40px;
max-width: 30%; max-width: 30%;
margin: 0; margin: 0;
margin-bottom: -0.5rem; margin-bottom: -0.5rem;
}
} }
#content { #content {
font-size: 22px; max-width: 40rem;
line-height: 1.7rem;
max-width: 633px;
margin: auto; margin: auto;
margin-right: 0; margin-right: 0;
} }
#content p {
margin-left: 25mm;
}
#content h1 {display: none;}
#content h2, #content h3 {
text-decoration: underline;
text-align: center;
}
#content strong {
position: absolute;
margin-left: -44mm;
width: 44mm;
}
@keyframes wiggle { @keyframes wiggle {
25% { 25% {
transform: scale(0.8, 1.3); transform: scale(0.8, 1.3);
@ -93,70 +107,90 @@ h1 {
transform: scale(0.7, 1.2); transform: scale(0.7, 1.2);
} }
} }
.gummies{
.content-list a:hover img, display: flex;
.content-list img:hover { margin: 2rem 0;
animation: wiggle 0.6s infinite;
cursor: pointer;
} }
.gummy .caption{
opacity: 0;
transition: opacity 0.5s ease;
}
.gummy:hover .caption{
opacity: 1
}
.gummy img{
width: 4rem;
filter: saturate(2);
}
h1 {
font-weight: 700;
font-size: 50px;
font-style: italic;
margin: 0 0 0.5rem;
}
img{
max-width: 100%;
}
figcaption{
font-size: 0.85rem;
margin-top: 0.5rem;
}
figure{
width: 100%;
margin: 0 0 2rem;
}
nav{
position: fixed;
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;
}
}
@media (max-width: 768px) { @media (max-width: 768px) {
body { body {
font-size: 21px; line-height: 1.3;
line-height: 1.5rem; padding: 2rem;
padding: 0 50px;
} }
.container { .container {
margin-left: 0;
line-height: 2rem; line-height: 2rem;
margin: 70px 0; /* Adjusted for mobile */ margin: 70px 0; /* Adjusted for mobile */
}
.container h1 { h1 {
font-size: 30px; font-size: 30px;
max-width: 200px; font-style: normal;
} }
.container h2 { h2 {
font-size: 20px; font-size: 20px;
max-width: 70px; margin-bottom: -0.25rem;
} }
.content-list {
max-width: 90%;
margin-top: 30px;
margin-right: -20px;
} }
.content-list img { .content-list {
width: 25px; font-size: 22px;
} line-height: 2rem;
img{
#content { margin: -50px 0;
font-size: 15px; overflow-y:visible;
line-height: 1.2rem;
max-width: -webkit-fill-available;
margin: auto;
margin-right: 0;
margin-top: 90px;
margin-bottom: 90px;
}
#content p {
width: 220px;
margin-left: 20mm;
}
#content h1 {display: none;}
#content h2, #content h3 {
text-decoration: underline;
text-align: center;
} }
#content strong {
position: absolute;
margin-left: -20mm;
width: 14mm;
} }
} }

24
webpage.template.html
Unescape Escape View File

@ -3,30 +3,32 @@
<head> <head>
<title>{{ title }}</title> <title>{{ title }}</title>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href=".../style.css"> <link rel="stylesheet" type="text/css" href="../style.css">
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/x-icon" href="/img/red.png">
</head> </head>
<body> <body>
<!-- Nav bar --> <!-- Nav bar -->
<nav> <nav>
<a href="../index.html" class="title">vulnerable interfaces</a> <h1><a href="../index.html" class="title">vulnerable <br>interfaces</a></h1>
<div class="gummies">
<div class="gummy-1"> <div class="gummy">
<a href="ada/index.html"><img src="../img/purple.png" class="img2"></a> <a href="../ada/index.html"><img src="../img/purple.png" class="img2"></a>
<div class="caption">ada</div> <div class="caption">ada</div>
</div> </div>
<div class="gummy-2"> <div class="gummy">
<a href="aglaia/index.html"><img src="../img/green.png" class="img2"></a> <a href="../aglaia/index.html"><img src="../img/green.png" class="img2"></a>
<div class="caption">aglaia</div> <div class="caption">aglaia</div>
</div> </div>
<div class="gummy-3"> <div class="gummy">
<a href="irmak/index.html"><img src="../img/yellow.png" class="img2"></a> <a href="../irmak/index.html"><img src="../img/yellow.png" class="img2"></a>
<div class="caption">irmak</div> <div class="caption">irmak</div>
</div> </div>
<div class="gummy-4"> <div class="gummy">
<a href="stephen/index.html"><img src="../img/red.png" class="img2"></a> <a href="../stephen/index.html"><img src="../img/red.png" class="img2"></a>
<div class="caption">stephen</div> <div class="caption">stephen</div>
</div> </div>
</div>
</nav> </nav>
<div id="content">{{ content }}</div> <div id="content">{{ content }}</div>

Write Preview
Loading…
Cancel
Save