more stuff

package.json

@@ -16,6 +16,7 @@
     "astro": "^3.0.2",
     "svelte": "^4.2.0",
     "tailwindcss": "^3.3.3",
+    "three": "^0.182.0",
     "typescript": "^5.3.3",
     "vite": "^5.0.11"
   },

pnpm-lock.yaml

@@ -26,6 +26,9 @@ importers:
       tailwindcss:
         specifier: ^3.3.3
         version: 3.4.17
+      three:
+        specifier: ^0.182.0
+        version: 0.182.0
       typescript:
         specifier: ^5.3.3
         version: 5.9.2
@@ -2266,6 +2269,9 @@ packages:
   thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
 
+  three@0.182.0:
+    resolution: {integrity: sha512-GbHabT+Irv+ihI1/f5kIIsZ+Ef9Sl5A1Y7imvS5RQjWgtTPfPnZ43JmlYI7NtCRDK9zir20lQpfg8/9Yd02OvQ==}
+
   to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
@@ -4958,6 +4964,8 @@ snapshots:
     dependencies:
       any-promise: 1.3.0
 
+  three@0.182.0: {}
+
   to-regex-range@5.0.1:
     dependencies:
       is-number: 7.0.0

src/components/projects/glance.astro

@@ -2,7 +2,10 @@
 import Item from './item.astro';
 ---
 
-<Item projectName="glance" title="Glance">
+<Item projectName="glance" title="Glance" layout={{
+mobile: { height: '300px' },
+  desktop: { left: "10%", top: "20%", width: "80%", height: '600px' }
+}} >
   <div
     id="text205"
     style="font-size: 22px; resize: none; padding: 10px; height:90%; overflow-y: hidden; padding-top: 0px; padding-bottom: 20px;"
@@ -13,7 +16,13 @@ import Item from './item.astro';
         A customizable dashboard optimized for E-Ink Displays
     </h2>
 
-    <iframe src="https://glance.simo.ng/demo" width="600" height="400" frameborder="0" allowfullscreen="">
-    </iframe>
+    <iframe style="height: 100%; width: 100%; display: none;" class="desktop-only" src="https://glance.simo.ng/app"></iframe>
+    <style>
+      @media (min-width: 768px) {
+        .desktop-only {
+          display: block !important;
+        }
+      }
+    </style>
   </div>
 </Item>

src/components/projects/summize.astro

@@ -4,6 +4,7 @@ import summizeExample from "../../assets/summizeExample.png";
 ---
 
 <Item projectName="summize" title="Summize - A Youtube Video Summarizer" layout={{
+  mobile: { top: '40%' },
   desktop: { width: '70%', height: '45%' }
 }}>
   <div