♻️ Refactored index & header

Signed-off-by: SindreKjelsrud <sindre@kjelsrud.dev>
This commit is contained in:
Sid 2025-05-29 19:29:38 +02:00
parent 192801348f
commit 459ddffa6b
Signed by: sidski
GPG key ID: D2BBDF3EDE6BA9A6
5 changed files with 70 additions and 89 deletions

View file

@ -1,67 +0,0 @@
---
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">
<audio id="rickroll" preload="auto">
<source src="/rickroll.mp3">
</audio>
</div>
<div class="flex flex-col text-left gap-4 w-full md:w-2/3">
<h1 class="text-3xl font-bold">Sid</h1>
<div class="flex flex-col blog">
<p>Software Engineer at Capgemini, following their Ignite program.</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>
<script>
document.addEventListener("DOMContentLoaded", function() {
const rickroll = document.getElementById("rickroll");
const profile = document.querySelector(".profile");
// Play audio when mouse enters
profile.addEventListener("mouseenter", function() {
rickroll.play();
});
// Pause and reset audio when mouse leaves
profile.addEventListener("mouseleave", function() {
rickroll.pause();
rickroll.currentTime = 0;
});
});
</script>
<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("/rick-roll-rick-ashley.gif");
}
</style>

25
src/pages/index.md Normal file
View file

@ -0,0 +1,25 @@
---
title: "whoami?"
description: ""
layout: "../layouts/Layout.astro"
---
Hallais! My name is **Sindre**, also known as ["Sid"](/avatar.webp). I'm a 20-something year old Software Engineer at Capgemini, following their internal Ignite program.
Welcome to my website! It's 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!
I like to do a lot, but to sum it up I mostly like spending my free time bouldering/climbing, play some games on my Wii, watch the newest One Piece episode or build cairns - check out my [collection](/gallery/cairns). Below is some other information about me!
👒 One Piece is my favorite anime.
🎵 Liquid DnB / Techno is my go-to music.
📢 I'm an Open Source advocate and enjoy talking about it.
📽️ Ready Player One or The Summit of the Gods are my favorite movies, tough choice to only have one.
📚 I love the book Permanent Record, can't recommend it enough!
## Want to contact me? 📫
Want to say hi? You can find ways to reach me in [/contact](/contact) or let me know you've been here by signing my [guestbook](/guestbook)!