256 lines
11 KiB
Svelte
256 lines
11 KiB
Svelte
<script lang="ts">
|
||
import Content from "$lib/viewport/content.svelte";
|
||
import GalleryRow, { type GalleryRowEntry } from "$lib/lists/gallery-row.svelte";
|
||
|
||
import { posts as devlogPosts } from "./projects/projectn5/devlog/posts";
|
||
import { posts as blogPosts } from "./blog/posts";
|
||
import { entries as updateEntries } from "./meta/updates/updates";
|
||
import UpdateEntry from "$lib/components/update-entry.svelte";
|
||
import IndieButton from "$lib/components/indie-button.svelte";
|
||
import { buttons } from "$lib/components/indie-button";
|
||
|
||
let latestDevlogDate = devlogPosts[0].post.date;
|
||
let latestBlogDate = blogPosts[0].post.date;
|
||
|
||
let updateEntriesTrimmed = updateEntries.slice(0, 4);
|
||
|
||
const galleryTopRow: GalleryRowEntry[] = [
|
||
{
|
||
title: "Homesick – devlog",
|
||
description: `My active Godot game project about finding yourself in an unfamiliar future. <i>latest update: ${latestDevlogDate}</i>`,
|
||
img: "projects/projectn5/banner2.webp",
|
||
altText: "The protagonist Laura standing on a floating platform in the purple test level. Ziplines are all around her and the text 'When this text is spinning, the game is not paused' is frozen in the sky.",
|
||
link: "projects/projectn5",
|
||
},
|
||
{
|
||
title: "Blog",
|
||
description: `A place where I write about random things. <i>latest post: ${latestBlogDate}</i>`,
|
||
img: "blog/robert.webp",
|
||
altText: "View at a tram bridge rising and then curving to the left.",
|
||
link: "blog",
|
||
},
|
||
];
|
||
|
||
const galleryBottomRow: GalleryRowEntry[] = [
|
||
{
|
||
title: "Projects",
|
||
description: "An overview of my more technical projects",
|
||
img: "projects/banner.webp",
|
||
altText: "An upside-down New 3DS XL lying open on a desk with a small USB-C breakout board attached to it, and a USB-C cable plugged in. The 3DS is glowing to indicate that it is charging.",
|
||
link: "projects",
|
||
},
|
||
{
|
||
title: "Art",
|
||
description: "My creative side lives here",
|
||
img: "art/banner.webp",
|
||
altText: "A rainbow-like holographic effect produced by bending a reflective sheet of cardboard.",
|
||
link: "art",
|
||
},
|
||
{
|
||
title: "Files",
|
||
description: "Find things I've put for download on my Copyparty instance",
|
||
img: "main/hypertext.webp",
|
||
altText: "Screenshot of Hypertext Unity level. Crates are strewn across the floor, Waluigi is flying in front of the camera, and text such as 'COME AND TRY OUR ALL-NEW BLENDER' and 'omg! it's the brandenburg er tor!' is displayed.",
|
||
link: "https://files.denizk0461.dev/public/",
|
||
},
|
||
{
|
||
title: "Gitea",
|
||
description: "I now also self-host a Gitea instance where I am likely migrating all my projects to",
|
||
img: "main/magic.webp",
|
||
altText: "A 'magic' command written in Java. The command shuts down the computer when ran.",
|
||
link: "https://code.denizk0461.dev/",
|
||
},
|
||
];
|
||
</script>
|
||
|
||
<svelte:head>
|
||
<title>denizk0461's website</title>
|
||
<meta name="description" content="I'm a developer posting about my gamedev, programming, electronics, and sometimes music projects!">
|
||
</svelte:head>
|
||
|
||
<Content>
|
||
<h1 class="gradient-title"><i>Moin!</i> ~ welcome to my website :)</h1>
|
||
<a href="/blog/2026/0325" class="page-subtitle gradient-title lightyears-text">you can change the world from your bedroom!</a>
|
||
|
||
<hr>
|
||
|
||
<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!">
|
||
|
||
<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="info-container">
|
||
<h4 class="update-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>
|
||
<p>Also, this place is a constant work-in-progress and things may move around. If anything's outright <a href="/blog/2026/0131">broken</a> though, please do let me know.</p>
|
||
</div>
|
||
<div class="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>
|
||
|
||
<GalleryRow entries={galleryTopRow} />
|
||
<GalleryRow entries={galleryBottomRow} />
|
||
|
||
<div class="split-container">
|
||
<div class="webring-container">
|
||
<h4 class="update-header">webrings</h4>
|
||
<div class="webring">
|
||
<iframe title="bucket webring" id="bucket-webring" style="width: 100%; height: 3rem; border: none;" src="https://webring.bucketfish.me/embed.html?name=denizk0461"></iframe>
|
||
</div>
|
||
|
||
<div class="webring">
|
||
<a href="https://www.rainbowcemetery.com/devring/prev.php?id=18">
|
||
<img src="/webrings/gamedev/ringprev.png" alt="previous">
|
||
</a>
|
||
<a href="https://www.rainbowcemetery.com/devring/list.php?id=18">
|
||
<img src="/webrings/gamedev/88x31.png" alt="list">
|
||
</a>
|
||
<a href="https://www.rainbowcemetery.com/devring/next.php?id=18">
|
||
<img src="/webrings/gamedev/ringnext.png" alt="next">
|
||
</a>
|
||
</div>
|
||
|
||
<map name="w95widget">
|
||
<area href="https://baccyflap.com/noai" target="_blank" shape="rect" coords="0,0,308,22" alt="no ai webring" title="no ai webring">
|
||
<area href="https://baccyflap.com/noai/?prv&s=dzk" target="_top" shape="rect" coords="56,36,130,58" alt="previous" title="previous">
|
||
<area href="https://baccyflap.com/noai/?rnd" target="_top" shape="rect" coords="137,36,211,58" alt="random" title="random">
|
||
<area href="https://baccyflap.com/noai/?nxt&s=dzk" target="_top" shape="rect" coords="218,36,292,58" alt="next" title="next">
|
||
</map>
|
||
<img class="webring-img" usemap="#w95widget" src="/webrings/noai/w95widget.webp" alt="a gray Windows 95 style dialog box titled 'The No AI Webring' with a little icon showing a computer chip in a rubbish bin. beside it are three clickable buttons, labeled Previous, Random... and Next">
|
||
</div>
|
||
|
||
<div class="button-container">
|
||
<h4 class="update-header">button corner</h4>
|
||
<div class="button-subcontainer">
|
||
{#each buttons as button}
|
||
<IndieButton button={button} />
|
||
{/each}
|
||
</div>
|
||
<p>to be expanded!</p>
|
||
<p class="small-supertext">my own 88x31 button is in the making. ETA: ???</p>
|
||
</div>
|
||
</div>
|
||
</Content>
|
||
|
||
<style>
|
||
.split-container {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
gap: 16px;
|
||
margin: 16px 0;
|
||
}
|
||
|
||
@media screen and (max-width: 900px) {
|
||
.split-container {
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
}
|
||
|
||
.button-container {
|
||
flex: 2;
|
||
}
|
||
|
||
.button-subcontainer {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
justify-content: center;
|
||
align-content: center;
|
||
}
|
||
|
||
.webring {
|
||
display: flex;
|
||
flex-direction: row;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.webring-img {
|
||
width: initial;
|
||
}
|
||
|
||
.me-img {
|
||
width: 132px;
|
||
min-width: 132px;
|
||
float: left;
|
||
margin-right: 12px;
|
||
}
|
||
|
||
.update-container, .info-container, .button-container, .webring-container {
|
||
padding: 8px 24px;
|
||
backdrop-filter: blur(var(--blur-radius-background));
|
||
flex: 2;
|
||
}
|
||
|
||
.update-container, .button-container, .webring-container {
|
||
border: var(--border-dash-size) var(--color-highlight) var(--border-style);
|
||
}
|
||
|
||
.info-container, .button-container {
|
||
border: var(--border-dash-size) var(--color-highlight-alt) var(--border-style);
|
||
}
|
||
.info-container {
|
||
flex: 1;
|
||
}
|
||
.info-container > h4, .button-container > h4 {
|
||
color: var(--color-highlight-alt);
|
||
}
|
||
.info-container p, .info-container a {
|
||
font-size: 1.0rem;
|
||
line-height: 1.4rem;
|
||
}
|
||
|
||
.webring-container {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex: 3;
|
||
/* flex-wrap: wrap; */
|
||
/* gap: 8px; */
|
||
padding-top: 16px;
|
||
padding-bottom: 16px;
|
||
}
|
||
|
||
.update-header-link {
|
||
text-decoration: none;
|
||
}
|
||
.update-header-link:hover {
|
||
text-decoration: underline var(--border-style) var(--border-dash-size) var(--color-highlight);
|
||
}
|
||
|
||
.update-header {
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.gradient-title {
|
||
background: linear-gradient(
|
||
90deg,
|
||
var(--color-highlight) 30%,
|
||
var(--color-highlight-alt) 90%
|
||
);
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
.page-subtitle {
|
||
/* padding-bottom: 12px; */
|
||
width: fit-content;
|
||
margin: 4px 0 12px 0;
|
||
display: block;
|
||
}
|
||
</style> |