Compare commits
5 commits
e4b7f7631b
...
0c63d914ec
| Author | SHA1 | Date | |
|---|---|---|---|
0c63d914ec
|
|||
|
70663064a0
|
|||
|
05e29431a6
|
|||
|
459ddffa6b
|
|||
|
192801348f
|
10 changed files with 72 additions and 225 deletions
Binary file not shown.
|
|
@ -1,27 +1,31 @@
|
|||
---
|
||||
const pathname = new URL(Astro.request.url).pathname;
|
||||
const pathSegments = pathname.slice(1).split('/').filter(segment => segment !== '');
|
||||
|
||||
function buildHref(index) {
|
||||
if (pathSegments.length === 0) return '/';
|
||||
return ' /' + pathSegments.slice(0, index + 1).join('/');
|
||||
}
|
||||
|
||||
const isLandingPage = pathSegments.length === 0;
|
||||
const { pathname } = Astro.url;
|
||||
---
|
||||
|
||||
<header class="flex justify-between items-center py-5">
|
||||
<div>
|
||||
<a class="text-l font-semibold" href="/">~</a>
|
||||
{isLandingPage ? <span> / </span> : ''}
|
||||
{pathSegments.map((segment, index) => (
|
||||
<>
|
||||
<span> / </span>
|
||||
<a class="text-l font-semibold italic" href={buildHref(index)}>
|
||||
{segment}
|
||||
</a>
|
||||
</>
|
||||
))}
|
||||
<header class="flex flex-col gap-6 py-5">
|
||||
<div class="flex items-end gap-4">
|
||||
<img class="profile" />
|
||||
<h1 class="text-3xl font-extrabold">Sids' blog</h1>
|
||||
</div>
|
||||
<nav class="flex flex-wrap gap-2">
|
||||
<a class={`headerlink ${pathname === '/' ? 'headerlink-active' : ''}`} href="/">home</a>
|
||||
<a class={`headerlink ${pathname === '/blog' ? 'headerlink-active' : ''}`} href="/blog">blog</a>
|
||||
<a class={`headerlink ${pathname === '/logs' ? 'headerlink-active' : ''}`} href="/logs">logs</a>
|
||||
<a class={`headerlink ${pathname === '/gallery' ? 'headerlink-active' : ''}`} href="/gallery">gallery</a>
|
||||
<a class={`headerlink ${pathname === '/guestbook' ? 'headerlink-active' : ''}`} href="/guestbook">guestbook</a>
|
||||
<a class={`headerlink ${pathname === '/slashes' ? 'headerlink-active' : ''}`} href="/slashes">more</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.profile {
|
||||
width: 6vh;
|
||||
height: 6vh;
|
||||
background: url("/mii.webp");
|
||||
background-size: cover;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.profile:hover {
|
||||
background-image: url("/rick-roll-rick-ashley.gif");
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,21 +0,0 @@
|
|||
---
|
||||
import type { HTMLAttributes } from 'astro/types';
|
||||
|
||||
type Props = HTMLAttributes<'a'>;
|
||||
|
||||
const { href, class: className, ...props } = Astro.props;
|
||||
|
||||
const { pathname } = Astro.url;
|
||||
const isActive = href === pathname || href === pathname.replace(/\/$/, '');
|
||||
---
|
||||
|
||||
<a href={href} class:list={[className, { active: isActive }]} {...props}>
|
||||
<slot />
|
||||
</a>
|
||||
<style>
|
||||
a {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
font-weight: bolder;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
{
|
||||
"visitors": [
|
||||
{
|
||||
"name": "Sid",
|
||||
"social": "kjelsrud.dev",
|
||||
"sociallink": "https://kjelsrud.dev",
|
||||
"image": "/img/guestbook/sid_pizza.webp",
|
||||
"date": {
|
||||
"year": "2024",
|
||||
"month": "03",
|
||||
"day": "01",
|
||||
"string": "01.03.2024"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Albert",
|
||||
"social": "bayazidi.xyz",
|
||||
"sociallink": "https://bayazidi.xyz",
|
||||
"image": "/img/guestbook/albert_pizza.webp",
|
||||
"date": {
|
||||
"year": "2024",
|
||||
"month": "03",
|
||||
"day": "02",
|
||||
"string": "02.03.2024"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Azlen",
|
||||
"social": "azlen.me",
|
||||
"sociallink": "https://azlen.me/",
|
||||
"image": "/img/guestbook/azlen_pizza.webp",
|
||||
"date": {
|
||||
"year": "2024",
|
||||
"month": "08",
|
||||
"day": "10",
|
||||
"string": "10.08.2024"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Luca",
|
||||
"social": "les.cx",
|
||||
"sociallink": "https://les.cx/",
|
||||
"image": "/img/guestbook/luca_pizza.webp",
|
||||
"date": {
|
||||
"year": "2024",
|
||||
"month": "08",
|
||||
"day": "26",
|
||||
"string": "26.08.2024"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Kristoffer",
|
||||
"social": "@kristoffer-jorgensborg",
|
||||
"sociallink": "https://www.linkedin.com/in/kristoffer-jorgensborg/",
|
||||
"image": "/img/guestbook/kristoffer_pizza.webp",
|
||||
"date": {
|
||||
"year": "2024",
|
||||
"month": "08",
|
||||
"day": "29",
|
||||
"string": "29.08.2024"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Kai Waløen",
|
||||
"social": "kwal.no",
|
||||
"sociallink": "https://www.kwal.no",
|
||||
"image": "/img/guestbook/kai_pizza.webp",
|
||||
"date": {
|
||||
"year": "2024",
|
||||
"month": "09",
|
||||
"day": "14",
|
||||
"string": "14.09.2024"
|
||||
}
|
||||
}
|
||||
],
|
||||
"meta": {
|
||||
"lastModified": "September 15, 2024"
|
||||
}
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@ const {frontmatter} = Astro.props;
|
|||
<SectionContainer>
|
||||
<main class="flex flex-col flex-1 mb-auto break-words mt-4">
|
||||
<article>
|
||||
<h1 class="text-3xl font-extrabold">[ {frontmatter.title} ]</h1>
|
||||
<h1 class="text-3xl font-bold">[ {frontmatter.title} ]</h1>
|
||||
<p class="italic mb-4">{frontmatter.description}</p>
|
||||
<div class="blog">
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -1,26 +0,0 @@
|
|||
---
|
||||
title: 'About'
|
||||
description: ''
|
||||
layout: "../layouts/Layout.astro"
|
||||
---
|
||||
|
||||
Hello! My name is Sindre, also known as ["Sid"](/avatar.webp). I'm a 20-something Software Engineer @ Capgemini, following their internal Ignite program.
|
||||
|
||||
What do I like to do you ask? Well a lot, but as you read on the landing page I mostly like spending my free time bouldering/climbing, play some games on my Wii, watch the newest One Piece episode or build cairns. Below is some other information about me!
|
||||
|
||||
👒 **Favorite Anime:** One Piece
|
||||
|
||||
🎵 **Favorite Music:** Liquid DnB / Techno
|
||||
|
||||
📽️ **Favorite Movie:** Ready Player One or The Summit of the Gods
|
||||
|
||||
🎮 **Favorite Games:** Minecraft & Wii Sports
|
||||
|
||||
📺 **Favorite Series:** Limitless
|
||||
|
||||
📚 **Favorite Books/Mangas:** Permanent Record & Hi Score Girl
|
||||
|
||||
## Want to contact me? 📫
|
||||
|
||||
You'll find all my contact information under [contact](/contact)!
|
||||
|
||||
|
|
@ -1,11 +1,9 @@
|
|||
---
|
||||
import SectionContainer from '../components/SectionContainer.astro';
|
||||
import guestbook from '../data/guestbook.json';
|
||||
const visitors = guestbook["visitors"];
|
||||
---
|
||||
|
||||
<SectionContainer>
|
||||
<main class="flex flex-col flex-1">
|
||||
<main>
|
||||
<iframe src="https://guestbooks.meadow.cafe/guestbook/593" width="100%" height="1500" frameborder="0"></iframe>
|
||||
</main>
|
||||
</SectionContainer>
|
||||
|
|
|
|||
|
|
@ -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
25
src/pages/index.md
Normal 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)!
|
||||
|
|
@ -32,6 +32,25 @@ hr {
|
|||
margin: 10px 0;
|
||||
}
|
||||
|
||||
/* HEADER */
|
||||
.headerlink {
|
||||
border: 2px solid var(--dark-link);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5vh 1.5vh;
|
||||
border-radius: 10px;
|
||||
font-size: medium;
|
||||
}
|
||||
|
||||
.headerlink-active {
|
||||
border: 2px solid var(--dark-link);
|
||||
padding: 0.5vh 1vh;
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
background-color: var(--dark-link);
|
||||
color: var(--dark-bg);
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
.footerbg {
|
||||
background-color: var(--dark-bg);
|
||||
|
|
@ -180,12 +199,6 @@ iframe {
|
|||
padding-left: 10px;
|
||||
}
|
||||
|
||||
/* GUESTBOOK */
|
||||
.guestbook a:hover {
|
||||
background-color: var(--dark-1);
|
||||
color: var(--dark-bg);
|
||||
}
|
||||
|
||||
/* QUOTES */
|
||||
.author {
|
||||
color: var(--dark-2);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue