git.lucas.co / website
source for lucas.co

commitc844f97674387140d678244bed6bdec40dc8d1d1
parent582b831d2b
authorlsgalante <lsgalante12@gmail.com>
date2025-05-14 21:22
update layout and add resources

 index.html                            |  64 ++++++++-------
 projects/box.html                     |  22 ++++--
 projects/branch.html                  |  30 ++++---
 projects/charcoal-drawings.html       |  25 +++---
 projects/chariot.html                 |  23 ++++--
 projects/drawing-1.html               |  19 +++--
 projects/early-computer-modeling.html |  26 -------
 projects/house-1.html                 |  26 +++++--
 projects/house-2.html                 |  22 ++++--
 projects/simulations.html             |  54 +++++++++----
 projects/spoon.html                   |  19 +++--
 projects/vise.html                    |  22 ++++--
 styles.css                            | 142 +++++++++++-----------------------
 13 files changed, 260 insertions(+), 234 deletions(-)

diff --git a/index.html b/index.html
index e9c7f4b..287111b 100644
--- a/index.html
+++ b/index.html
@@ -5,42 +5,50 @@
   <head>
     <meta charset="UTF-8">
     <link rel="stylesheet" href="styles.css">
-    <!-- Something to do with iphones -->
+    <!-- iphone stuff -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- Browser tab label -->
     <title>lucas.co/</title>
-    <link rel="preload" href="TerminusTTF.woff2" as="font" type="font/woff2" crossorigin>
+    <script src="main.js" defer></script>
   </head>
 
-  
   <body>
-    <div class="background-rectangle"></div>
-
     
     <div class="content-container">
-      <!-- Header -->
-      <h1>Lucas Galante Website</h1>
-
-      <!-- Contact link -->
-      <div>Contact: <a href="mailto:mail@lucas.co">mail@lucas.co</a> </div>
-
-      <!-- Code link -->
-      <br> <div>Code: <a href="https://github.com/lsgalante?tab=repositories">https://github.com/lsgalante/</a></div>
-
-      <!-- Projects section -->
-      <br> <br> <div>Projects</div>
-
-      <br> <div> <a href="./projects/simulations.html">Simulations</a> </div>
-      <br> <div> <a href="./projects/branch.html">Branch</a> </div>
-      <br> <div> <a href="./projects/spoon.html">Spoon</a> </div>
-      <br> <div> <a href="./projects/chariot.html">Chariot</a> </div>
-      <br> <div> <a href="./projects/vise.html">Vise</a> </div>
-      <br> <div> <a href="./projects/box.html">Box</a> </div>
-      <br> <div> <a href="./projects/drawing-1.html">Drawing 1</a> </div>
-      <br> <div> <a href="./projects/house-1.html">House 1</a> </div>
-      <br> <div> <a href="./projects/house-2.html">House 2</a> </div>
-      <br> <div> <a href="./projects/early-computer-modeling.html">Early computer modeling</a> </div>
-      <br> <div> <a href="./projects/charcoal-drawings.html">Charcoal Drawings</a> </div>
+
+      <!-- header -->
+      <div>Lucas Galante</div>
+
+      <br>
+      <br>
+
+      <!-- about -->
+      <div class="flex-container">
+        <div>Contact</div>
+        <div><a href="mailto:mail@lucas.co">mail@lucas.co</a></div>
+        <th>Code</th>
+        <div><a href="https://github.com/lsgalante?tab=repositories">https://github.com/lsgalante/</a></div>
+      </div>
+      
+      <br>
+      <br>
+
+      <!-- body -->
+      <div class="flex-container">
+        <div>Projects</div>
+        <a href="./projects/simulations.html">Simulations</a>
+        <a href="./projects/branch.html">Branch</a>
+        <a href="./projects/spoon.html">Spoon</a>
+        <a href="./projects/chariot.html">Chariot</a>
+        <a href="./projects/vise.html">Vise</a>
+        <a href="./projects/box.html">Box</a>
+        <a href="./projects/drawing-1.html">Drawing 1</a>
+        <a href="./projects/house-1.html">House 1</a>
+        <a href="./projects/house-2.html">House 2</a>
+        <a href="./projects/computer-modeling.html">Early computer modeling</a>
+        <a href="./projects/charcoal-drawings.html">Charcoal Drawings</a>
+      </div>
+
     </div>
 
   </body>
diff --git a/projects/box.html b/projects/box.html
index d1bc1d0..c61cbca 100644
--- a/projects/box.html
+++ b/projects/box.html
@@ -5,20 +5,26 @@
   <head>
     <meta charset="UTF-8">
     <link rel="stylesheet" href="../styles.css">
-    <!-- iphone stuff -->
+    <script src="../main.js" defer></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <!-- browser tab label -->
-    <title>lucas.co/box/</title>
+    <title>lucas.co/box.html</title>
   </head>
 
-  <body>
-    <div class="background-rectangle"></div>
+  <body>  
     <div class="content-container">
 
-      <h1> <a href="../index.html">Up</a> </h1>
-      <h1>Box</h1>
+      <div><a href="../index.html"><−−</a></div>
+      <br>
+      <div>Box</div>
+      <br>
 
-      <hr>
+      <div class="image-container">
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/box_render_0.webp">
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/box_render_1.webp">
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/box_render_2.webp">
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/box_render_3.webp">
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/box_render_4.webp">
+      </div>
 
     </div>
   </body>
diff --git a/projects/branch.html b/projects/branch.html
index cade406..c8671c1 100644
--- a/projects/branch.html
+++ b/projects/branch.html
@@ -5,21 +5,33 @@
   <head>
     <meta charset="UTF-8">
     <link rel="stylesheet" href="../styles.css">
-    <!-- iphone stuff  -->
+    <script src="../main.js" defer></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <!-- browser tab label -->
-    <title>lucas.co/branch/</title>
+    <title>lucas.co/branch.html</title>
   </head>
   
   <body>
-    <div class="background-rectangle"></div>
     <div class="content-container">
-      
-      <h1> <a href="../index.html">Up</a> </h1>
-      <h1>Branch</h1>
 
-      <hr>
-      
+      <!-- go back home -->
+      <div><a href="../index.html"><−−</a></div>
+      <br>
+      <div>Branch</div>
+      <br>
+
+      <div class="image-container">
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/branch_style_a_0.webp">
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/branch_style_a_1.webp">
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/branch_style_a_2.webp">
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/branch_style_b_0.webp">
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/branch_style_b_1.webp">
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/branch_style_b_2.webp">
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/branch_style_b_3.webp">
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/branch_style_b_4.webp">
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/branch_style_b_5.webp">
+        <div class="footer"></div>
+      </div>
+     
     </div>
   </body>
   
diff --git a/projects/charcoal-drawings.html b/projects/charcoal-drawings.html
index 1b35ddf..4e3278f 100644
--- a/projects/charcoal-drawings.html
+++ b/projects/charcoal-drawings.html
@@ -5,21 +5,28 @@
   <head>
     <meta charset="UTF-8">
     <link rel="stylesheet" href="../styles.css">
-    <!-- iphone stuff -->
+    <script src="../main.js" defer></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <!-- browser tab label -->
-    <title>lucas.co/charcoal-drawings/</title>
+    <title>lucas.co/charcoal-drawings.html</title>
   </head>
 
   <body>
-    <div class="background-rectangle"></div>
     <div class="content-container">
+      
+      <div><a href="../index.html"><−−</a></div>
+      <br>
+      <div>Charcoal Drawings</div>
+      <br>
 
-      <h1> <a href="../index.html">Up</a> </h1>
-      <h1>Charcoal Drawings</h1>
-
-      <hr>
-
+      <div class="image-container">
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/charcoal_drawing_3.webp"></img>
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/charcoal_drawing_2.webp"></img>
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/charcoal_drawing_4.webp"></img>
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/charcoal_drawing_5.webp"></img>
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/charcoal_drawing_6.webp"></img>
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/charcoal_drawing_1.webp"></img>
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/charcoal_drawing_0.webp"></img>
+      </div>
     </div>
   </body>
 
diff --git a/projects/chariot.html b/projects/chariot.html
index af1b53a..8eed863 100644
--- a/projects/chariot.html
+++ b/projects/chariot.html
@@ -5,20 +5,27 @@
   <head>
     <meta charset="UTF-8">
     <link rel="stylesheet" href="../styles.css">
-    <!-- iphone stuff -->
+    <script src="../main.js" defer></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <!-- browser tab label -->
-    <title>lucas.co/chariot/</title>
+    <title>lucas.co/chariot.html</title>
   </head>
 
   <body>
-    <div class="background-rectangle"></div>
     <div class="content-container">
 
-      <h1> <a href="../index.html">Up</a> </h1>
-      <h1>Chariot</h1>
-
-      <hr>
+      <div><a href="../index.html"><−−</a></div>
+      <br>
+      <div>Chariot</div>
+      <br>
+      
+      <div class="image-container">
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/chariot_shoot_0.webp"></img>
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/chariot_shoot_1.webp"></img>
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/chariot_shoot_3.webp"></img>
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/chariot_shoot_4.webp"></img>
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/chariot_shoot_8.webp"></img>
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/chariot_shoot_10.webp"></img>
+      </div>
 
     </div>
   </body>
diff --git a/projects/drawing-1.html b/projects/drawing-1.html
index bc8c0e3..15ea3f0 100644
--- a/projects/drawing-1.html
+++ b/projects/drawing-1.html
@@ -5,20 +5,25 @@
   <head>
     <meta charset="UTF-8">
     <link rel="stylesheet" href="../styles.css">
-    <!-- iphone stuff -->
+    <script src="../main.js" defer></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <!-- browser tab label -->
-    <title>lucas.co/drawing-1/</title>
+    <title>lucas.co/drawing-1.html</title>
   </head>
 
   <body>
-    <div class="background-rectangle"></div>
     <div class="content-container">
 
-      <h1> <a href="../index.html">Up</a> </h1>
-      <h1>Drawing 1</h1>
+      <div><a href="../index.html"><−−</a></div>
+      <br>
+      <div>Drawing 1</div>
+      <br>
 
-      <hr>
+      <div class="image-container">
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/drawing_1_12.webp"></img>
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/drawing_1_2.webp"></img>
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/drawing_1_3.webp"></img>
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/drawing_1_4.webp"></img>
+      </div>
 
     </div>
   </body>
diff --git a/projects/early-computer-modeling.html b/projects/early-computer-modeling.html
deleted file mode 100644
index 992e236..0000000
--- a/projects/early-computer-modeling.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-
-<html>
-
-  <head>
-    <meta charset="UTF-8">
-    <link rel="stylesheet" href="../styles.css">
-    <!-- iphone stuff -->
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <!-- browser tab label -->
-    <title>lucas.co/early-computer-modeling/</title>
-  </head>
-
-  <body>
-    <div class="background-rectangle"></div>
-    <div class="content-container">
-
-      <h1> <a href="../index.html">Up</a> </h1>
-      <h1>Early Computer Modeling</h1>
-
-      <hr>
-
-    </div>
-  </body>
-
-</html>
diff --git a/projects/house-1.html b/projects/house-1.html
index f836e8c..3249845 100644
--- a/projects/house-1.html
+++ b/projects/house-1.html
@@ -5,21 +5,31 @@
   <head>
     <meta charset="UTF-8">
     <link rel="stylesheet" href="../styles.css">
-    <!-- iphone stuff -->
+    <script src="../main.js" defer></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <!-- browser tab label -->
-    <title>lucas.co/house-1/</title>
+    <title>lucas.co/house-1.html</title>
   </head>
 
   <body>
-    <div class="background-rectangle"></div>
     <div class="content-container">
 
-      <h1> <a href="../index.html">Up</a> </h1>
-      <h1>House 1</h1>
-
-      <hr>
+      <div><a href="../index.html"><−−</a></div>
+      <br>
+      <div>House 1</div>
+      <br>
 
+      <div class="image-container">
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/house_1_render_0.webp"></img>
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/house_1_render_1.webp"></img>
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/house_1_render_7.webp"></img>
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/house_1_render_4.webp"></img>
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/house_1_render_5.webp"></img>
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/house_1_render_2.webp"></img>
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/house_1_render_3.webp"></img>
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/house_1_model_5.webp"></img>
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/house_1_model_3.webp"></img>
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/house_1_model_4.webp"></img>
+      </div>
     </div>
   </body>
 
diff --git a/projects/house-2.html b/projects/house-2.html
index 9723ce3..edb90b5 100644
--- a/projects/house-2.html
+++ b/projects/house-2.html
@@ -5,20 +5,28 @@
   <head>
     <meta charset="UTF-8">
     <link rel="stylesheet" href="../styles.css">
-    <!-- iphone stuff -->
+    <script src="../main.js" defer></script>
     <meta name="viewport" content="width=device=width, initial-scale=1.0">
-    <!-- browser tab label -->
-    <title>lucas.co/house-2/</title>
+    <title>lucas.co/house-2.html</title>
   </head>
 
   <body>
-    <div class="background-rectangle"></div>
     <div class="content-container">
 
-      <h1> <a href="../index.html">Up</a> </h1>
-      <h1>House 2</h1>
+      <div><a href="../index.html"><−−</a></div>
+      <br>
+      <div>House 2</div>
+      <br>
+      <div> Arbitrary or targeted data run through an algorithm generates an array of interconnected volumes which envelope a partially obscured interior court.</div>
+      <br>
 
-      <hr>
+      <div class="image-container">
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/house_2_render_0.webp"></img>
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/house_2_render_3.webp"></img>
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/house_2_render_1.webp"></img>
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/house_2_render_2.webp"></img>
+        <video controls muted src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/house_2_model_0.webm"></video>
+      </div>
 
     </div>
   </body>
diff --git a/projects/simulations.html b/projects/simulations.html
index 73aa62a..7ef1546 100644
--- a/projects/simulations.html
+++ b/projects/simulations.html
@@ -5,27 +5,55 @@
   <head>
     <meta charset="UTF-8">
     <link rel="stylesheet" href="../styles.css">
-    <!-- Something to do with iphones -->
+    <script src="../main.js" defer></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <!-- Browser tab label -->
-    <title>lucas.co/simulations</title>
+    <title>lucas.co/simulations.html</title>
   </head>
 
-
   <body>
-    <div class="background-rectangle"></div>
     <div class="content-container">
       
-      <h1> <a href="../index.html">Up</a> </h1>
-      <h1>Simulations</h1>
-
-      <hr>
+      <div><a href="../index.html">&lt;−−</a></div>
+      <br>
+      <div>Simulations</div>
+      <br>
 
       <!-- Video -->
