---
import SectionContainer from '../components/SectionContainer.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 justify-center items-center gap-4 description">
		<div class="profile"></div> <!-- Image -->
		<h1 class="text-3xl font-bold">Sindre Kjelsrud</h1>
		<p class="text-center">Student at Western University of Applied Sciences.</p>
		<div class="flex gap-1 social">
			<a href="https://www.linkedin.com/in/sindre-kjelsrud-345583218/">
				<iconify-icon icon="lucide:linkedin" width="30" height="30" />
			</a>
			<a href="https://github.com/SindreKjelsrud">
				<iconify-icon icon="ri:github-line" width="30" height="30" />
			</a>
			<a href="https://www.instagram.com/SindreKjelsrud/">
				<iconify-icon icon="mdi:instagram" width="30" height="30" />
			</a>
			<a href="https://open.spotify.com/user/kjelsrud!">
				<iconify-icon icon="mdi:spotify" width="30" height="30" />
			</a>
		</div>
	</main>
</SectionContainer>

<style>
	.profile {
            width: 10rem;
			height: 10rem;
            background: url("/src/static/pb.jpg");
			background-size: cover;
			border-radius: 9999px;
        }
  
	.profile:hover {
		background-image: url("https://media.tenor.com/yheo1GGu3FwAAAAC/rick-roll-rick-ashley.gif");
	}
</style>