add text and images

modular-matter/index.html

@@ -6,7 +6,7 @@
 
   <title>MODULAR MATTER</title>
   <meta name="description" content="XPUB">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="../css/pages.css">
 </head>
 
@@ -14,21 +14,21 @@
 <div id='wrapper'></div>
 <a href='../' id='homebttn' class='ext'> << home</a>
 <header>
-<h1 id='project-title'>MODULAR MATTER – Rewire your Prints!<a href='#hleft-text' class='show'> ⓘ</a></h1>
-<h2 id='student-name'>Jian Haake</h2>
+<h1 id='project-title'>MODULAR MATTER<a href='#hleft-text' class='show'> ⓘ</a></h1>
+<h2 id='student-name'>Jian Haake [ohjian]</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>
+ <p>MODULAR MATTER is the attempt to re-think Desktop Publishing through the concept of modular synthesis. The outcome is a tool with several independent and combinable hardware modules, each of them performing a specific operation with an operation-specific physical interface. MODULAR MATTER can be played like an instrument in order to generate unexpected printed outcome. The process of making the tool as well as the unfamiliar experience of using the tool hopefully sparks critical conversations around tool ecologies and helps to break open engrained ways of working. </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>
+<p>Jian Haake is a graphic designer, facilitator and experimental maker. Coming from a background in book making and printed matter, her practice is strongly influenced by this perspective while shifting towards a more hybrid and open understanding of publishing. In her independent and collaborative work Jian Haake tries to establish a making practice that creates frameworks to invite happy accidents and the unexpected. Her current interest in physical computing and tool making is inspired by and will feed back into her experience in print publishing and workshop facilitation.</p>
 </div>
-<a id='getback' class='int'> go back </a> 
+<a id='getback' class='int'> go back </a>
 </object>
 </div>
 </div>
@@ -38,34 +38,35 @@
 <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'/>
+<h3 class='gal-title'>MODULAR MATTER – Rewire your Prints!</h3>
+<p>MODULAR MATTER currently includes the following modules: <br>DYNAMIC GLYPH to give text input, FRICTION LABEL, WEAVER, FUTURE RELICS and WHOOSH to transform, manipulate and process text and graphics, and finally EMERGENT MATTER to generate a file that can be sent to a printer or preview screen. <br>The adjustable knobs, slides and switches of each module control the operation. By patching cables the users connect modules in order to create a workflow towards printed outcome. </p>
+<img src="img/modular_matter_final_modules4.jpg" class='workimg'/>
+<img src="img/modular_matter_final_modules2.jpg" class='workimg'/>
+<img src="img/modular_matter_final_modules5.jpg" class='workimg'/>
+<img src="img/modular_matter_final_modules16.jpg" class='workimg'/>
 </div>
 <div id='publication'>
-<h3 class='gal-title'>Publication</h3>
+<h3 class='gal-title'>Documentation</h3>
 <ul id='publist'>
-<li><a href='pdf/thesis.pdf' target="_blank" class='ext'>Publication PDF</a></li>
+<li><a href='https://pzwiki.wdka.nl/mediadesign/User:Ohjian/Final_presentation' target="_blank" class='ext'>Project Documentation</a></li>
+<li><a href='https://git.xpub.nl/ohjian/MODULAR_MATTER' target="_blank" class='ext'>Code Documentation</a></li>
+</ul>
 </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'/>
+<img src="img/modular_matter_breadboard1.jpg" class='workimg'/>
+<img src="img/modular_matter_breadboard2.jpg" class='workimg'/>
+<img src="img/modular_matter_electronic_circuits2.jpg" class='workimg'/>
+<img src="img/modular_matter_pcb_drafts3.jpg" class='workimg'/>
+<img src="img/modular_matter_pcb_assembly1.jpg" class='workimg'/>
+<img src="img/modular_matter_pcb_assembly2.jpg" class='workimg'/>
+<img src="img/modular_matter_pcb_assembly3.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'/>
+<h3 class='gal-title'>Publication & Grad Show</h3>
+<p>During the graduation show an interactive installation invistes visitors to use and test the modules while having conversations about tools and their impact on creative practice. <br>A diy kit with all modules and electronic components will be available in the shop, accompanied by the handbook "MODULAR MATTER – A Situated and Annotated Manual".</p>
+<img src="img/modular_matter_pcb_unboxing2.jpg" class='workimg'/>
 </div>
 </div>
 </section>
 </div>
 </body>
-</html>
+</html>