Wrote announcement post

content/projects/ai-art-explorer.md

@@ -0,0 +1,22 @@
+---
+title: 'An AI Art Search Engine'
+description: 'Search through more than half a million artworks by describing what you are looking for'
+path: /projects/ai-art-explorer
+date: 2024-12-13
+category: project
+coverImage: cover-image.png
+ogImage:
+  component: BlogPost
+  props:
+    readingMins: 5
+sitemap:
+  loc: /projects/ai-art-explorer
+---
+
+## The project
+
+Together with my buddy [Sjors Lockhorst](https://blog.lockhorst.dev/) I've built an AI powered search engine for artworks. You can simply describe what you want to see (or write anything you want essentially) and it will find the ten closest matching images! We've implemented this for more than half a million artworks that we got from the Amsterdam Rijksmuseum.
+
+We've written a blogpost explaining how we did it and what we had to solve to finish the project. You can find the blogpost here: [Art Explorer Blog Post](https://blog.lockhorst.dev/projects/art-search).
+
+The code is also open source so if you want to take a look, you can find it on [Github](https://github.com/SjorsLockhorst/sem-art-search).

pages/index.vue

@@ -7,7 +7,7 @@
         <button class="h-9 pl-4">category</button>
       </header>
       <ul>
-        <li v-for="(post, index) in posts" :key="index">
+        <li v-for="(post, index) in allContent" :key="index">
           <NuxtLink :to="post._path">
             <span
               class="flex transition-[background-color] hover:bg-[#242424] active:bg-[#222] border-y border-[#313131] border-b-0">
@@ -28,7 +28,7 @@
 <script lang="ts" setup>
 // Define the OgImage for this page
 defineOgImageComponent("GeneralPage", {
-  title: "Home"
+  title: "Home",
 });
 
 // Define the SEO metadata
@@ -37,9 +37,12 @@ useSeoMeta({
   ogTitle: "Home",
   description: "The personal blog of Stefan van der Weide. A software engineer and fullstack enthousiast",
   ogDescription: "The personal blog of Stefan van der Weide. A software engineer and fullstack enthousiast",
-})
-
-// Fetch blog post data
-const { data: posts } = await useAsyncData("posts", () => queryContent("blog").find());
+});
 
+const { data: allContent } = await useAsyncData("allContent", () =>
+  queryContent()
+    .where({ _path: { $not: /^\/about\// } })
+    .sort({ date: -1 })
+    .find()
+);
 </script>

pages/projects/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="min-h-screen">
-    <div class="w-11/12 lg:w-3/4 grid grid-cols-1 md:grid-cols-3 justify-self-center m-auto my-10">
+    <div class="w-11/12 lg:w-3/4 grid grid-cols-1 md:grid-cols-3 justify-self-center m-auto my-10 gap-8">
       <div v-for="project in projects" class="w-full">
         <NuxtLink :to="project._path">
           <NuxtImg class="w-full" :src="`/images/${project.path}/cover-image.png`" />