✨ added guestbook

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

src/data/guestbook.json

@@ -0,0 +1,19 @@
+{   
+  "visitors": [
+    {
+      "name":"Sid",
+      "social":"sidski",
+      "sociallink":"https://kjelsrud.dev",
+      "image":"/img/guestbook/sid_pizza.webp",
+      "date": {
+        "year": "2024",
+        "month": "01",
+        "day": "03",
+        "string": "01.03.2024"
+      }
+    }
+  ],
+  "meta": {
+    "lastModified": "March 01, 2024"
+  }
+}

src/pages/guestbook.astro

@@ -0,0 +1,34 @@
+---
+import SectionContainer from '../components/SectionContainer.astro';
+import guestbook from '../data/guestbook.json';
+const visitors = guestbook["visitors"];
+---
+
+<SectionContainer>
+  <main class="flex flex-col flex-1 gap-4 mt-4">
+    <h1 class="text-3xl font-extrabold">📓 Guestbook</h1>
+    <blockquote><p><em>Last update: {guestbook.meta.lastModified}</em></p></blockquote>
+    <div class="flex flex-col gap-2">
+      <p class="italic">In the kitchen of the heart, each of us savors the memory of a beloved pizza slice. This favorite flavor, distinct to every palate, evokes a taste as satisfying and nostalgic as home.</p>
+      <p class="blog">Welcome to the <i>digital pizzeria</i>! A place where the visitors of my site can leave a little <strong>"I was here"</strong>-tag by taking a moment to doodle a pizza slice, snapping a picture of their creation, and sharing it with me at <a class="font-bold" href="mailto:kjelsrudsindre@gmail.com">kjelsrudsindre@gmail.com</a>. Don't forget to include the picture, your name & website/social media!</p>
+      <p>And remember, creativity knows no bounds! Just like in my sketch, where I went with a Bitcoin pizza slice!🪙</p>
+   </div>
+    <div class="grid grid-cols-2 md:grid-cols-3 gap-2">
+      {visitors.map((visitor) => (
+        <div class="flex flex-col items-center">
+          <figure class="relative">
+            <img src={visitor.image} class="rounded-s"/>
+            <figcaption class="absolute bottom-2 left-2 bg-black text-white px-4 py-2 rounded-xl text-xs">
+              <div class="guestbook">
+                {visitor.name} ✿ 
+                <a href={visitor.sociallink} class="px-2 bg-gray-500 rounded-lg italic">
+                 @{visitor.social}~
+                </a>
+              </div>
+            </figcaption>
+          </figure>
+        </div>
+      ))}
+    </div>
+	</main>
+</SectionContainer>

src/pages/index.astro

@@ -8,9 +8,12 @@ import HeaderLink from '../components/HeaderLink.astro';
 
         <div class="flex flex-col text-left gap-4 w-full md:w-2/3">
             <h1 class="text-2xl font-bold">Sindre Kjelsrud</h1>
-            <p>Computer Science-student at Western University of Applied Sciences, campus Bergen.</p>
-            <p>I like spending my free time bouldering/climbing, playing some games on my Wii, watching the newest One Piece episode or build cairns.</p>
-            <p>This website is just a fun side-project that I actively work on, and use as my creative outlet. It's also a way for me to actually own my data, allowing me to log data, post pictures and more!</p>
+            <div class="flex flex-col blog">
+              <p>Computer Science-student at Western University of Applied Sciences, campus Bergen.</p>
+              <p>I like spending my free time bouldering/climbing, playing some games on my Wii, watching the newest One Piece episode or build cairns.</p>
+              <p>This website is just a fun side-project that I actively work on, and use as my creative outlet. It's also a way for me to actually own my data, allowing me to log data, post pictures and more!</p>
+              <p>Let me know youve been here by signing my <a class="font-bold" href="/guestbook">guestbook</a>!</p>
+            </div>
             <div>
                 <h1 class="text-xl font-semibold">pages</h1>
                 <ul class="flex flex-col blog">