simon 5 years ago
commit 7ddba6b8fc

BIN
.DS_Store vendored

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 782 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 704 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 503 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 740 KiB

@ -0,0 +1,82 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
/*a {
color: black !important;
}
#inner-hleft-text{
height:auto !important;*/
}
</style>
<title>Cartographies of Counter-Speculation</title>
<meta name="description" content="XPUB">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/pages.css">
</head>
<body>
<div id='wrapper'></div>
<a href='../' id='homebttn' class='ext'> << home</a>
<header>
<h1 id='project-title'>Cartorgaphies of Counter-Speculation <a href='#hleft-text' class='show'></a></h1>
<h2 id='student-name'><a href='http://palomagarciagarcia.com' target='_blank' class='ext' id='student-page'>Paloma García García</a></h2>
<div id='hleft-text'>
<a href=# id='back'>
<div id='inner-hleft-text'>
<div id='ihtp'>
<object>
<div id='about-project'>
<p>'Cartographies of Counter-Speculation' is a collection of maps and diagrams that envisions alternative housing models that are almost never represented on maps. The project is based on the practice of three communities in Rotterdam: Stad in de Maak, Poortgebow and Stichting NAC, which are exposing property speculation, each of them in their own specific way. Maps and diagrams are not only elements of contemplation but they are also open spaces to start conversations. Dig deep into them and leave your footprint!
</div>
<hr align='left'>
<div id='about-student'>
<p>Paloma García García (1992, ES) is an architect and researcher currently based in Rotterdam. Her work explores digital communication mediums that can be used as socio political communication tools. Her life is based on drawing diagrams and mapping everyhthing that is in front of her.<br>
</p>
</div>
<a id='getback' class='int'> go back </a>
</object>
</div>
</div>
</a>
</div>
</header>
<section id='main'>
<div id="galleries">
<div id='work'>
<h3 class='gal-title'>Work</h3>
<ul id='publist'>
<li><a href='https://hub.xpub.nl/cartographies/' target="_blank" class='ext'>Project Website</a></li>
<img src="img/COI_1.png" class='workimg'/>
<img src="img/COI_2.png" class='workimg'/>
<img src="img/COI_3.png" class='workimg'/>
<img src="img/COI_4.png" class='workimg'/>
<img src="img/COI_5.png" class='workimg'/>
<img src="img/COI_6.png" class='workimg'/>
<li><a href="http://artlibre.org/licence/lal/en/" target="_blank" class='ext'>License</a></li>
<p>[Paloma García García, Cartographies of Counter-Speculation, 2020. Rotterdam].<br>
Copyleft: This is a free work, you can copy, distribute, and modify it under the terms of the Free Art License<br>
http://artlibre.org/licence/lal/en/</p>
</ul>
</div>
<div id='publication'>
<h3 class='gal-title'>Thesis</h3>
<ul id='publist'>
<li><a href='pdf/garcia-paloma-cartographies-of-invisibility.pdf' target="_blank" class='ext'>Thesis PDF</a></li>
</ul>
</div>
</div>
</section>
</div>
</body>
</html>

@ -62,8 +62,6 @@ He graduated from Design Academy Eindhoven and currently studies Media Design ma
<li><a href='https://git.xpub.nl/ZalanSzakacs/EigengrauScripts' target="_blank" class='ext'>Project Website</a></li>
</ul>
<img src="img/EIGENGRAU_1.jpg" class='workimg'/>
</div>
<div id='publication'>
<h3 class='gal-title'>Publication</h3>

