diff --git a/backplaces/fonts/Platypi-Italic[wght].woff2 b/backplaces/fonts/Platypi-Italic[wght].woff2 new file mode 100644 index 0000000..b7db3b0 Binary files /dev/null and b/backplaces/fonts/Platypi-Italic[wght].woff2 differ diff --git a/backplaces/fonts/Platypi[wght].woff2 b/backplaces/fonts/Platypi[wght].woff2 new file mode 100644 index 0000000..df5602f Binary files /dev/null and b/backplaces/fonts/Platypi[wght].woff2 differ diff --git a/backplaces/fonts/Redaction_35-Regular.woff2 b/backplaces/fonts/Redaction_35-Regular.woff2 new file mode 100644 index 0000000..52a9ff6 Binary files /dev/null and b/backplaces/fonts/Redaction_35-Regular.woff2 differ diff --git a/backplaces/img/cake3.gif b/backplaces/img/cake3.gif new file mode 100644 index 0000000..bce3b3b Binary files /dev/null and b/backplaces/img/cake3.gif differ diff --git a/backplaces/img/hermitagain.gif b/backplaces/img/hermitagain.gif new file mode 100644 index 0000000..e04ae1f Binary files /dev/null and b/backplaces/img/hermitagain.gif differ diff --git a/backplaces/img/purple.png b/backplaces/img/purple.png new file mode 100644 index 0000000..bd5497b Binary files /dev/null and b/backplaces/img/purple.png differ diff --git a/backplaces/img/solar2.gif b/backplaces/img/solar2.gif new file mode 100644 index 0000000..7ce96dc Binary files /dev/null and b/backplaces/img/solar2.gif differ diff --git a/backplaces/index.html b/backplaces/index.html index 9920081..3886f30 100644 --- a/backplaces/index.html +++ b/backplaces/index.html @@ -4,29 +4,42 @@ - Project Title + BackPlaces + +
<< home
-

Project Title ⓘ

-

Student name

+

BackPlaces ⓘ

+

ada varriale, 2024

-
-

Lorem ipsum dolor sit amet consectetur adipiscing elit ligula a aenean ultricies, montes venenatis sapien sodales ac dictumst enim porttitor curae porta facilisi massa, consequat sollicitudin libero bibendum in neque suscipit nulla quisque taciti. Hendrerit mauris himenaeos proin sem habitasse per ut est enim elementum eget nisl, pretium id ornare torquent lectus curae interdum conubia vivamus auctor.

-
-
-

Bibendum maecenas cum faucibus per tincidunt metus ac, diam aliquam aliquet sociosqu parturient a mollis est, felis sem hendrerit rhoncus nisl urna. Ultricies ut risus class ridiculus vestibulum.

+

ada (just ada please) sometimes calls herself a designer and illustrator, sometimes a writer, sometimes a pastry chef. Mostly she calls her friends.


+ +
+ the project website +
+ my thesis (<?water bodies>) +
+vulnerable interfaces
+
+ +
+

This work is free to distribute or modify under the terms of the SIXX +license as published by XPUB, either version one or +any later version. See the license on vulnerable-interfaces.xpub.nl/license for more details.

+
go back @@ -37,35 +50,53 @@
- -
-

Publication

- - - - - -
-
-

Graduation Show

- - - - -
+ + +
+ +
+ + +

+ Hi. I made this play for you; it’s a question to keep us alive together. Is all intimacy about bodies? What happens when our bodies distance intimacy from us?
+ Backplaces is a web-based play. A short anthology of poems and stories about vulnerability, intimacy, and the internet. It explores the internet as a place for holding big feelings and intimacy when it is unbearable. As an homage to those who have been vulnerable with me I created "backplaces". They are tender online spaces for relief and acknowledgement of societal pain.
Some of these stories may evoke memories of pain. As you sit in the audience, know I am with you. If it feels overwhelming, you can step out, take a break, or leave. This isn't choreographed, and I care for you. +
+ I hope you see what I saw in these stories. Sweet dreams now, and I'll talk to you soon. +

+ love, Ada + + +

+ + +
+ + +

Told you I’d talk to you soon. This is the first act of this play, Solar Sibling. It reimagines user comments from TikTok videos about sibling relationships. To do this, I have taken the feelings behind the comments, found where they met my own, and used our shared words to write poems. Solar Sibling celebrates the vulnerabilities nurtured in online communities and invites you to share anonymously on the complexities of sibling relationships. Once you have whispered your sibling feelings to me, they will stay with me and I will never use nor share them. +

+ + +
+ + +

