feat(gallery): simple gallery setup

NOTE: inspiration from https://github.com/Flosciante/nuxt-image-gallery

app/assets/app.css

@@ -1,3 +1,8 @@
+@import url(https://fonts.bunny.net/css?family=jetbrains-mono:400,800);
+
+@import "tailwindcss";
+@import "@nuxt/ui";
+
 @font-face {
   font-family: "NDS7";
   src: url("/assets/fonts/nds-7px.woff2") format("woff2");
@@ -26,14 +31,3 @@
   font-weight: normal;
   font-style: normal;
 }
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  image-rendering: pixelated;
-  image-rendering: crisp-edges;
-}

app/pages/gallery.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+const images = [
+  "https://picsum.photos/640/640?random=1",
+  "https://picsum.photos/640/800?random=2",
+  "https://picsum.photos/800/640?random=3",
+  "https://picsum.photos/1000/640?random=4",
+  "https://picsum.photos/640/400?random=5",
+  "https://picsum.photos/640/800?random=6",
+  "https://picsum.photos/810/640?random=7",
+  "https://picsum.photos/760/640?random=8",
+  "https://picsum.photos/640/900?random=9",
+  "https://picsum.photos/1000/640?random=10",
+  "https://picsum.photos/640/600?random=11",
+];
+
+const columnCount = ref(3);
+
+const getColumnImages = (columnNumber: number) =>
+  images.filter((_, index) => index % columnCount.value === columnNumber - 1);
+
+const updateColumns = () => {
+  if (window.innerWidth < 768) {
+    columnCount.value = 1;
+  } else if (window.innerWidth < 1152) {
+    columnCount.value = 2;
+  } else {
+    columnCount.value = 3;
+  }
+};
+
+onMounted(() => {
+  updateColumns();
+  window.addEventListener("resize", updateColumns);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("resize", updateColumns);
+});
+</script>
+
+<template>
+  <div
+    class="min-h-screen bg-[#0a0a0a] text-white px-12 py-12 font-[JetBrains_Mono,monospace]"
+  >
+    <div class="flex gap-6">
+      <div
+        v-for="col in columnCount"
+        :key="col"
+        class="flex-1 flex flex-col gap-6"
+      >
+        <header v-if="col === 1" class="pr-2 pb-6">
+          <UButton
+            icon="i-lucide-arrow-left"
+            size="md"
+            color="neutral"
+            variant="link"
+            :ui="{
+              base: 'px-0 text-neutral-600 hover:text-neutral-400',
+              leadingIcon: 'size-4',
+            }"
+            >Back to Home</UButton
+          >
+
+          <h1 class="text-3xl mt-3 font-bold">Pihkaal's Gallery</h1>
+          <p class="text-neutral-600 text-sm mt-2 w-4/5">
+            Started on March 7th, 2025. I love macro photography of insects and
+            flowers.
+          </p>
+        </header>
+        <div
+          v-for="(image, idx) in getColumnImages(col)"
+          :key="idx"
+          class="relative overflow-hidden rounded-sm bg-black cursor-pointer transition-transform"
+        >
+          <img
+            :src="image"
+            class="w-full h-auto block brightness-80 hover:brightness-100 transition-all"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

app/utils/settings.ts

@@ -1,4 +1,9 @@
-export const SETTINGS_MENUS = ["options", "clock", "user", "touchScreen"] as const;
+export const SETTINGS_MENUS = [
+  "options",
+  "clock",
+  "user",
+  "touchScreen",
+] as const;
 
 export const SETTINGS_SUB_MENUS = [
   "optionsLanguage",

nuxt.config.ts

@@ -10,6 +10,7 @@ export default defineNuxtConfig({
     "./modules/asset-generator",
     "@nuxtjs/i18n",
     "@tresjs/nuxt",
+    "@nuxt/ui",
   ],
   css: ["~/assets/app.css"],
   ssr: false,

package.json

@@ -17,6 +17,7 @@
     "@tresjs/nuxt": "^5.1.2",
     "gsap": "3.13.0",
     "pinia": "3.0.4",
+    "tailwindcss": "^4.1.18",
     "three": "^0.182.0",
     "vue": "3.5.25",
     "vue-router": "4.6.3",
@@ -26,6 +27,7 @@
     "@nuxt/content": "3.8.2",
     "@nuxt/eslint": "1.10.0",
     "@nuxt/kit": "4.2.1",
+    "@nuxt/ui": "4.3.0",
     "@nuxtjs/i18n": "10.2.1",
     "@nuxtjs/mdc": "0.18.4",
     "@pinia/nuxt": "0.11.3",