moved CSS rules so that link lists and ul look identical; adjusted header
This commit is contained in:
@@ -57,11 +57,18 @@
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
|
margin: var(--margin-header-top) 0 var(--margin-header-bottom) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-container + hr {
|
||||||
|
/* Add top margin if no date element exists */
|
||||||
|
margin-top: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.date {
|
.date {
|
||||||
@@ -75,5 +82,6 @@
|
|||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 1.0rem;
|
font-size: 1.0rem;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -1,47 +1,28 @@
|
|||||||
{#snippet headerContent()}
|
{#snippet headerContent()}
|
||||||
<a class="favicon" href="/">
|
<a href="/">Home</a>
|
||||||
<img class="favicon-image" src="/favicon.webp" alt="Favicon">
|
|
||||||
</a>
|
|
||||||
<a href="/projects">Projects</a>
|
<a href="/projects">Projects</a>
|
||||||
<a href="/projects/projectn5/devlog">Project N5</a>
|
<a href="/projects/projectn5/devlog">Project N5</a>
|
||||||
<a href="/blog">Blog</a>
|
<a href="/blog">Blog</a>
|
||||||
<a href="/about">About</a>
|
<a href="/about">About</a>
|
||||||
{/snippet}
|
{/snippet}
|
||||||
|
|
||||||
<!-- <div class="header-content coloured-header">
|
<div class="header-content">
|
||||||
{@render headerContent()}
|
{@render headerContent()}
|
||||||
</div> -->
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.header-content {
|
.header-content {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 72px;
|
max-width: var(--page-width);
|
||||||
|
/* min-height: 72px; */
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
gap: 20px;
|
gap: 16px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0 24px;
|
padding: 0 var(--margin-content-side);
|
||||||
}
|
margin: 0 auto;
|
||||||
|
|
||||||
.coloured-header {
|
|
||||||
background: linear-gradient(90deg, var(--color-background-highlight) 62%, var(--color-header-highlight) 95%);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* .transparent-header {
|
|
||||||
background: linear-gradient(90deg, var(--color-background-highlight) 62%, var(--color-header-highlight) 95%);
|
|
||||||
} */
|
|
||||||
|
|
||||||
.favicon {
|
|
||||||
background: url("/favicon.webp");
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.favicon-image {
|
|
||||||
width: initial;
|
|
||||||
max-height: 32px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
@@ -49,7 +30,6 @@
|
|||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transition: 0.2s ease-in-out color;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a:link {
|
a:link {
|
||||||
|
|||||||
@@ -12,55 +12,17 @@
|
|||||||
} = $props();
|
} = $props();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<ul class="styled-list">
|
{#snippet listEntry({ entry }: { entry: LinkEntry })}
|
||||||
|
{#if entry.icon}
|
||||||
|
<img height="24px" src={entry.icon} alt="Icon">
|
||||||
|
{/if}
|
||||||
|
{@html entry.text}
|
||||||
|
{/snippet}
|
||||||
|
|
||||||
|
<div class="list">
|
||||||
{#each entries as entry}
|
{#each entries as entry}
|
||||||
<li>
|
|
||||||
<a href={entry.link}>
|
<a href={entry.link}>
|
||||||
{#if entry.icon}
|
{@render listEntry({entry})}
|
||||||
<img height="24px" src={entry.icon} alt="Icon">
|
|
||||||
{/if}
|
|
||||||
{@html entry.text}
|
|
||||||
</a>
|
</a>
|
||||||
</li>
|
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</div>
|
||||||
|
|
||||||
<style>
|
|
||||||
li {
|
|
||||||
--notch-size-link: 10px;
|
|
||||||
clip-path: polygon(
|
|
||||||
0% var(--notch-size-link),
|
|
||||||
var(--notch-size-link) 0%,
|
|
||||||
calc(100% - var(--notch-size-link)) 0%,
|
|
||||||
100% var(--notch-size-link),
|
|
||||||
100% calc(100% - var(--notch-size-link)),
|
|
||||||
calc(100% - var(--notch-size-link)) 100%,
|
|
||||||
var(--notch-size-link) 100%,
|
|
||||||
0% calc(100% - var(--notch-size-link))
|
|
||||||
);
|
|
||||||
}
|
|
||||||
li:hover {
|
|
||||||
background-color: var(--color-background-highlight-hover);
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
width: 100%;
|
|
||||||
transition: color 0.2s ease-in-out;
|
|
||||||
}
|
|
||||||
a:link, a:visited {
|
|
||||||
color: var(--color-text);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
color: var(--color-highlight);
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
filter: var(--color-text-img);
|
|
||||||
margin-top: 4px;
|
|
||||||
margin-bottom: -4px;
|
|
||||||
width: fit-content !important;
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -2,9 +2,9 @@
|
|||||||
import {onMount} from 'svelte';
|
import {onMount} from 'svelte';
|
||||||
|
|
||||||
let {
|
let {
|
||||||
disableStickyScrolling,
|
stickyScrolling,
|
||||||
}: {
|
}: {
|
||||||
disableStickyScrolling?: boolean;
|
stickyScrolling?: boolean;
|
||||||
} = $props();
|
} = $props();
|
||||||
|
|
||||||
let idCounter: number = 0;
|
let idCounter: number = 0;
|
||||||
@@ -64,12 +64,12 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if disableStickyScrolling}
|
{#if stickyScrolling}
|
||||||
<div class="toc-container notched" bind:this={root}>
|
<div class="toc-container notched sticky-toc" bind:this={root}>
|
||||||
{@render tocList()}
|
{@render tocList()}
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<div class="toc-container notched sticky-toc" bind:this={root}>
|
<div class="toc-container notched" bind:this={root}>
|
||||||
{@render tocList()}
|
{@render tocList()}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
@@ -6,10 +6,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="webring-row">
|
<div class="webring-row">
|
||||||
<span>〔</span>
|
<span>〔</span>
|
||||||
<a href="https://www.rainbowcemetery.com/devring/prev.php?id=18">↫ PREV</a>
|
<a href="https://www.rainbowcemetery.com/devring/prev.php?id=18"><< PREV</a>
|
||||||
<a href="https://www.rainbowcemetery.com/devring/rand.php?id=18">RAND</a>
|
<a href="https://www.rainbowcemetery.com/devring/rand.php?id=18">RAND</a>
|
||||||
<a href="https://www.rainbowcemetery.com/devring/list.php?id=18">LIST</a>
|
<a href="https://www.rainbowcemetery.com/devring/list.php?id=18">LIST</a>
|
||||||
<a href="https://www.rainbowcemetery.com/devring/next.php?id=18">NEXT ↬</a>
|
<a href="https://www.rainbowcemetery.com/devring/next.php?id=18">NEXT >></a>
|
||||||
<span>〕</span>
|
<span>〕</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -26,7 +26,7 @@
|
|||||||
margin: 0 4px;
|
margin: 0 4px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
a:link, a:visited {
|
a:link, a:visited, span {
|
||||||
color: var(--color-highlight);
|
color: var(--color-highlight);
|
||||||
}
|
}
|
||||||
a:hover {
|
a:hover {
|
||||||
@@ -40,5 +40,6 @@
|
|||||||
}
|
}
|
||||||
span {
|
span {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -131,6 +131,9 @@
|
|||||||
--font-size-h3: 1.3rem;
|
--font-size-h3: 1.3rem;
|
||||||
--font-size-h4: 1.2rem;
|
--font-size-h4: 1.2rem;
|
||||||
|
|
||||||
|
--margin-header-top: 16px;
|
||||||
|
--margin-header-bottom: 8px;
|
||||||
|
|
||||||
/* page sizing */
|
/* page sizing */
|
||||||
--page-width: 1000px;
|
--page-width: 1000px;
|
||||||
--screen-width-mobile: 800px;
|
--screen-width-mobile: 800px;
|
||||||
@@ -181,27 +184,6 @@
|
|||||||
margin: 12px 0;
|
margin: 12px 0;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
ul {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
li::before {
|
|
||||||
content: "–";
|
|
||||||
font-weight: 900;
|
|
||||||
color: var(--color-highlight);
|
|
||||||
padding-right: 8px;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
display: flex;
|
|
||||||
padding-left: 0;
|
|
||||||
margin-top: 4px;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
transition: background-color 0.2s ease-in-out;
|
|
||||||
padding: 2px 12px;
|
|
||||||
}
|
|
||||||
li a {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* #region Headers */
|
/* #region Headers */
|
||||||
/* All headers */
|
/* All headers */
|
||||||
@@ -209,8 +191,8 @@
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
color: var(--color-highlight);
|
color: var(--color-highlight);
|
||||||
margin-top: 16px;
|
margin-top: var(--margin-header-top);
|
||||||
margin-bottom: 8px;
|
margin-bottom: var(--margin-header-bottom);
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -259,6 +241,7 @@
|
|||||||
height: 1px;
|
height: 1px;
|
||||||
border: none;
|
border: none;
|
||||||
border-top: 2px dashed var(--color-highlight);
|
border-top: 2px dashed var(--color-highlight);
|
||||||
|
margin: 8px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
code, .code-block {
|
code, .code-block {
|
||||||
@@ -342,59 +325,58 @@
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-subtitle {
|
|
||||||
color: var(--color-highlight);
|
|
||||||
font-weight: 700;
|
|
||||||
font-style: italic;
|
|
||||||
margin-top: 0;
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-banner-container {
|
|
||||||
position: relative;
|
|
||||||
width: 80%;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-banner {
|
|
||||||
margin: 0; /* reset left/right margins */
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-icon {
|
|
||||||
float: left;
|
|
||||||
margin: 16px 16px 16px 0;
|
|
||||||
width: 20%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-date {
|
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: 700;
|
|
||||||
line-height: 1rem;
|
|
||||||
width: fit-content;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
color: var(--color-text-dark);
|
|
||||||
background-color: var(--color-highlight);
|
|
||||||
font-family: var(--font-stylised);
|
|
||||||
padding: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-date-embed {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pixelated-img {
|
.pixelated-img {
|
||||||
image-rendering: pixelated;
|
image-rendering: pixelated;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* #region Lists (ul and LinkList) */
|
||||||
|
.list, ul {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list a, li {
|
||||||
|
width: 100%;
|
||||||
|
/* transition: color 0.1s ease-in-out; */
|
||||||
|
margin: 0;
|
||||||
|
padding: 4px 0;
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
.list a::before, li::before {
|
||||||
|
content: "–";
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--color-highlight);
|
||||||
|
margin: 0 4px 0 12px;
|
||||||
|
}
|
||||||
|
li::before {
|
||||||
|
padding-right: 8px;
|
||||||
|
}
|
||||||
|
.list a:hover::before {
|
||||||
|
content: ">";
|
||||||
|
}
|
||||||
|
.list a:link, .list a:visited, li {
|
||||||
|
color: var(--color-text);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.list a:hover {
|
||||||
|
color: var(--color-highlight);
|
||||||
|
}
|
||||||
|
|
||||||
|
.list img {
|
||||||
|
filter: var(--color-text-img);
|
||||||
|
margin-top: 4px;
|
||||||
|
margin-bottom: -4px;
|
||||||
|
width: fit-content !important;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
/* #endregion */
|
||||||
|
|
||||||
@media screen and (max-width: 800px) {
|
@media screen and (max-width: 800px) {
|
||||||
h1 {
|
/* h1 {
|
||||||
font-size: 2.3rem;
|
font-size: 2.3rem;
|
||||||
line-height: 2.4rem;
|
line-height: 2.4rem;
|
||||||
}
|
}
|
||||||
@@ -412,7 +394,7 @@
|
|||||||
h4, h5, h6 {
|
h4, h5, h6 {
|
||||||
font-size: 1.4rem;
|
font-size: 1.4rem;
|
||||||
line-height: 1.4rem;
|
line-height: 1.4rem;
|
||||||
}
|
} */
|
||||||
|
|
||||||
/* p, span, li, pre, a {
|
/* p, span, li, pre, a {
|
||||||
} */
|
} */
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import BannerTitleAlt from "$lib/banner-title-alt.svelte";
|
import Banner2 from "$lib/banner2.svelte";
|
||||||
import ContentSidebar from "$lib/content-sidebar.svelte";
|
import Content from "$lib/content.svelte";
|
||||||
import TableOfContents from "$lib/table-of-contents.svelte";
|
import TableOfContents from "$lib/table-of-contents.svelte";
|
||||||
import LinkList, { type LinkEntry } from "$lib/link-list.svelte";
|
import LinkList, { type LinkEntry } from "$lib/link-list.svelte";
|
||||||
|
|
||||||
@@ -36,80 +36,76 @@
|
|||||||
<title>About Me | denizk0461</title>
|
<title>About Me | denizk0461</title>
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<BannerTitleAlt
|
<Content>
|
||||||
title="About Me"
|
<Banner2
|
||||||
banner="/common/me/b.webp"
|
title="About Me"
|
||||||
bannerAlt="Mirror picture of me, pixelated beyond recognition"
|
banner="/common/me/b.webp"
|
||||||
subtitle="If you'd like to learn more about me"
|
bannerAlt="Mirror picture of me, pixelated beyond recognition"
|
||||||
pixelated
|
subtitle="If you'd like to learn more about me"
|
||||||
/>
|
pixelated />
|
||||||
|
|
||||||
<ContentSidebar>
|
<TableOfContents />
|
||||||
|
|
||||||
<TableOfContents slot="side-left" />
|
<p>Hi there! I'm Deniz (he/him/they). Welcome to my website!</p>
|
||||||
|
|
||||||
|
<p>On this website, I share my programming projects, but also a couple of other creative works. If you scroll down, though, you can find out a little more about me!</p>
|
||||||
|
|
||||||
|
<h2 id="does">What I Do</h2>
|
||||||
|
|
||||||
|
<p>I like dabbling in all kinds of creative endeavours. What I do most is programming, but there are other things too! I do...</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>Game development using Godot</li>
|
||||||
|
<li>3D modelling in Blender</li>
|
||||||
|
<li>CAD in Fusion 360 for 3D printing (and starting to learn FreeCAD)</li>
|
||||||
|
<li>Android app development</li>
|
||||||
|
<li>A little bit of web development; this website is made using SvelteKit!</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p>I'm also currently studying to become a secondary school teacher.</p>
|
||||||
|
|
||||||
|
<h2 id="likes">Things I Like</h2>
|
||||||
|
|
||||||
|
<p>I spend a lot of time programming and listening to electronic music. I also like nature parks, public transport, oxford commas (possibly because I'm German) and <b>en</b> dashes (not <b>em</b> dashes), <a href="https://en.wikipedia.org/wiki/ISO_8601">ISO 8601</a>, peach iced tea, and rice with chili oil and tofu.</p>
|
||||||
|
|
||||||
|
<h3 id="music">Music</h3>
|
||||||
|
|
||||||
|
<img alt="Vinyl record sleeves displayed on a wall" src="records.webp">
|
||||||
|
|
||||||
|
<p>My taste in music is always developing, but one things that remains constant is that I enjoy electronic music of all kinds. This began when I first listened to Avicii's early singles such as <i>Levels</i>, <i>Fade Into Darkness</i>, <i>Silhouettes</i>, and <i>I Could Be The One</i> on Viva (the television channel).</p>
|
||||||
|
|
||||||
|
<p>The vast majority of the time, I listen to albums instead of shuffling singles. I prefer putting on an album so that I can immerse myself in the cohesive vision an artist had for their work. I also think that buying music is much better than streaming off a greedy "music" platform, which is why I have a large library of music compiled from Bandcamp purchases, vinyl and CD downloads and rips, freely-available downloads, and possibly some other sources, which I can always listen to without the need for a subscription or an internet connection.</p>
|
||||||
|
|
||||||
<div slot="main">
|
<p>Some of my current favourite albums include:</p>
|
||||||
<p>Hi there! I'm Deniz (he/him/they). Welcome to my website!</p>
|
|
||||||
|
|
||||||
<p>On this website, I share my programming projects, but also a couple of other creative works. If you scroll down, though, you can find out a little more about me!</p>
|
<LinkList entries={favouriteAlbums} />
|
||||||
|
|
||||||
<h2 id="does">What I Do</h2>
|
<p>Avicii's first album <i>True</i> has a special place in my heart.</p>
|
||||||
|
|
||||||
<p>I like dabbling in all kinds of creative endeavours. What I do most is programming, but there are other things too! I do...</p>
|
<h3 id="games">Video Games</h3>
|
||||||
|
|
||||||
<ul class="styled-list">
|
<p>My favourite game of all time is 2004's <i>Ratchet & Clank 3</i>. I've played this game countless times ever it since released.</p>
|
||||||
<li>Game development using Godot</li>
|
|
||||||
<li>3D modelling in Blender</li>
|
|
||||||
<li>CAD in Fusion 360 for 3D printing (and starting to learn FreeCAD)</li>
|
|
||||||
<li>Android app development</li>
|
|
||||||
<li>A little bit of web development; this website is made using SvelteKit!</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<p>I'm also currently studying to become a secondary school teacher.</p>
|
<p>I've had a PlayStation 2 and the first four <i>Ratchet & Clank</i> games for as long as I can remember. I still play these games every now and then, though nowadays I use the <a href="https://pcsx2.net">PCSX2</a> emulator (which has gotten extremely good in recent years!!) and a DualSense controller.</p>
|
||||||
|
|
||||||
<h2 id="likes">Things I Like</h2>
|
<p>Other games I've enjoyed include:</p>
|
||||||
|
|
||||||
<p>I spend a lot of time programming and listening to electronic music. I also like nature parks, public transport, oxford commas (possibly because I'm German) and <b>en</b> dashes (not <b>em</b> dashes), <a href="https://en.wikipedia.org/wiki/ISO_8601">ISO 8601</a>, peach iced tea, and rice with chili oil and tofu.</p>
|
<ul>
|
||||||
|
<li>1000xRESIST</li>
|
||||||
|
<li>A Hat in Time</li>
|
||||||
|
<li>Balatro</li>
|
||||||
|
<li>Celeste</li>
|
||||||
|
<li>Cities: Skylines</li>
|
||||||
|
<li>Jak & Daxter</li>
|
||||||
|
<li>The Simpsons: Hit & Run</li>
|
||||||
|
<li>STRAFTAT</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
<h3 id="music">Music</h3>
|
<h2 id="dislikes">What I Don't Do</h2>
|
||||||
|
|
||||||
<img alt="Vinyl record sleeves displayed on a wall" src="records.webp">
|
<p>I do NOT use generative AI. Every line of code and every work I produce comes straight from my brain and my own two hands. I believe the use of AI – especially to substitute creative works – to be wrong, and I condone its use in programming, arts, academia, and wherever else.</p>
|
||||||
|
|
||||||
<p>My taste in music is always developing, but one things that remains constant is that I enjoy electronic music of all kinds. This began when I first listened to Avicii's early singles such as <i>Levels</i>, <i>Fade Into Darkness</i>, <i>Silhouettes</i>, and <i>I Could Be The One</i> on Viva (the television channel).</p>
|
<p>I'm also not a social media person. I've tried for years to use it so I could connect with my friends, who all used it extensively, but I was never able to stick with it. I had three Instagram accounts, a Twitter account, some Reddit accounts, and even two Facebook accounts in the past, but they are all gone now. Currently, I do have a <a href="https://bsky.app/denizk0461.dev">Bluesky</a> account, but it's not seen much use either. In fact, in recent times, I've tried getting away from social media and phone overuse to waste less time on slop posted on social media and have more time free to pursue hobbies and other things I enjoy doing.</p>
|
||||||
|
|
||||||
<p>The vast majority of the time, I listen to albums instead of shuffling singles. I prefer putting on an album so that I can immerse myself in the cohesive vision an artist had for their work. I also think that buying music is much better than streaming off a greedy "music" platform, which is why I have a large library of music compiled from Bandcamp purchases, vinyl and CD downloads and rips, freely-available downloads, and possibly some other sources, which I can always listen to without the need for a subscription or an internet connection.</p>
|
<p><i>Last updated: 2025-12-20</i></p>
|
||||||
|
</Content>
|
||||||
<p>Some of my current favourite albums include:</p>
|
|
||||||
|
|
||||||
<LinkList entries={favouriteAlbums}/>
|
|
||||||
|
|
||||||
<p>Avicii's first album <i>True</i> has a special place in my heart.</p>
|
|
||||||
|
|
||||||
<h3 id="games">Video Games</h3>
|
|
||||||
|
|
||||||
<p>My favourite game of all time is 2004's <i>Ratchet & Clank 3</i>. I've played this game countless times ever it since released.</p>
|
|
||||||
|
|
||||||
<p>I've had a PlayStation 2 and the first four <i>Ratchet & Clank</i> games for as long as I can remember. I still play these games every now and then, though nowadays I use the <a href="https://pcsx2.net">PCSX2</a> emulator (which has gotten extremely good in recent years!!) and a DualSense controller.</p>
|
|
||||||
|
|
||||||
<p>Other games I've enjoyed include:</p>
|
|
||||||
|
|
||||||
<ul class="styled-list">
|
|
||||||
<li>1000xRESIST</li>
|
|
||||||
<li>A Hat in Time</li>
|
|
||||||
<li>Balatro</li>
|
|
||||||
<li>Celeste</li>
|
|
||||||
<li>Cities: Skylines</li>
|
|
||||||
<li>Jak & Daxter</li>
|
|
||||||
<li>The Simpsons: Hit & Run</li>
|
|
||||||
<li>STRAFTAT</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2 id="dislikes">What I Don't Do</h2>
|
|
||||||
|
|
||||||
<p>I do NOT use generative AI. Every line of code and every work I produce comes straight from my brain and my own two hands. I believe the use of AI – especially to substitute creative works – to be wrong, and I condone its use in programming, arts, academia, and wherever else.</p>
|
|
||||||
|
|
||||||
<p>I'm also not a social media person. I've tried for years to use it so I could connect with my friends, who all used it extensively, but I was never able to stick with it. I had three Instagram accounts, a Twitter account, some Reddit accounts, and even two Facebook accounts in the past, but they are all gone now. Currently, I do have a <a href="https://bsky.app/denizk0461.dev">Bluesky</a> account, but it's not seen much use either. In fact, in recent times, I've tried getting away from social media and phone overuse to waste less time on slop posted on social media and have more time free to pursue hobbies and other things I enjoy doing.</p>
|
|
||||||
|
|
||||||
<p><i>Last updated: 2025-12-20</i></p>
|
|
||||||
</div>
|
|
||||||
</ContentSidebar>
|
|
||||||
@@ -1,9 +1,9 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Banner2 from "$lib/banner2.svelte";
|
import Banner2 from "$lib/banner2.svelte";
|
||||||
import Content from "$lib/content.svelte";
|
import Content from "$lib/content.svelte";
|
||||||
import LinkList, { type LinkEntry } from "$lib/link-list.svelte";
|
import List, { type ListEntry } from "$lib/link-list.svelte";
|
||||||
|
|
||||||
let feeds: LinkEntry[] = [
|
let feeds: ListEntry[] = [
|
||||||
{
|
{
|
||||||
text: "Project N5 devlog",
|
text: "Project N5 devlog",
|
||||||
link: "/projects/projectn5/devlog/feed.xml",
|
link: "/projects/projectn5/devlog/feed.xml",
|
||||||
@@ -24,5 +24,5 @@
|
|||||||
<Content>
|
<Content>
|
||||||
<p>This is a list of RSS feeds I maintain on this website. You can subscribe to them by adding the link of any feed to an RSS reader of your liking.</p>
|
<p>This is a list of RSS feeds I maintain on this website. You can subscribe to them by adding the link of any feed to an RSS reader of your liking.</p>
|
||||||
|
|
||||||
<LinkList entries={feeds} />
|
<List entries={feeds} />
|
||||||
</Content>
|
</Content>
|
||||||
@@ -1,10 +1,10 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import BannerTitleAlt from "$lib/banner-title-alt.svelte";
|
import Banner2 from "$lib/banner2.svelte";
|
||||||
import TableOfContents from "$lib/table-of-contents.svelte";
|
import TableOfContents from "$lib/table-of-contents.svelte";
|
||||||
import type { Project } from './projects';
|
import type { Project } from './projects';
|
||||||
import { projects } from './projects';
|
import { projects } from './projects';
|
||||||
import LinkList from "$lib/link-list.svelte";
|
import LinkList from "$lib/link-list.svelte";
|
||||||
import ContentSidebar from "$lib/content-sidebar.svelte";
|
import Content from "$lib/content.svelte";
|
||||||
|
|
||||||
let getActiveProjects = function(projects: Project[], isActive: boolean): Project[] {
|
let getActiveProjects = function(projects: Project[], isActive: boolean): Project[] {
|
||||||
var result: Project[] = [];
|
var result: Project[] = [];
|
||||||
@@ -21,72 +21,115 @@
|
|||||||
<title>Projects | denizk0461</title>
|
<title>Projects | denizk0461</title>
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<BannerTitleAlt
|
<Content>
|
||||||
title="My Disordered Projects"
|
<Banner2
|
||||||
banner="/projects/banner.webp"
|
title="My Disordered Projects"
|
||||||
bannerAlt="Closeup of the purple protagonist from Project N5"
|
banner="/projects/banner.webp"
|
||||||
subtitle="Things I have worked on"
|
bannerAlt="Closeup of the purple protagonist from Project N5"
|
||||||
/>
|
subtitle="Things I have worked on" />
|
||||||
|
|
||||||
<ContentSidebar>
|
<TableOfContents />
|
||||||
<TableOfContents slot="side-left" />
|
|
||||||
|
|
||||||
<div slot="main">
|
<h2 id="games">Games</h2>
|
||||||
<h2 id="games">Games</h2>
|
{#each projects as project}
|
||||||
{#each projects as project}
|
{#if project.type == "game"}
|
||||||
{#if project.type == "game"}
|
{@render projectSummary({ project: project })}
|
||||||
{@render projectSummary({ project: project })}
|
{/if}
|
||||||
{/if}
|
{/each}
|
||||||
{/each}
|
<h2 id="hardware">Hardware</h2>
|
||||||
<h2 id="hardware">Hardware</h2>
|
{#each projects as project}
|
||||||
{#each projects as project}
|
{#if project.type == "hardware"}
|
||||||
{#if project.type == "hardware"}
|
{@render projectSummary({ project: project })}
|
||||||
{@render projectSummary({ project: project })}
|
{/if}
|
||||||
{/if}
|
{/each}
|
||||||
{/each}
|
<h2 id="apps">Apps</h2>
|
||||||
<h2 id="apps">Apps</h2>
|
{#each projects as project}
|
||||||
{#each projects as project}
|
{#if project.type == "app"}
|
||||||
{#if project.type == "app"}
|
{@render projectSummary({ project: project })}
|
||||||
{@render projectSummary({ project: project })}
|
{/if}
|
||||||
{/if}
|
{/each}
|
||||||
{/each}
|
<h2 id="music">Music</h2>
|
||||||
<h2 id="music">Music</h2>
|
{#each projects as project}
|
||||||
{#each projects as project}
|
{#if project.type == "music"}
|
||||||
{#if project.type == "music"}
|
{@render projectSummary({ project: project })}
|
||||||
{@render projectSummary({ project: project })}
|
{/if}
|
||||||
{/if}
|
{/each}
|
||||||
{/each}
|
</Content>
|
||||||
</div>
|
|
||||||
</ContentSidebar>
|
|
||||||
|
|
||||||
{#snippet projectSummary({
|
{#snippet projectSummary({
|
||||||
project
|
project
|
||||||
}: {
|
}: {
|
||||||
project: Project;
|
project: Project;
|
||||||
})}
|
})}
|
||||||
<div>
|
<h3 id="{project.id}">{project.title}</h3>
|
||||||
<h3 id="{project.id}">{project.title}</h3>
|
{#if project.subtitle}
|
||||||
{#if project.subtitle}
|
<p class="project-subtitle">[ {project.subtitle} ]</p>
|
||||||
<p class="project-subtitle">» {project.subtitle}</p>
|
{/if}
|
||||||
{/if}
|
{#if project.banner}
|
||||||
{#if project.banner}
|
|
||||||
<div class="project-banner-container">
|
<div class="project-banner-container">
|
||||||
<img class="project-banner" src="{project.banner}" alt="Overview banner for {project.title}">
|
<img class="project-banner" src="{project.banner}" alt="Overview banner for {project.title}">
|
||||||
{#if project.date}
|
{#if project.date}
|
||||||
<p class="project-date project-date-embed">{project.date}</p>
|
<p class="project-date project-date-embed">{project.date}</p>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
{#if project.date}
|
{#if project.date}
|
||||||
<p class="project-date">{project.date}</p>
|
<p class="project-date">{project.date}</p>
|
||||||
{/if}
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
{#if project.icon}
|
{#if project.icon}
|
||||||
<img class="project-icon" src="{project.icon}" alt="Icon for {project.title}">
|
<img class="project-icon" src="{project.icon}" alt="Icon for {project.title}">
|
||||||
{/if}
|
{/if}
|
||||||
{#each project.paragraphs as paragraph}
|
{#each project.paragraphs as paragraph}
|
||||||
<p>{@html paragraph}</p>
|
<p>{@html paragraph}</p>
|
||||||
{/each}
|
{/each}
|
||||||
<LinkList entries={project.links} />
|
<LinkList entries={project.links} />
|
||||||
</div>
|
{/snippet}
|
||||||
{/snippet}
|
|
||||||
|
<style>
|
||||||
|
.project-subtitle {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 1.0rem;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-banner-container {
|
||||||
|
position: relative;
|
||||||
|
width: fit-content;
|
||||||
|
height: 300px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-banner {
|
||||||
|
margin: 0; /* reset left/right margins */
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-icon {
|
||||||
|
float: left;
|
||||||
|
margin: 16px 16px 16px 0;
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-date {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1rem;
|
||||||
|
width: fit-content;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
color: var(--color-text-dark);
|
||||||
|
background-color: var(--color-highlight);
|
||||||
|
font-family: var(--font-stylised);
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-date-embed {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import BannerTitleAlt from "$lib/banner-title-alt.svelte";
|
import Banner2 from "$lib/banner2.svelte";
|
||||||
import Content from "$lib/content.svelte";
|
import Content from "$lib/content.svelte";
|
||||||
import TableOfContents from "$lib/table-of-contents.svelte";
|
import TableOfContents from "$lib/table-of-contents.svelte";
|
||||||
</script>
|
</script>
|
||||||
@@ -8,19 +8,20 @@
|
|||||||
<title>Daisy FM Synth | denizk0461</title>
|
<title>Daisy FM Synth | denizk0461</title>
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<BannerTitleAlt
|
|
||||||
title="Daisy FM Synth"
|
|
||||||
banner="/projects/daisyfm/banner.webp"
|
|
||||||
bannerAlt="Close-up of Daisy, focussed on the effect knobs"/>
|
|
||||||
|
|
||||||
<Content>
|
<Content>
|
||||||
|
<Banner2
|
||||||
|
title="Daisy FM Synth"
|
||||||
|
date="2025-04-04"
|
||||||
|
banner="/projects/daisyfm/banner.webp"
|
||||||
|
bannerAlt="Close-up of Daisy, focussed on the effect knobs"/>
|
||||||
|
|
||||||
<img src="/projects/daisyfm/fullview.webp" alt="Top view of the Daisy FM synth">
|
<img src="/projects/daisyfm/fullview.webp" alt="Top view of the Daisy FM synth">
|
||||||
|
|
||||||
<p>A friend showed me the <a href="https://electro-smith.com/products/daisy-seed">Daisy Seed</a>, an Arduino-compatible microcontroller made for developing audio equipment. With a little bit of motivation and absolutely no experience in either programming synthesisers or electronics in general, I quickly got my hands on one and started to toy around.</p>
|
<p>A friend showed me the <a href="https://electro-smith.com/products/daisy-seed">Daisy Seed</a>, an Arduino-compatible microcontroller made for developing audio equipment. With a little bit of motivation and absolutely no experience in either programming synthesisers or electronics in general, I quickly got my hands on one and started to toy around.</p>
|
||||||
|
|
||||||
<p>So... <i>how did we get here?</i></p>
|
<p>So... <i>how did we get here?</i></p>
|
||||||
|
|
||||||
<TableOfContents disableStickyScrolling />
|
<TableOfContents />
|
||||||
|
|
||||||
<h2 id="creation">How did I make this?</h2>
|
<h2 id="creation">How did I make this?</h2>
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import BannerTitleAlt from "$lib/banner-title-alt.svelte";
|
import Banner2 from "$lib/banner2.svelte";
|
||||||
import Content from "$lib/content.svelte";
|
import Content from "$lib/content.svelte";
|
||||||
// import type { DevlogPost } from "./devlog-posts";
|
// import type { DevlogPost } from "./devlog-posts";
|
||||||
import { posts, type DevlogPost } from "./posts";
|
import { posts, type DevlogPost } from "./posts";
|
||||||
@@ -19,13 +19,11 @@
|
|||||||
<title>Project N5 Devlog | denizk0461</title>
|
<title>Project N5 Devlog | denizk0461</title>
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<BannerTitleAlt
|
|
||||||
title="Project N5; Development Log"
|
|
||||||
banner="/projects/projectn5/banner2.webp"
|
|
||||||
wide
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Content>
|
<Content>
|
||||||
|
<Banner2
|
||||||
|
title="Project N5; Development Log"
|
||||||
|
banner="/projects/projectn5/banner2.webp" />
|
||||||
|
|
||||||
<p>This is the development log for my game <strong>Project N5</strong>! It's an action-adventure jump-and-run game inspired by games such as Ratchet & Clank. Development started on <b>2023-09-16</b> and rebooted on <b>2025-05-16</b>.</p>
|
<p>This is the development log for my game <strong>Project N5</strong>! It's an action-adventure jump-and-run game inspired by games such as Ratchet & Clank. Development started on <b>2023-09-16</b> and rebooted on <b>2025-05-16</b>.</p>
|
||||||
|
|
||||||
<p>2023 progress updates summarise an entire month's work, respectively. Progress updates thereafter denote noteworthy developments in a more collected format.</p>
|
<p>2023 progress updates summarise an entire month's work, respectively. Progress updates thereafter denote noteworthy developments in a more collected format.</p>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import LinkList, { type LinkEntry } from "$lib/link-list.svelte";
|
import List, { type ListEntry } from "$lib/link-list.svelte";
|
||||||
|
|
||||||
let builds: LinkEntry[] = [
|
let builds: ListEntry[] = [
|
||||||
{
|
{
|
||||||
text: "2023-10-07 (Protagonist #1)",
|
text: "2023-10-07 (Protagonist #1)",
|
||||||
link: "https://files.denizk0461.dev/projectn5/2023-10-07.zip",
|
link: "https://files.denizk0461.dev/projectn5/2023-10-07.zip",
|
||||||
@@ -37,7 +37,7 @@ The game, in its state from 2025-05-16 (before the reboot), is available to play
|
|||||||
|
|
||||||
I've also uploaded old builds of the game [here](https://files.denizk0461.dev/projectn5). You'll find the following builds, one for each protagonist:
|
I've also uploaded old builds of the game [here](https://files.denizk0461.dev/projectn5). You'll find the following builds, one for each protagonist:
|
||||||
|
|
||||||
<LinkList entries={builds} />
|
<List entries={builds} />
|
||||||
|
|
||||||
The 2025-08-16 build has not seen work put into it after [2025-05-16](/projects/projectn5/devlog/2025/0523/), bar the build notice on the pause screen.
|
The 2025-08-16 build has not seen work put into it after [2025-05-16](/projects/projectn5/devlog/2025/0523/), bar the build notice on the pause screen.
|
||||||
|
|
||||||
|
|||||||
@@ -21,10 +21,8 @@
|
|||||||
bannerAlt="{data.bannerAlt}"
|
bannerAlt="{data.bannerAlt}"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<TableOfContents disableStickyScrolling />
|
<TableOfContents />
|
||||||
|
|
||||||
<!-- <div slot="main"> -->
|
|
||||||
<svelte:component this={data.content} />
|
<svelte:component this={data.content} />
|
||||||
<!-- </div> -->
|
|
||||||
|
|
||||||
</Content>
|
</Content>
|
||||||
@@ -274,11 +274,11 @@ export const projects: Project[] = [
|
|||||||
title: "Magician",
|
title: "Magician",
|
||||||
subtitle: "Online Multiplayer Card Game",
|
subtitle: "Online Multiplayer Card Game",
|
||||||
paragraphs: [
|
paragraphs: [
|
||||||
"<b>Magician</b> is a clone of the card game <i>Wizard</i>. I've made it primarily to play with friends, but it's also a test for programming client-server multiplayer games. The clients are programmed in Godot, the server in Python, and they communicate via TCP/IP websockets. The game works with 3 to 6 players and requires an active connection to the server, which should be reachable most times.",
|
"<b>Magician</b> is a clone of the card game <i>Wizard</i>. I've made it primarily to play with friends, but it's also a test for programming client-server multiplayer games. The clients are programmed in Godot, the server in Python, and they communicate via TCP/IP websockets. The game works with 3 to 6 players.",
|
||||||
],
|
],
|
||||||
links: [
|
links: [
|
||||||
{
|
{
|
||||||
text: "Play <b>Magician</b>",
|
text: "View the latest <b>Magician</b> build",
|
||||||
link: "//apps.denizk0461.dev/magician",
|
link: "//apps.denizk0461.dev/magician",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|||||||
Reference in New Issue
Block a user