@ -0,0 +1,143 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ilinx</title>
<meta name="description" content="XPUB">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/pages.css">
<style type="text/css">
body { font-family: "Lucida Console", Monaco, monospace !important;
color: white;
background-color: black !important;
background: radial-gradient(15px 5px at 25% 0, transparent 0%, transparent 80%, rgba(255, 255, 255, 0.06) 80%, rgba(255, 255, 255, 0.06) 99%, transparent 99%, transparent 100%),
radial-gradient(15px 5px at 75% 100%, transparent 0%, transparent 80%, rgba(255, 255, 255, 0.06) 80%, rgba(255, 255, 255, 0.06) 99%, transparent 99%, transparent 100%),
radial-gradient(10px 3px at 25% 0, transparent 0%, transparent 70%, rgba(255, 255, 255, 0.05) 70%, rgba(255, 255, 255, 0.05) 99%, transparent 99%, transparent 100%),
radial-gradient(10px 3px at 75% 100%, transparent 0%, transparent 70%, rgba(255, 255, 255, 0.05) 70%, rgba(255, 255, 255, 0.05) 99%, transparent 99%, transparent 100%),
radial-gradient(30px 8px at 25% 0, transparent 0%, transparent 55%, rgba(255, 255, 255, 0.02) 55%, rgba(255, 255, 255, 0.02) 99%, transparent 99%, transparent 100%),
radial-gradient(30px 8px at 75% 100%, transparent 0%, transparent 55%, rgba(255, 255, 255, 0.02) 55%, rgba(255, 255, 255, 0.02) 99%, transparent 99%, transparent 100%), #c4cbc3;
background-size: 60px 40px, 60px 40px, 40px 24px, 40px 24px, 120px 64px, 120px 64px;
background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
-webkit-animation: wave 5s linear infinite;
animation: wave 5s linear infinite;
}
@-webkit-keyframes wave {
0% {
background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
}
20% {
background-position: 51% 48%, 51% 48%, 53% 52%, 53% 52%, 48% 47%, 48% 47%;
}
40% {
background-position: 49% 51%, 49% 51%, 48% 51%, 48% 51%, 54% 50%, 54% 50%;
}
60% {
background-position: 53% 54%, 53% 54%, 46% 54%, 46% 54%, 53% 46%, 53% 46%;
}
80% {
background-position: 51% 52%, 51% 52%, 49% 49%, 49% 49%, 49% 48%, 49% 48%;
}
0% {
background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
}
}
@keyframes wave {
0% {
background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
}
20% {
background-position: 51% 48%, 51% 48%, 53% 52%, 53% 52%, 48% 47%, 48% 47%;
}
40% {
background-position: 49% 51%, 49% 51%, 48% 51%, 48% 51%, 54% 50%, 54% 50%;
}
60% {
background-position: 53% 54%, 53% 54%, 46% 54%, 46% 54%, 53% 46%, 53% 46%;
}
80% {
background-position: 51% 52%, 51% 52%, 49% 49%, 49% 49%, 49% 48%, 49% 48%;
}
0% {
background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
}
}
h1 { font-family: "Lucida Console", Monaco, monospace !important; }
#wrapper {background-color: #0000 !important}
#ihtp {color: white !important}
a{color: white !important;}
a#student-page{color: white !important;}
.ext2 {
border-bottom-color: #00fc33;
background:linear-gradient(to bottom, #00fc33 0, #00fc33 100%);
background-position:0 100%;
background-repeat:repeat-x;
background-size: 0 0;
transition:background .2s ease-in-out;
}
#about-student {
color: #00fc33;
}
</style>
</head>
<body>
<div id='wrapper'>
<a href='../' id='homebttn' class='ext'> << home</a>
<header>
<h1 id='project-title'>ilinx <a href='#hleft-text' class='show'></a></h1>
<h2 id='student-name'><a href='http://hub.xpub.nl/ilinx/dls/' target='_blank' class='ext2' id='student-page'>Tancredi Di Giovanni</a></h2>
<div id='hleft-text'>
<a href=# id='back'>
<div id='inner-hleft-text'>
<div id='ihtp'>
<object>
<div id='about-project'>
<p>BlaBlaBlAbLAblAlbLaaiaufiaeufjiajdoaidja</p>
</div>
<hr align='left'>
<div id='about-student'>
<p>BlaBlaBlAbLAblAlbLaaiaufiaeufjiajdoaidja</p>
</div>
<a id='getback' class='int'> go back </a>
</object>
</div>
</div>
</a>
</div>
</header>
<section id='main'>
<div id="galleries">
<div id='work'>
<h3 class='gal-title'>Work</h3>
<ul id='publist'>
<li><a href='http://hub.xpub.nl/ilinx' target="_blank" class='ext2'>Project Website</a></li>
</ul>
</div>
<div id='galleries'>
<img src="img/1.jpg" class='workimg'/>
<img src="img/2.jpg" class='workimg'/>
<img src="img/3.jpg" class='workimg'/>
<img src="img/4.jpg" class='workimg'/>
<img src="img/5.jpg" class='workimg'/>
</div>
<div id='publication'>
<h3 class='gal-title'>Thesis</h3>
<ul id='publist'>
<li><a href='pdf/OHE.pdf' target="_blank" class='ext2'>Out-of-Hardware Experience: Consciousness and Software [PDF]</a></li>
</ul>
</div>
</div>
</section>
</div>
</body>
</html>

