I did some stuff with getting it set up and changing photos but i can't get the sqlite to work on prod

src/routes/pork/+page.svelte

@@ -13,38 +13,23 @@
     };
   }
 
-  let selected = $state({
-    name: "Chop"
-  })
+  let selected = $state("Chop")
+
+  function change_photo({target:{id}}){
+    console.log(id)
+    selected = id
+  }
   
 </script>
 <section>
-  <h1>Pork</h1>
-  
- <!--  <div class="list">
-    {#each data.pork as pork}
-      {@const price_per_lb = pork.raw_cut ? RAW_COST : PROCESSED_COST}
-      <div>
-          <img src={`/pork/${pork.name.replace(' ', '_')}.jpg`} alt={`Image of a ${pork.name}`} />
-          <h2>{pork.name}</h2>
-          <span>
-              {#if pork.preweighed}
-                  <p>${price_per_lb * pork.min_weight}</p>
-              {:else}
-              <p>${price_per_lb * pork.min_weight} ~ ${ price_per_lb * pork.max_weight}</p>
-              {/if}
-              <p>~{pork.stock} in stock</p>
-          </span>
-      </div>
-    {/each}
-  </div> -->
-
+  <h1><b>F</b>arm Raised Pork</h1>
+  <h5>this ain't your grocery store's pork</h5>
   <div id="tui">
     <ol>
       <li><span>Cut</span><span>Weight</span><span>Stock</span></li>
       {#each data.pork as {name, raw_cut, preweighed, min_weight, max_weight, stock}}
         {@const price_per_lb = raw_cut ? RAW_COST : PROCESSED_COST}
-        <li>
+        <li onmouseenter={change_photo} id={name}>
           <span>{name}</span>
           {#if preweighed}
             <span>{min_weight} lb</span>
@@ -55,12 +40,16 @@
         </li>
       {/each}
     </ol>
-    <img src={`/pork/${selected.name.replace(' ', '_')}.jpg`} alt={`Image of a ${selected.name}`} />
+    <img src={`/pork/${selected.replace(' ', '_')}.jpg`} alt={`Image of a ${selected}`} />
   </div>
 </section>
 
 <style lang="scss">
   @use '/src/app.scss' as *;
+  @use 'sass:color';
+  b{
+    font-weight: 100;
+  }
   section {
     width: 100%;
     display: flex;
@@ -69,25 +58,30 @@
     justify-content: center;
     h1 {
         text-align: center;
-        font-size: 5rem;
-        font-weight: 600;
-        margin: 0 0 2rem 0;
-    }   
+        font-size: 2.5rem;
+        font-weight: 500;
+    }
+    h5{
+      font-size: 0.75rem;
+      color:transparentize(black, 0.5)
+    }
+
     img {
-      width: 20rem;
+      width: 50%;
       height: fit-content;
       border-radius: 0.375rem;
+      text-align: center;
       // min-width: 10rem;
       // min-height: 10rem;
     }
 
     #tui{
       display: flex;
-      width: 80%;
-      font-size: 1.5rem;
-      
+      width: 90%;
+      font-size: 1rem;
+
       ol{
-        width: 75%;
+        width: 100%;
         display: inherit;
         flex-direction: column;
         list-style: none;
@@ -97,6 +91,13 @@
           span{
             flex-basis: 33%;
           }
+          &:nth-child(2n){
+            background: transparentize(color.to-space($blue, rgb), 0.75);
+          }
+          &:not(:first-child):hover{
+            background: transparentize(color.to-space($green, rgb), 0.5);
+            // background: $green;
+          }
         }
       }
     }