-      <div style="max-width:500px;">
-        <video style="width:100%; height:auto;">
-          <source src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/1.mp4" type="video/mp4">
-        </video>
+      <div class="image-container">
+        <video controls muted src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/sim_17.webm" type="video/webm"></video>
+        <video controls muted src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/sim_8.webm" type="video/webm"></video>
+        <video controls muted src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/sim_28.webm" type="video/webm"></video>
+        <video controls muted src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/sim_35.webm" type="video/webm"></video>
+        <video controls muted src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/sim_1.webm" type="video/webm"></video>
+        <video controls muted src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/sim_3.webm" type="video/webm"></video>
+        <video controls muted src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/sim_4.webm" type="video/webm"></video>
+        <video controls muted src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/sim_5.webm" type="video/webm"></video>
+        <video controls muted src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/sim_6.webm" type="video/webm"></video>
+        <video controls muted src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/sim_7.webm" type="video/webm"></video>
+        <video controls muted src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/sim_9.webm" type="video/webm"></video>
+        <video controls muted src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/sim_11.webm" type="video/webm"></video>
+        <video controls muted src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/sim_12.webm" type="video/webm"></video>
+        <video controls muted src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/sim_14.webm" type="video/webm"></video>
+        <video controls muted src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/sim_15.webm" type="video/webm"></video>
+        <video controls muted src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/sim_16.webm" type="video/webm"></video>
+        <video controls muted src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/sim_18.webm" type="video/webm"></video>
+        <video controls muted src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/sim_19.webm" type="video/webm"></video>
+        <video controls muted src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/sim_20.webm" type="video/webm"></video>
+        <video controls muted src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/sim_21.webm" type="video/webm"></video>
+        <video controls muted src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/sim_22.webm" type="video/webm"></video>
+        <video controls muted src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/sim_23.webm" type="video/webm"></video>
+        <video controls muted src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/sim_24.webm" type="video/webm"></video>
+        <video controls muted src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/sim_25.webm" type="video/webm"></video>
+        <video controls muted src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/sim_26.webm" type="video/webm"></video>
+        <video controls muted src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/sim_27.webm" type="video/webm"></video>
+        <video controls muted src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/sim_29.webm" type="video/webm"></video>
+        <video controls muted src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/sim_30.webm" type="video/webm"></video>
+        <video controls muted src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/sim_31.webm" type="video/webm"></video>
+        <video controls muted src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/sim_32.webm" type="video/webm"></video>
+        <video controls muted src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/sim_33.webm" type="video/webm"></video>
+        <video controls muted src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/sim_34.webm" type="video/webm"></video>
+        <video controls muted src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/sim_37.webm" type="video/webm"></video>
+        <video controls muted src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/sim_38.webm" type="video/webm"></video>
       </div>
       
     </div
diff --git a/projects/spoon.html b/projects/spoon.html
index b72f63d..88a3b01 100644
--- a/projects/spoon.html
+++ b/projects/spoon.html
@@ -5,20 +5,25 @@
   <head>
     <meta charset="UTF-8">
     <link rel="stylesheet" href="../styles.css">
-    <!-- iphone stuff -->
+    <script src="../main.js" defer></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <!-- browser tab label -->
-    <title>lucas.co/spoon/</title>
+    <title>lucas.co/spoon.html</title>
   </head>
 
   <body>
-    <div class="background-rectangle"></div>
     <div class="content-container">
 
-      <h1> <a href="../index.html">Up</a> </h1>
-      <h1>Spoon</h1>
+      <div><a href="../index.html"><−−</a></div>
+      <br>
+      <div>Spoon</div>
+      <br>
 
-      <hr>
+      <div class="image-container">
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/spoon_medres_0.webp">
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/spoon_medres_1.webp">
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/spoon_medres_2.webp">
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/spoon_medres_3.webp">
+      </div>
 
     </div>
   </body>
diff --git a/projects/vise.html b/projects/vise.html
index 6836ed7..2219a46 100644
--- a/projects/vise.html
+++ b/projects/vise.html
@@ -5,22 +5,28 @@
   <head>
     <meta charset="UTF-8">
     <link rel="stylesheet" href="../styles.css">
-    <!-- iphone stuff -->
+    <script src="../main.js" defer></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <!-- browser tab label -->
-    <title>lucas.co/vise/</title>
+    <title>lucas.co/vise.html</title>
   </head>
 
   <body>
-    <div class="background-rectangle"></div>
     <div class="content-container">
 
-      <h1> <a href="../index.html">Up</a> </h1>
-      <h1>Vise</h1>
+      <div><a href="../index.html"><−−</a></div>
+      <br>
+      <div>Vise</div>
+      <br>
 
-      <hr>
+      <div class="image-container">
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/vise_1.webp"></img>
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/vise_4.webp"></img>
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/vise_2.webp"></img>
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/vise_3.webp"></img>
+        <img src="https://pub-c0a064adda8e4234ab95cc26a264b806.r2.dev/vise_0.webp"></img>
+      </div>
 
     </div>
-  </body>
+  </bodppy>
 
 </html>
