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;
|
||||
align-items: flex-end;
|
||||
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 {
|
||||
box-sizing: border-box;
|
||||
height: fit-content;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.date {
|
||||
@@ -75,5 +82,6 @@
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 500;
|
||||
font-size: 1.0rem;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,47 +1,28 @@
|
||||
{#snippet headerContent()}
|
||||
<a class="favicon" href="/">
|
||||
<img class="favicon-image" src="/favicon.webp" alt="Favicon">
|
||||
</a>
|
||||
<a href="/">Home</a>
|
||||
<a href="/projects">Projects</a>
|
||||
<a href="/projects/projectn5/devlog">Project N5</a>
|
||||
<a href="/blog">Blog</a>
|
||||
<a href="/about">About</a>
|
||||
{/snippet}
|
||||
|
||||
<!-- <div class="header-content coloured-header">
|
||||
<div class="header-content">
|
||||
{@render headerContent()}
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.header-content {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-height: 72px;
|
||||
max-width: var(--page-width);
|
||||
/* min-height: 72px; */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
gap: 20px;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.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;
|
||||
padding: 0 var(--margin-content-side);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -49,7 +30,6 @@
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
transition: 0.2s ease-in-out color;
|
||||
}
|
||||
|
||||
a:link {
|
||||
|
||||
@@ -12,55 +12,17 @@
|
||||
} = $props();
|
||||
</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}
|
||||
<li>
|
||||
<a href={entry.link}>
|
||||
{#if entry.icon}
|
||||
<img height="24px" src={entry.icon} alt="Icon">
|
||||
{/if}
|
||||
{@html entry.text}
|
||||
{@render listEntry({entry})}
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
@@ -2,9 +2,9 @@
|
||||
import {onMount} from 'svelte';
|
||||
|
||||
let {
|
||||
disableStickyScrolling,
|
||||
stickyScrolling,
|
||||
}: {
|
||||
disableStickyScrolling?: boolean;
|
||||
stickyScrolling?: boolean;
|
||||
} = $props();
|
||||
|
||||
let idCounter: number = 0;
|
||||
@@ -64,12 +64,12 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if disableStickyScrolling}
|
||||
<div class="toc-container notched" bind:this={root}>
|
||||
{#if stickyScrolling}
|
||||
<div class="toc-container notched sticky-toc" bind:this={root}>
|
||||
{@render tocList()}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="toc-container notched sticky-toc" bind:this={root}>
|
||||
<div class="toc-container notched" bind:this={root}>
|
||||
{@render tocList()}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -6,10 +6,10 @@
|
||||
</div>
|
||||
<div class="webring-row">
|
||||
<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/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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -26,7 +26,7 @@
|
||||
margin: 0 4px;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:link, a:visited {
|
||||
a:link, a:visited, span {
|
||||
color: var(--color-highlight);
|
||||
}
|
||||
a:hover {
|
||||
@@ -40,5 +40,6 @@
|
||||
}
|
||||
span {
|
||||
margin: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
@@ -131,6 +131,9 @@
|
||||
--font-size-h3: 1.3rem;
|
||||
--font-size-h4: 1.2rem;
|
||||
|
||||
--margin-header-top: 16px;
|
||||
--margin-header-bottom: 8px;
|
||||
|
||||
/* page sizing */
|
||||
--page-width: 1000px;
|
||||
--screen-width-mobile: 800px;
|
||||
@@ -181,27 +184,6 @@
|
||||
margin: 12px 0;
|
||||
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 */
|
||||
/* All headers */
|
||||
@@ -209,8 +191,8 @@
|
||||
font-weight: 700;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--color-highlight);
|
||||
margin-top: 16px;
|
||||
margin-bottom: 8px;
|
||||
margin-top: var(--margin-header-top);
|
||||
margin-bottom: var(--margin-header-bottom);
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
@@ -259,6 +241,7 @@
|
||||
height: 1px;
|
||||
border: none;
|
||||
border-top: 2px dashed var(--color-highlight);
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
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 {
|
||||
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) {
|
||||
h1 {
|
||||
/* h1 {
|
||||
font-size: 2.3rem;
|
||||
line-height: 2.4rem;
|
||||
}
|
||||
@@ -412,7 +394,7 @@
|
||||
h4, h5, h6 {
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.4rem;
|
||||
}
|
||||
} */
|
||||
|
||||
/* p, span, li, pre, a {
|
||||
} */
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import BannerTitleAlt from "$lib/banner-title-alt.svelte";
|
||||
import ContentSidebar from "$lib/content-sidebar.svelte";
|
||||
import Banner2 from "$lib/banner2.svelte";
|
||||
import Content from "$lib/content.svelte";
|
||||
import TableOfContents from "$lib/table-of-contents.svelte";
|
||||
import LinkList, { type LinkEntry } from "$lib/link-list.svelte";
|
||||
|
||||
@@ -36,80 +36,76 @@
|
||||
<title>About Me | denizk0461</title>
|
||||
</svelte:head>
|
||||
|
||||
<BannerTitleAlt
|
||||
title="About Me"
|
||||
banner="/common/me/b.webp"
|
||||
bannerAlt="Mirror picture of me, pixelated beyond recognition"
|
||||
subtitle="If you'd like to learn more about me"
|
||||
pixelated
|
||||
/>
|
||||
<Content>
|
||||
<Banner2
|
||||
title="About Me"
|
||||
banner="/common/me/b.webp"
|
||||
bannerAlt="Mirror picture of me, pixelated beyond recognition"
|
||||
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>
|
||||
|
||||
<div slot="main">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<ul class="styled-list">
|
||||
<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'm also currently studying to become a secondary school teacher.</p>
|
||||
<h2 id="likes">Things I Like</h2>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<h3 id="music">Music</h3>
|
||||
<img alt="Vinyl record sleeves displayed on a wall" src="records.webp">
|
||||
|
||||
<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>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>
|
||||
|
||||
<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>Some of my current favourite albums include:</p>
|
||||
|
||||
<p>Some of my current favourite albums include:</p>
|
||||
<LinkList entries={favouriteAlbums} />
|
||||
|
||||
<LinkList entries={favouriteAlbums}/>
|
||||
<p>Avicii's first album <i>True</i> has a special place in my heart.</p>
|
||||
|
||||
<p>Avicii's first album <i>True</i> has a special place in my heart.</p>
|
||||
<h3 id="games">Video Games</h3>
|
||||
|
||||
<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>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>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>
|
||||
|
||||
<p>Other games I've enjoyed include:</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>
|
||||
|
||||
<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>
|
||||
|
||||
<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 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'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>
|
||||
<p><i>Last updated: 2025-12-20</i></p>
|
||||
</Content>
|
||||
@@ -1,9 +1,9 @@
|
||||
<script lang="ts">
|
||||
import Banner2 from "$lib/banner2.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",
|
||||
link: "/projects/projectn5/devlog/feed.xml",
|
||||
@@ -24,5 +24,5 @@
|
||||
<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>
|
||||
|
||||
<LinkList entries={feeds} />
|
||||
<List entries={feeds} />
|
||||
</Content>
|
||||
@@ -1,10 +1,10 @@
|
||||
<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 type { Project } from './projects';
|
||||
import { projects } from './projects';
|
||||
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[] {
|
||||
var result: Project[] = [];
|
||||
@@ -21,72 +21,115 @@
|
||||
<title>Projects | denizk0461</title>
|
||||
</svelte:head>
|
||||
|
||||
<BannerTitleAlt
|
||||
title="My Disordered Projects"
|
||||
banner="/projects/banner.webp"
|
||||
bannerAlt="Closeup of the purple protagonist from Project N5"
|
||||
subtitle="Things I have worked on"
|
||||
/>
|
||||
<Content>
|
||||
<Banner2
|
||||
title="My Disordered Projects"
|
||||
banner="/projects/banner.webp"
|
||||
bannerAlt="Closeup of the purple protagonist from Project N5"
|
||||
subtitle="Things I have worked on" />
|
||||
|
||||
<ContentSidebar>
|
||||
<TableOfContents slot="side-left" />
|
||||
<TableOfContents />
|
||||
|
||||
<div slot="main">
|
||||
<h2 id="games">Games</h2>
|
||||
{#each projects as project}
|
||||
{#if project.type == "game"}
|
||||
{@render projectSummary({ project: project })}
|
||||
{/if}
|
||||
{/each}
|
||||
<h2 id="hardware">Hardware</h2>
|
||||
{#each projects as project}
|
||||
{#if project.type == "hardware"}
|
||||
{@render projectSummary({ project: project })}
|
||||
{/if}
|
||||
{/each}
|
||||
<h2 id="apps">Apps</h2>
|
||||
{#each projects as project}
|
||||
{#if project.type == "app"}
|
||||
{@render projectSummary({ project: project })}
|
||||
{/if}
|
||||
{/each}
|
||||
<h2 id="music">Music</h2>
|
||||
{#each projects as project}
|
||||
{#if project.type == "music"}
|
||||
{@render projectSummary({ project: project })}
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</ContentSidebar>
|
||||
<h2 id="games">Games</h2>
|
||||
{#each projects as project}
|
||||
{#if project.type == "game"}
|
||||
{@render projectSummary({ project: project })}
|
||||
{/if}
|
||||
{/each}
|
||||
<h2 id="hardware">Hardware</h2>
|
||||
{#each projects as project}
|
||||
{#if project.type == "hardware"}
|
||||
{@render projectSummary({ project: project })}
|
||||
{/if}
|
||||
{/each}
|
||||
<h2 id="apps">Apps</h2>
|
||||
{#each projects as project}
|
||||
{#if project.type == "app"}
|
||||
{@render projectSummary({ project: project })}
|
||||
{/if}
|
||||
{/each}
|
||||
<h2 id="music">Music</h2>
|
||||
{#each projects as project}
|
||||
{#if project.type == "music"}
|
||||
{@render projectSummary({ project: project })}
|
||||
{/if}
|
||||
{/each}
|
||||
</Content>
|
||||
|
||||
{#snippet projectSummary({
|
||||
project
|
||||
}: {
|
||||
project: Project;
|
||||
})}
|
||||
<div>
|
||||
<h3 id="{project.id}">{project.title}</h3>
|
||||
{#if project.subtitle}
|
||||
<p class="project-subtitle">» {project.subtitle}</p>
|
||||
{/if}
|
||||
{#if project.banner}
|
||||
<h3 id="{project.id}">{project.title}</h3>
|
||||
{#if project.subtitle}
|
||||
<p class="project-subtitle">[ {project.subtitle} ]</p>
|
||||
{/if}
|
||||
{#if project.banner}
|
||||
<div class="project-banner-container">
|
||||
<img class="project-banner" src="{project.banner}" alt="Overview banner for {project.title}">
|
||||
{#if project.date}
|
||||
<p class="project-date project-date-embed">{project.date}</p>
|
||||
<p class="project-date project-date-embed">{project.date}</p>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
{#if project.date}
|
||||
{:else}
|
||||
{#if project.date}
|
||||
<p class="project-date">{project.date}</p>
|
||||
{/if}
|
||||
{/if}
|
||||
{#if project.icon}
|
||||
{/if}
|
||||
{/if}
|
||||
{#if project.icon}
|
||||
<img class="project-icon" src="{project.icon}" alt="Icon for {project.title}">
|
||||
{/if}
|
||||
{#each project.paragraphs as paragraph}
|
||||
<p>{@html paragraph}</p>
|
||||
{/each}
|
||||
<LinkList entries={project.links} />
|
||||
</div>
|
||||
{/if}
|
||||
{#each project.paragraphs as paragraph}
|
||||
<p>{@html paragraph}</p>
|
||||
{/each}
|
||||
<LinkList entries={project.links} />
|
||||
{/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">
|
||||
import BannerTitleAlt from "$lib/banner-title-alt.svelte";
|
||||
import Banner2 from "$lib/banner2.svelte";
|
||||
import Content from "$lib/content.svelte";
|
||||
import TableOfContents from "$lib/table-of-contents.svelte";
|
||||
</script>
|
||||
@@ -8,19 +8,20 @@
|
||||
<title>Daisy FM Synth | denizk0461</title>
|
||||
</svelte:head>
|
||||
|
||||
<BannerTitleAlt
|
||||
title="Daisy FM Synth"
|
||||
banner="/projects/daisyfm/banner.webp"
|
||||
bannerAlt="Close-up of Daisy, focussed on the effect knobs"/>
|
||||
|
||||
<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">
|
||||
|
||||
<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>
|
||||
|
||||
<TableOfContents disableStickyScrolling />
|
||||
<TableOfContents />
|
||||
|
||||
<h2 id="creation">How did I make this?</h2>
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import BannerTitleAlt from "$lib/banner-title-alt.svelte";
|
||||
import Banner2 from "$lib/banner2.svelte";
|
||||
import Content from "$lib/content.svelte";
|
||||
// import type { DevlogPost } from "./devlog-posts";
|
||||
import { posts, type DevlogPost } from "./posts";
|
||||
@@ -19,13 +19,11 @@
|
||||
<title>Project N5 Devlog | denizk0461</title>
|
||||
</svelte:head>
|
||||
|
||||
<BannerTitleAlt
|
||||
title="Project N5; Development Log"
|
||||
banner="/projects/projectn5/banner2.webp"
|
||||
wide
|
||||
/>
|
||||
|
||||
<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>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">
|
||||
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)",
|
||||
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:
|
||||
|
||||
<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.
|
||||
|
||||
|
||||
@@ -21,10 +21,8 @@
|
||||
bannerAlt="{data.bannerAlt}"
|
||||
/>
|
||||
|
||||
<TableOfContents disableStickyScrolling />
|
||||
<TableOfContents />
|
||||
|
||||
<!-- <div slot="main"> -->
|
||||
<svelte:component this={data.content} />
|
||||
<!-- </div> -->
|
||||
|
||||
</Content>
|
||||
@@ -274,11 +274,11 @@ export const projects: Project[] = [
|
||||
title: "Magician",
|
||||
subtitle: "Online Multiplayer Card Game",
|
||||
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: [
|
||||
{
|
||||
text: "Play <b>Magician</b>",
|
||||
text: "View the latest <b>Magician</b> build",
|
||||
link: "//apps.denizk0461.dev/magician",
|
||||
},
|
||||
],
|
||||
|
||||
Reference in New Issue
Block a user