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(); 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"> <footer class="flex justify-between py-5 mt-5 mt-auto footerbg">
{today.getFullYear()} &copy; Sindre Kjelsrud. <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> </footer>

36
src/components/Header.astro
View file

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

3
src/components/HeaderLink.astro
View file

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

4
src/components/ThemeIcon.astro
View file

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

62
src/pages/index.astro
View file

@ -1,40 +1,50 @@
--- ---
import SectionContainer from '../components/SectionContainer.astro'; 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>
<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> <SectionContainer>
<main class="flex flex-col flex-1 justify-center items-center gap-4 description"> <main class="flex flex-col flex-1 md:flex-row gap-6 md:mt-6">
<div class="profile"></div> <!-- Image --> <div class="profile md:order-last"></div>
<h1 class="text-3xl font-bold">Sindre Kjelsrud</h1>
<p class="text-center">Student at Western University of Applied Sciences.</p> <div class="flex flex-col text-left gap-4 w-full md:w-2/3">
<div class="flex gap-2 social"> <h1 class="text-2xl font-bold">Sindre Kjelsrud</h1>
<a href="https://github.com/SindreKjelsrud" aria-label="Link to my GitHub"> <p>Computer Science-student at Western University of Applied Sciences, campus Bergen.</p>
<iconify-icon icon="ri:github-line" width="30" height="30" /> <p>I like spending my free time bouldering/climbing, playing some games on my Wii or waiting for the next One Piece episode.</p>
</a> <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>
<a href="https://www.linkedin.com/in/sindre-kjelsrud-345583218/" aria-label="Link to my LinkedIn"> <div>
<iconify-icon icon="lucide:linkedin" width="30" height="30" /> <h1 class="text-xl font-semibold">pages</h1>
</a> <ul class="flex flex-col blog">
<a href="https://open.spotify.com/user/kjelsrud!" aria-label="Link to my Spotify"> <li><HeaderLink href="/about">whoami</HeaderLink>~ sid am i</li>
<iconify-icon icon="mdi:spotify" width="30" height="30" /> <li><HeaderLink href="/blog">blog</HeaderLink>~ my written thoughts and ideas</li>
</a> <li><HeaderLink href="/logs">logs</HeaderLink>~ a record of what I've watched and read</li>
</div> <li><HeaderLink href="/gallery">gallery</HeaderLink>~ moments and places of my life, in pictures</li>
</main> <li><HeaderLink href="/more">more</HeaderLink>~ additional pages</li>
</ul>
</div>
</div>
</main>
</SectionContainer> </SectionContainer>
<style> <style>
.profile { .profile {
width: 10rem; width: 14rem;
height: 10rem; height: 14rem;
background: url("/favicon.svg"); background: url("/mii.webp");
background-size: cover; background-size: cover;
border-radius: 9999px; border-radius: 5px;
} margin-left: auto;
margin-right: auto;
}
.profile:hover { .profile:hover {
background-image: url("https://media.tenor.com/yheo1GGu3FwAAAAC/rick-roll-rick-ashley.gif"); background-image: url("https://media.tenor.com/yheo1GGu3FwAAAAC/rick-roll-rick-ashley.gif");
} }
</style> </style>

6
src/pages/more.md
View file

@ -1,6 +1,6 @@
--- ---
title: "More" 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" layout: "../layouts/Layout.astro"
--- ---
@ -12,10 +12,6 @@ layout: "../layouts/Layout.astro"
[🌱 **digital garden**](/garden) · wild garden, filled with drafts, ideas and more [🌱 **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 [⏳ **now**](/now) · what i'm doing right now
[✨ **uses**](/uses) · what i use on a daily basis [✨ **uses**](/uses) · what i use on a daily basis