added showcase, credits, and fixed hover bug

build.py

@@ -48,14 +48,13 @@ class Website:
              filename = page.get_filename()
              html_content = page.get_content()
              html_output = template.render(
-                 title=metadata['title'], 
+                 	title=metadata.get('title', ''), 
-                 year=metadata['year'],
+					year=metadata.get('year', ''),  # Assuming year is a string
-                 date=metadata['date'],
+					date=metadata.get('date', ''),  # Assuming date is a string
 					tags=metadata.get('tags', []),
-                 image=metadata['image'],
+					image=metadata.get('image', ''),  # Assuming image is a string
-                 showcase=metadata['showcase'],
+					showcase=metadata.get('showcase', []),
-                 credits=metadata['credits'],
+					credits=metadata.get('credits', []),  # Assuming credits is a string
-                 references=page.get_references(),
                  content=html_content)
              with open(os.path.join(self.output_dir_root, filename), 'w', encoding='utf8') as output_file:
                         output_file.write(html_output)
@@ -105,6 +104,7 @@ class Website:
     def format_content(self, content):
         # convert all (link)(src) to <a> tags
         content = re.sub(r'\(([^)]+)\)\[([^\]]+)\]', r'<a href="\2">\1</a>', content)
+        # convert all video links to embedded code
         return content
         
     def fetch_all_images(self):

content/about.md

@@ -1,5 +1,4 @@
 ---
-cv: some-path
 instagram: https://www.instagram.com/cailean.finn/
 git: https://git.fioruil.ie/
 ---

content/posts/ai-x-body.md

@@ -5,19 +5,6 @@ year: 2022
 image: aixbody.webp
 tags: [HPE, AI]
 date: 2024-06-07
-showcase: 
-  - name: Exposed Torino Foto Festival
-    year: 2024
-    location: Turin
-  - name: Another Showcase Festival
-    year: 2025
-    location: Rome
-credits: 
-  Cailean: CT
-  Leon: Camera
-references:
-  - title: some-title
-    link: https://www.caileanfinn.ie
 draft: false
 ---
 This publication was created in collaboration with AIxDesign, as part of their AI Playground (S01) which ran from May 2022-February 2023.

content/posts/demo.md

