diff --git a/backplaces/index.html b/backplaces/index.html
new file mode 100644
index 0000000..daab2be
--- /dev/null
+++ b/backplaces/index.html
@@ -0,0 +1,71 @@
+<!doctype html>
+
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+
+  <title>Project Title</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'>Project Title <a href='#hleft-text' class='show'> ⓘ</a></h1>
+<h2 id='student-name'>Student name</h2>
+<div id='hleft-text'>
+ <a href=# id='back'>
+ <div id='inner-hleft-text'>
+ <div id='ihtp'>
+ <object>
+ <div id='about-project'>
+ <p>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. </p>
+</div>
+<hr align='left'>
+<div id='about-student'>
+<p>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.</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://yourdomain.org' target="_blank" class='ext'>Project Website</a></li>
+</ul>
+<img src="img/img1.jpg" class='workimg'/>
+<img src="img/img2.jpg" class='workimg'/>
+<img src="img/img3.jpg" class='workimg'/>
+<img src="img/img4.jpg" class='workimg'/>
+</div>
+<div id='publication'>
+<h3 class='gal-title'>Publication</h3>
+<ul id='publist'>
+<li><a href='pdf/thesis.pdf' target="_blank" class='ext'>Publication PDF</a></li>
+</ul>
+<img src="img/pub1.jpg" class='workimg'/>
+<img src="img/pub2.jpg" class='workimg'/>
+<img src="img/pub3.jpg" class='workimg'/>
+<img src="img/pub4.jpg" class='workimg'/>
+</div>
+<div id='gradshow'>
+<h3 class='gal-title'>Graduation Show</h3>
+<img src="img/gradshow1.jpg" class='workimg'/>
+<img src="img/gradshow2.jpg" class='workimg'/>
+<img src="img/gradshow3.jpg" class='workimg'/>
+<img src="img/gradshow4.jpg" class='workimg'/>
+</div>
+</div>
+</section>
+</div>
+</body>
+</html>
diff --git a/index_2024.html b/index_2024.html
new file mode 100644
index 0000000..8eb80d8
--- /dev/null
+++ b/index_2024.html
@@ -0,0 +1,481 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta name="generator" content="HTML Tidy for HTML5 for Linux version 5.6.0">
+  <meta charset="utf-8">
+  <title>XPUB Grad</title>
+  <meta name="description" content="XPUB">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="css/main.css">
+</head>
+<body xmlns:xpub="http://xpub.nl/terms/" xmlns:dc="http://purl.org/dc/terms/">
+  <div id="wrapper"></div>
+  <header>
+    <h1 id="page-title">XPUB <a href="#hleft-text" class="show">ⓘ</a></h1>
+    <div id="sub">
+      <span><a href="https://xpub.nl" target="_blank" class="ext">xpub.nl</a></span> <span><a href="http://pzwiki.wdka.nl/mediadesign/" target="_blank" class="ext">XPUB wiki</a></span>
+    </div>
+    <div id="hleft-text">
+      <a href="#" id="back">
+      <div id="inner-hleft-text">
+        <div id="ihtp">
+          <p>XPUB is the Master of Arts in Fine Art and Design: Experimental Publishing of the Piet Zwart Institute. XPUB focuses on the acts of making things public and creating publics in the age of post-digital networks. XPUB's interests in publishing are twofold:<br>
+          <br>
+          -&gt; first, publishing as the inquiry and participation into the technological frameworks, political context and cultural processes through which things are made public;<br>
+          <br>
+          -&gt; and second, how these are, or can be, used to create publics by expanding the means of discourse circulation beyond print media and its direct digital translation.<br>
+          <br></p>
+        </div>
+      </div></a>
+    </div>
+  </header>
+  <section id="main">
+    <!-- This is the section where you upload the pop-up material: e.g.: IMGs of your publication. -->
+    <!--to avoid jumps, href for class='close' on top divs (corresponding to the most recent graduation year) should be left at '#'-->
+    <div id="luxurious-xpuf">
+      <div id="2020"></div>
+      <div id="2019">
+        <div id="2019-att1">
+          <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="twowrap-trailer"><img src="img/ex1.jpg"> <img src="img/ex2.jpg"> <img src="img/ex3.jpg"></div>
+          </div>
+        </div>
+      </div>
+      <div id="2018">
+        <div id="2018-att1">
+          <div class="wrap">
+            <div class="upbar">
+              <a href="#year2018">
+              <p><span class="uptitle">Back It Up</span><span class="upclose">X</span></p></a>
+            </div>
+            <div class="twowrap"><img src="back-it-up/img/pzithesis-1.jpg"> <img src="back-it-up/img/pzithesis-2.jpg"> <img src="back-it-up/img/pzithesis-3.jpg"> <img src="back-it-up/img/pzithesis-4.jpg"> <img src="back-it-up/img/pzithesis-5.jpg"> <img src="back-it-up/img/pzithesis-6.jpg"> <img src="back-it-up/img/pzithesis-7.jpg"> <img src="back-it-up/img/pzithesis-8.jpg"> <img src="back-it-up/img/pzithesis-9.jpg"></div>
+          </div>
+        </div>
+        <div id="2018-att2">
+          <div class="wrap">
+            <div class="upbar">
+              <a href="#year2018">
+              <p><span class="uptitle">Referendum Medialogs</span><span class="upclose">X</span></p></a>
+            </div>
+            <div class="twowrap"><img src="referendum-medialogs/img/pzithesis-1.jpg"> <img src="referendum-medialogs/img/pzithesis-2.jpg"> <img src="referendum-medialogs/img/pzithesis-3.jpg"> <img src="referendum-medialogs/img/pzithesis-4.jpg"> <img src="referendum-medialogs/img/pzithesis-5.jpg"> <img src="referendum-medialogs/img/pzithesis-6.jpg"> <img src="referendum-medialogs/img/pzithesis-7.jpg"> <img src="referendum-medialogs/img/pzithesis-8.jpg"></div>
+          </div>
+        </div>
+        <div id="2018-att3">
+          <div class="wrap">
+            <div class="upbar">
+              <a href="#year2018">
+              <p><span class="uptitle">Anomolous Faces</span><span class="upclose">X</span></p></a>
+            </div>
+            <div class="twowrap"><img src="anomolous-faces/img/pzithesis-1.jpg"> <img src="anomolous-faces/img/pzithesis-2.jpg"> <img src="anomolous-faces/img/pzithesis-3.jpg"> <img src="anomolous-faces/img/pzithesis-4.jpg"> <img src="anomolous-faces/img/pzithesis-5.jpg"> <img src="anomolous-faces/img/pzithesis-6.jpg"></div>
+          </div>
+        </div>
+        <div id="2018-att4">
+          <div class="wrap">
+            <div class="upbar">
+              <a href="#year2018">
+              <p><span class="uptitle">Unpublishing</span><span class="upclose">X</span></p></a>
+            </div>
+            <div class="twowrap"><img src="unpublishing/img/pzithesis-1.jpg"> <img src="unpublishing/img/pzithesis-2.jpg"> <img src="unpublishing/img/pzithesis-3.jpg"> <img src="unpublishing/img/pzithesis-4.jpg"> <img src="unpublishing/img/pzithesis-5.jpg"> <img src="unpublishing/img/pzithesis-6.jpg"> <img src="unpublishing/img/pzithesis-7.jpg"></div>
+          </div>
+        </div>
+        <div id="2018-att5">
+          <div class="wrap">
+            <div class="upbar">
+              <a href="#year2018">
+              <p><span class="uptitle">Alt Reality Lexicon</span><span class="upclose">X</span></p></a>
+            </div>
+            <div class="twowrap"><img src="alt-reality-lexicon/img/pzithesis-1.jpg"> <img src="alt-reality-lexicon/img/pzithesis-2.jpg"> <img src="alt-reality-lexicon/img/pzithesis-3.jpg"> <img src="alt-reality-lexicon/img/pzithesis-4.jpg"> <img src="alt-reality-lexicon/img/pzithesis-5.jpg"> <img src="alt-reality-lexicon/img/pzithesis-6.jpg"> <img src="alt-reality-lexicon/img/pzithesis-7.jpg"> <img src="alt-reality-lexicon/img/pzithesis-8.jpg"></div>
+          </div>
+        </div>
+        <div id="2018-att6">
+          <div class="wrap">
+            <div class="upbar">
+              <a href="#year2018">
+              <p><span class="uptitle">Unlearning the Rules of Collectivity</span><span class="upclose">X</span></p></a>
+            </div>
+            <div class="twowrap"><img src="unlearning-the-rules-of-collectivity/img/pzithesis-1.jpg"> <img src="unlearning-the-rules-of-collectivity/img/pzithesis-2.jpg"> <img src="unlearning-the-rules-of-collectivity/img/pzithesis-3.jpg"> <img src="unlearning-the-rules-of-collectivity/img/pzithesis-4.jpg"> <img src="unlearning-the-rules-of-collectivity/img/pzithesis-5.jpg"> <img src="unlearning-the-rules-of-collectivity/img/pzithesis-6.jpg"> <img src="unlearning-the-rules-of-collectivity/img/pzithesis-7.jpg"> <img src="unlearning-the-rules-of-collectivity/img/pzithesis-8.jpg"> <img src="unlearning-the-rules-of-collectivity/img/pzithesis-9.jpg"> <img src="unlearning-the-rules-of-collectivity/img/pzithesis-10.jpg"> <img src="unlearning-the-rules-of-collectivity/img/pzithesis-11.jpg"> <img src="unlearning-the-rules-of-collectivity/img/pzithesis-12.jpg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="categories" class="row">
+      <div class="col1">
+        <h2>Year</h2>
+      </div>
+      <div class="col3">
+        <h2>Students</h2>
+      </div>
+      <div class="col4">
+        <h2>Projects</h2>
+      </div>
+      <div class="col5">
+        <h2><span class="long">Publications</span><span class="short">Pub.</span></h2>
+      </div>
+    </div>
+    <div id="content">
+      <!-- ///////////////////////// 2022 -2024 ///////////////////-->
+      <div class="row" id="vulnerable-interfaces" typeof="xpub:gradshow" resource="#vulnerable-interfaces">
+        <div class="col1">
+          <img src="/xpub2024-vulnerableinterfaces.svg" class="logo" style="width: 95%;" property="dc:image">
+          <p class="gradShow" property="dc:title">Vulnerable Interfaces</p>
+          <p><time datetime="2023-06-01" property="dc:date">June 2024</time></p>
+          <div class="ext">
+            <p><a href="https://vulnerable-interfaces.xpub.nl/" property="dc:link" target="_blank" class="ext">Collective Publication</a></p>
+          </div>
+        </div>
+        <div class="col6">
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="wink" resource="/wink/">
+            <p class="subcl1" property="xpub:student">Irmak Ertaş</p>
+            <p class="subcl2" property="dc:title"><a href="wink/" target="_blank" class="ext">Wink</a></p>
+            <p class="subcl3"><a href="wink/thesis.pdf" target="_blank" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="what-do-graphic-designers-do-all-day" resource="/what-do-graphic-designers-do-all-day/">
+            <p class="subcl1" property="xpub:student">Stephen Kerr</p>
+            <p class="subcl2" property="dc:title"><a href="what-do-graphic-designers-do-all-day/" target="_blank" class="ext">What do graphic designers do all day, and why do they do it, and what does “graphic design” even mean?</a></p>
+            <p class="subcl3"><a href="what-do-graphic-designers-do-all-day/thesis.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="talking-documents" resource="/talking-documents/">
+            <p class="subcl1" property="xpub:student">Aglaia Petta</p>
+            <p class="subcl2" property="dc:title"><a href="talking-documents/" target="_blank" class="ext">Talking Documents</a></p>
+            <p class="subcl3"><a href="talking-documents/thesis.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="backplaces" resource="/backplaces/">
+            <p class="subcl1"><span property="xpub:student">Ada Varriale</span></p>
+            <p class="subcl2" property="dc:title"><a href="backplaces/" target="_blank" class="ext">Backplaces</a></p>
+            <p class="subcl3"><a href="backplaces/thesis.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+        </div>
+      </div>
+      <!-- ///////////////////////// 2020 -2023 ///////////////////-->
+      <div class="row" id="Making-things-Bubblic" typeof="xpub:gradshow" resource="#Making-things-Bubblic">
+        <div class="col1">
+          <img src="https://media.xpub.nl/2023/xpub2023-makingthingsbubblic.svg" class="logo" style="width: 95%;" property="dc:image">
+          <p class="gradShow" property="dc:title">Making things Bubblic</p>
+          <p><time datetime="2023-06-01" property="dc:date">June 2023</time></p>
+          <div class="ext">
+            <p><a href="https://media.xpub.nl/2023/" property="dc:link" target="_blank" class="ext" style="display: none">📻 Collective Publication</a></p>
+            <p><a href="https://media.xpub.nl/2023/" property="dc:link" target="_blank" class="ext" style="display: none">📻 Video documentation</a></p>
+            <p><a href="https://media.xpub.nl/2023/gradshow/photos/" property="dc:link" target="_blank" class="ext">📻 Pictures</a></p>
+          </div>
+        </div>
+        <div class="col6">
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="dear-cross-maker" resource="/dear-cross-maker/">
+            <p class="subcl1" property="xpub:student">Supisara Burapachaisri</p>
+            <p class="subcl2" property="dc:title"><a href="dear-cross-maker/" target="_blank" class="ext">Dear (Cross) Maker,</a></p>
+            <p class="subcl3"><a href="dear-cross-maker/supi_Cross-Making.pdf" target="_blank" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="to-whom-it-may-affect" resource="/to-whom-it-may-affect/">
+            <p class="subcl1" property="xpub:student">Kimberley Cosmilla</p>
+            <p class="subcl2" property="dc:title"><a href="to-whom-it-may-affect/" target="_blank" class="ext">"To whom it may affect"</a></p>
+            <p class="subcl3"><a href="to-whom-it-may-affect/somewhere-highway-publishing.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="hacking-maintenance-with-care" resource="/hacking-maintenance-with-care/">
+            <p class="subcl1" property="xpub:student">Erica Gargaglione</p>
+            <p class="subcl2" property="dc:title"><a href="hacking-maintenance-with-care/" target="_blank" class="ext">Hacking Maintenance with Care</a></p>
+            <p class="subcl3"><a href="hacking-maintenance-with-care/pdf/HMWC.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="modular-matter" resource="/modular-matter/">
+            <p class="subcl1"><span property="xpub:student">Jian Haake</span> [<span property="xpub:nick">ohjian</span>]</p>
+            <p class="subcl2" property="dc:title"><a href="modular-matter/" target="_blank" class="ext">MODULAR MATTER</a></p>
+            <p class="subcl3"><a href="modular-matter/modular-matter-Jian_Haake.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="minor_stories" resource="/minor_stories/">
+            <p class="subcl1" property="xpub:student">Chaeyoung Kim</p>
+            <p class="subcl2" property="dc:title"><a href="minor_stories/" target="_blank" class="ext">Minor Stories</a></p>
+            <p class="subcl3"><a href="/minor_stories/pdf/(compressed)_spark(l)ing_curiosities_through_intimate_publishing.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="hello-worlding" resource="/hello-worlding/">
+            <p class="subcl1"><span property="xpub:student">Francesco Luzzana</span>, <span property="xpub:nick">km0</span>, <span property="xpub:nick">kamo</span>, <span property="xpub:nick">sumo</span>, <span property="xpub:nick">tofu</span>, etc.</p>
+            <p class="subcl2" property="dc:title"><a href="hello-worlding/" target="_blank" class="ext">Hello Worlding</a></p>
+            <p class="subcl3"><a href="hello-worlding/Hello%20Worlding%20-%20kamo%20-%20THE%20REAL%20ONE.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="thanks_for_listening" resource="/thanks_for_listening/">
+            <p class="subcl1"><span property="xpub:nick">mitsitron</span> [<span property="xpub:student">mitsa chaida michelakou</span>]</p>
+            <p class="subcl2" property="dc:title"><a href="thanks_for_listening/" target="_blank" class="ext">Thanks for listening</a></p>
+            <p class="subcl3"><a href="thanks_for_listening/thesis_mitsitron.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="sound-jams" resource="/sound-jams/">
+            <p class="subcl1"><span property="xpub:nick">Ål Nik</span> [<span property="xpub:student">Alexandra Nikolova</span>]</p>
+            <p class="subcl2" property="dc:title"><a href="sound-jams/" target="_blank" class="ext">Sound Jams: Deluxe Edition</a></p>
+            <p class="subcl3"><a href="https://project.xpub.nl/sound-jams/alnik-xpub-thesis.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="how-to-make-a-notebook-that" resource="/how-to-make-a-notebook-that/">
+            <p class="subcl1" property="xpub:student">Emma Prato</p>
+            <p class="subcl2" property="dc:title"><a href="how-to-make-a-notebook-that/" target="_blank" class="ext">Paper Notebooks: From an Industrial Model to a Tool of Expression</a></p>
+            <p class="subcl3"><a href="how-to-make-a-notebook-that/Thesis-Paper-Notebooks.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="social-shelves-project" resource="/social-shelves-project/">
+            <p class="subcl1" property="xpub:student">Gersande Schellinx</p>
+            <p class="subcl2" property="dc:title"><a href="social-shelves-project/" target="_blank" class="ext">The Social Shelf Project</a></p>
+            <p class="subcl3"><a href="social-shelves-project/xpub_master-thesis_gersande-schellinx.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="howtobeasocialjusticewarrior" resource="/howtobeasocialjusticewarrior/">
+            <p class="subcl1" property="xpub:student">Miriam Schöb</p>
+            <p class="subcl2" property="dc:title"><a href="howtobeasocialjusticewarrior/" target="_blank" class="ext">How to be a social justice warrior</a></p>
+            <p class="subcl3"><a href="howtobeasocialjusticewarrior/img/Masterthesis_MiriamSch%C3%B6b_TheLeftCanMeme.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+        </div>
+      </div>
+      <div id="Walkie-Talkie" class="row" typeof="xpub:gradshow" resource="#Walkie-Talkie">
+        <div class="col1">
+          <img src="https://git.xpub.nl/XPUB/project.xpub.nl/raw/branch/master/img/walkie-talkie-ref.png" class="logo" style="width: 95%;" property="dc:image">
+          <p class="gradShow" property="dc:title">Walkie-Talkie</p>
+          <p><time datetime="2022-06-01" property="dc:date">June 2022</time></p>
+          <div class="ext">
+            <p><a href="https://media.xpub.nl/2022/walkie-talkie-final.email.pdf" property="dc:link" target="_blank" class="ext">📻 Collective Publication</a></p>
+            <p><a href="https://media.xpub.nl/2022/gradshow/Walkie_Talkie.720p.mp4" property="dc:link" target="_blank" class="ext">📻 Video documentation</a></p>
+          </div>
+        </div>
+        <div class="col6">
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="virtualgarden" resource="/virtualgarden/">
+            <p class="subcl1" property="xpub:student">Kendal Beynon</p>
+            <p class="subcl2" property="dc:title"><a href="virtualgarden/" target="_blank" class="ext">Virtual Gardens</a></p>
+            <p class="subcl3"><a href="virtualgarden/XPUB-Cyberhotels-KB.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="notitleyet" resource="/notitleyet/">
+            <p class="subcl1" property="xpub:student">Martin Foucaut</p>
+            <p class="subcl2" property="dc:title"><a href="notitleyet/" target="_blank" class="ext">Count On Me</a></p>
+            <p class="subcl3"><a href="notitleyet/pdf/Martin_Foucaut_Graduation_Thesis_XPUB_2022.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="attempting-diffraction" resource="/attempting-diffraction/">
+            <p class="subcl1" property="xpub:student">Camilo García A.</p>
+            <p class="subcl2" property="dc:title"><a href="attempting-diffraction/" target="_blank" class="ext">Attempting Diffraction</a></p>
+            <p class="subcl3"><a href="attempting-diffraction/pdf/Camilo_Garcia_Aycardi_Graduation_Thesis_XPUB_.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="generatingstories" resource="/generatingstories/">
+            <p class="subcl1" property="xpub:student">Clara Gradel</p>
+            <p class="subcl2" property="dc:title"><a href="generatingstories/" target="_blank" class="ext">a and a</a></p>
+            <p class="subcl3"><a href="generatingstories/thesis.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="usx" resource="/usx/">
+            <p class="subcl1" property="xpub:student">Nami Kim</p>
+            <p class="subcl2" property="dc:title"><a href="usx/" target="_blank" class="ext">User Sentimental eXperience</a></p>
+            <p class="subcl3"><a href="usx/Nami%20Kim_graduation%20thesis_Xpub.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="frabjousish" resource="/frabjousish/">
+            <p class="subcl1" property="xpub:student">Euna Lee</p>
+            <p class="subcl2" property="dc:title"><a href="frabjousish/" target="_blank" class="ext">Frabjousish</a></p>
+            <p class="subcl3"><a href="frabjousish/pdf/thesis.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="habitat" resource="/habitat/">
+            <p class="subcl1" property="xpub:student">Jacopo Lega</p>
+            <p class="subcl2" property="dc:title"><a href="habitat/" target="_blank" class="ext">Habitat</a></p>
+            <p class="subcl3"><a href="habitat/Thesis--Habitat--Living-sharing-adapting---Jacopo-Lega.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="sobremesa" resource="/sobremesa/">
+            <p class="subcl1" property="xpub:student">Floor van Meeuwen</p>
+            <p class="subcl2" property="dc:title"><a href="sobremesa/" target="_blank" class="ext">Sobremesa</a></p>
+            <p class="subcl3"><a href="sobremesa/pdf/thesis.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="RuralComputing" resource="/RuralComputing/">
+            <p class="subcl1" property="xpub:student">Federico Poni</p>
+            <p class="subcl2" property="dc:title"><a href="RuralComputing/" target="_blank" class="ext">Concert, Computation, Conviviality</a></p>
+            <p class="subcl3"><a href="RuralComputing/pdf/thesis.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="868-mhz" resource="/868-mhz/">
+            <p class="subcl1" property="xpub:student">Louisa Teichmann</p>
+            <p class="subcl2" property="dc:title"><a href="868-mhz/" target="_blank" class="ext">868 MHz</a></p>
+            <p class="subcl3"><a href="868-mhz/asphaltspur.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+        </div>
+      </div><!-- ///////////////////////// 2019 -2021 ///////////////////-->
+      <div id="blue-links" class="row" typeof="xpub:gradshow" resource="#blue-links">
+        <div class="col1">
+          <img src="https://git.xpub.nl/XPUB/project.xpub.nl/raw/branch/master/img/logo_indigo_2021.png" class="logo" style="width: 95%;" property="dc:image">
+          <p class="gradShow" property="dc:title">blue links</p>
+          <p><time datetime="2021-07-01" property="dc:date">July 2021</time></p>
+        </div>
+        <div class="col6">
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="nothanks" resource="/nothanks/">
+            <p class="subcl1" property="xpub:student">Damlanur Bilgin</p>
+            <p class="subcl2" property="dc:title"><a href="nothanks/" target="_blank" class="ext">No thanks, I'll make my own</a></p>
+            <p class="subcl3"><a href="nothanks/pdf/THESIS-compressed.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="low-tech-chronicles" resource="/low-tech-chronicles/">
+            <p class="subcl1" property="xpub:student">Mark van den Heuvel</p>
+            <p class="subcl2" property="dc:title"><a href="low-tech-chronicles/" target="_blank" class="ext">Low-Tech Chronicles</a></p><a href="low-tech-chronicles/" target="_blank" class="ext"></a>
+            <p class="subcl3"><a href="low-tech-chronicles/PDF/Mark_van_den_Heuvel_thesis_light-edition.pdf" target="_blank" class="ext" property="xpub:thesis"></a><a href="low-tech-chronicles/PDF/Mark_van_den_Heuvel_thesis_light-edition.pdf" target="_blank" class="ext">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="writing_cure" resource="/writing_cure/">
+            <p class="subcl1" property="xpub:student">Avital Barkai</p>
+            <p class="subcl2" property="dc:title"><a href="writing_cure/" target="_blank" class="ext">Writing Cure</a></p>
+            <p class="subcl3"><a href="writing_cure/pdf/Avital_Barkai_thesis_compressed.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="makeinclusivewebsites" resource="/makeinclusivewebsites/">
+            <p class="subcl1" property="xpub:student">Max Lehmann</p>
+            <p class="subcl2" property="dc:title"><a href="makeinclusivewebsites/" target="_blank" class="ext">Make Inclusive Websites</a></p>
+            <p class="subcl3"><a href="makeinclusivewebsites/pdf/MaxLehmann_Thesis_compressed.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="terrafying-hear-say" resource="/terrafying-hear-say/">
+            <p class="subcl1" property="xpub:student">Ioana Tomici</p>
+            <p class="subcl2" property="dc:title"><a href="terrafying-hear-say/" target="_blank" class="ext">Terrafying Hear/Say</a></p>
+            <p class="subcl3"><a href="terrafying-hear-say/pdf/thesis.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="desire_revolution" resource="/desire_revolution/">
+            <p class="subcl1" property="xpub:student">Clara Noseda</p>
+            <p class="subcl2" property="dc:title"><a href="desire_revolution/" target="_blank" class="ext">CONSIDER DISASTER, DESIRE REVOLUTION: A repository for astropolitical research</a></p>
+            <p class="subcl3"><a href="desire_revolution/pdf/A%20SAILORS%20GUIDE%20TO%20EARTH_Clara%20Noseda.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="lever_burns" resource="/lever_burns/">
+            <p class="subcl1" property="xpub:student">Mika Motskobili</p>
+            <p class="subcl2" property="dc:title"><a href="lever_burns/" target="_blank" class="ext">Lever Burns</a></p>
+            <p class="subcl3"><a href="lever_burns/pdf/Ezn_LeverBurns.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="when-you-might-go-astray" resource="/when-you-might-go-astray/">
+            <p class="subcl1" property="xpub:student">Anna Sandri</p>
+            <p class="subcl2" property="dc:title"><a href="when-you-might-go-astray/" target="_blank" class="ext">When you might go astray</a></p>
+            <p class="subcl3"><a href="when-you-might-go-astray/pdf/wymga.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="the-constitution" resource="/the-constitution/">
+            <p class="subcl1" property="xpub:student">Tisa Neža Herlec</p>
+            <p class="subcl2" property="dc:title"><a href="the-constitution/" target="_blank" class="ext">The Constitution</a></p>
+            <p class="subcl3"><a href="the-constitution/pdf/Tisa-Ne%C5%BEa-Herlec_The-Constitution.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+        </div>
+      </div>
+      <div id="c_o_l_l_e_c_t_i_v_e_i_o_n_i_n_g" class="row" typeof="xpub:gradshow" resource="#c_o_l_l_e_c_t_i_v_e_i_o_n_i_n_g">
+        <div class="col1">
+          <img src="img/xpub_logo_2020.svg" class="logo" style="width: 95%;" property="dc:image">
+          <p class="gradShow" property="dc:title">c_o_l_l_e_c_t_i_v_e_i_o_n_i_n_g</p>
+          <p><time datetime="2020-07-01" property="dc:date">July 2020</time></p>
+          <div class="ext">
+            <p><a href="https://collectiveioning.xpub.nl/" property="dc:link" target="_blank" class="ext">🛰️ Mini site</a></p>
+          </div>
+        </div>
+        <div class="col6">
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="the-bootleg-library" resource="/the-bootleg-library/">
+            <p class="subcl1" property="xpub:student">Simon Browne</p>
+            <p class="subcl2" property="dc:title"><a href="the-bootleg-library/" target="_blank" class="ext">the bootleg library</a></p>
+            <p class="subcl3"><a href="the-bootleg-library/pdf/thesis.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="ilinx" resource="/ilinx/">
+            <p class="subcl1" property="xpub:student">Tancredi Di Giovanni</p>
+            <p class="subcl2" property="dc:title"><a href="ilinx/" target="_blank" class="ext">ilinx</a></p><a href="ilinx/" target="_blank" class="ext"></a>
+            <p class="subcl3"><a href="ilinx/pdf/OHE.pdf" target="_blank" class="ext" property="xpub:thesis"></a><a href="ilinx/pdf/OHE.pdf" target="_blank" class="ext">PDF</a> <!--// &lt;a href='#2020-att2' class='int'&gt;IMG&lt;/a&gt;--></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="parallel-colonialism" resource="/parallel-colonialism/">
+            <p class="subcl1" property="xpub:student">Bohye Woo</p>
+            <p class="subcl2" property="dc:title"><a href="parallel-colonialism/" target="_blank" class="ext">Parallel Colonialism</a></p>
+            <p class="subcl3"><a href="parallel-colonialism/pdf/My_Country_Is_Still_A_Colony_Bohye_Woo_0880872%2011.37.48%2011.37.51.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a> <!-- // &lt;a href='#2020-att3' class='int'&gt;IMG&lt;/a&gt;--></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="cartographies-of-counter-speculation" resource="/cartographies-of-counter-speculation/">
+            <p class="subcl1" property="xpub:student">Paloma Garcia</p>
+            <p class="subcl2" property="dc:title"><a href="cartographies-of-counter-speculation/" target="_blank" class="ext">Cartographies of Counter Speculation</a></p>
+            <p class="subcl3"><a href="cartographies-of-counter-speculation/pdf/garcia-paloma-cartographies-of-invisibility.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a> <!-- // &lt;a href='#2020-att4' class='int'&gt;IMG&lt;/a&gt;--></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="syster-papyri-magicae" resource="/syster-papyri-magicae/">
+            <p class="subcl1" property="xpub:student">Artemis Gryllaki</p>
+            <p class="subcl2" property="dc:title"><a href="syster-papyri-magicae/" target="_blank" class="ext">Syster Papyri Magicae</a></p>
+            <p class="subcl3"><a href="syster-papyri-magicae/pdf/ArtemisGryllaki-Thesis.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="tactical-watermarks" resource="/tactical-watermarks/">
+            <p class="subcl1" property="xpub:student">Pedro Sá Couto</p>
+            <p class="subcl2" property="dc:title"><a href="tactical-watermarks/" target="_blank" class="ext">Tactical Watermarks</a></p>
+            <p class="subcl3"><a href="tactical-watermarks/pdf/Thesis_Master_PSC_HD.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="networks-of-care" resource="/networks-of-care/">
+            <p class="subcl1" property="xpub:student">Rita Graça</p>
+            <p class="subcl2" property="dc:title"><a href="networks-of-care" target="_blank" class="ext">Networks of Care</a></p>
+            <p class="subcl3"><a href="networks-of-care/pdf/networksofcare_thesis.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="the-repeater-archive" resource="/the-repeater-archive/">
+            <p class="subcl1" property="xpub:student">Biyi Wen</p>
+            <p class="subcl2" property="dc:title"><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" property="xpub:thesis">PDF</a> <!--// &lt;a href='#2020-att8' class='int'&gt;IMG&lt;/a&gt;--></p>
+          </div>
+        </div>
+      </div>
+      <div id="UPSETTING-SETTINGS" class="row" typeof="xpub:gradshow" resource="#UPSETTING-SETTINGS">
+        <div class="col1">
+          <img src="img/xpub_logo_2019.png" class="logo" property="dc:image">
+          <p class="gradShow" property="dc:title">UPSETTING SETTINGS</p>
+          <p><time datetime="2019-07-01" property="dc:date">July 2019</time></p>
+          <div class="attch">
+            <p><a href="2019/postergenerator/" property="dc:link" target="_blank" class="ext">📎 poster generator</a></p>
+            <p><a href="README19.NFO" property="dc:link" class="int">📎 README19.NFO</a></p>
+          </div>
+        </div>
+        <div class="col6">
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="instant-warnet" resource="/instant-warnet/">
+            <p class="subcl1" property="xpub:student">Natasha Berting</p>
+            <p class="subcl2" property="dc:title"><a href="instant-warnet/" class="ext">Instant Warnet</a></p>
+            <p class="subcl3"><a href="instant-warnet/pdf/Berting-Making-Silences-On-Social-Media.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a> <!--a href='test.pdf' target="_blank" class='ext'&gt;PDF&lt;/a&gt; // &lt;a href='#2018-att1' class='int'&gt;IMG&lt;/a--></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="lets-amplify-unspeakable-things" resource="/lets-amplify-unspeakable-things/">
+            <p class="subcl1" property="xpub:student">Angeliki Diakrousi</p>
+            <p class="subcl2" property="dc:title"><a href="lets-amplify-unspeakable-things/" target="_blank" class="ext">Let's Amplify Unspeakable Things</a></p>
+            <p class="subcl3"><a href="lets-amplify-unspeakable-things/pdf/diakrousi-lets-amplify-unspeakable-things.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="smart-speaker-theatre" resource="/smart-speaker-theatre/">
+            <p class="subcl1" property="xpub:student">Joca van der Horst</p>
+            <p class="subcl2" property="dc:title"><a href="smart-speaker-theatre/" target="_blank" class="ext">Smart Speaker Theatre</a></p>
+            <p class="subcl3"><a href="smart-speaker-theatre/pdf/ghost_in_the_speaker.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="poetic-software" resource="/poetic-software/">
+            <p class="subcl1" property="xpub:student">Alexander Roidl</p>
+            <p class="subcl2" property="dc:title"><a href="poetic-software/" target="_blank" class="ext">Poetic Software</a></p>
+            <p class="subcl3"><a href="poetic-software/pdf/poetic_software_thesis.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="is-it-time-to-eat-or-is-there-no-more-time-to-eat" resource="/is-it-time-to-eat-or-is-there-no-more-time-to-eat/">
+            <p class="subcl1" property="xpub:student">Alice Strete</p>
+            <p class="subcl2" property="dc:title"><a href="is-it-time-to-eat-or-is-there-no-more-time-to-eat/" target="_blank" class="ext">Is it time to eat, or is there no more time to eat?</a></p>
+            <p class="subcl3"><a href="is-it-time-to-eat-or-is-there-no-more-time-to-eat/pdf/your-body-will-make-itself-heard.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="eigengrau" resource="/eigengrau/">
+            <p class="subcl1" property="xpub:student">Zalán Szakács</p>
+            <p class="subcl2" property="dc:title"><a href="eigengrau/" target="_blank" class="ext">Eigengrau</a></p>
+            <p class="subcl3"><a href="eigengrau/pdf/Phantasmagoria_Zalan_Szakacs_Thesis.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a></p>
+          </div>
+        </div>
+      </div>
+      <div id="Ex,-XPUB" class="row" typeof="xpub:gradshow" resource="#Ex,-XPUB">
+        <div class="col1">
+          <img src="img/xpub_logo_2018.svg" class="logo" property="dc:image">
+          <p class="gradShow" property="dc:title">Ex, XPUB</p>
+          <p><time datetime="2018-07-01" property="dc:date">July 2018</time></p>
+          <div class="attch">
+            <p><a href="https://media.xpub.nl/gradshow-2018-web.mp4" property="dc:link" target="_blank" class="ext">📎 gradshow.mp4</a></p>
+          </div>
+        </div>
+        <div class="col6">
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="back-it-up" resource="/back-it-up/">
+            <p class="subcl1" property="xpub:student">Karina Dukalska</p>
+            <p class="subcl2" property="dc:title"><a href="back-it-up/" class="ext">Back It Up</a></p>
+            <p class="subcl3"><a href="back-it-up/pdf/Publication-Karina_ABC_thesis.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a> // <a href="#2018-att1" class="int">IMG</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="referendum-medialogs" resource="/referendum-medialogs/">
+            <p class="subcl1" property="xpub:student">Franc González</p>
+            <p class="subcl2" property="dc:title"><a href="referendum-medialogs/" class="ext">Referendum Medialogs</a></p>
+            <p class="subcl3"><a href="referendum-medialogs/pdf/Publication-referendum_medialogs.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a> // <a href="#2018-att2" class="int">IMG</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="anomolous-faces" resource="/anomolous-faces/">
+            <p class="subcl1" property="xpub:student">Max Franklin</p>
+            <p class="subcl2" property="dc:title"><a href="anomolous-faces/" class="ext">Anomolous faces</a></p>
+            <p class="subcl3"><a href="anomolous-faces/pdf/Publication-POD_Thesis_Max-Franklin.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a> // <a href="#2018-att3" class="int">IMG</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="unpublishing" resource="/unpublishing/">
+            <p class="subcl1" property="xpub:student">Nadine Rotem-Stibbe</p>
+            <p class="subcl2" property="dc:title"><a href="unpublishing/" class="ext">Unpublishing</a></p>
+            <p class="subcl3"><a href="unpublishing/pdf/Thesis-N.Rotem-Stibbe.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a> // <a href="#2018-att4" class="int">IMG</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="alt-reality-lexicon" resource="/alt-reality-lexicon/">
+            <p class="subcl1" property="xpub:student">Pleun Gremmen</p>
+            <p class="subcl2" property="dc:title"><a href="alt-reality-lexicon/" class="ext">Alt Reality Lexicon</a></p>
+            <p class="subcl3"><a href="alt-reality-lexicon/pdf/Publication-AltRealityLexBook.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a> // <a href="#2018-att5" class="int">IMG</a></p>
+          </div>
+          <div class="subrow" typeof="xpub:project" property="dc:hasPart" id="unlearning-the-rules-of-collectivity" resource="/unlearning-the-rules-of-collectivity/">
+            <p class="subcl1" property="xpub:student">Giulia de Giovanelli</p>
+            <p class="subcl2" property="dc:title"><a href="unlearning-the-rules-of-collectivity/" class="ext">Unlearning the Rules of Collectivity</a></p>
+            <p class="subcl3"><a href="unlearning-the-rules-of-collectivity/pdf/Publication-thesis%20Giuliade%20Giovanelli.pdf" target="_blank" class="ext" property="xpub:thesis">PDF</a> // <a href="#2018-att6" class="int">IMG</a></p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <p><a href="index_titles.html">index (by title, name)</a></p>
+  </section>
+</body>
+</html>
diff --git a/talking-documents/index.html b/talking-documents/index.html
new file mode 100644
index 0000000..daab2be
--- /dev/null
+++ b/talking-documents/index.html
@@ -0,0 +1,71 @@
+<!doctype html>
+
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+
+  <title>Project Title</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'>Project Title <a href='#hleft-text' class='show'> ⓘ</a></h1>
+<h2 id='student-name'>Student name</h2>
+<div id='hleft-text'>
+ <a href=# id='back'>
+ <div id='inner-hleft-text'>
+ <div id='ihtp'>
+ <object>
+ <div id='about-project'>
+ <p>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. </p>
+</div>
+<hr align='left'>
+<div id='about-student'>
+<p>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.</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://yourdomain.org' target="_blank" class='ext'>Project Website</a></li>
+</ul>
+<img src="img/img1.jpg" class='workimg'/>
+<img src="img/img2.jpg" class='workimg'/>
+<img src="img/img3.jpg" class='workimg'/>
+<img src="img/img4.jpg" class='workimg'/>
+</div>
+<div id='publication'>
+<h3 class='gal-title'>Publication</h3>
+<ul id='publist'>
+<li><a href='pdf/thesis.pdf' target="_blank" class='ext'>Publication PDF</a></li>
+</ul>
+<img src="img/pub1.jpg" class='workimg'/>
+<img src="img/pub2.jpg" class='workimg'/>
+<img src="img/pub3.jpg" class='workimg'/>
+<img src="img/pub4.jpg" class='workimg'/>
+</div>
+<div id='gradshow'>
+<h3 class='gal-title'>Graduation Show</h3>
+<img src="img/gradshow1.jpg" class='workimg'/>
+<img src="img/gradshow2.jpg" class='workimg'/>
+<img src="img/gradshow3.jpg" class='workimg'/>
+<img src="img/gradshow4.jpg" class='workimg'/>
+</div>
+</div>
+</section>
+</div>
+</body>
+</html>
diff --git a/templates/student-template.html b/templates/index.html
similarity index 100%
rename from templates/student-template.html
rename to templates/index.html
diff --git a/what-do-graphic-designers-do-all-day/index.html b/what-do-graphic-designers-do-all-day/index.html
new file mode 100644
index 0000000..daab2be
--- /dev/null
+++ b/what-do-graphic-designers-do-all-day/index.html
@@ -0,0 +1,71 @@
+<!doctype html>
+
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+
+  <title>Project Title</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'>Project Title <a href='#hleft-text' class='show'> ⓘ</a></h1>
+<h2 id='student-name'>Student name</h2>
+<div id='hleft-text'>
+ <a href=# id='back'>
+ <div id='inner-hleft-text'>
+ <div id='ihtp'>
+ <object>
+ <div id='about-project'>
+ <p>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. </p>
+</div>
+<hr align='left'>
+<div id='about-student'>
+<p>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.</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://yourdomain.org' target="_blank" class='ext'>Project Website</a></li>
+</ul>
+<img src="img/img1.jpg" class='workimg'/>
+<img src="img/img2.jpg" class='workimg'/>
+<img src="img/img3.jpg" class='workimg'/>
+<img src="img/img4.jpg" class='workimg'/>
+</div>
+<div id='publication'>
+<h3 class='gal-title'>Publication</h3>
+<ul id='publist'>
+<li><a href='pdf/thesis.pdf' target="_blank" class='ext'>Publication PDF</a></li>
+</ul>
+<img src="img/pub1.jpg" class='workimg'/>
+<img src="img/pub2.jpg" class='workimg'/>
+<img src="img/pub3.jpg" class='workimg'/>
+<img src="img/pub4.jpg" class='workimg'/>
+</div>
+<div id='gradshow'>
+<h3 class='gal-title'>Graduation Show</h3>
+<img src="img/gradshow1.jpg" class='workimg'/>
+<img src="img/gradshow2.jpg" class='workimg'/>
+<img src="img/gradshow3.jpg" class='workimg'/>
+<img src="img/gradshow4.jpg" class='workimg'/>
+</div>
+</div>
+</section>
+</div>
+</body>
+</html>
diff --git a/wink/index.html b/wink/index.html
new file mode 100644
index 0000000..daab2be
--- /dev/null
+++ b/wink/index.html
@@ -0,0 +1,71 @@
+<!doctype html>
+
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+
+  <title>Project Title</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'>Project Title <a href='#hleft-text' class='show'> ⓘ</a></h1>
+<h2 id='student-name'>Student name</h2>
+<div id='hleft-text'>
+ <a href=# id='back'>
+ <div id='inner-hleft-text'>
+ <div id='ihtp'>
+ <object>
+ <div id='about-project'>
+ <p>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. </p>
+</div>
+<hr align='left'>
+<div id='about-student'>
+<p>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.</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://yourdomain.org' target="_blank" class='ext'>Project Website</a></li>
+</ul>
+<img src="img/img1.jpg" class='workimg'/>
+<img src="img/img2.jpg" class='workimg'/>
+<img src="img/img3.jpg" class='workimg'/>
+<img src="img/img4.jpg" class='workimg'/>
+</div>
+<div id='publication'>
+<h3 class='gal-title'>Publication</h3>
+<ul id='publist'>
+<li><a href='pdf/thesis.pdf' target="_blank" class='ext'>Publication PDF</a></li>
+</ul>
+<img src="img/pub1.jpg" class='workimg'/>
+<img src="img/pub2.jpg" class='workimg'/>
+<img src="img/pub3.jpg" class='workimg'/>
+<img src="img/pub4.jpg" class='workimg'/>
+</div>
+<div id='gradshow'>
+<h3 class='gal-title'>Graduation Show</h3>
+<img src="img/gradshow1.jpg" class='workimg'/>
+<img src="img/gradshow2.jpg" class='workimg'/>
+<img src="img/gradshow3.jpg" class='workimg'/>
+<img src="img/gradshow4.jpg" class='workimg'/>
+</div>
+</div>
+</section>
+</div>
+</body>
+</html>