Binary file not shown.

@ -109,11 +109,10 @@
</div>
<div id='2020-att8'>
<div class='wrap'>
<div class='upbar'><a href="#"><p><span class='uptitle'>publication name</span><span class='upclose'>X</span></p></a></div>
<div class='upbar'><a href="#"><p><span class='uptitle'>The Repeater Archive</span><span class='upclose'>X</span></p></a></div>
<div class='twowrap'>
<img src='img/ex1.jpg'/>
<img src='img/ex2.jpg'/>
<img src='img/ex3.jpg'/></div>
<img src='the-repeater-archive/img/repeater_archive_photo_1.jpg'/>
</div>
</div>
</div>
</div>
@ -249,8 +248,8 @@
</div>
<div class='subrow'>
<p class='subcl1'>Tancredi Di Giovanni</p>
<p class='subcl2'><a href='empty.html' target="_blank" class='ext'>Project Name</p>
<p class='subcl3'><a href='test.pdf' target="_blank" class='ext'>PDF</a> // <a href='#2020-att2' class='int'>IMG</a></p>
<p class='subcl2'><a href='ilinx/' target="_blank" class='ext'>ilinx</p>
<p class='subcl3'><a href='ilinx/pdf/OHE.pdf' target="_blank" class='ext'>Out of Hardware Experience: Consciousness and Software</a> // <a href='#2020-att2' class='int'>IMG</a></p>
</div>
<div class='subrow'>
<p class='subcl1'>Bohye Woo</p>
@ -279,8 +278,8 @@
</div>
<div class='subrow'>
<p class='subcl1'>Biyi Wen</p>
<p class='subcl2'><a href='empty.html' target="_blank" class='ext'>Project Name</a></p>
<p class='subcl3'><a href='test.pdf' target="_blank" class='ext'>PDF</a> // <a href='#2020-att8' class='int'>IMG</a></p>
<p class='subcl2'><a href='the-repeater-archive/' target="_blank" class='ext'>The Repeater Archive</a></p>
<p class='subcl3'><a href='the-repeater-archive/pdf/Biyi_Wen_Thesis.pdf' target="_blank" class='ext'>PDF</a> // <a href='#2020-att8' class='int'>IMG</a></p>
</div>
</div>
</div>

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 284 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 486 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 687 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 705 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 600 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 492 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 628 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 206 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 207 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 717 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 828 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 306 KiB