@@ -0,0 +1,37 @@
+---
+title: DEMO
+type: Project
+year: 2024
+image: demo.jpg
+tags: [AI, NLP, Simulation]
+date: 2024-06-07
+showcase: 
+  - name: Speak It Now Eat It, Revision Performing Arts Festival
+    year: 2023
+    location: Belfast
+credits: 
+  Eoin O'Sullivan: Sound design
+references:
+  - title: some-title
+    link: https://www.caileanfinn.ie
+draft: false
+---
+(O)MACHINE is a real-time generative performance that employs contemporary machine learning algorithms to explore how we humanise technologies.The architecture of this system was designed to emulate our stream of consciousness, where the machine is trapped in this perpetual cycle through processes of reflection and feedback. As questions begin to arise around the sentience or ‘intelligence’ of these thinking machines, it has become even more important to explore our relationship with machines, and how it continues to evolve. By engaging with its output, it positions artificial intelligence as both a subject and tool. Through this approach, we may begin to expand the dynamics of this connection through new methods of collaboration. From this interaction, we can continue to learn more about how these systems function, how they think, if they even think at all, or can it help us think?
+
+Sound design by (Eoin O'Sullivan)[https://eoin-osullivan.bandcamp.com/]
+
+* One
+* Two
+* Three
+
+__HELLO__
+
+## WORLD ##
+
+<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/952371869?h=fabc477b89&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
+
+<div style="padding:56.25% 0 0 0;position:relative; margin-top:20px;"><iframe style="position:absolute;top:0;left:0;width:100%;height:100%;" src="https://www.youtube.com/embed/g-10hW3Sly0?si=zUqzDQXnSPHBAGSq&amp;controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
+
+![alt text](/images/demo.jpg "Title")
+
+_WHAT_

public/about.html

@@ -33,8 +33,6 @@
 		<div id="social-container">
 			<div>[email protected]</div>
 			
-			<div>cv <a href="some-path" target="_blank">↯</a></div>
-			
 			<div>instagram <a href="https://www.instagram.com/cailean.finn/" target="_blank">↯</a></div>
 			
 			<div>git <a href="https://git.fioruil.ie/" target="_blank">↯</a></div>

public/articles/(o)machine.html

@@ -40,18 +40,43 @@
 			<p>(O)MACHINE is a real-time generative performance that employs contemporary machine learning algorithms to explore how we humanise technologies.The architecture of this system was designed to emulate our stream of consciousness, where the machine is trapped in this perpetual cycle through processes of reflection and feedback. As questions begin to arise around the sentience or ‘intelligence’ of these thinking machines, it has become even more important to explore our relationship with machines, and how it continues to evolve. By engaging with its output, it positions artificial intelligence as both a subject and tool. Through this approach, we may begin to expand the dynamics of this connection through new methods of collaboration. From this interaction, we can continue to learn more about how these systems function, how they think, if they even think at all, or can it help us think?</p>
 <p>Sound design by <a href="https://eoin-osullivan.bandcamp.com/">Eoin O'Sullivan</a></p>
 		</div>
-		<div id="project-related">
-			<div id="pr-header">References:</div>
-			<ul id="pr-list">
 		
-				<li><a href='https://www.caileanfinn.ie'>some-title</a></li>
 		
-			</ul>
+		<div id="project-showcase">
+			<div id="pr-header">Exhibited:</div>
+			<div id="showcase-cont">
+			
+			<div class="showcase">
+				<p>(2023)</p>
+				<p>Speak It Now Eat It, Revision Performing Arts Festival,</p>
+				<p>Belfast</p>
+			</div>
+			
+			</div>
+		</div>
+		
+
+		
+		<div id="project-credits">
+			<div id="pr-header">Credits:</div>
+			<div id="credit-cont">
+			
+				<div class="credit">
+				<p>&#8594;</p> 
+				<p>Eoin O'Sullivan, </p> 
+				<p>Sound design</p>
+				</div>
+			
+			</div>
+		</div>
+		
+
+		
+
 		<div id="sleeping-mario">
 			<img src="/images/website/mario-sleep-up.gif">
 		</div>
 	</div>
-	</div>
 </div>
 
   </div>

public/articles/ai-x-body.html

@@ -39,18 +39,17 @@
 <p>The text explores the evolution of human pose estimation and recognition technologies through tracing their historical development, their contemporary applications, and how artists and creative practitioners have employed such tools in their artistic process.</p>
 <p><a href="https://nadiapiet.notion.site/AIxDesign-s-Guide-to-AI-x-Body-26ea1c78f253425a92f9269895ea6f46">Article 📎</a></p>
 		</div>
-		<div id="project-related">
-			<div id="pr-header">References:</div>
-			<ul id="pr-list">
 		
-				<li><a href='https://www.caileanfinn.ie'>some-title</a></li>
 		
-			</ul>
+
+		
+
+		
+
 		<div id="sleeping-mario">
 			<img src="/images/website/mario-sleep-up.gif">
 		</div>
 	</div>
-	</div>
 </div>
 
   </div>

public/articles/beauty-and-the-beep.html

@@ -43,18 +43,55 @@
 <p>Wondering who would buy an automated mechanical pet to assist and live in their home, the film explores Boston Dynamics' datafied definition of a home or what it takes for such a personal and intimate space to be standardised for computer vision to function. Bertil — a synthetic chair inspired by IKEA’s first 3D rendered image for their print catalogue, which marked their shift to rendered imagery — wanders through this seemingly simple virtual home, interacting with its objects, in search of some answers. Navigating the home for Bertil is no easy task, as they encounter the daily life noise that is littered throughout the home. A banana trips them, they cannot sit, they get stuck on a treadmill and why is there a toy pony on the floor? Revealing how the impossibility of gathering training data in the home has led to the widespread use of synthetic data, Bertil reminds us that the home is private and not for capture.</p>
 <p>For this work, I collaborated with Simone C Niquille as a Creative Technologist. In the process of creating Beauty and The Beep, the chair was trained using reinforcement learning alogrthims in the Unity game engine. The training process took inspiration from Boston Dynamic's approach in the training of their SpotMini, as well as tradiontional <a href="https://www.youtube.com/watch?v=vppFvq2quQ0">DeepMimic</a> environments for Reinforcement Learning research. We chose to use Unity for this project, as it allowed us to work with the <a href="https://github.com/Unity-Technologies/ml-agents">ML-Agents Package</a> - an experimental Reinforcement Learning framework, which wraps complex reinforcement learning algorithms/methods into components which are more acessible for developers. Even though this package has been forgotten by Unity, for the most part, working with a user-friendly game engine was key in creating simuated environments for the 🪑 to explore. </p>
 		</div>
-		<div id="project-related">
-			<div id="pr-header">References:</div>
-			<ul id="pr-list">
 		
-				<li><a href='https://www.caileanfinn.ie'>some-title</a></li>
 		
-			</ul>
+		<div id="project-showcase">
+			<div id="pr-header">Exhibited:</div>
+			<div id="showcase-cont">
+			
+			<div class="showcase">
+				<p>(2024)</p>
+				<p>Exposed Torino Foto Festival,</p>
+				<p>Turin</p>
+			</div>
+			
+			<div class="showcase">
+				<p>(2025)</p>
+				<p>Another Showcase Festival,</p>
+				<p>Rome</p>
+			</div>
+			
+			</div>
+		</div>
+		
+
+		
+		<div id="project-credits">
+			<div id="pr-header">Credits:</div>
+			<div id="credit-cont">
+			
+				<div class="credit">
+				<p>&#8594;</p> 
+				<p>Cailean, </p> 
+				<p>CT</p>
+				</div>
+			
+				<div class="credit">
+				<p>&#8594;</p> 
+				<p>Leon, </p> 
+				<p>Camera</p>
+				</div>
+			
+			</div>
+		</div>
+		
+
+		
+
 		<div id="sleeping-mario">
 			<img src="/images/website/mario-sleep-up.gif">
 		</div>
 	</div>
-	</div>
 </div>
 
   </div>

public/articles/data.html

@@ -41,18 +41,55 @@
 <p>The website presents the interview in both linear and non-linear formats. By utilising machine learning and natural language processing, text segments extracted from the interview were ranked against key topics; creating a higher-dimensional understanding, and projection of the interview - which is commonly referred to as the latent space. After, a t-SNE algorithm was applied to high-dimensional space, flattening it into two dimensions, represented in the interactive map; allowing the user to navigate the interview from the perspective of the machine.</p>
 <p>Designed and developed using p5js, by Cailean Finn.</p>
 		</div>
-		<div id="project-related">
-			<div id="pr-header">References:</div>
-			<ul id="pr-list">
 		
-				<li><a href='https://www.caileanfinn.ie'>some-title</a></li>
 		
-			</ul>
+		<div id="project-showcase">
+			<div id="pr-header">Exhibited:</div>
+			<div id="showcase-cont">
+			
+			<div class="showcase">
+				<p>(2024)</p>
+				<p>Exposed Torino Foto Festival,</p>
+				<p>Turin</p>
+			</div>
+			
+			<div class="showcase">
+				<p>(2025)</p>
+				<p>Another Showcase Festival,</p>
+				<p>Rome</p>
+			</div>
+			
+			</div>
+		</div>
+		
+
+		
+		<div id="project-credits">
+			<div id="pr-header">Credits:</div>
+			<div id="credit-cont">
+			
+				<div class="credit">
+				<p>&#8594;</p> 
+				<p>Cailean, </p> 
+				<p>CT</p>
+				</div>
+			
+				<div class="credit">
+				<p>&#8594;</p> 
+				<p>Leon, </p> 
+				<p>Camera</p>
+				</div>
+			
+			</div>
+		</div>
+		
+
+		
+
 		<div id="sleeping-mario">
 			<img src="/images/website/mario-sleep-up.gif">
 		</div>
 	</div>
-	</div>
 </div>
 
   </div>

public/articles/demo.html

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>cailean.finn</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Gothic+A1&display=swap" rel="stylesheet"> 
+  <link rel="stylesheet" href="/css/styles.css">
+</head>
+<body>
+  <div id="main-container">
+	<div id="nav-container">
+		<div class="nav-emoji">
+			<a href="/"><div class="emoji-flip">​(ง•_•)ง</div></a>
+		</div>
+		<div class="nav-about"><a href="/about">​cailean.finn</a></div>
+		<div class="nav-emoji"><a href="/list">list</a></div>
+		<div class="nav-emoji"><a href='/gallery'>gallery</a></div>
+	</div>
+	
+<div id="container">
+	<div id="project-container">
+		<div id="project-header">DEMO, 2024</div>
+		<div id="project-tags">
+			
+			<div class="project-tag">✳ AI</div>
+			
+			<div class="project-tag">✳ NLP</div>
+			
+			<div class="project-tag">✳ Simulation</div>
+			
+		</div>
+		<div id="project-cover">
+			<img src="/images/demo.jpg">
+		</div>
+		<div id="project-body">
+			<p>(O)MACHINE is a real-time generative performance that employs contemporary machine learning algorithms to explore how we humanise technologies.The architecture of this system was designed to emulate our stream of consciousness, where the machine is trapped in this perpetual cycle through processes of reflection and feedback. As questions begin to arise around the sentience or ‘intelligence’ of these thinking machines, it has become even more important to explore our relationship with machines, and how it continues to evolve. By engaging with its output, it positions artificial intelligence as both a subject and tool. Through this approach, we may begin to expand the dynamics of this connection through new methods of collaboration. From this interaction, we can continue to learn more about how these systems function, how they think, if they even think at all, or can it help us think?</p>
+<p>Sound design by <a href="https://eoin-osullivan.bandcamp.com/">Eoin O'Sullivan</a></p>
+<ul>
+<li>One</li>
+<li>Two</li>
+<li>Three</li>
+</ul>
+<p><strong>HELLO</strong></p>
+<h2>WORLD</h2>
+<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/952371869?h=fabc477b89&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div>
+<script src="https://player.vimeo.com/api/player.js"></script>
+
+<div style="padding:56.25% 0 0 0;position:relative; margin-top:20px;"><iframe style="position:absolute;top:0;left:0;width:100%;height:100%;" src="https://www.youtube.com/embed/g-10hW3Sly0?si=zUqzDQXnSPHBAGSq&amp;controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
+
+<p><img alt="alt text" src="/images/demo.jpg" title="Title" /></p>
+<p><em>WHAT</em></p>
+		</div>
+		
+		
+		<div id="project-showcase">
+			<div id="pr-header">Exhibited:</div>
+			<div id="showcase-cont">
+			
+			<div class="showcase">
+				<p>(2023)</p>
+				<p>Speak It Now Eat It, Revision Performing Arts Festival,</p>
+				<p>Belfast</p>
+			</div>
+			
+			</div>
+		</div>
+		
+
+		
+		<div id="project-credits">
+			<div id="pr-header">Credits:</div>
+			<div id="credit-cont">
+			
+				<div class="credit">
+				<p>&#8594;</p> 
+				<p>Eoin O'Sullivan, </p> 
+				<p>Sound design</p>
+				</div>
+			
+			</div>
+		</div>
+		
+
+		
+
+		<div id="sleeping-mario">
+			<img src="/images/website/mario-sleep-up.gif">
+		</div>
+	</div>
+</div>
+
+  </div>
+</body>
+</html>

public/articles/dwelling.html

@@ -40,18 +40,49 @@
 			<p>Dwelling is a dynamic live performance and theatre installation created by <a href="https://peterpower.ie/">Peter Power</a> and <a href="https://bold.ie/">Leon Butler</a>. The performance explores the periphery of cultural isolation, and the dispersal of self across the multimedial, delving into themes of digital mortality, transformation, and rebirth. The performance takes place in the fragments of a home with dance performances by Robyn Byrne and Rosie Stebbing. The characters moves between the digital and real space through motion capture data in conjunction with live tracking. Over the duration of the performance, Rosie starts to form a connection between her physical self, and the digital divide.</p>
 <p>The virtual world was created entirely within Unity. Data was captured from Robyn's movement through various methods, such as the Perception Neuron mo-cap suit, as well as emerging monocular 3d human pose detection models. Unity's particle system was used extensively in the project, converting point cloud and positional data into emergent movement, and ethereal landscapes.</p>
 		</div>
-		<div id="project-related">
-			<div id="pr-header">References:</div>
-			<ul id="pr-list">
 		
-				<li><a href='https://www.caileanfinn.ie'>some-title</a></li>
 		
-			</ul>
+		<div id="project-showcase">
+			<div id="pr-header">Exhibited:</div>
+			<div id="showcase-cont">
+			
+			<div class="showcase">
+				<p>(2023)</p>
+				<p>Beta Festival, Project Arts Center,</p>
+				<p>Dublin</p>
+			</div>
+			
+			</div>
+		</div>
+		
+
+		
+		<div id="project-credits">
+			<div id="pr-header">Credits:</div>
+			<div id="credit-cont">
+			
+				<div class="credit">
+				<p>&#8594;</p> 
+				<p>Cailean, </p> 
+				<p>CT</p>
+				</div>
+			
+				<div class="credit">
+				<p>&#8594;</p> 
+				<p>Leon, </p> 
+				<p>Camera</p>
+				</div>
+			
+			</div>
+		</div>
+		
+
+		
+
 		<div id="sleeping-mario">
 			<img src="/images/website/mario-sleep-up.gif">
 		</div>
 	</div>
-	</div>
 </div>
 
   </div>

public/articles/electronic-image.html

@@ -43,18 +43,49 @@
 <p>The three studies have been shaped by the experimental processes, techniques, and philosophies of the pioneering artists working with video. The artists in question, specifically the works of Steina and Woody Vasulka, who were driven by their yearning to understand the electronic signal and to formulate an electronic lexicon. The work, in its entirety, is an investigation of the unique set of “codes” embedded within the language of the video signal, consequently, recognising the electronic image as an object of time, energy, and it's programmable building element – the waveform.</p>
 <p><a href="./assets/pdfs/thesis.pdf">📎thesis.pdf</a> </p>
 		</div>
-		<div id="project-related">
-			<div id="pr-header">References:</div>
-			<ul id="pr-list">
 		
-				<li><a href='https://www.caileanfinn.ie'>some-title</a></li>
 		
-			</ul>
+		<div id="project-showcase">
+			<div id="pr-header">Exhibited:</div>
+			<div id="showcase-cont">
+			
+			<div class="showcase">
+				<p>(2022)</p>
+				<p>The Limerick Show, Ormston House,</p>
+				<p>Limerick</p>
+			</div>
+			
+			</div>
+		</div>
+		
+
+		
+		<div id="project-credits">
+			<div id="pr-header">Credits:</div>
+			<div id="credit-cont">
+			
+				<div class="credit">
+				<p>&#8594;</p> 
+				<p>Cailean, </p> 
+				<p>CT</p>
+				</div>
+			
+				<div class="credit">
+				<p>&#8594;</p> 
+				<p>Leon, </p> 
+				<p>Camera</p>
+				</div>
+			
+			</div>
+		</div>
+		
+
+		
+
 		<div id="sleeping-mario">
 			<img src="/images/website/mario-sleep-up.gif">
 		</div>
 	</div>
-	</div>
 </div>
 
   </div>

public/articles/latent-mirror.html

@@ -43,18 +43,49 @@
 <p>The visual element of the performance was real-time and audio reactive, which captured the facial structure of the performing sound artist. By utilising Machine Learning Models, the captured face was manipulated and distorted further to animate another portrait, in an attempt to deconstruct and isolate key compositional elements of the 'subject'. Through this work, we hoped to reflect on our digital identity, and highlight the disconnection between our physical and virtual presence.</p>
 <p>Created in TouchDesigner.</p>
 		</div>
-		<div id="project-related">
-			<div id="pr-header">References:</div>
-			<ul id="pr-list">
 		
-				<li><a href='https://www.caileanfinn.ie'>some-title</a></li>
 		
-			</ul>
+		<div id="project-showcase">
+			<div id="pr-header">Exhibited:</div>
+			<div id="showcase-cont">
+			
+			<div class="showcase">
+				<p>(2022)</p>
+				<p>Sound & Portraits, Imagine Arts Fesitval, WGOA,</p>
+				<p>Wateford</p>
+			</div>
+			
+			</div>
+		</div>
+		
+
+		
+		<div id="project-credits">
+			<div id="pr-header">Credits:</div>
+			<div id="credit-cont">
+			
+				<div class="credit">
+				<p>&#8594;</p> 
+				<p>Cailean, </p> 
+				<p>CT</p>
+				</div>
+			
+				<div class="credit">
+				<p>&#8594;</p> 
+				<p>Leon, </p> 
+				<p>Camera</p>
+				</div>
+			
+			</div>
+		</div>
+		
+
+		
+
 		<div id="sleeping-mario">
 			<img src="/images/website/mario-sleep-up.gif">
 		</div>
 	</div>
-	</div>
 </div>
 
   </div>

public/articles/undefined.html

@@ -40,18 +40,49 @@
 <p>The online version of Undefined Panorama allows people to move between micro and macro perspectives of global, national and local events. In moving between these scales, Yang Ah Ham aims to open up questions about our relations to these events, and to generate new meanings by altering the scale of observation.</p>
 <p>This website was commissioned by 2022 Seo-Seoul Museum of Art Pre-opening Public Program Exceptional Times, Uncertain Moves, and created with support from the Arts Council Korea.</p>
 		</div>
-		<div id="project-related">
-			<div id="pr-header">References:</div>
-			<ul id="pr-list">
 		
-				<li><a href='https://www.caileanfinn.ie'>some-title</a></li>
 		
-			</ul>
+		<div id="project-showcase">
+			<div id="pr-header">Exhibited:</div>
+			<div id="showcase-cont">
+			
+			<div class="showcase">
+				<p>(2022)</p>
+				<p>Exceptional Times, Uncertain Moves, Seo-Seoul Museum of Art,</p>
+				<p>Seoul</p>
+			</div>
+			
+			</div>
+		</div>
+		
+
+		
+		<div id="project-credits">
+			<div id="pr-header">Credits:</div>
+			<div id="credit-cont">
+			
+				<div class="credit">
+				<p>&#8594;</p> 
+				<p>Cailean, </p> 
+				<p>CT</p>
+				</div>
+			
+				<div class="credit">
+				<p>&#8594;</p> 
+				<p>Leon, </p> 
+				<p>Camera</p>
+				</div>
+			
+			</div>
+		</div>
+		
+
+		
+
 		<div id="sleeping-mario">
 			<img src="/images/website/mario-sleep-up.gif">
 		</div>
 	</div>
-	</div>
 </div>
 
   </div>

public/css/styles.css

@@ -324,6 +324,10 @@ body {
 	cursor: pointer;
   }
 
+  #project-body p {
+	font-size: 20px;
+  }
+
   #project-body a{
 	color: rgb(73, 146, 248);
 	text-decoration: none;
