sidski/kjelsrud.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

💄 update website design

Browse source 
Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
This commit is contained in:
Sindre Kjelsrud 2024-02-21 22:19:08 +01:00
parent ce0cb69ff1
commit a2a1bf3a85
Signed by untrusted user who does not match committer: sidski
GPG key ID: D2BBDF3EDE6BA9A6
6 changed files with 82 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/Footer.astro
View file

@ -1,7 +1,19 @@
---
const today = new Date();
---
<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>
<footer class="flex justify-center py-5 mt-auto footerbg">
{today.getFullYear()} &copy; Sindre Kjelsrud.
<footer class="flex justify-between py-5 mt-5 mt-auto footerbg">
<div>Sindre Kjelsrud &copy; {today.getFullYear()}</div>
<div class="social">
<a href="https://github.com/SindreKjelsrud" aria-label="Link to my GitHub">
<iconify-icon icon="ri:github-line" width="30" height="30" />
</a>
<a href="https://open.spotify.com/user/kjelsrud!" aria-label="Link to my Spotify">
<iconify-icon icon="mdi:spotify" width="30" height="30" />
</a>
</div>
</footer>

30
src/components/Header.astro
View file

@ -1,18 +1,30 @@
---
import HeaderLink from './HeaderLink.astro';
import ThemeIcon from './ThemeIcon.astro';
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;
---
<header class="flex justify-between items-center py-5">
<div>
<a class="text-2xl font-semibold" href="/">
$ ~/sidski
<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>
<ThemeIcon />
</>
))}
</div>
<nav class="flex gap-2">
<HeaderLink href="/about">whoami</HeaderLink>
<HeaderLink href="/blog">blog</HeaderLink>
<HeaderLink href="/more">more</HeaderLink>
</nav>
<ThemeIcon />
</header>

3
src/components/HeaderLink.astro
View file

@ -16,9 +16,6 @@ const isActive = href === pathname || href === pathname.replace(/\/$/, '');
a {
display: inline-block;
text-decoration: none;
}
a.active {
font-weight: bolder;
border-bottom: 2px solid;
}
</style>

4
src/components/ThemeIcon.astro
View file

@ -12,12 +12,12 @@
border: 0;
background: none;
}
.sun { fill: #815B5B; }
.sun { fill: #3B2C29; }
.moon { fill: transparent; }
:global(.dark) .sun { fill: transparent; }
:global(.dark) .moon { fill: #DDE6ED; }
:global(.dark) .moon { fill: #9AD3BB; }
</style>
<script is:inline>

46
src/pages/index.astro
View file

@ -1,37 +1,47 @@
---
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 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-2 social">
<a href="https://github.com/SindreKjelsrud" aria-label="Link to my GitHub">
<iconify-icon icon="ri:github-line" width="30" height="30" />
</a>
<a href="https://www.linkedin.com/in/sindre-kjelsrud-345583218/" aria-label="Link to my LinkedIn">
<iconify-icon icon="lucide:linkedin" width="30" height="30" />
</a>
<a href="https://open.spotify.com/user/kjelsrud!" aria-label="Link to my Spotify">
<iconify-icon icon="mdi:spotify" width="30" height="30" />
</a>
<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: 10rem;
height: 10rem;
background: url("/favicon.svg");
width: 14rem;
height: 14rem;
background: url("/mii.webp");
background-size: cover;
border-radius: 9999px;
border-radius: 5px;
margin-left: auto;
margin-right: auto;
}
.profile:hover {

6
src/pages/more.md
View file

@ -1,6 +1,6 @@
---
title: "More"
description: "The navbar was becoming unwieldy, here you'll see some more of the various pages."
description: "Here you'll see some more of the various pages so that the landing page doesn't overflow with pages lol."
layout: "../layouts/Layout.astro"
---
@ -12,10 +12,6 @@ layout: "../layouts/Layout.astro"
[🌱 **digital garden**](/garden) · wild garden, filled with drafts, ideas and more
[📸 **gallery**](/gallery) · moments and places of my life, in pictures
[📚 **logs**](/logs) · logs for movies, series, anime, books, manga et-cetera
[⏳ **now**](/now) · what i'm doing right now
[✨ **uses**](/uses) · what i use on a daily basis