working with deploy options

portfolio-nuxt/components/ImageSlider.vue

@@ -1,6 +1,7 @@
 <template>
     <Swiper
       :autoHeight="true"
+      :loop="true"
       :spaceBetween="30"
       :centeredSlides="true"
       :autoplay="{
@@ -11,12 +12,21 @@
         clickable: true,
       }"
       :navigation="true"
+      :style="{
+        '--swiper-navigation-color': 'rgb(71 85 105)',
+        '--swiper-pagination-color': 'rgb(71 85 105)',
+        '--swiper-pagination-bottom': 'auto',
+        '--swiper-pagination-top': '1rem',
+        '--swiper-navigation-top-offset': '5rem'
+      }"
       :modules="[SwiperAutoplay, SwiperPagination, SwiperNavigation]"
     >
 
-      <SwiperSlide v-for="image in gallery">
+      <SwiperSlide v-for="image in gallery" class="p-10 bg-zinc-100">
+        <div class="place-items-center">
           <nuxt-img :src="'https://unboundedpress.org/api/' + bucket + '.files/' + image.image_id + '/binary'" 
           quality="50"/>
+        </div>
       </SwiperSlide>
     </Swiper>
   </template>

portfolio-nuxt/nuxt.config.ts

@@ -16,5 +16,19 @@ export default defineNuxtConfig({
       host: 'https://analytics.umami.is/',
       version: 2
     },
+  },
+  nitro: {
+    prerender: {
+      crawlLinks: true
+    }
+  },
+  routeRules: {
+    "https://unboundedpress.org/api/*": {
+      swr: 60 * 60,
+      // or
+      cache: {
+        maxAge: 60 * 60
+      }
+    },
   }
 })

portfolio-nuxt/pages/about.vue

@@ -44,7 +44,6 @@ const { data: gallery } = await useFetch('https://unboundedpress.org/api/my_imag
         for (const item of gallery) {
             item.image_id =  images.value.find(obj => {return obj.filename === item.image})._id.$oid
         }
-        console.log(gallery)
         return gallery //.sort((a,b) => a.priority - b.priority)
     }
 })