Add dynamic toolchains thumbnail

index.html

@@ -31,6 +31,26 @@
         Research
     </div>
     <section class="projects-section padding-bottom-std">
+        <div class="project-tile">
+            <a href="/projects/dynamic-toolchains/">
+            <div class="project-photo-container">
+                <img class="project-photo padding-bottom-std" src="projects/dynamic-toolchains/thumbnail.png" alt="A dataflow programming environment with a colorful cellular automata.">
+            </div>
+            </a>
+            <a href="/projects/dynamic-toolchains/">
+                <div class="project-title padding-bottom-std">
+                    Dynamic Toolchains
+                </div>
+            </a>
+            <div class="project-text">
+                We built an event-driven dataflow environment to scaffold development of new digital fabrication workflows.
+            </div>
+
+            <div class="project-links padding-bottom-std">
+                <a target="_blank" rel="noopener noreferrer" href="/projects/dynamic-toolchains/">Project Page</a>
+                <a target="_blank" rel="noopener noreferrer" href="https://dl.acm.org/doi/pdf/10.1145/3586183.3606802">Paper</a>
+            </div>
+        </div>
         <div class="project-tile">
             <div class="project-photo-container">
                 <img class="project-photo padding-bottom-std" src="assets/img/spaghetti.jpg" alt="failed 3d print">
@@ -144,7 +164,7 @@
                   p5.fab
               </div>
               <div class="project-text">
-                A system for controlling digital fabrication machines from the creative coding environment p5.js, informed by insights into 3D printing practice. 
+                A system for controlling digital fabrication machines from the creative coding environment p5.js, informed by insights into 3D printing practice.
               </div>
               <div class="project-links padding-bottom-std">
                   <a target="_blank" rel="noopener noreferrer" href="https://dl.acm.org/doi/10.1145/3532106.3533496">Paper</a>
@@ -161,7 +181,7 @@
                   Interactive Digital Fabrication Machine Control Directly Within a CAD Environment
               </div>
               <div class="project-text">
-		Enabling control of digital fabrication machines from a Computer-Aided Design (CAD) environment, including interactive control of toolpath geometry as well as machine parameters such as speed, acceleration, or jerk. 
+		Enabling control of digital fabrication machines from a Computer-Aided Design (CAD) environment, including interactive control of toolpath geometry as well as machine parameters such as speed, acceleration, or jerk.
               </div>
               <div class="project-links padding-bottom-std">
                   <a target="_blank" rel="noopener noreferrer" href="https://doi.org/10.1145/3485114.3485120">Paper</a>
@@ -185,16 +205,21 @@
               </div>
       </div>
       <div class="project-tile">
+              <a href="/projects/plottertwitter/">
               <div class="project-photo-container">
-                  <img class="project-photo padding-bottom-std" src="assets/img/plottertwitter.png" alt="collage of plots from plotter twitter">
+                  <img class="project-photo padding-bottom-std" src="projects/plottertwitter/thumbnail.png" alt="Collage of plotted artwork shared with the PlotterTwitter hashtag.">
               </div>
+              </a>
+              <a href="/projects/plottertwitter/">
               <div class="project-title padding-bottom-std">
                   Studying #PlotterTwitter
               </div>
+              </a>
               <div class="project-text">
                   We conducted a qualitative study of #PlotterTwitter and found that makers champion creative exploration of materials over a predictable series of steps.
               </div>
               <div class="project-links padding-bottom-std">
+                  <a href="/projects/plottertwitter/">Project Page</a>
                   <a href="https://dl.acm.org/doi/abs/10.1145/3411764.3445653">Paper</a>
                   <a href="https://youtu.be/xqhT-8ElJ68">Video</a>
               </div>

projects/dynamic-toolchains/index.html

@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="../projects.css" />
   </head>
   <body>
+    <a class="home" href="/">back to home</a>
     <section class="no-margin-section">
       <img class="teaser" src="teaser.png" />
     </section>

projects/plottertwitter/index.html

@@ -7,6 +7,8 @@
     <link rel="stylesheet" href="../projects.css" />
   </head>
   <body>
+    <a class="home" href="/">back to home</a>
+
     <section class="no-margin-section">
       <img class="teaser" src="teaser.png" />
     </section>

projects/projects.css

@@ -55,6 +55,15 @@ a {
   color: inherit;
 }
 
+.home {
+  position: absolute;
+  right: 0;
+  padding: 0.2em 0.4em;
+  color: #cccccc;
+  font-style: italic;
+  background-color: #111111;
+}
+
 .no-margin-section {
   width: 100%;
   max-width: calc(var(--col-width) - 2em);