Hermit Fantasy is a short story about a bot and a hermit. It started when I conducted a survey about receiving emotional support on the internet. This is an imagined response to an email I received. The story explores the loneliness of both being online and offline. As an act, it's a series of letters, click by click. +

+ + +
+ +

Cake Intimacies is a performance that took a year to bring together. It is a small selection of stories people told me that I held to memory and rewrote here. The stories come from two performances I hosted. +
+ In the first, I asked participants to eat cake, sitting facing or away from each other, and share stories about cake and the internet. I hosted the second performance at the Art Meets Radical Openness Festival. There I predicted participants' future internet lives using felted archetypes. In return I received stories about feeling strong emotions on the internet. +

+ +
- + \ No newline at end of file diff --git a/backplaces/style.css b/backplaces/style.css new file mode 100644 index 0000000..42b30a3 --- /dev/null +++ b/backplaces/style.css @@ -0,0 +1,290 @@ +:root { + --spot-color-1: #1E33FAff; +} + +@font-face { + font-family: 'Platypi'; + src: url('fonts/Platypi[wght].woff2'); + font-weight: 300 800; + font-style: normal; +} + +@font-face { + font-family: 'Platypi'; + src: url('fonts/Platypi-Italic[wght].woff2'); + font-weight: 300 800; + font-style: italic; +} + +@font-face { + font-family: 'Redaction_Regular-35'; + src: url('fonts/Redaction_Regular-35.woff2'); + font-style: regular; +} + +a { + color: var(--spot-color-1); + text-decoration: none; +} + +#about-student p { + margin: 0; +} + +blockquote { + background: linear-gradient(to top left, white, rgba(255, 153, 150, 0), #c048ff), linear-gradient(to top right, #8edf00, rgba(255, 153, 150, 0), #f13d2b) hsl(36deg 100% 50%); + background-size: 150% 150%; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + + -webkit-animation: gradientanimator 30s ease infinite; + -moz-animation: gradientanimator 30s ease infinite; + animation: gradientanimator 30s ease infinite; +} + +@-webkit-keyframes gradientanimator { + 0% { background-position: 0% 70%; } + 50% { background-position: 100% 31%; } + 100% { background-position: 0% 70%; } +} + +@-moz-keyframes gradientanimator { + 0% { background-position: 0% 70%; } + 50% { background-position: 100% 31%; } + 100% { background-position: 0% 70%; } +} + +@keyframes gradientanimator { + 0% { background-position: 0% 70%; } + 50% { background-position: 100% 31%; } + 100% { background-position: 0% 70%; } +} + +body { + background-color: #fffdfb; + font-family: 'Platypi', serif; + font-size: 1rem; + font-synthesis: none; + line-height: 1.3; + margin: 0; + padding: 4rem; + box-sizing: border-box; +} + +.navlinks { + position: relative; + font-family: 'Platypi'; + font-style: normal; + font-weight: 300; + text-decoration: none; + padding: 0 0 0.5rem; + line-height: 160%; +} + +.navlinks a:hover { + animation: wiggle 0.6s infinite; +} + +@keyframes wiggle { + 0%, 100% { + transform: scale(1); + } + 25% { + transform: scale(0.8, 1.3); + } + 50% { + transform: scale(1.1, 0.8); + } + 75% { + transform: scale(0.7, 1.2); + } +} + +.content-list { + font-size: 41px; + max-width: 40rem; + margin: auto; + margin-right: 0; + line-height: 3.5rem; +} + +.content-list a { + color: inherit; +} + +.content-list img { + width: 2rem; + height: auto; + vertical-align: middle; + filter: saturate(2); +} + +.content-list a:hover img, .content-list img:hover { + animation: wiggle 0.6s infinite; + cursor: pointer; +} + +#licensing-information { + font-size: 0.5rem; + position: fixed; + bottom: 0; + left: 0.2rem; + max-width: 23%; + padding: 0.5rem; + opacity: 0.8; +} + +.container { + margin: 50px 0; + line-height: 3.5rem; +} + +.container h1 { + font-style: normal; +} + +.container h2 { + font-size: 20px; + max-width: 30%; + margin: 0; + margin-bottom: -0.5rem; +} + +#content { + max-width: 40rem; + margin: auto; + margin-right: 0; +} + +header { + line-height: 1.3; +} + +h1, #project-title { + font-family: 'Platypi'; + font-size: 1.6rem; +} + +iframe { + width: 100%; + height: 20rem; + border-radius: 0.5rem; + overflow-x: hidden; + border: none; +} + +img { + max-width: 100%; + padding: 0; + border-radius: 0.5rem; +} + +figcaption { + font-size: 1rem; + padding: 1rem 0 0; +} + +figure { + width: 100%; + margin: 0 0 2rem; + padding: 0; +} + +hr { + border: none; + margin: 4rem; +} + +#galleries { + width: 74%; +} + +nav { + position: fixed; +} + +nav a { + color: inherit; +} + +nav h1 { + font-style: normal; +} + +#script { + max-width: 40rem; + margin: auto; + margin-right: 0; +} + +#script p { + margin-left: 12rem; +} + +#script p:first-of-type { + margin-left: 0; +} + +#script h2, #script h3 { + text-decoration: underline; + text-align: center; +} + +#script strong { + position: absolute; + margin-left: -12rem; + width: 11rem; +} + +::selection { + background: var(--spot-color-1); + color: #fff; +} + +@media only screen and (max-width: 768px) { + body { + line-height: 1.3; + padding: 2rem; + } + + .container { + line-height: 2rem; + margin: 70px 0; + } + + .container h1 { + font-size: 30px; + font-style: normal; + } + + .container h2 { + font-size: 20px; + margin-bottom: -0.25rem; + } + + .content-list { + font-size: 22px; + line-height: 2rem; + } + + .content-list img { + margin: -50px 0; + overflow-y: visible; + } + + nav { + position: static; + } + + nav h1 { + font-size: 1.8rem; + } + + .gummies { + margin: 0; + } + + .gummy { + width: 2.5rem; + } +} diff --git a/css/vulnerable.css b/css/vulnerable.css new file mode 100644 index 0000000..425d732 --- /dev/null +++ b/css/vulnerable.css @@ -0,0 +1,257 @@ +:root{ + --spot-color-1: #009; +} +@font-face { + font-family: 'Platypi'; + src: url('../fonts/Platypi[wght].woff2'); + font-weight: 300 800; + font-style: normal; +} + +@font-face { + font-family: 'Platypi'; + src: url('../fonts/Platypi-Italic[wght].woff2'); + font-weight: 300 800; + font-style: italic; +} +a { + color: var(--spot-color-1); + text-decoration: none; +} +#about-student p{ + margin: 0; +} +blockquote{ + background: linear-gradient(to top left, white, rgba(255, 153, 150, 0), #c048ff), linear-gradient(to top right, #8edf00, rgba(255, 153, 150, 0), #f13d2b) hsl(36deg 100% 50%); + background-size: 150% 150%; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + + -webkit-animation: gradientanimator 30s ease infinite; + -moz-animation: gradientanimator 30s ease infinite; + animation: gradientanimator 30s ease infinite; +} + +@-webkit-keyframes gradientanimator { + 0%{background-position:0% 70%} + 50%{background-position:100% 31%} + 100%{background-position:0% 70%} +} +@-moz-keyframes gradientanimator { + 0%{background-position:0% 70%} + 50%{background-position:100% 31%} + 100%{background-position:0% 70%} +} +@keyframes gradientanimator { + 0%{background-position:0% 70%} + 50%{background-position:100% 31%} + 100%{background-position:0% 70%} +} +body { + background-color: #fffdfb; + font-family: 'Platypi', serif; + font-size: 1.3125rem; + font-synthesis: none; + line-height: 1.3; + margin: 0; + padding: 4rem; + box-sizing: border-box; +} +button{ + border: 1px solid var(--spot-color-1); + font-family: 'Platypi'; + font-style: italic; + font-weight: 300; + background:none; + padding: 0.5rem 1rem; + border-radius: 0.5rem; + margin-right: 0.5rem; + margin-bottom: 0.5rem; +} +button:hover{ + animation: wiggle 0.6s infinite; +} +.content-list { + font-size: 41px; + max-width: 40rem; + margin: auto; + margin-right: 0; + line-height: 3.5rem; + + a{color: inherit} + + img { + width: 2rem; + height: auto; + vertical-align: middle; + filter: saturate(2); + } + + a:hover img, img:hover { + animation: wiggle 0.6s infinite; + cursor: pointer; + } +} + +.container { + margin: 50px 0; + line-height: 3.5rem; + h1 {font-style: normal} + + h2 { + font-size: 40px; + max-width: 30%; + margin: 0; + margin-bottom: -0.5rem; + } +} + +#content { + max-width: 40rem; + margin: auto; + margin-right: 0; +} + +.desaturate{ + filter: grayscale(90%) contrast(1.2) brightness(1.1); +} +.gummies{ + display: flex; + margin: 2rem 0; +} +.gummy .caption{ + opacity: 0; + transition: opacity 0.5s ease; +} +.gummy:hover .caption{ + opacity: 1 +} +.gummy img{ + width: 4rem; + filter: saturate(2); +} +.gummy img:hover{ + scale: 1; + animation: wiggle 0.6s infinite; + cursor: pointer; +} +header{ + line-height:1.3; +} +h1, #project-title { + font-family: 'Platypi'; + line-height: 1; + font-weight: 700; + font-size: 50px; + font-style: italic; + margin: 0 0 0.5rem; +} +iframe{ + width: 100%; + height: 20rem; + border-radius: 0.5rem; + filter: grayscale(70%); + overflow-x: hidden; + border: none; +} +img{ + max-width: 100%; + padding: 0; + border-radius: 0.5rem; +} +figcaption{ + font-size: 0.6rem; + margin: 0.5rem 0 0 0.5rem; +} +figure{ + width: 100%; + margin: 0 0 2rem; + padding: 0; +} +hr{ + border: none; + margin: 4rem; +} + +#galleries{ + width: 74%; +} +nav{ + position: fixed; + a{color: inherit;} + h1{font-style: normal;} +} + +#script{ + + max-width: 40rem; + margin: auto; + margin-right: 0; + p{ + margin-left: 12rem; + } + p:first-of-type{ + margin-left: 0; + } + h2, h3 { + text-decoration: underline; + text-align: center; + } + strong { + position: absolute; + margin-left: -12rem; + width: 11rem; + } +} +::selection{ + background: var(--spot-color-1); + color: #fff; +} +@keyframes wiggle { + 25% { + transform: scale(0.8, 1.3); + } + 50% { + transform: scale(1.1, 0.8); + } + 75% { + transform: scale(0.7, 1.2); + } +} +@media only screen and (max-width: 768px){ + body { + line-height: 1.3; + padding: 2rem; + } + + .container { + line-height: 2rem; + margin: 70px 0; /* Adjusted for mobile */ + + h1 { + font-size: 30px; + font-style: normal; + } + + h2 { + font-size: 20px; + margin-bottom: -0.25rem; + } + } + + .content-list { + font-size: 22px; + line-height: 2rem; + img{ + margin: -50px 0; + overflow-y:visible; + } + } + + nav{ + position: static; + h1{font-size: 1.8rem;} + .gummies{margin: 0;} + .gummy{width: 2.5rem;} + } +} \ No newline at end of file diff --git a/do-you-ever-dream-about-work/amro.jpeg b/do-you-ever-dream-about-work/amro.jpeg new file mode 100644 index 0000000..b3c5dcd Binary files /dev/null and b/do-you-ever-dream-about-work/amro.jpeg differ diff --git a/do-you-ever-dream-about-work/dizzy.jpeg b/do-you-ever-dream-about-work/dizzy.jpeg new file mode 100644 index 0000000..84830c4 Binary files /dev/null and b/do-you-ever-dream-about-work/dizzy.jpeg differ diff --git a/do-you-ever-dream-about-work/index.html b/do-you-ever-dream-about-work/index.html index 9920081..e51a4a9 100644 --- a/do-you-ever-dream-about-work/index.html +++ b/do-you-ever-dream-about-work/index.html @@ -4,29 +4,40 @@ - Project Title + do you ever dream about work? + +
<< home
-

Project Title ⓘ

-

Student name

+

do you ever dream about work? ⓘ

+

stephen kerr
2024

-
-

Lorem ipsum dolor sit amet consectetur adipiscing elit ligula a aenean ultricies, montes venenatis sapien sodales ac dictumst enim porttitor curae porta facilisi massa, consequat sollicitudin libero bibendum in neque suscipit nulla quisque taciti. Hendrerit mauris himenaeos proin sem habitasse per ut est enim elementum eget nisl, pretium id ornare torquent lectus curae interdum conubia vivamus auctor.

-
-
-

Bibendum maecenas cum faucibus per tincidunt metus ac, diam aliquam aliquet sociosqu parturient a mollis est, felis sem hendrerit rhoncus nisl urna. Ultricies ut risus class ridiculus vestibulum.

+

stephen is a graphic designer or a musician or a very weird +and long dream.


+
+
+
go back @@ -37,35 +48,94 @@
- -
-

Publication

- - - - - -
-
-

Graduation Show

- - - - -
+ + +
+ +
+Interactive dream telling. Click then type your story. +
+
+ + +

Reading an email in a dream and you can hear the voices of every word +you read. Or the one where you’re on a computer working, frantically +typing, late, stressed, rushed. What about that dream where you had no +idea how to do your job, everyone is going to know you’re a fake. In +this project I have made spaces for us to share our dreams about labour, +and through that allow conversations about our work, our working +conditions, and the feelings we’re left with when we fall asleep each +night.

+

For the past year I have spoken with designers, artists and makers +finding out how they spend their time in everyday life, what they +believe and how they feel. In our dreams we feel the weird bits the +most: hmm a bit uncomfortable, ooh that gave me a fright, aah so, so +sad. Through performances, online tools and storytelling, I want to hold +these dreams together, to unite our experiences. Online I have made tools to gather +stories and tools to tell them. I have facilitated group dream re-enactments (a few times), using felt dolls to share our night time +theatre.

+ + +
+ + +
+
+ + +
+
+ + +
+ + + + +
+ + +
+
+ + +
+
+Where do dreams come from? + +
+

Licensing information

+

This work is free to distribute or modify under the terms of the SIXX +license as published by XPUB, either version one of the SIXX License or +any later version. See the SIXX License for more details. A copy of the +license can be found on vulnerable-interfaces.xpub.nl/license.

+
- + \ No newline at end of file diff --git a/do-you-ever-dream-about-work/keyboard24.jpeg b/do-you-ever-dream-about-work/keyboard24.jpeg new file mode 100644 index 0000000..ffea477 Binary files /dev/null and b/do-you-ever-dream-about-work/keyboard24.jpeg differ diff --git a/do-you-ever-dream-about-work/keyboard25.jpeg b/do-you-ever-dream-about-work/keyboard25.jpeg new file mode 100644 index 0000000..14a3b40 Binary files /dev/null and b/do-you-ever-dream-about-work/keyboard25.jpeg differ diff --git a/do-you-ever-dream-about-work/keyboard26.jpeg b/do-you-ever-dream-about-work/keyboard26.jpeg new file mode 100644 index 0000000..13683f5 Binary files /dev/null and b/do-you-ever-dream-about-work/keyboard26.jpeg differ diff --git a/do-you-ever-dream-about-work/peecee.jpg b/do-you-ever-dream-about-work/peecee.jpg new file mode 100644 index 0000000..c2bcabb Binary files /dev/null and b/do-you-ever-dream-about-work/peecee.jpg differ diff --git a/do-you-ever-dream-about-work/red.png b/do-you-ever-dream-about-work/red.png new file mode 100644 index 0000000..2ca8244 Binary files /dev/null and b/do-you-ever-dream-about-work/red.png differ diff --git a/do-you-ever-dream-about-work/style.css b/do-you-ever-dream-about-work/style.css new file mode 100644 index 0000000..425d732 --- /dev/null +++ b/do-you-ever-dream-about-work/style.css @@ -0,0 +1,257 @@ +:root{ + --spot-color-1: #009; +} +@font-face { + font-family: 'Platypi'; + src: url('../fonts/Platypi[wght].woff2'); + font-weight: 300 800; + font-style: normal; +} + +@font-face { + font-family: 'Platypi'; + src: url('../fonts/Platypi-Italic[wght].woff2'); + font-weight: 300 800; + font-style: italic; +} +a { + color: var(--spot-color-1); + text-decoration: none; +} +#about-student p{ + margin: 0; +} +blockquote{ + background: linear-gradient(to top left, white, rgba(255, 153, 150, 0), #c048ff), linear-gradient(to top right, #8edf00, rgba(255, 153, 150, 0), #f13d2b) hsl(36deg 100% 50%); + background-size: 150% 150%; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + + -webkit-animation: gradientanimator 30s ease infinite; + -moz-animation: gradientanimator 30s ease infinite; + animation: gradientanimator 30s ease infinite; +} + +@-webkit-keyframes gradientanimator { + 0%{background-position:0% 70%} + 50%{background-position:100% 31%} + 100%{background-position:0% 70%} +} +@-moz-keyframes gradientanimator { + 0%{background-position:0% 70%} + 50%{background-position:100% 31%} + 100%{background-position:0% 70%} +} +@keyframes gradientanimator { + 0%{background-position:0% 70%} + 50%{background-position:100% 31%} + 100%{background-position:0% 70%} +} +body { + background-color: #fffdfb; + font-family: 'Platypi', serif; + font-size: 1.3125rem; + font-synthesis: none; + line-height: 1.3; + margin: 0; + padding: 4rem; + box-sizing: border-box; +} +button{ + border: 1px solid var(--spot-color-1); + font-family: 'Platypi'; + font-style: italic; + font-weight: 300; + background:none; + padding: 0.5rem 1rem; + border-radius: 0.5rem; + margin-right: 0.5rem; + margin-bottom: 0.5rem; +} +button:hover{ + animation: wiggle 0.6s infinite; +} +.content-list { + font-size: 41px; + max-width: 40rem; + margin: auto; + margin-right: 0; + line-height: 3.5rem; + + a{color: inherit} + + img { + width: 2rem; + height: auto; + vertical-align: middle; + filter: saturate(2); + } + + a:hover img, img:hover { + animation: wiggle 0.6s infinite; + cursor: pointer; + } +} + +.container { + margin: 50px 0; + line-height: 3.5rem; + h1 {font-style: normal} + + h2 { + font-size: 40px; + max-width: 30%; + margin: 0; + margin-bottom: -0.5rem; + } +} + +#content { + max-width: 40rem; + margin: auto; + margin-right: 0; +} + +.desaturate{ + filter: grayscale(90%) contrast(1.2) brightness(1.1); +} +.gummies{ + display: flex; + margin: 2rem 0; +} +.gummy .caption{ + opacity: 0; + transition: opacity 0.5s ease; +} +.gummy:hover .caption{ + opacity: 1 +} +.gummy img{ + width: 4rem; + filter: saturate(2); +} +.gummy img:hover{ + scale: 1; + animation: wiggle 0.6s infinite; + cursor: pointer; +} +header{ + line-height:1.3; +} +h1, #project-title { + font-family: 'Platypi'; + line-height: 1; + font-weight: 700; + font-size: 50px; + font-style: italic; + margin: 0 0 0.5rem; +} +iframe{ + width: 100%; + height: 20rem; + border-radius: 0.5rem; + filter: grayscale(70%); + overflow-x: hidden; + border: none; +} +img{ + max-width: 100%; + padding: 0; + border-radius: 0.5rem; +} +figcaption{ + font-size: 0.6rem; + margin: 0.5rem 0 0 0.5rem; +} +figure{ + width: 100%; + margin: 0 0 2rem; + padding: 0; +} +hr{ + border: none; + margin: 4rem; +} + +#galleries{ + width: 74%; +} +nav{ + position: fixed; + a{color: inherit;} + h1{font-style: normal;} +} + +#script{ + + max-width: 40rem; + margin: auto; + margin-right: 0; + p{ + margin-left: 12rem; + } + p:first-of-type{ + margin-left: 0; + } + h2, h3 { + text-decoration: underline; + text-align: center; + } + strong { + position: absolute; + margin-left: -12rem; + width: 11rem; + } +} +::selection{ + background: var(--spot-color-1); + color: #fff; +} +@keyframes wiggle { + 25% { + transform: scale(0.8, 1.3); + } + 50% { + transform: scale(1.1, 0.8); + } + 75% { + transform: scale(0.7, 1.2); + } +} +@media only screen and (max-width: 768px){ + body { + line-height: 1.3; + padding: 2rem; + } + + .container { + line-height: 2rem; + margin: 70px 0; /* Adjusted for mobile */ + + h1 { + font-size: 30px; + font-style: normal; + } + + h2 { + font-size: 20px; + margin-bottom: -0.25rem; + } + } + + .content-list { + font-size: 22px; + line-height: 2rem; + img{ + margin: -50px 0; + overflow-y:visible; + } + } + + nav{ + position: static; + h1{font-size: 1.8rem;} + .gummies{margin: 0;} + .gummy{width: 2.5rem;} + } +} \ No newline at end of file diff --git a/img/red.png b/img/red.png new file mode 100644 index 0000000..2ca8244 Binary files /dev/null and b/img/red.png differ diff --git a/talking-documents/act1.png b/talking-documents/act1.png new file mode 100644 index 0000000..f4c3674 Binary files /dev/null and b/talking-documents/act1.png differ diff --git a/talking-documents/act2.png b/talking-documents/act2.png new file mode 100644 index 0000000..36e0d4d Binary files /dev/null and b/talking-documents/act2.png differ diff --git a/talking-documents/act3.png b/talking-documents/act3.png new file mode 100644 index 0000000..4f04e7c Binary files /dev/null and b/talking-documents/act3.png differ diff --git a/talking-documents/act7.png b/talking-documents/act7.png new file mode 100644 index 0000000..67a9847 Binary files /dev/null and b/talking-documents/act7.png differ diff --git a/talking-documents/amro.jpg b/talking-documents/amro.jpg new file mode 100644 index 0000000..42b5377 Binary files /dev/null and b/talking-documents/amro.jpg differ diff --git a/talking-documents/gemeente_front.jpg b/talking-documents/gemeente_front.jpg new file mode 100644 index 0000000..04077ac Binary files /dev/null and b/talking-documents/gemeente_front.jpg differ diff --git a/talking-documents/index.html b/talking-documents/index.html index 9920081..7f42cd5 100644 --- a/talking-documents/index.html +++ b/talking-documents/index.html @@ -4,7 +4,7 @@ - Project Title + Talking Documents @@ -14,19 +14,26 @@
<< home
-

Project Title ⓘ

-

Student name

+

Talking Documents ⓘ

+

Aglaia Petta

-

Lorem ipsum dolor sit amet consectetur adipiscing elit ligula a aenean ultricies, montes venenatis sapien sodales ac dictumst enim porttitor curae porta facilisi massa, consequat sollicitudin libero bibendum in neque suscipit nulla quisque taciti. Hendrerit mauris himenaeos proin sem habitasse per ut est enim elementum eget nisl, pretium id ornare torquent lectus curae interdum conubia vivamus auctor.

+

Talking Documents are performative bureaucratic text inspections that intend to create temporal public interventions through performative readings. I utilized the paperwork interface of my smaller-scale bureaucratic story in order to unravel and foreground questions related to the role of bureaucracy as less material border and as a regulatory mechanism reflecting narratives, ideologies, policies.

+

Central element of this project is a seven-act scenario that construct my personal paperwork story, unraveling the actual struggles of my communication with the government due to my eviction. I ended up conducting accidentally auto-ethnography as the project was dynamically being reshaped due to the material constraints of the bureaucratic timeline.

+

The body of the text of the “theatrical” script is sourced from the original documents, email threads as well as recordings of the conversations with the municipality of Rotterdam I documented and archived throughout this period. I preserved the sequence of the given sentences and by discarding the graphic design of the initial forms, I structured and repurposed the text into a playable scenario.

+

The transformation of the materiality of a document into a scenario to be enacted collectively in public aims to examine these artifacts and highlight the shrouded performative elements of these processes. The collective readings of these scenarios introduce an instant publishing method and a communal tool of inspecting bureaucratic bordering infrastructures. I organized a series of performative readings in different (institutional) contexts, public and semi-public like WDKA, Art Meets Radical Openness Festival in Linz, the City Hall of Rotterdam where I invited people to perform the play together, like a tiny theater.

+

The marginal voices of potential applicants are embodying and enacting a role. “The speech does not only describe but brings things into existence”(Austin, 1975). My intention was to stretch the limits of dramaturgical speech through vocalizing a document and turn individual administrative cases into public ones. How do the inscribed words in the documents are not descriptive but on the contrary “are instrumentalised in getting things done” (Butler,1997). Words as active agents. Bodies as low-tech “human microphones”.

+

A tiny website holds the vocal archive of the different recordings and soundscapes from these public moments published in the graduation exhibition of XPUB in June 2024.

-

Bibendum maecenas cum faucibus per tincidunt metus ac, diam aliquam aliquet sociosqu parturient a mollis est, felis sem hendrerit rhoncus nisl urna. Ultricies ut risus class ridiculus vestibulum.

+

Aglaia Petta (she/her) was trained as an architect but finds herself mostly somewhere between artistic research and making. Her work floats in between performative archives, counter-mapping practices, the politics of public space and activism. She happened to come from Greece.

+ +

aglaiapetta@gmail.com

go back @@ -40,29 +47,31 @@
-

Publication

+

Publication [... pending]

- - - - + + + + +
-

Graduation Show

- - - - +

Graduation Show - Installation [...pending]

+
diff --git a/talking-documents/pub1.jpg b/talking-documents/pub1.jpg new file mode 100644 index 0000000..ad8bce9 Binary files /dev/null and b/talking-documents/pub1.jpg differ diff --git a/talking-documents/sceanrio_A6_booklet.pdf b/talking-documents/sceanrio_A6_booklet.pdf new file mode 100644 index 0000000..55f5f29 Binary files /dev/null and b/talking-documents/sceanrio_A6_booklet.pdf differ diff --git a/talking-documents/statue.jpg b/talking-documents/statue.jpg new file mode 100644 index 0000000..28f6182 Binary files /dev/null and b/talking-documents/statue.jpg differ diff --git a/wink/animationseq.png b/wink/animationseq.png new file mode 100644 index 0000000..d384eb3 Binary files /dev/null and b/wink/animationseq.png differ diff --git a/wink/clickgame.png b/wink/clickgame.png new file mode 100644 index 0000000..be942a5 Binary files /dev/null and b/wink/clickgame.png differ diff --git a/wink/index.html b/wink/index.html index 9920081..c51f735 100644 --- a/wink/index.html +++ b/wink/index.html @@ -4,7 +4,7 @@ - Project Title + Wink @@ -14,19 +14,37 @@
<< home
-

Project Title ⓘ

-

Student name

+

Wink! ⓘ

+

Irmak Suzan Ertas

-

Lorem ipsum dolor sit amet consectetur adipiscing elit ligula a aenean ultricies, montes venenatis sapien sodales ac dictumst enim porttitor curae porta facilisi massa, consequat sollicitudin libero bibendum in neque suscipit nulla quisque taciti. Hendrerit mauris himenaeos proin sem habitasse per ut est enim elementum eget nisl, pretium id ornare torquent lectus curae interdum conubia vivamus auctor.

+

Wink is a prototype for an interactive picture book platform. + This platform aims to make reading into a mindfull and thought provoking process by using interactive and playful elements, + multiple stories within one narrative and sound elements. Especially today where consumerism and low attention span is a rising + issue especially amongst young readers, this was an important task to tackle. The thought of Wink emerged to find a more sustainable + and creative way of reading for elementary school children.

+

Working as a children’s literature editor for years, I came to a realisation that picture books were turning into another object + that kids read and consume on daily basis. At least this is what I observed in Turkey. Teachers and parents were finding it difficult + to find new books constantly or were tired of rereading the same book. As a young person in the publishing sector, I believe there + should be equal options for children as there is for adults; such as ebooks, audiobooks etc. But moreover a “book” that can be + redefined, reread or be interacted with. So I revisited an old story I wrote, translated to English and named it, “Bee Within”.

+

Bee Within, is a story about grief and it is based on my experiences throughout the years. I erased it, rewrote it, edited it, destroyed it multiple + times over the past years, simultaneously with new experiences of loss. In the end, I believe the story turned out to be an ode to + remembering or might I say an ode to not being able to forget or an ode to the fear of forgetting which I now think is a great + and sweet battle between death and life. I think it is an important subject to touch upon, especially for children dealing with + trauma in many parts of the world.

+

Over the past two years, experimenting with storytelling techniques, interactivity options and workshops with children and adults, around reading and doing various exercises on Bee Within, I improved the story to be a more playful and interactive one which can be re-read, + re-played and eventually re-formed non digitally to be reachable for all children.

-

Bibendum maecenas cum faucibus per tincidunt metus ac, diam aliquam aliquet sociosqu parturient a mollis est, felis sem hendrerit rhoncus nisl urna. Ultricies ut risus class ridiculus vestibulum.

+

irmak ertaş (?rmak erta?) is an experimental publisher, writer, human rights activist and editor. She is the manager of the young writers platform İlkyaz, which aims to globally promote young writers from Turkey. She likes to play with impossible ways of forming a sentence, words that need a massage and punctuation in her poetry. +She is currently interested in and involved in research projects that engage with creativity for children, interactive literature, collective memory, healing and concrete poetry. Her work examines the implications of knot theory in relation to narratives, phonetic transcriptions and inscription. She enjoys using coding as an art form, +open source and digital tools in expanding or exhibiting her work. After completing her masters degree at Piet Zwart Institute, she would like to pursue her project on interactive e- books for children and keep promoting young literature. She lives in between Turkey and The Netherlands.

go back @@ -40,22 +58,26 @@

Publication

- - - - + + + +

Graduation Show

diff --git a/wink/leeszaalknotpoems.jpg b/wink/leeszaalknotpoems.jpg new file mode 100644 index 0000000..f46b01d Binary files /dev/null and b/wink/leeszaalknotpoems.jpg differ diff --git a/wink/printp1.jpg b/wink/printp1.jpg new file mode 100644 index 0000000..086b7c8 Binary files /dev/null and b/wink/printp1.jpg differ diff --git a/wink/printp2.jpg b/wink/printp2.jpg new file mode 100644 index 0000000..acb14da Binary files /dev/null and b/wink/printp2.jpg differ diff --git a/wink/printp3.jpg b/wink/printp3.jpg new file mode 100644 index 0000000..ac5df2b Binary files /dev/null and b/wink/printp3.jpg differ diff --git a/wink/twine.png b/wink/twine.png new file mode 100644 index 0000000..eecb061 Binary files /dev/null and b/wink/twine.png differ diff --git a/wink/unnamed.png b/wink/unnamed.png new file mode 100644 index 0000000..32ff979 Binary files /dev/null and b/wink/unnamed.png differ