✨ add valencia gallery (#4)

* 🍱 add images

Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>

* 💬 add valencia in gallery-page

Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>

* 🍱 add json-doc for gallery

Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>

* 🚧 working on valencia gallery

Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>

* 🍱 add more images

Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>

---------

Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>

src/pages/gallery/index.md

@@ -8,4 +8,5 @@ Under you'll see different pages where I collect and showcase some of my photogr
 
 This way you can check out moments and places of my life, but keep in mind I'm no photographer lol. These are just my memories and a way to replace Instagram.
 
-- [**my cairn collection**](/gallery/cairns)
+- [**cairn collection**](/gallery/cairns)
+- [**valencia**](/gallery/valencia)

src/pages/gallery/valencia.astro

@@ -0,0 +1,29 @@
+---
+import SectionContainer from '../../components/SectionContainer.astro';
+import gallery from '../../data/gallery.json';
+
+const valenciaImages = gallery.valencia.map(image => ({
+  date: image.date.string,
+  image: image.image
+}));
+---
+
+<SectionContainer>
+  <main class="flex flex-col gap-6 py-8">
+    <h1 class="text-4xl font-bold">gallery: valencia</h1>
+    <div class="grid grid-cols-3 gap-4">
+      {
+        valenciaImages.map(image => (
+          <div class="overflow-hidden">
+            <img
+              class="object-contain w-full h-full transform transition duration-500 hover:scale-105"
+              src={image.image}
+              alt="Valencia image"
+              loading="lazy"
+            />
+          </div>
+        ))
+      }
+    </div>
+  </main>
+</SectionContainer>