303 lines
12 KiB
Svelte
303 lines
12 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";
|
||
import { onMount } from "svelte";
|
||
|
||
let latestDevlogDate = devlogPosts[0].post.date;
|
||
let latestBlogDate = blogPosts[0].post.date;
|
||
|
||
let updateEntriesTrimmed = updateEntries.slice(0, 5);
|
||
|
||
let latestStatusContent = $state("fetching status...");
|
||
let latestStatusTimestamp = $state("?");
|
||
|
||
async function getLatestStatus() {
|
||
await fetch(`https://back.natconf.dev/netstatus/latestStatus`, {
|
||
method: "GET",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
}).then((response) => {
|
||
return response.json();
|
||
}).then((data) => {
|
||
latestStatusContent = data.content;
|
||
|
||
// using sv-SE because they use ISO 8601 for the formatting. they also luckily follow the same timezone as Germany. thank you sweden, u cool 🇸🇪🇩🇪
|
||
latestStatusTimestamp = new Date(data.timestamp).toLocaleString("sv-SE").replace(" ", ", ");
|
||
});
|
||
}
|
||
|
||
onMount(() => {
|
||
getLatestStatus();
|
||
})
|
||
|
||
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: "Projects",
|
||
description: "<b>[updated]</b> An overview of all my 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",
|
||
},
|
||
];
|
||
|
||
const galleryBottomRow: GalleryRowEntry[] = [
|
||
{
|
||
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",
|
||
},
|
||
{
|
||
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 brandenbur ger tor!' is displayed.",
|
||
link: "https://files.natconf.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.natconf.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 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!">
|
||
|
||
<p>Hi! I'm Deniz. Welcome to my website! I keep rewriting this introduction because 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>, <a href="https://blender.org/">Blender</a>, and <a href="https://krita.org/">Krita</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>
|
||
<div class="sidebox-container blurred-background">
|
||
<h4 class="sidebox-header">heads-up</h4>
|
||
|
||
<p>This website works best on Firefox and other Gecko-based browsers! It is also nearly 100% mobile-friendly!</p>
|
||
|
||
<p>All pages are functional without JavaScript but I recommend you enable it (some elements won't work without it)!</p>
|
||
|
||
<p>Links may change but I will set up redirects, promise.</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>
|
||
|
||
<hr>
|
||
|
||
<GalleryRow entries={galleryTopRow} />
|
||
<GalleryRow entries={galleryBottomRow} />
|
||
|
||
<hr>
|
||
|
||
<div class="link-container">
|
||
<h4 class="update-header">links to elsewhere</h4>
|
||
|
||
<div class="webring-container">
|
||
<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">
|
||
{#each buttons as button}
|
||
<IndieButton button={button} />
|
||
{/each}
|
||
</div>
|
||
<p>to be expanded!</p>
|
||
<p class="small-supertext">currently trying to come up with ideas for my own 88x31 button</p>
|
||
</div>
|
||
</Content>
|
||
|
||
<style>
|
||
.split-intro-container {
|
||
display: grid;
|
||
grid-template-columns: 3fr 30%;
|
||
gap: 16px;
|
||
}
|
||
|
||
.button-container {
|
||
flex: 2;
|
||
}
|
||
|
||
.button-container {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
|
||
.webring {
|
||
display: flex;
|
||
flex-direction: row;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.webring-img {
|
||
width: initial;
|
||
}
|
||
|
||
.me-img {
|
||
width: 9.6rem;
|
||
float: left;
|
||
margin: 16px 12px 0 0;
|
||
}
|
||
|
||
.sidebox-container {
|
||
padding: 8px 16px;
|
||
border-width: var(--border-dash-size);
|
||
border-style: var(--border-style);
|
||
border-color: var(--color-highlight-alt);
|
||
border-radius: var(--border-radius);
|
||
/* transition: border-radius var(--duration-animation) var(--anim-curve); */
|
||
/* border-radius: var(--border-radius); */
|
||
}
|
||
|
||
.sidebox-container hr {
|
||
border-color: var(--color-highlight-alt);
|
||
margin: 16px 0;
|
||
}
|
||
|
||
.sidebox-container p, .sidebox-container a {
|
||
font-size: 0.9rem;
|
||
line-height: 1.3rem;
|
||
}
|
||
|
||
.status-content {
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.status-timestamp {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.8rem;
|
||
line-height: 0.8rem;
|
||
display: block;
|
||
color: var(--color-text-highlight-alt);
|
||
font-weight: 600;
|
||
margin-top: 0;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.sidebox-header {
|
||
font-size: 1.0rem;
|
||
line-height: 1.0rem;
|
||
margin-top: 8px;
|
||
color: var(--color-highlight-alt);
|
||
}
|
||
|
||
.sidebox-header-link {
|
||
text-decoration: none;
|
||
}
|
||
.sidebox-header-link:hover {
|
||
text-decoration-color: var(--color-highlight-alt);
|
||
}
|
||
.sidebox-header-link:hover {
|
||
text-decoration-line: underline;
|
||
text-decoration-style: dashed;
|
||
text-decoration-thickness: var(--border-dash-size);
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
@media screen and (max-width: 900px) {
|
||
.split-intro-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
</style> |