---
import SectionContainer from '../components/SectionContainer.astro';
import HeaderLink from '../components/HeaderLink.astro';
---
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>


<SectionContainer>
    <main class="flex flex-col flex-1 md:flex-row gap-6 md:mt-6">
        <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-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 or waiting for the next One Piece episode.</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>
                <h1 class="text-xl font-semibold">pages</h1>
                <ul class="flex flex-col blog">
                    <li><HeaderLink href="/about">whoami</HeaderLink>~ sid am i</li>
                    <li><HeaderLink href="/blog">blog</HeaderLink>~ my written thoughts and ideas</li>
                    <li><HeaderLink href="/logs">logs</HeaderLink>~ a record of what I've watched and read</li>
                    <li><HeaderLink href="/gallery">gallery</HeaderLink>~ moments and places of my life, in pictures</li>
                    <li><HeaderLink href="/more">more</HeaderLink>~ additional 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>