@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="date" content="JULY 2020">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../css/pages.css">
<link rel="stylesheet" href="style.css">
<meta name="description" content="XPUB">
<title>PARALLEL COLONIALISM</title>
</head>
<body>
<div id="bg-left"></div>
<div id="bg-right"></div>
<!-- XPUB SYNTAX -->
<a href='../' id='homebttn' class='ext mytypestyle' > << home</a>
<header>
<h1 id='project-title'>Parallel Colonialism</h1>
<h2 id='student-name' class="mytypestyle" ><a href="https://www.bohyewoo.com">Bohye Woo</a></h2>
<div id='hleft-text'>
<div id='inner-hleft-text'>
<div id='ihtp'>
<object>
<div id='about-project'>
<p><i>Parallel Colonialism</i> is a digital text archiving tool that offers a comparative reading application between historical and contemporary documents. It allows users to experience how regulatory terms play in colonialism by offering two types of legal documents: Terms of Services and historical colonial treaties.</p>
<p>By selecting one of each document, a parallel reading platform is enabled, in which you can comparatively label, highlight and analyze a range of specific terms. This helps you to analyze on how these documents operate similar ways in colonialism, and it opens up discussions in finding a colonial resemblance by mapping out the whole contractual landscape of terms used in each document. </p>
----------------
<p>Parallel Colonialism (2020) has been produced in the context of the graduation research of Bohye Woo from the Experimental Publishing (XPUB) Master course at the Piet Zwart Institute, Willem de Kooning Academy, Rotterdam University of Applied Sciences.</p>
<p>Licence: This is a free work. You can copy, distribute, and modify it under the terms of the Free Art License (http://artlibre.org/licence/lal/en/)</p>
----------------
</div>
<div id='about-student'>
<p> Bio will be added soon. </p>
</div>
</object>
</div>
</div>
</div>
</header>
<section id='main'>
<div id="galleries">
<div id='work'>
<h3 class='gal-title mytypestyle'>Work</h3>
<ul id='publist'>
<li><a href='https://hub.xpub.nl/termsofservice/' target="_blank" class='ext mytypestyle'>↝ Project Website</a></li>
</ul>
<img src="img/parallel-colonialism-01.png" class='workimg'/>
<img src="img/parallel-colonialism-02.png" class='workimg'/>
<img src="img/parallel-colonialism-06.png" class='workimg'/>
<img src="img/parallel-colonialism-10.png" class='workimg'/>
<img src="img/parallel-colonialism-12.png" class='workimg'/>
<img src="img/parallel-colonialism-13.png" class='workimg'/>
</div>
<div id='publication'>
<h3 class="gal-title mytypestyle">Publication</h3>
<ul id='publist'>
<li><a href='pdf/bohye-woo-thesis-2020.pdf' target="_blank" class='ext mytypestyle'>↝ Thesis (PDF)</a></li>
</ul>
</div>
</div>
</section>
</body>
</html>

Binary file not shown.

@ -0,0 +1,187 @@
@font-face {
font-family: "Belgika";
src: url("fonts/belgika-5th-webfont.ttf");
font-weight: 5;
font-style: normal;}
@font-face {
font-family: "Belgika";
src: url("fonts/belgika-8th-webfont.ttf");
font-weight: 8;
font-style: normal;}
@font-face {
font-family: "Belgika";
src: url("fonts/belgika-16th-webfont.ttf");
font-weight: 16;
font-style: italic;}
@font-face {
font-family: "Belgika";
src: url("fonts/belgika-40th-webfont.ttf");
font-weight: 40;
font-style: normal;
}
body{
background: none;
}
a{
color: white;
text-decoration: none;
display: inline;
border-bottom: 0px;
background: none;
}
.ext{
background: none;
}
a:hover{
color: grey;
text-decoration: none;
cursor: pointer;
}
a:visited{
text-decoration: none;
}
/* HEADER */
aside{
position: fixed;
top: 5px;
width: calc(100vw - 15px);
font-size: 12px;
font-family: "Belgika", Arial, Helvetica, sans-serif;
font-weight: 5;
font-style: normal;
z-index: 999;
}
.marquee {
position: relative;
width: calc(100vw - 15px);
max-width: 100%;
overflow-x: hidden;
height: 50px;
}
.track {
position: absolute;
white-space: nowrap;
will-change: transform;
animation: marquee 20s linear infinite;
}
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* HOME BUTTON */
.homebutton{
background-color: inherit;
text-align:right;
color:black;
position:absolute;
top:0;
right:0;
margin-right:2%;
margin-top:25px;
padding:0.3% 0 0 0.3%;
font-size:0.6em;
z-index:999;
}
/* TYPE STYLE */
#project-title{
font-family: "Belgika", Arial, Helvetica, sans-serif;
font-weight: 5;
font-style: normal;
color: white;
}
#about-student{
font-family: helvetica;
font-style: italic;
color: #3c3c3c;
font-weight: 16;
font-size: calc(8px + 0.3vw);
padding-top: 10px;
color: white;
}
#about-project {
color: white;
}
#inner-hleft-text {
color: white;
}
.mytypestyle{
font-family: "Belgika", Arial, Helvetica, sans-serif;
font-weight: 4;
color: black;
}
#inner-hleft-text{
overflow-y: scroll;
font-family: helvetica;
font-weight: 16;
font-size: calc(11px + 0.3vw);
color: white;
}
li{
list-style: none;
transform-origin: 0 0;
color: white;
}
#inner-hleft-text::-webkit-scrollbar {
display: none;
}
.workimg{
padding: 0 0 0 0;
}
#bg-left{
position: fixed;
left: 0;
top: 0;
display: inline-block;
width: 25vw;
height: 100vh;
background-color: black;
}
#bg-right{
position: fixed;
left: 25vw;
top: 0;
display: inline-block;
height: 100vh;
width: 75vw;
background-color: white;
}
p {
line-height: 1.5em;
}

