denizk0461/pages
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: denizk0461:3484efc498bbb039ed9e67c8023ebe9bf17caca2
Branches Tags
denizk0461:master
..
compare: denizk0461:3dd22c04dc7736728ecb4090bce1aaaf835477ef
Branches Tags
denizk0461:master

3 Commits
3484efc498 ... 3dd22c04dc

Author SHA1 Message Date
denizk0461
3dd22c04dc adjusted line height of banner subtitle to avoid being too close to the hr 2026-04-02 16:21:30 +02:00
denizk0461
83c6732b3a tags are now displayed in banner; adjusted sizing of elements in banner 2026-04-02 16:15:02 +02:00
denizk0461
f932793b62 main page shenanigans; added dateUpdate attribute to blog posts; updated banner to display them 2026-04-02 15:50:30 +02:00
6 changed files with 126 additions and 78 deletions
Expand all files Collapse all files

73
src/lib/banner2.svelte
View File

@@ -1,32 +1,50 @@
<script lang="ts">
let {
title,
date = "",
date = "", // date posted
dateUpdated = "",
subtitle = "",
banner = "",
bannerAlt = "",
tags = [],
pixelated,
}: {
title: string;
date?: string;
dateUpdated?: string;
subtitle?: string;
banner?: string;
bannerAlt?: string;
tags?: string[];
pixelated?: boolean;
} = $props();
</script>
{#snippet titles({title, subtitle, date}: {title: string, subtitle: string, date: string})}
<div class="title-container">
<h1 class="title">{title}</h1>
{#if subtitle}
<p class="subtitle">[ {subtitle} ]</p>
<div class="title-container">
<div class="title-text-container">
{#if subtitle}
<p class="subtitle">[ {subtitle} ]</p>
{/if}
{#if tags.length}
<div class="tag-container">
{#each tags as tag}
<span class="post-tag">{tag}</span>
{/each}
</div>
{/if}
</div>
{#if date}
<div class="date-container">
<p class="date">posted :: {date}</p>
{#if dateUpdated}
<p class="date">last updated :: {dateUpdated}</p>
{/if}
</div>
{/if}
</div>
{#if date}
<p class="date">» {date}</p>
{/if}
{/snippet}
<div class="container">
@@ -55,26 +73,48 @@
.title-container {
display: flex;
flex-direction: row;
align-items: flex-end;
gap: 12px;
margin: var(--margin-header-top) 0 var(--margin-header-bottom) 0;
/* align-items: flex-end; */
gap: 16px;
margin: 8px 0;
}
.title-container + hr {
/* Add top margin if no date element exists */
margin-top: 16px;
.title-text-container {
width: fit-content;
display: flex;
flex-direction: column;
flex: 1;
gap: 8px;
}
.tag-container {
display: flex;
gap: 4px;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 4px;
}
.date-container {
width: fit-content;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.title {
box-sizing: border-box;
height: fit-content;
margin: 0;
margin-top: var(--margin-header-top);
}
.date {
font-weight:700;
font-size: 1.3rem;
margin-top: 0;
font-weight: 500;
font-family: var(--font-mono);
font-size: 1.0rem;
line-height: 1.4rem;
font-style: italic;
margin: 0;
color: var(--color-highlight);
}
@@ -82,6 +122,7 @@
font-family: var(--font-mono);
font-weight: 500;
font-size: 1.0rem;
line-height: 1.4rem;
margin: 0;
}

2
src/routes/+layout.svelte
View File

@@ -148,7 +148,7 @@
--font-lightyears: 'LIGHTYEARS', sans-serif;
--font-size-h1: 2.0rem;
--font-size-h1: 2.2rem;
--font-size-h2: 1.5rem;
--font-size-h3: 1.3rem;
--font-size-h4: 1.2rem;

107
src/routes/+page.svelte
View File

@@ -98,39 +98,43 @@
<hr>
<div>
<div class="split-intro-container">
<div>
<img class="me-img pixelated-img" src="me.webp" alt="Pixelated mirror selfie of the website creator wearing a green shirt, fitting the website theme. The face is obscured." title="hi!">
<img class="me-img pixelated-img" src="me.webp" alt="Pixelated mirror selfie of the website creator wearing a green shirt, fitting the website theme. The face is obscured." title="hi!">
<p>Hi! I'm Deniz. Welcome to my website! I keep rewriting this introduction but I'm REALLY bad at this type of stuff.</p>
<p>I made this website because I really don't like modern social media and I wanted a more creative way of expressing myself without giving in to the attention economy or submitting all my data including my soul to some megacorp. That's why you'll find a bunch of stuff here that interests me: programming, gamedev, 3D modelling, electronic music, drawing, electronics and microcontroller programming, Linux and self-hosting, and probably some other stuff too. I am currently developing at least one game and I am also posting random things on my blog, both of which you can find linked above and below.</p>
<p>I listen to A LOT of music (fav artists: <a href="https://acloudyskye.bandcamp.com/">acloudyskye</a>, <a href="https://jaronsteele.bandcamp.com/">Jaron</a>, <a href="https://janeremover.bandcamp.com/">Jane Remover</a>) and I enjoy dabbling around in <a href="https://godotengine.org/">Godot</a> and <a href="https://blender.org/">Blender</a>. I also use <a href="https://fedoraproject.org/">Fedora KDE</a>... btw. Want to know more about me and this website? Firstly, <i>why?</i> But also, <a href="/meta/about">here</a>!</p>
<p>irl I am from 🇩🇪 Northern Germany and studying to become a secondary school teacher.</p>
</div>
<p>Hi! I'm Deniz. Welcome to my website! I keep rewriting this introduction but I'm REALLY bad at this type of stuff.</p>
<p>I made this website because I really don't like modern social media and I wanted a more creative way of expressing myself without giving in to the attention economy or submitting all my data including my soul to some megacorp. That's why you'll find a bunch of stuff here that interests me: programming, gamedev, 3D modelling, electronic music, drawing, electronics and microcontroller programming, Linux and self-hosting, and probably some other stuff too. I am currently developing at least one game and I am also posting random things on my blog, both of which you can find linked above and below.</p>
<p>I listen to A LOT of music (fav artists: <a href="https://acloudyskye.bandcamp.com/">acloudyskye</a>, <a href="https://jaronsteele.bandcamp.com/">Jaron</a>, <a href="https://janeremover.bandcamp.com/">Jane Remover</a>) and I enjoy dabbling around in <a href="https://godotengine.org/">Godot</a> and <a href="https://blender.org/">Blender</a>. I also use <a href="https://fedoraproject.org/">Fedora KDE</a>... btw. Want to know more about me and this website? Firstly, <i>why?</i> But also, <a href="/meta/about">here</a>!</p>
<p>irl I am from 🇩🇪 Northern Germany and studying to become a secondary school teacher.</p>
</div>
<div class="split-container">
<div class="meta-vertical-container">
<div class="meta-container info-container">
<a class="status-header-link" href="/"><h4 class="update-header">latest status</h4></a>
<p class="status-content">{latestStatusContent}</p>
<span class="status-timestamp">:: {latestStatusTimestamp}</span>
</div>
<div class="meta-container info-container">
<h4 class="update-header">heads-up</h4>
<div>
<div class="sidebox-container">
<h4 class="sidebox-header">heads-up</h4>
<p>This website works best on Firefox and other Gecko-based browsers! All pages <i>should</i> be responsive and work on mobile.</p>
<hr>
<a class="sidebox-header-link" href="/"><h4 class="sidebox-header">latest status</h4></a>
<p class="status-content">"{latestStatusContent}"</p>
<span class="status-timestamp">:: {latestStatusTimestamp}</span>
<!-- <hr>
<a class="sidebox-header-link" href="/meta/updates"><h4 class="sidebox-header">website updates <span class="small-supertext">(new!)</span></h4></a>
{#each updateEntriesTrimmed as entry}
<UpdateEntry {entry} />
{/each} -->
</div>
</div>
<div class="meta-container update-container">
<a class="update-header-link" href="/meta/updates"><h4 class="update-header">website updates <span class="small-supertext">(new!)</span></h4></a>
{#each updateEntriesTrimmed as entry}
<UpdateEntry {entry} />
{/each}
</div>
</div>
<hr>
<GalleryRow entries={galleryTopRow} />
<GalleryRow entries={galleryBottomRow} />
<hr>
<div class="split-container">
<div class="webring-container">
@@ -174,6 +178,11 @@
</Content>
<style>
.split-intro-container {
display: grid;
grid-template-columns: 3fr 1fr;
}
.split-container {
width: 100%;
display: flex;
@@ -219,36 +228,24 @@
margin-right: 12px;
}
.meta-vertical-container {
flex: 3;
display: flex;
flex-direction: column;
gap: 8px;
}
.meta-container {
.sidebox-container {
padding: 8px 24px;
backdrop-filter: blur(var(--blur-radius-background));
border-width: var(--border-dash-size);
border-style: var(--border-style);
border-color: var(--color-highlight-alt);
/* transition: border-radius var(--duration-animation) var(--anim-curve); */
/* border-radius: var(--border-radius); */
}
.info-container {
.sidebox-container hr {
border-color: var(--color-highlight-alt);
}
.info-container p, .info-container a {
font-size: 1.0rem;
line-height: 1.4rem;
}
.info-container > h4 {
color: var(--color-highlight-alt);
margin: 16px 0;
}
.update-container {
border-color: var(--color-highlight);
flex: 4;
.sidebox-container p, .sidebox-container a {
font-size: 0.9rem;
line-height: 1.3rem;
}
.status-content {
@@ -278,29 +275,25 @@
padding-bottom: 16px;
}
.update-header-link, .status-header-link {
.sidebox-header {
font-size: 1.0rem;
line-height: 1.0rem;
margin-top: 8px;
color: var(--color-highlight-alt);
}
.sidebox-header-link {
text-decoration: none;
}
.update-header-link:hover {
text-decoration-color: var(--color-highlight);
}
.status-header-link:hover {
.sidebox-header-link:hover {
text-decoration-color: var(--color-highlight-alt);
}
.update-header-link:hover, .status-header-link:hover {
.sidebox-header-link:hover {
text-decoration-line: underline;
text-decoration-style: dashed;
text-decoration-thickness: var(--border-dash-size);
}
.status-header-link .update-header {
color: var(--color-highlight-alt);
}
.update-header {
margin-top: 8px;
}
.gradient-title {
background: linear-gradient(
90deg,

7
src/routes/blog/[year]/[date]/+page.svelte
View File

@@ -15,9 +15,12 @@
<Content>
<Banner2
title="{data.title}"
date="{data.date}, {data.time}"
subtitle="{data.subtitle}"
date="{data.date}"
dateUpdated="{data.dateUpdated}"
banner="{data.banner}"
bannerAlt="Banner for blog post '{data.title}'" />
bannerAlt="Banner for blog post '{data.title}'"
tags={data.tags} />
<TableOfContents />

10
src/routes/blog/[year]/[date]/+page.ts
View File

@@ -1,24 +1,30 @@
import { posts, type BlogPostLink } from '../../posts';
import { BlogPostTag, posts, type BlogPostLink } from '../../posts';
export async function load({ params }) {
const post = await import(`../../${params.year}/${params.date}.md`);
const tag: string = `${params.year}/${params.date}`;
const tag: string = `${params.year}/${params.date}`; // link to the page. not to be confused with tags. i know it's confusing naming
const postValues = posts.find((v: BlogPostLink) => v.key == tag)?.post;
const content = post.default;
const title: string = postValues?.title ?? "";
const subtitle: string = postValues?.subtitle ?? "";
const date: string = postValues?.date ?? "";
const dateUpdated: string = postValues?.dateUpdated ?? "";
const time: string = postValues?.time ?? "";
const banner: string = postValues?.banner ?? "";
const description: string = postValues?.description ?? "";
const tags: BlogPostTag[] = postValues?.tags ?? []; // blog post tags. should be renamed 'keywords'
return {
content,
title,
subtitle,
banner,
date,
dateUpdated,
time,
tag,
tags,
description,
};
}

5
src/routes/blog/posts.ts
View File

@@ -4,11 +4,14 @@ export interface BlogPostDetails {
// Format: HH:mm
time: string;
dateUpdated?: string;
// Banner image title. If empty, defaults to banner.webp
banner: string;
bannerAlt: string;
title: string;
subtitle?: string;
/**
* Description to be used in page's metadata.
@@ -67,6 +70,7 @@ export const posts: BlogPostLink[] = [
post: {
date: "2026-03-17",
time: "17:00",
dateUpdated: "2026-03-25",
banner: "banner.webp",
bannerAlt: "A Microsoft Surface Pro 8 displaying a Blue Screen of Death.",
title: "How To: Set Up SvelteKit Frontend + PostgreSQL Backend",
@@ -110,6 +114,7 @@ export const posts: BlogPostLink[] = [
post: {
date: "2026-02-05",
time: "22:55",
dateUpdated: "2026-03-05",
banner: "banner.webp",
bannerAlt: "A Leuchtturm-branded notebook with a copper-coloured cover. An eraser, a pencil sharpener, and a Faber-Castell pencil are lying on top.",
title: "Drawing Challenge",