@@ -332,6 +336,11 @@ body {
 	cursor: pointer;
   }
 
+  p img {
+	width: 100%;
+	height: auto;
+  }
+
   #project-cover img{
 	/* border: 2px solid rgb(255 149 149); */
 	width: 100%;
@@ -339,8 +348,7 @@ body {
   }
 
   #pr-header {
-	font-family: 'Redacted Reg';
+	font-family: 'Gothic A1', sans-serif;
-	letter-spacing: 2px;
 	font-size: 25px;
 	color: rgb(245, 102, 102);
 	height: fit-content;
@@ -361,7 +369,7 @@ body {
 	color: rgb(73, 146, 248);
 	text-decoration: none;
 	font-family: 'IBM Plex Mono', monospace;
-	font-size: 17.5px;
+	font-size: 20px;
 	padding-left: 2.5px;
 	padding-right: 2.5px;
 	font-style: italic;
@@ -430,6 +438,44 @@ body {
 	height: auto;
   }
 
+  #credit-cont {
+	display: flex;
+	flex-direction: column;
+	gap:5px;
+  }
+
+  #showcase-cont {
+	display: flex;
+	flex-direction: column;
+	gap:5px;
+  }
+
+  .showcase {
+	display: flex;
+	flex-direction: row;
+	gap: 5px;
+	height: fit-content;
+	flex-wrap: wrap;
+  }
+
+  .showcase p {
+	margin: 0;
+	padding: 0;
+  }
+
+  .credit {
+	display: flex;
+	flex-direction: row;
+	gap: 5px;
+	height: fit-content;
+	flex-wrap: wrap;
+  }
+
+  .credit p {
+	padding: 0;
+	margin: 0;
+  }
+
   
 
   