@ -19,52 +19,43 @@
h3 {
font-family: BLKCHCRY;
}
#homebttn {
background-color: transparent!important;
}
</style>
</head>
<body>
<div id='wrapper' style="background: linear-gradient(90deg, rgba(59,232,255,0.79) 0%, rgba(59,232,255,0.55) 26%, rgba(191,89,255,0.91) 100%);"></div>
<a href='../' id='homebttn' class='ext'> << home </a>
<a href='../' id='homebttn' class='ext'> << home</a>
<header>
<h1 id='project-title'>Syster Papyri Magicae <a href='#hleft-text' class='show'></a><br><a href='../' class='show' id='home'><< </a></h1>
<div id='sub'>
<h1 id='project-title'>Syster Papyri Magicae <a href='#hleft-text' class='show'></a></h1>
<h2 id='student-name'>Artemis Gryllaki</h2>
</div>
<div id='hleft-text'>
<a href=# id='back'>
<div id='inner-hleft-text'>
<div id='ihtp'>
<object>
<div id='about-project'>
<p><i>Syster Papyri Magicae</i> is an interactive non-linear narration of stories, that unfolds the phenomenon of gender exclusions in male-dominated hacker culture. The project aims to document, discuss and activate a variety of feminist practices that respond to this issue. A fantasy context, including spells, quests, witches and wizards, is used to describe actual incidents and testimonies.
<p><i>Syster Papyri Magicae</i> is a project that unfolds the phenomenon of gender exclusions in male-dominated tech environments, aiming to document, discuss and activate a variety of feminist practices that respond to this issue.
</p>
<p>
The website manifests as playful navigation to a growing, collectively editable Wiki, where incidents of sexism in tech, as well as feminist projects, are being documented. With the aid of the early web witchcraft of hyperlinks, one may discover documentation of actual events, wiki pages to write their versions of stories, external feminist projects, or even dead-ends.</p>
The Syster Papyri Magicae website enables a playful navigation to a collection of stories and practices that are gathered in a growing, editable Wiki. Aided by the early web magic of hyperlinks, one may discover documentation of sexist incidents in tech, feminist hacker projects, wiki pages to write their versions of stories, or even dead-ends. A fictional context of sorcery provides a game-like atmosphere but is also tactically used. On the one hand, the witch as an excluded figure symbolises female strength, that challenges patriarchal systems. On the other hand, witchcraft is a theme ever-present in the geek culture, proposing that technology has a source of magical power, that one can harness for their own sense of agency and empowerment.</p>
<p>
While strolling through the website, one receives a number of quests, that ask them to choose what they would do in several situations of gender exclusion. This method helps to realise how hard it is to respond and take action, under these circumstances. It is also a way to open discussions on diverse feminist approaches, learn about the urgencies and potential of feminist hacker practices, and if interested, become a contributor.</p>
</p>
Strolling through the website, the visitor encounters several quests, that challenge them to choose what they would do in situations of exclusion. This method helps them realise how hard it is, to take action under these circumstances. It is also a way to open discussions on diverse feminist approaches, learn about feminist hacker practices, and if interested, become a contributor. </p>
<p>
<i>Syster Papyri Magicae</i> (2020) is published under the terms of the Peer Production License (PPL). The Peer Production License is an example of CopyFair licensing, in which only other commoners, collectives and nonprofits can share and re-use the material in question.
</p>
<p>
<br></p>
</div>
<hr align='left'>
<div id='about-student'>
<p> Artemis Gryllaki is a researcher and media artist, with a background in architecture and music. Her current work focuses on the urgencies and potentials of autonomous networks and feminist communities. </p>
</div>
<span id='getback'> go back </span>
<a id='getback' class='int'> go back </a>
</object>
</div>
</div>
</a>
</div>
</header>
</p></div>
<section id='main'>
<div id="galleries">
<div id='work'>
@ -79,18 +70,13 @@ While strolling through the website, one receives a number of quests, that ask t
<img src="img/wiki-radio-drama.png" class='workimg'/>
<img src="img/varia-hack-meetings.png" class='workimg'/>
<img src="img/discuss-feminism.png" class='workimg'/>
</div>
<div id='publication'>
<h3 class='gal-title'>Publication</h3>
<ul id='publist'>
<li><a href='pdf/ArtemisGryllaki-Thesis.pdf' target="_blank" class='ext'>Thesis (PDF) </a></li>
</ul>
</ul>
</div>
</div>
</section>
</div>

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 235 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 121 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 566 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 815 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 470 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 633 KiB

@ -0,0 +1,96 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="date" content="JULY 2020">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../css/pages.css">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="img/beau.png">
<meta name="description" content="XPUB">
<title>TACTICAL WATERMARKS</title>
</head>
<body>
<div id="indexyellowleft"></div>
<div id="indexyellowright"></div>
<aside>
<div class="leftmarquee">
<div class="marquee">
<div class="track">
<div class="content"><a class="head" href="https://hub.xpub.nl/watermark/">TACTICAL WATERMARKS TACTICAL WATERMARKS TACTICAL WATERMARKS TACTICAL WATERMARKS TACTICAL WATERMARKS TACTICAL WATERMARKS TACTICAL WATERMARKS TACTICAL WATERMARKS TACTICAL WATERMARKS TACTICAL WATERMARKS TACTICAL WATERMARKS TACTICAL WATERMARKS TACTICAL WATERMARKS TACTICAL WATERMARKS TACTICAL WATERMARKS TACTICAL WATERMARKS TACTICAL WATERMARKS TACTICAL WATERMARKS TACTICAL WATERMARKS TACTICAL WATERMARKS</a></div>
</div>
</div>
</div>
</aside>
<!-- XPUB SYNTAX -->
<a href='https://project.xpub.nl/' class='homebutton'> ↜ HOME </a>
<header>
<h1 id='project-title'>Tactical Watermarks</h1>
<h2 id='student-name' class="mytypestyle"><a href="https://pedrosacouto.com">Pedro Sá Couto</a></h2>
<div id='hleft-text'>
<div id='inner-hleft-text'>
<div id='ihtp'>
<object>
<div id='about-project'>
<p><i>Tactical Watermarks</i> is an online republishing platform that exists in both the clear and <i>dark</i> web. I actively make use of digital watermarks as a means to explore topics such as anonymity, paywalls, archives, and provenance. While the primary intention of analogue watermarks was to leave traces of authenticity, marks of quality or even aesthetic enhancements, digital watermarks are being used as a way to create accountability for users. Through this platform, I describe and document ways of living within and resist a culture of surveillance in the realm of publishing. </p>
<p>I am motivated by all the invisible individuals behind extra-legal publishing platforms, from curators, the ones who host, upload and even download material. Through the act of watermarking, I embed layers of information often dissolved within the processes of sharing texts. I experiment on how the process of adding stains can be twisted and revived. Stains are what I call user patches or marks that are difficult to remove and that do not play an active role in archives. </p>
<p>In this platform, users can upload and request different titles. While talking with members from the Library Genesis forum, I understood the need to create a tool that allows people to share watermarked pdfs in a safe way. My platform is NOT a library, and it is also NOT an archive. I don't keep the files or intend to archive them. What I open is a space to de-watermark files, and append new anonymous watermarks with the technical and personal regards around sharing specific texts. In the end, these stories will circulate alongside the main narrative. This is an automated republishing stream that spreads these new and unique files to Library Genesis. </p>
<p><i>Tactical Watermarks</i> (2020). License — Copyleft: This is a free work. You can copy, distribute, and modify it underthe terms of the Free Art License http://artlibre.org/licence/lal/en/</p>
</div>
<div id='about-student'>
<p> Pedro Sá Couto is a media researcher, hacker and graphic designer from Porto, Portugal. His research focuses on surveillance in the realm of publishing, while questioning authorship, protecting users identity and revealing hidden processes required to subvert surveillance in physical and digital media.</p>
</div>
</object>
</div>
</div>
</div>
</header>
<section id='main'>
<div id="galleries">
<div id='work'>
<h3 class='gal-title mytypestyle'>Work</h3>
<ul id='publist'>
<li><a href='https://hub.xpub.nl/watermark/' target="_blank" class='ext mytypestyle'>↝ Project Website</a></li>
</ul>
<img src="img/psc01.jpg" class='workimg'/>
<img src="img/psc02.jpg" class='workimg'/>
<img src="img/psc03.jpg" class='workimg'/>
<img src="img/psc04.jpg" class='workimg'/>
<img src="img/psc05.jpg" class='workimg'/>
<img src="img/psc06.jpg" class='workimg'/>
</div>
<div id='publication'>
<h3 class="gal-title mytypestyle">Publication</h3>
<ul id='publist'>
<li><a href='pdf/Thesis_Master_PSC_HD.pdf' target="_blank" class='ext mytypestyle'>↝ Thesis (PDF)</a></li>
</ul>
</div>
</div>
</section>
</body>
</html>