diff --git a/styles.css b/styles.css
index 649387d..75a3232 100644
--- a/styles.css
+++ b/styles.css
@@ -1,125 +1,75 @@
-/* Main body styles */
-body {
-    background-color: #000000;
-    color: #ffffff;
-    font-size: 16px; /* base size */
-}
-
-@font-face {
-    font-family: "Terminus";
-    src: url("./font/TerminusTTF.woff2") format("woff2"),
-         url("./font/TerminusTTF.woff") format("woff");
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: "Geist";
-    src: url("./font/Geist-Regular.woff2") format("woff2");
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: "GeistMono";
-    src: url("./font/GeistMono-Regular.woff2") format("woff2");
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: "CourierPrime";
-    src: url("./font/CourierPrime-Rndexegular.woff2") format("woff2");
+:root {
+	/* Add backup font */
+    font-family: "Circe";
     font-weight: normal;
-    font-style: normal;
+    font-size: 1.05em;
 }
 
 @font-face {
-    font-family: "Lekton";
-    src: url("./font/Lekton-Regular.woff2") format("woff2");
-    font-weight: normal;
-    font-style: normal;
+    font-family: "Circe";
+    src: url("./font/CirceSlabA-Light.woff2") format("woff2");
 }
 
-@font-face {
-    font-family: "Inconsolata";
-    src: url("./font/Inconsolata-Regular.woff2") format("woff2");
-    font-weight: normal;
-    font-style: normal;
+a {
+    color: #66b3ff;
+    text-decoration: none;
 }
 
-@font-face {
-    font-family: "DraftingMono";
-    src: url("./font/DraftingMono-Regular.woff2") format("woff2");
-    font-weight: normal;
-    font-style: normal;
+a:hover {
+    color: #99ccff;
+    text-decoration: underline;
 }
 
-@font-face {
-    font-family: "BPmono";
-    src: url("./font/BPmono.woff2") format("woff2");
-    font-weight: normal;
-    font-style: normal;
+body {
+    background-color: #000000;
+    color: #ffffff;
 }
 
-@font-face {
-    font-family: "0xProto";
-    src: url("./font/0xProto-regular.woff2") format("woff2");
-    font-weight: normal;
-    font-style: normal;
+img {
+    border: 1px solid #606060;
+    padding: 0.5em;
+    max-width: 600px;
 }
 
-/* Global font settings */
-:root {
-	/* font-family: monospace; */
-    font-family: "Lekton";
+pre {
+    display: inline;
+    font-family: "Circe";
 }
 
-
-/* Header styling */
-h1 {
-    color: #ffffff;
-    font-size: 1.2em;
-    /* font-weight: 800; */
+video {
+    border: 1px solid #606060;
+    padding: 0.5em;
+    max-width: 600px;
+    height: auto;
 }
 
-/* Link styling */
-a {
-    color: #66b3ff;
-    text-decoration: none;
+.content-container {
+    position: absolute;
+    top: 3.5em;
+    left: 4em;
+    width: calc(100% - 8em);
+    height: 90%;
 }
 
-/* Link hover effect */
-a:hover {
-    color: #99ccff;
-    text-decoration: underline;
+.flex-container {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
 }
 
-/* .your-style { */
-    /* font-family: 'Terminus (TTF)'; */
-    /* font-weight: 500; */
-    /* font-style: normal; */
-/* } */
-.background-rectangle {
-    position: absolute;
-    left: 2.5%;
-    top: 2.5%;
-    border-color: #404040;
-    border-width: 2px;
-    border-style: solid;
-    width: 95%;
-    height: 95%;
+.footer {
+    bottom: 0em;
+    height: 2em;
 }
 
-.content-container {
-    position: absolute;
-    top: 5%;
-    left: 5%;
-    width: 90%;
-    height: 90%;
+.image-container {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    /* margin-left: 2em; */
+    margin: 0 auto;
 }
 
-/* Video box */
 .responsive-video {
     aspect-ratio: 16/9;
     width: 100%;