35 lines
1.8 KiB
Text
35 lines
1.8 KiB
Text
|
---
|
||
|
|
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>
|