@ -0,0 +1,177 @@
@font-face {
font-family: "Lyon";
src: url("fonts/LyonJeanTrue.ttf");
font-weight: 300;
font-style: normal;}
@font-face {
font-family: "Favorit";
src: url("fonts/Favorit_Regular.ttf");
font-weight: 300;
font-style: normal;}
@font-face {
font-family: "Favorit";
src: url("fonts/Favorit_Regular-Italic.ttf");
font-weight: 300;
font-style: italic;}
@font-face {
font-family: "Favorit";
src: url("fonts/Favorit_Medium.ttf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Favorit";
src: url("fonts/Favorit_Medium-Italic.ttf");
font-weight: 400;
font-style: italic;}
body{
background: none;
}
a{
color: #000;
text-decoration: none;
display: inline;
border-bottom: 0px;
background: none;
}
.ext{
background: none;
}
a:hover{
color: #c3c3c3;
text-decoration: none;
cursor: pointer;
}
a:visited{
text-decoration: none;
}
/* HEADER */
aside{
position: fixed;
top: 5px;
width: calc(100vw - 15px);
font-size: 12px;
font-family: "Lyon", Arial, Helvetica, sans-serif;
font-weight: 300;
font-style: normal;
z-index: 999;
}
.marquee {
position: relative;
width: calc(100vw - 15px);
max-width: 100%;
overflow-x: hidden;
height: 50px;
}
.track {
position: absolute;
white-space: nowrap;
will-change: transform;
animation: marquee 20s linear infinite;
}
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* HOME BUTTON */
.homebutton{
background-color: inherit;
text-align:right;
color:black;
position:absolute;
top:0;
right:0;
margin-right:2%;
margin-top:25px;
padding:0.3% 0 0 0.3%;
font-size:0.6em;
z-index:999;
}
/* TYPE STYLE */
#project-title{
font-family: "Lyon", Arial, Helvetica, sans-serif;
font-weight: 300;
font-style: normal;
}
#about-student{
font-family: "Favorit", Arial, Helvetica, sans-serif;
font-style: italic;
color: #3c3c3c;
font-weight: 300;
font-size: calc(8px + 0.3vw);
padding-top: 10px;
}
.mytypestyle{
font-family: "Favorit", Arial, Helvetica, sans-serif;
font-weight: 300;
transform: scaleX(0.75);
transform-origin: 0 0;
text-transform: uppercase;
}
#inner-hleft-text{
overflow-y: scroll;
font-family: "Favorit", Arial, Helvetica, sans-serif;
font-weight: 300;
font-size: calc(12px + 0.3vw);
}
li{
list-style: none;
transform: scaleX(0.75);
transform-origin: 0 0;
}
#inner-hleft-text::-webkit-scrollbar {
display: none;
}
/* TWO BACKGROUND COLORS */
#indexyellowleft{
position: fixed;
left: 0;
top: 0;
display: inline-block;
width: 25vw;
height: 100vh;
background-color: white;
}
#indexyellowright{
position: fixed;
left: 25vw;
top: 0;
display: inline-block;
height: 100vh;
width: 75vw;
background-color: #cfff00;
}
img{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 8px 0 rgba(0, 0, 0, 0.19);
}
.workimg{
padding: 0 0 0 0;
}

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 819 KiB

@ -84,7 +84,7 @@ Copyleft: This is a free work, you can copy, distribute, and modify it under the
<li><a href='https://hub.xpub.nl/repeater' target="_blank" class='ext'>Project Website</a></li>
</ul>
<video width="90%" height="auto" controls>
<video width="90%" height="auto" controls poster="img/main_page_video_poster.png">
<source src="video/main_page_small.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
@ -101,7 +101,7 @@ Your browser does not support the video tag.
<div id='publication'>
<h3 class='gal-title'>Publication</h3>
<ul id='publist'>
<li><a href='' target="_blank" class='ext'>Thesis (PDF) </a></li>
<li><a href='pdf/Biyi_Wen_Thesis.pdf' target="_blank" class='ext'>Thesis (PDF) </a></li>
</ul>
</ul>
</div>

Binary file not shown.
Loading…
Cancel
Save