diff --git a/2022/pagedjs/app.js b/2022/pagedjs/app.js
new file mode 100644
index 0000000..d0d3b4e
--- /dev/null
+++ b/2022/pagedjs/app.js
@@ -0,0 +1,52 @@
+const adobeLogo = document.getElementById("adobe");
+const noMore = document.getElementById("nomore");
+const firstBook = document.querySelector(".bar1");
+const thirdBook = document.querySelector(".bar3");
+const infoInside = document.getElementById("note");
+
+adobeLogo.addEventListener("mouseenter", function () {
+  adobeLogo.style.display = "none";
+  noMore.style.display = "block";
+});
+
+
+noMore.addEventListener("mouseenter", function () {
+  noMore.style.display = "none";
+  adobeLogo.style.display = "block";
+});
+
+
+firstBook.addEventListener("click", function () {
+  adobeLogo.visibility = "hidden";
+});
+
+noMore.addEventListener("click", function () {
+  noMore.style.display = "none";
+  noMore.style.display = "hidden";
+  adobeLogo.style.visibility = "visible";
+});
+
+
+thirdBook.addEventListener("mouseover", function () {
+  thirdBook.style.visibility = "hidden";
+  //thirdBook.style.display="none";
+  infoInside.style.display = "block";
+});
+
+
+infoInside.addEventListener("mouseleave", function () {
+  infoInside.style.display = "none";
+  //thirdBook.style.display = "block";
+  thirdBook.style.visibility = "visible";
+});
+
+
+thirdBook.addEventListener("click", function () {
+  thirdBook.style.visibility = "hidden";
+  infoInside.style.display = "block";
+});
+
+infoInside.addEventListener("click", function () {
+  infoInside.style.display = "none";
+  thirdBook.style.visibility = "visible";
+});
diff --git a/2022/pagedjs/default.css b/2022/pagedjs/default.css
new file mode 100644
index 0000000..c18fed2
--- /dev/null
+++ b/2022/pagedjs/default.css
@@ -0,0 +1,464 @@
+html,
+body {
+  font-size: 16px;
+}
+* {
+  box-sizing: border-box;
+}
+
+/* @import url("ext/4bc3933a35ae5ea64daeeb8eb22e72ff/css2.css");
+@import url("ext/029b1a6408007faa76f8327f6a331806/css2.css");
+@import url("ext/d657bbc9ab54884eb3972b1e9cb18df5/css2.css");
+@import url("ext/8c55abfa9a18d75133542cbd087927d5/css2.css");
+@import url("ext/f6b938a3cf4c7932c69612d18f3f6d47/css2.css"); */
+@import url("ext/8a7380f228a12515c367465bc33bb013/css2.css");
+@import url("ext/becee672c41a09a09c11466c771fb5e5/css2.css");
+
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+  background-image: url("img/desk2.jpeg");
+  background-size: cover;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-position: center;
+}
+#home {
+  position: absolute;
+  top: 4%;
+  left: 2.5%;
+  color: black;
+  background: #fb85ff;
+  background: linear-gradient(to bottom right, #fb85ff 16%, #eb5beb 59%);
+  padding: 0.5% 1%;
+  font-family: "Libre Baskerville", serif;
+  font-size: 1rem;
+  cursor: pointer;
+  transform: rotate(-6deg);
+  box-shadow: rgb(0 0 0 / 15%) 6px 4px 0px 0px;
+  cursor: url("img/hand6.png"), auto;
+}
+
+#home a {
+  text-decoration: none;
+  color: black;
+  cursor: url("img/hand6.png"), auto;
+}
+
+#designer{
+  position: absolute;
+    z-index: 999;
+    width: 4%;
+    bottom: 4%;
+    right: 3%;
+    cursor: pointer;
+}
+
+#designer a{
+    text-decoration:none;
+    cursor: pointer;
+}
+.wrapper {
+  position: relative;
+  display: flex;
+  margin: 0 auto;
+  width: 90%;
+  height: 100%;
+  z-index: 3;
+}
+
+#title {
+  display: inline-block;
+  height: min-content;
+  padding: 0 1%;
+  margin: 2.5% auto;
+  background: #ffffff;
+  background: linear-gradient(
+    to bottom right,
+    #ffffff 10%,
+    #e2eeec 55%,
+    #bdc7c5 90%
+  );
+  box-shadow: rgba(0, 0, 0, 0.15) 6px 4px 0px 0px;
+}
+
+#title h1 {
+  /* font-family: "Libre Baskerville", serif; */
+  font-family: "Courgette", cursive;
+  font-size: 2.8rem;
+  font-weight: 400;
+  letter-spacing: 0.03rem;
+  background: -webkit-linear-gradient(#000, rgb(53, 53, 53), #000);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+#tape {
+  position: absolute;
+  z-index: 4;
+  transform: rotate(-40deg);
+    width:5%;
+  left: 30%;
+  top: 2.6%;
+}
+
+#tape img{
+    width:70%;   
+}
+.bar {
+  position: absolute;
+  padding: 0;
+  margin: 0;
+  /* box-shadow: rgba(0, 0, 0, 0.6) px 2px 30px, rgba(0, 0, 0, 0) 0px 7px 13px 3px,
+    rgba(0, 0, 0, 0.1) 0px -3px 0px inset; */
+  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
+    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
+  cursor: url("img/hand1.png"), auto;
+}
+
+.bar h3 {
+  text-align: center;
+}
+
+.bar1 {
+  background: #f0ecca;
+  background: linear-gradient(to bottom right, #f0ecca 14%, #e0dda8 77%);
+  top: 30%;
+  left: 9.5%;
+  width: 18%;
+  height: 33.5%;
+  font-family: Georgia, "Times New Roman", Times, serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0%;
+}
+.bar1 .frame {
+  width: 85%;
+  height: 90%;
+  border: 3px navy double;
+  color: navy;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.bar1 h3 {
+  font-size: 2rem;
+  font-style: italic;
+  font-weight: bold;
+  line-height: 0.5;
+  /* background-color: yellow; */
+}
+
+#adobe,
+#nomore {
+  position: absolute;
+  z-index: 10;
+  width: 25%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  cursor: pointer;
+}
+
+#nomore {
+  display: none;
+}
+
+.bar1 p {
+  /* background-color: yellow; */
+  font-size: 0.9rem;
+  line-height: 130%;
+  padding: 0% 6%;
+  margin-bottom: 5%;
+}
+
+#maintitle /*.bar1 h1*/ {
+  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
+  font-size: 2.2rem;
+  letter-spacing: 0.1rem;
+  margin: 0;
+  padding: 0;
+  color: white;
+}
+
+.bar2 {
+  top: 20%;
+  left: 31.5%;
+  width: 16%;
+  height: 31.5%;
+  background: #fff8eb;
+  background: linear-gradient(
+    to bottom right,
+    #fff8eb 0%,
+    #faebd7 39%,
+    #d4c9bf 90%
+  );
+  display: inline-block;
+}
+
+.bar2:hover {
+  transform: rotate(30deg);
+}
+
+.deco1 {
+  width: 5%;
+  height: 100%;
+  margin-left: 0;
+  background: #d51f03;
+  background: linear-gradient(
+    to bottom right,
+    #d51f03 9%,
+    #b01a02 48%,
+    #d51f03 77%
+  );
+}
+
+.bar2 .frame {
+  position: absolute;
+  /* background-color: yellow; */
+  top: 0;
+  left: 5%;
+  width: 97%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 1% 2%;
+}
+
+.bar2 h3 {
+  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
+  font-size: 1.9rem;
+  width: 100%;
+  margin-bottom: 0;
+  margin-top: -15%;
+  background: -webkit-linear-gradient(#000, rgb(106, 106, 106), #000);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.bar2 p {
+/*   font-family: "Dancing Script", cursive; */
+    font-family: "Verdana";
+  font-size: 0.9rem;
+  line-height: 135%;
+  width: 80%;
+  color: black;
+}
+.bar3 {
+  top: 55%;
+  left: 44.5%;
+  width: 16%;
+  height: 35.5%;
+  background: #fff71c;
+  background: linear-gradient(
+    to bottom right,
+    #fff71c 0%,
+    #ffe142 39%,
+    #cfb71b 90%
+  );
+  display: flex;
+  flex-direction: column;
+  /* justify-content: center; */
+}
+
+.bar3 h3,
+.bar3 p {
+  font-family: "Libre Baskerville", serif;
+}
+
+.bar3 h3 {
+  font-style: bold;
+  font-size: 3rem;
+  line-height: 0;
+  margin-bottom: 7%;
+}
+
+#t1,
+#t5 {
+  color: #2b710c;
+}
+#t2,
+#t6 {
+  color: #c11818;
+}
+#t3,
+#t4 {
+  color: #0b0d7f;
+}
+#t6 {
+  font-style: italic;
+  font-size: 1rem;
+  margin-left: auto;
+  margin-right: auto;
+  padding-top: 10%;
+  /* margin-top: 20%; */
+}
+
+#note {
+  position: absolute;
+  display: none;
+  z-index: 11;
+  top: 55%;
+  left: 44.5%;
+  width: 32%;
+  height: 35.5%;
+  cursor: url("hand1.png"), auto;
+}
+
+.page1,
+.page2 {
+  position: absolute;
+  width: 50%;
+  height: 100%;
+  font-family: "Libre Baskerville", serif;
+}
+
+.page1 {
+  background: #fbfcf7;
+  background: linear-gradient(to right, #fbfcf7 0%, #fffaed 50%, #f0edd3 100%);
+  left: 0;
+}
+.page2 {
+  background: #fbfcf7;
+  background: linear-gradient(to left, #fbfcf7 0%, #fffaed 39%, #d4d1ba 90%);
+  display:flex;
+  justify-content: center;
+  align-items: center;
+  left: 50%;
+  overflow-wrap: break-all;
+}
+.page1 p,
+.page2 p {
+    color: #c11818;
+}
+.page1 p {
+  width: 80%;
+  font-size: 0.75rem;
+  padding: 2% 5%;
+}
+.page2 p {
+  font-size: 1.1rem;
+  line-height: 147%;
+  padding: 2% 8%;
+}
+#time{
+    color:black;
+}
+
+#hostnames{
+    color:black;
+}
+
+#hostnames a{
+    color:black;
+    text-decoration: underline;
+}
+
+.bar4 {
+  top: 32.5%;
+  left: 65.5%;
+  width: 20%;
+  height: 46.5%;
+  background: #d6f1ff;
+  background: linear-gradient(to bottom right, #d6f1ff 5%, #899fa3 90%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.bar4 .frame {
+  font-family: Arial, Helvetica, sans-serif;
+  padding: 1% 1%;
+  width: 76%;
+  height: 100%;
+  padding: 0;
+  overflow-y: auto;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bar4 .frame img {
+  width: 50%;
+  /* margin-top: 3%; */
+}
+.bar4 h3 {
+  font-family: "Archivo Black", sans-serif;
+  color: rgb(24, 42, 146);
+  font-size: 2.8rem;
+  line-height: 1.4;
+  margin-top: 7.5%;
+  margin-bottom: 5.5%;
+  cursor: pointer;
+  text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4),
+    -1px -1px 0 rgba(255, 255, 255, 1);
+}
+.bar4 h3 a {
+  text-decoration: none;
+  color: rgb(24, 42, 146);
+  cursor: pointer;
+  text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4),
+    -1px -1px 0 rgba(255, 255, 255, 1);
+}
+.bar4 p {
+  font-family: "Arsenal", sans-serif;
+  color: rgb(24, 42, 146);
+  font-size: 1.05rem;
+  font-weight: 600;
+  line-height: 140%;
+  padding: 1% 2%;
+}
+
+.bar5 {
+  transform: rotate(20deg);
+  top: 50%;
+  left: 50%;
+  width: 20%;
+  padding: 0;
+  display: inline-block;
+  height: min-content;
+  padding: 0;
+  background: #e2eeec;
+  background: linear-gradient(to bottom right, #e2eeec 8%, #d5e0de 59%);
+  /* box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; */
+  box-shadow: rgba(0, 0, 0, 0.15) 4px 4px 0px 0px;
+}
+
+.bar5 p {
+  /* margin: 0 auto; */
+  padding: 0% 2%;
+  font-family: "Libre Baskerville", serif;
+  font-size: 1.1rem;
+  letter-spacing: 0.02rem;
+}
+
+.bar5 p a {
+  text-decoration: underline;
+  color: blue;
+  cursor: pointer;
+}
+
+#print{
+    display:none;
+    visibility:hidden;
+}
+
+#web{
+    visibility:visible;
+}
+
+#qr {
+  position: absolute;
+  z-index: 11;
+  display: none;
+}
+
diff --git a/2022/pagedjs/hand1.png b/2022/pagedjs/hand1.png
new file mode 100644
index 0000000..f930bc4
--- /dev/null
+++ b/2022/pagedjs/hand1.png
@@ -0,0 +1,7 @@
+<html>
+<head><title>404 Not Found</title></head>
+<body bgcolor="white">
+<center><h1>404 Not Found</h1></center>
+<hr><center>nginx/1.14.2</center>
+</body>
+</html>
diff --git a/2022/pagedjs/img/adobelogo_s.jpg b/2022/pagedjs/img/adobelogo_s.jpg
new file mode 100644
index 0000000..b86db4a
Binary files /dev/null and b/2022/pagedjs/img/adobelogo_s.jpg differ
diff --git a/2022/pagedjs/img/coverimg1.jpg b/2022/pagedjs/img/coverimg1.jpg
new file mode 100644
index 0000000..799478a
Binary files /dev/null and b/2022/pagedjs/img/coverimg1.jpg differ
diff --git a/2022/pagedjs/img/coverimg2.jpg b/2022/pagedjs/img/coverimg2.jpg
new file mode 100644
index 0000000..9a4f196
Binary files /dev/null and b/2022/pagedjs/img/coverimg2.jpg differ
diff --git a/2022/pagedjs/img/desk2.jpeg b/2022/pagedjs/img/desk2.jpeg
new file mode 100644
index 0000000..90d92aa
Binary files /dev/null and b/2022/pagedjs/img/desk2.jpeg differ
diff --git a/2022/pagedjs/img/hand1.png b/2022/pagedjs/img/hand1.png
new file mode 100644
index 0000000..393b54f
Binary files /dev/null and b/2022/pagedjs/img/hand1.png differ
diff --git a/2022/pagedjs/index.html b/2022/pagedjs/index.html
new file mode 100644
index 0000000..9f141d5
--- /dev/null
+++ b/2022/pagedjs/index.html
@@ -0,0 +1,94 @@
+<html lang="en"><head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Paged.js workshop</title>
+     
+    <link rel="stylesheet" href="default.css" media="only screen">
+    <link rel="stylesheet" media="screen and (max-width: 1920px)" href="laptop_1920.css">   
+    <link rel="stylesheet" media="only screen and (min-device-width : 1190px) and (max-device-width : 1440px)" href="laptop_big.css">
+    <link rel="stylesheet" media="only screen and (min-device-width : 768px) and (max-device-width : 1189px)" href="laptop_small.css">
+    <link rel="stylesheet" media="only screen and (min-device-width : 360px) and (max-device-width : 767px) and (orientation: portrait)" href="mobile_p.css">
+    <link rel="stylesheet" href="print.css" media="print">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+ 
+    <link href="ext/becee672c41a09a09c11466c771fb5e5/css2.css?family=Courgette&amp;family=Dancing+Script:wght@400;500;600&amp;display=swap" rel="stylesheet">
+    <link href="ext/8a7380f228a12515c367465bc33bb013/css2.css?family=Archivo+Black&amp;family=Arsenal:ital@0;1&amp;family=Chivo:ital,wght@0,300;0,400;1,300;1,400&amp;family=Libre+Baskerville:wght@700&amp;display=swap" rel="stylesheet">
+  <link rel="original" href="https://hub.xpub.nl/sandbot/Nami_Researchlog/Pagedjs_workshop/index.html"></head>
+  <body>
+    <div id="home"><a href="https://xpub.nl/">Back</a></div>
+    <div id="designer"><a href="https://hub.xpub.nl/sandbot/Nami_Researchlog/"><img src="img/namikim2.svg"></a></div>
+  
+    <div class="wrapper">
+        <div id="tape"><img src="img/tape.png"></div>
+      <div id="title"><h1>XPUB invites you to a Paged.js Workshop!</h1></div>
+      <div class="bar bar1">
+        <div class="frame">
+          <h3>Adobe Again?</h3>
+          <p id="p1">
+            Most people would think making a publication should be done via
+            Adobe applications. Don't we want to explore other possibilities
+            though?
+          </p>
+          <img src="img/adobelogo_s.jpg" id="adobe">
+          <img src="img/nomore.jpg" id="nomore">
+        </div>
+      </div>
+
+      <div class="bar bar2">
+        <div class="deco1"></div>
+
+        <div class="frame">
+          <h3>There should be a way</h3>
+          <p>that I can directly render web pages to print.</p>
+          <img src="img/coverimg1.jpg">
+        </div>
+      </div>
+
+      <div class="bar bar3">
+        <h3 id="t1">On</h3>
+        <h3 id="t2">Thursday</h3>
+        <h3 id="t3">13th October</h3>
+        <h3 id="t4">11am - 6pm</h3>
+        <h3 id="t5">WH.04.115</h3>
+        <p id="t6">Guess what would happen?</p>
+      </div>
+      <div id="note">
+        <div class="page1">
+            <p id="time">11am - 1pm: Lecture 	&amp;<br>2 - 6pm: Workshop</p><p>13th Oct 2022<br>Wijnhaven 04.115</p><p id="time">Piet Zwart Institute, Willem de Kooning Academy</p>
+        </div>
+        <div class="page2">
+          <p>
+              <span id="hostnames"><a href="https://julie-blanc.fr/en/blog/2021-04-16_hackathon-pagedjs/">Julie Blanc</a></span> and <span id="hostnames"><a href="https://www.pagedmedia.org/author/julien/">Julien Taquet</a></span> will introduce Paged.js!
+          </p>
+        </div>
+      </div>
+
+      <div class="bar bar4" data-scroll="">
+        <div class="frame">
+          <h3 class="font-effect-emboss"><a href="https://pagedjs.org/">Paged.js</a></h3>
+          <p>
+            is a rendering tool for previewing, inspecting and designing a PDF
+            in the browser, that is known for specifically accommodating
+            designers using web-to-print techniques in their publications and book making practice.
+            
+          </p>
+       <img src="img/coverimg2.jpg">
+          <p id="hosts">  Julie and Julien both work as developers on
+            the project, so we can also ask them about Paged.js as an open
+            source project, and what it means to develop and maintain it.  </p>
+        </div>
+      </div>
+
+      <div class="bar bar5">
+        <p>Are you interested in joining the workshop? Sign up via <span id="print"><a href="https://pad.xpub.nl/p/pagedjs">xpub.nl.</a></span><span id="web"><a href="https://pad.xpub.nl/p/pagedjs">here.</a></span></p>
+      
+    </div>
+
+    <img src="img/xpubcode.png" id="qr">
+</div>
+    <script src="app.js"></script>
+  
+
+</body></html>
diff --git a/2022/pagedjs/laptop_1920.css b/2022/pagedjs/laptop_1920.css
new file mode 100644
index 0000000..3676994
--- /dev/null
+++ b/2022/pagedjs/laptop_1920.css
@@ -0,0 +1,257 @@
+@media  screen and (max-width: 1920px) {
+  @import url("ext/8a7380f228a12515c367465bc33bb013/css2.css");
+
+  #home {
+    top: 4%;
+    left: 2.5%;
+    font-size: 0.8rem;
+    letter-spacing: 0.03rem;
+    letter-spacing: 0.01rem;
+    padding: 0.5% 0.8%;
+  }
+    
+    #designer{
+    position: absolute;
+    z-index: 999;
+    width: 6%;
+    bottom: 4%;
+    right: 3%;
+    cursor: pointer;
+    }
+
+  #title {
+    padding: 0.2% 1%;
+  }
+
+  #title h1 {
+    font-size: 2rem;
+    letter-spacing: 0.02rem;
+  }
+
+ #tape {
+    transform: rotate(-45deg);
+    width: 4.5%;
+    left: 29.5%;
+    top: 1.6%;
+    }
+
+ #tape img{
+    width:80%;   
+    }
+
+  .bar {
+    position: absolute;
+    padding: 0;
+    margin: 0;
+    box-shadow: rgba(0, 0, 0, 0.6) 0px 2px 16px,
+      rgba(0, 0, 0, 0) 0px 7px 13px 3px, rgba(0, 0, 0, 0.1) 0px -3px 0px inset;
+    cursor: url("hand1.png"), auto;
+    /* box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; */
+    /* box-shadow: rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset; */
+  }
+
+  .bar h3 {
+    text-align: center;
+          
+  }
+
+  .bar1 {
+    top: 30%;
+    left: 7.5%;
+    width: 18%;
+    height: 38.5%;
+  }
+  .bar1 .frame {
+    width: 85%;
+    height: 90%;
+  }
+
+  .bar1 h3 {
+    font-size: 1.3rem;
+    line-height: 0.2;
+      padding-top: 4%;
+  }
+
+  #adobe,
+  #nomore {
+    width: 28%;
+    top: 40%;
+  }
+  .bar1 p {
+    font-size: 0.9rem;
+    line-height: 133%;
+    padding: 5% 10%;
+    margin-bottom: 5%;
+  }
+
+  .bar2 {
+    top: 22%;
+    left: 31.5%;
+    width: 16%;
+    height: 31.5%;
+    background: #fff8eb;
+    background: linear-gradient(
+      to bottom right,
+      #fff8eb 0%,
+      #faebd7 39%,
+      #d4c9bf 90%
+    );
+    display: inline-block;
+  }
+
+  .bar2:hover {
+    transform: rotate(30deg);
+  }
+
+  .deco1 {
+    width: 5%;
+    height: 100%;
+    margin-left: 0;
+    background-color: rgb(213, 31, 3);
+  }
+
+  .bar2 .frame {
+    top: 0;
+    left: 5%;
+    width: 97%;
+    height: 100%;
+
+    padding: 1% 2%;
+  }
+
+  .bar2 h3 {
+    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
+   font-size: 1.35rem;
+    width: 80%;
+    margin-bottom: 0;
+    margin-top: 0;
+  }
+    
+  .bar2 p {
+   font-size: 0.75rem;
+    line-height: 125%;
+      width:65%;
+    margin-top: 5%;
+    margin-bottom: 9%;
+  }
+
+  .bar2 img {
+    width: 42.5%;
+  }
+  .bar3 {
+    top: 58%;
+    left: 45.5%;
+    width: 16%;
+    height: 34.5%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .bar3 h3 {
+    font-style: bold;
+    font-size: 1.75rem;
+    line-height: 0.25;
+    margin-bottom: 7%;
+  }
+
+  #t1,
+  #t5 {
+    color: #2b710c;
+  }
+  #t2,
+  #t6 {
+    color: #c11818;
+  }
+  #t3,
+  #t4 {
+    color: #0b0d7f;
+  }
+  #t6 {
+    text-align: center;
+    width: 100%;
+    font-style: italic;
+    font-size: 0.77rem;
+    line-height: 130%;
+    margin-left: auto;
+    margin-right: auto;
+    padding-top: 0;
+  }
+
+  #note {
+    top: 58%;
+    left: 45.5%;
+    width: 32%;
+    height: 34.5%;
+  }
+
+  .page1 p {
+    font-size: 0.75rem;
+    line-height: 1.5;
+    padding: 2% 5%;
+  }
+  .page2 p {
+    font-size: 0.85rem;
+    line-height: 1.6;
+    padding: 2% 8%;
+  }
+
+  .bar4 {
+    left: 66.5%;
+    width: 22%;
+    height: 44.5%;
+  }
+
+  .bar4 .frame {
+    width: 85%;
+    height: 100%;
+    justify-content: space-around;
+  }
+
+  .bar4 .frame img {
+    width: 38%;
+    margin-top: 0%;
+    margin-bottom: 0%;
+  }
+  .bar4 h3 {
+    font-family: "Archivo Black", sans-serif;
+    color: rgb(24, 42, 146);
+    font-size: 1.7rem;
+    line-height: 1;
+    margin-bottom: 0%;
+  }
+
+  .bar4 p {
+   font-family: "Arsenal", sans-serif;
+    font-size: 0.9rem;
+    line-height: 132%;
+    padding-top: 0;
+    margin-top: 4%;
+    margin-bottom: 0;
+  }
+
+  .bar5 {
+    transform: rotate(20deg);
+    top: 55%;
+    left: 50%;
+    width: 20%;
+    padding: 0;
+
+    display: inline-block;
+    height: min-content;
+    padding: 0 0.75%;
+    margin: 0;
+    background-color: #e2eeec;
+    box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
+  }
+
+  .bar5 p {
+    margin: 1% auto;
+    padding: 1% 2%;
+    font-family: "Libre Baskerville", serif;
+    font-size: 0.85rem;
+    letter-spacing: 0.03rem;
+  }
+}
+
diff --git a/images/Paged.js_workshop_NAMI_thumb.png b/images/Paged.js_workshop_NAMI_thumb.png
new file mode 100644
index 0000000..5339338
Binary files /dev/null and b/images/Paged.js_workshop_NAMI_thumb.png differ
diff --git a/images/XPUB-newsletter-650x40.jpg b/images/XPUB-newsletter-650x40.jpg
new file mode 100644
index 0000000..13fcf9c
Binary files /dev/null and b/images/XPUB-newsletter-650x40.jpg differ
diff --git a/images/collective-newsletter-650x400.jpg b/images/collective-newsletter-650x400.jpg
new file mode 100644
index 0000000..91acb43
Binary files /dev/null and b/images/collective-newsletter-650x400.jpg differ
diff --git a/images/walkie-talkie-fb-cover-mail.jpg b/images/walkie-talkie-fb-cover-mail.jpg
new file mode 100644
index 0000000..1b5efc8
Binary files /dev/null and b/images/walkie-talkie-fb-cover-mail.jpg differ
diff --git a/index.html b/index.html
index e8f0728..e3b099c 100644
--- a/index.html
+++ b/index.html
@@ -55,10 +55,10 @@ figure figcaption {
 </p>
 
 <p class="news">
-Application deadlines:<br>
-March 16 2022: early/non-EU<br>
-April 28 2022: final deadline EU<br>
-<a href="https://www.pzwart.nl/application/">https://www.pzwart.nl/application/</a>
+  <a href="https://pad.xpub.nl/p/pagedjs"><img src="images/Paged.js_workshop_NAMI_thumb.png"></a>
+  <a href="https://worm.org/production/xpub-pzi-graduation-show/"><img src="images/XPUB-newsletter-650x40.jpg" alt="Experimental Publishing Graduation Show 24-25 June, UBIK"></a>
+  <a href="https://www.pzwart.nl/blog/2022/05/27/graduation-shows-2022/"><img src="images/collective-newsletter-650x400.jpg" alt=""></a>
+  <a href="https://worm.org/production/xpub-pzi-graduation-show/"><img src="images/walkie-talkie-fb-cover-mail.jpg" alt="Walkie Talkie - 24-25 June - WORM" style="width: 480px"></a>
 </p>
 
 <div class="flex">
diff --git a/staff/joseph/joak-smallest.jpg b/staff/joseph/joak-smallest.jpg
new file mode 100644
index 0000000..ad22a5d
Binary files /dev/null and b/staff/joseph/joak-smallest.jpg differ
diff --git a/staff/joseph/joak-smallest.webp b/staff/joseph/joak-smallest.webp
new file mode 100644
index 0000000..64d3e22
Binary files /dev/null and b/staff/joseph/joak-smallest.webp differ
diff --git a/staff/staff.md b/staff/staff.md
index 7c1408c..5222aae 100644
--- a/staff/staff.md
+++ b/staff/staff.md
@@ -28,11 +28,11 @@ Cristina Cochior is a researcher and designer. She is a member of the everyday t
 
 ## Joseph Knierzinger
 
-[![](joseph/WechatIMG118-320x.webp)](joseph/WechatIMG118.jpeg)
+[![](joseph/joak-smallest.webp)](joseph/joak-smallest.jpg)
 
 *Prototyping Tutor*
 
-Joseph Oliver Anton Knierzinger (joak) is an artist exploring the history and politics of past, present, future and anachronistic media, technology and confusion. He works with Free/Libre/Open Source Software at the intersection of up-to-date media and obsolete technologies. His works, performances and lectures have been shown in exhibitions, festivals and universities in Belgium, Bulgaria, China, Germany, Italy, Catalonia, Croatia, Kugelmugel, Mongolia, Netherlands, Russia, Slovenia and Austria. At the moment he works on different alogisms and algorithms in Vienna. <https://joak.nospace.at>
+Joseph Oliver Anton Knierzinger (joak) is an artist exploring the history and politics of past, present, future and anachronistic media, technology and confusion. His compositions, devices, games, installations, interventions, instruments, lectures, performances, performance-lectures, scores and software have been shown in academies, artist-run spaces, community centers, festivals, galleries, hackerspaces, museums, radio station, squats, streets, theaters and universities in Austria, Catalonia, Croatia, Belgium, Bulgaria, China, Germany, Italy, Kugelmugel, Mongolia, Netherlands, Online, Russia and Slovenia. He works on different alogisms and algorithms in Rotterdam and Vienna. <https://joak.nospace.at>
 
 
 ## Michael Murtaugh