---
import SectionContainer from '../components/SectionContainer.astro';
import HeaderLink from '../components/HeaderLink.astro';
---
<SectionContainer>
    <main class="flex flex-col flex-1 md:flex-row gap-6 md:mt-4">
        <div class="profile md:order-last"></div>

        <div class="flex flex-col text-left gap-4 w-full md:w-2/3">
            <h1 class="text-3xl font-bold">Sindre Kjelsrud</h1>
            <div class="flex flex-col blog">
              <p>Computer Science-gradute from 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 you've been here by signing my <a href="/guestbook">guestbook</a>!</p>
            </div>
            <div>
                <h1 class="text-xl font-semibold">pages</h1>
                <ul class="flex flex-col index">
                    <li><HeaderLink href="/about">❓ whoami</HeaderLink>~ sid, i am</li>
                    <li><HeaderLink href="/blog">✍️ blog</HeaderLink>~ i write my thoughts sometimes</li>
                    <li><HeaderLink href="/logs">🗂️ logs</HeaderLink>~ a record of what I've watched, read & climbed</li>
                    <li><HeaderLink href="/gallery">📸 gallery</HeaderLink>~ moments and places of my life, in pictures</li>
                    <li><HeaderLink href="/slashes">🦕 more</HeaderLink>~ additional slash pages</li>
                </ul>
            </div>
        </div>
    </main>
</SectionContainer>

<style>
    .profile {
        width: 14rem;
        height: 14rem;
        background: url("/mii.webp");
        background-size: cover;
        border-radius: 5px;
        margin-left: auto;
        margin-right: auto;
    }

    .profile:hover {
        background-image: url("https://media.tenor.com/yheo1GGu3FwAAAAC/rick-roll-rick-ashley.gif");
    }
</style>