garden maze image gallery

components/content/imageGallery.vue

@@ -0,0 +1,22 @@
+  <script lang="ts" setup>
+  defineProps(['img1', 'img2', 'img3', 'img4'])
+  const isOpen = ref(false)
+  </script>
+<template>
+  <UCarousel v-slot="item" :items="[img1, img2, img3, img4]" arrows>
+    <a target="_blank" :href="item.item">
+      <img :src="item.item" height="500" draggable="false">
+    </a>
+  </UCarousel>
+</template>
+
+
+<style scoped>
+img {
+  border-radius: 5px;
+  margin-right: 5px;
+  max-height: 200px;
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+</style>

content/portfolio/gardenmaze.md

@@ -4,18 +4,10 @@ Artwork for social media and book cover. all digitally painted in high resolutio
 
 I had a lot of fun developing the art for this project. You can check out The Garden Maze [here](https://www.amazon.com/Garden-Maze-Isaac-Anderson/dp/B0BCNX8TN6)
 
----
-Profile image for Kindle Vella profile and one of the characters from the book.
-![bunny](/img/port/bunny.jpg)
-
----
-Ariel view of the maze in the book.
-![the maze](/img/port/maze.jpg)
-
----
-Early sketches of the knight and the quire to be displayed on the cover.
-![sketches](/img/port/coversketches.png)
-
----
-Cover design including spine, logo, and back
-![cover design](/img/port/gmcover.jpg)
+::image-gallery{img1="/blog/img/port/bunny.jpg" img2="/blog/img/port/maze.jpg" img3="/blog/img/port/coversketches.png" img4="/blog/img/port/gmcover.jpg"}
+::
+***
+- *a: Profile image for Kindle Vella profile and one of the characters from the book.*
+- *b: Ariel view of the maze in the book.*
+- *c: Early sketches of the knight and the quire to be displayed on the cover.*
+- *d: Cover design including spine, logo, and back*