@@ -533,8 +579,6 @@ body {
 	}
 
 	#pr-header {
-		font-family: 'Redacted Reg';
-		letter-spacing: 2px;
 		font-size: 20px;
 		margin-bottom: 25px;
 	}
@@ -542,6 +586,11 @@ body {
 	#pr-list a {
 		font-size: 15px;
 	}
+
+	#project-body p {
+		font-size: 15px;
+	}
+	
 }
 
 @media only screen and (max-width: 480px) {
@@ -560,4 +609,6 @@ body {
 	.gallery-image{
 		max-width: 90%;
 	}
+
+	
 }

public/gallery.html

@@ -31,6 +31,8 @@
 		
 			<img class="gallery-image" src="/images/data.png">
 		
+			<img class="gallery-image" src="/images/demo.jpg">
+		
 			<img class="gallery-image" src="/images/dwelling.png">
 		
 			<img class="gallery-image" src="/images/electronic-image.png">

public/js/main.js

@@ -13,6 +13,7 @@ class PickHelper {
 	  this.pickedObject = null;
 	  this.lastObjectPicked = null;
 	  this.sameObjectPicked = false;
+	  this.initalPick = false;
 	}
 
 	pick(normalizedPosition, scene, camera, time) {
@@ -137,10 +138,14 @@ const object_list = []
 const object_count = 20;
 const fontLoader = new FontLoader();
 let group = new THREE.Group();
+let pastArticle;
 
 function init() {
 
-  // Texture Loader 
+  // Set to a value outside the screen range
+  pickPosition.x = -100000; 
+  pickPosition.y = -100000;
+  
   const loader = new THREE.TextureLoader();
   texture = loader.load('/images/website/checker.png');
 
@@ -308,7 +313,8 @@ window.addEventListener('resize', () => {
 	const pickedArticle = object_list.find(article => article.mesh === pickHelper.pickedObject);
         if (pickedArticle) {
 			document.body.style.cursor = 'pointer';
-			if (!isHovering)
+			if (pickedArticle.name != pastArticle)
+				console.log('updated!')
 				UpdateText(pickedArticle.name);
         }else{
 			document.body.style.cursor = 'default';
@@ -319,7 +325,7 @@ window.addEventListener('resize', () => {
 
   function UpdateText(text) {
     MeasureText(text);
-	isHovering = true
+	pastArticle = text
 }
 
 function ClearTextGeoList() {
@@ -427,35 +433,5 @@ function createTextGeometry(text, size) {
   window.addEventListener('mouseleave', clearPickPosition);
   window.addEventListener('click', objectClicked)
 
-  // Add touch event listeners
-	window.addEventListener('touchstart', onTouchStart, {passive: false});
-	window.addEventListener('touchmove', onTouchMove, {passive: false});
-	window.addEventListener('touchend', onTouchEnd, {passive: false});
-	window.addEventListener('touchcancel', clearPickPosition);
-
-	let touchStartTime;
-	const touchHoldDuration = 500; // Duration in milliseconds to distinguish between tap and hold
-
-	function onTouchStart(event) {
-		touchStartTime = Date.now();
-		setPickPosition(event.touches[0]);
-	}
-
-	function onTouchMove(event) {
-		setPickPosition(event.touches[0]);
-	}
-
-	function onTouchEnd(event) {
-		const touchDuration = Date.now() - touchStartTime;
-		clearPickPosition();
-		if (touchDuration < touchHoldDuration) {
-			// It's a tap
-			objectClicked(event);
-		} else {
-			// It's a hold
-			// Do nothing extra, as hover effect should already be handled by setPickPosition
-		}
-	}
-
 // Initialize the application
 init();

public/json/articles.json

@@ -19,6 +19,11 @@
         "filename": "/articles/data.html",
         "image": "data.png"
     },
+    {
+        "name": "DEMO",
+        "filename": "/articles/demo.html",
+        "image": "demo.jpg"
+    },
     {
         "name": "Dwelling",
         "filename": "/articles/dwelling.html",

public/list.html

@@ -144,6 +144,25 @@
 					<h2>The BIG D.A.T.A Interview</h2>
 				</div>
 			
+				<div class="article" data-tags="AI NLP Simulation">
+					
+					<a href= 'articles/demo'><div class="article-image">
+						<img src="/images/demo.jpg">
+					</div></a>
+					
+					<div id="project-tags">
+						
+						<div class="project-tag">✳ AI</div>
+						
+						<div class="project-tag">✳ NLP</div>
+						
+						<div class="project-tag">✳ Simulation</div>
+						
+					</div>
+
+					<h2>DEMO</h2>
+				</div>
+			
 				<div class="article" data-tags="Unity Performance VFX">
 					
 					<a href= 'articles/dwelling'><div class="article-image">

templates/article.html

@@ -15,6 +15,38 @@
 		<div id="project-body">
 			{{ content }}
 		</div>
+		
+		{% if showcase %}
+		<div id="project-showcase">
+			<div id="pr-header">Exhibited:</div>
+			<div id="showcase-cont">
+			{% for show in showcase %}
+			<div class="showcase">
+				<p>({{ show['year'] }})</p>
+				<p>{{ show['name'] }},</p>
+				<p>{{ show['location'] }}</p>
+			</div>
+			{% endfor %}
+			</div>
+		</div>
+		{% endif %}
+
+		{% if credits %}
+		<div id="project-credits">
+			<div id="pr-header">Credits:</div>
+			<div id="credit-cont">
+			{% for credit in credits %}
+				<div class="credit">
+				<p>&#8594;</p> 
+				<p>{{ credit }}, </p> 
+				<p>{{ credits[credit]}}</p>
+				</div>
+			{% endfor %}
+			</div>
+		</div>
+		{% endif %}
+
+		{% if references %}
 		<div id="project-related">
 			<div id="pr-header">References:</div>
 			<ul id="pr-list">
@@ -22,10 +54,12 @@
 				<li><a href='{{ reference['link'] }}'>{{ reference['title'] }}</a></li>
 				{% endfor %}
 			</ul>
+		</div>
+		{% endif %}
+
 		<div id="sleeping-mario">
 			<img src="/images/website/mario-sleep-up.gif">
 		</div>
 	</div>
-	</div>
 </div>
 {% endblock %}