changed layout of main page
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import Content from "$lib/viewport/content.svelte";
|
||||
import Webring from "$lib/components/ring.svelte";
|
||||
import SubtitledImage from "$lib/components/subtitled-image.svelte";
|
||||
import GalleryRow, { type GalleryRowEntry } from "$lib/lists/gallery-row.svelte";
|
||||
|
||||
import { posts as devlogPosts } from "./projects/projectn5/devlog/posts";
|
||||
@@ -11,7 +11,7 @@
|
||||
let latestDevlogDate = devlogPosts[0].post.date;
|
||||
let latestBlogDate = blogPosts[0].post.date;
|
||||
|
||||
let updateEntriesTrimmed = updateEntries.slice(0, 3);
|
||||
let updateEntriesTrimmed = updateEntries.slice(0, 4);
|
||||
|
||||
const galleryTopRow: GalleryRowEntry[] = [
|
||||
{
|
||||
@@ -66,73 +66,127 @@
|
||||
<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 (he/him/they). I'm a hobbyist programmer based in 🇩🇪 Northern Germany who does coding, 3D modelling, and sometimes music too. I am also studying to become a secondary school teacher. Welcome to my webpage!</p>
|
||||
<p>Here I publish my projects in programming, electronics (Arduino, Raspberry Pi etc.), and gamedev specifically, but I also set up a blog to talk about random things on my mind. Feel free to explore.</p>
|
||||
<p>This place is a constant work-in-progress – while I try to keep URLs intact, a lot of stuff is being modified and moved around! I'm also adding new things and seeing which things I enjoy maintaining. If anything's outright <a href="/blog/2026/0131">broken</a>, please do let me know.</p>
|
||||
<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="update-container">
|
||||
<a class="update-header-link" href="/meta/updates"><h6 class="update-header">website updates <span class="small-supertext">(new!)</span></h6></a>
|
||||
{#each updateEntriesTrimmed as entry}
|
||||
<UpdateEntry {entry} />
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="webring-container">
|
||||
<!-- bucket webring -->
|
||||
<Webring
|
||||
ringName="bucket webring"
|
||||
ringLink="https://webring.bucketfish.me"
|
||||
prevLink="https://webring.bucketfish.me/redirect.html?to=prev&name=denizk0461"
|
||||
nextLink="https://webring.bucketfish.me/redirect.html?to=next&name=denizk0461"
|
||||
randLink="https://webring.bucketfish.me/redirect.html?to=random&name=denizk0461"
|
||||
prevSymbol="⥼"
|
||||
nextSymbol="⥽"
|
||||
highlightEmojiLeft="🏳️🌈" />
|
||||
|
||||
<!-- gamedev webring -->
|
||||
<Webring
|
||||
ringName="gamedev webring"
|
||||
ringLink="https://www.rainbowcemetery.com/devring"
|
||||
prevLink="https://www.rainbowcemetery.com/devring/prev.php?id=18"
|
||||
nextLink="https://www.rainbowcemetery.com/devring/next.php?id=18"
|
||||
randLink="https://www.rainbowcemetery.com/devring/rand.php?id=18"
|
||||
listLink="https://www.rainbowcemetery.com/devring/list.php?id=18"
|
||||
prevSymbol="<"
|
||||
nextSymbol=">"
|
||||
highlightEmojiLeft="👾"
|
||||
highlightEmojiRight="🎮" />
|
||||
|
||||
<!-- no ai webring -->
|
||||
<Webring
|
||||
ringName="no ai webring"
|
||||
ringLink="https://baccyflap.com/noai"
|
||||
prevLink="https://baccyflap.com/noai/?prv&s=dzk"
|
||||
nextLink="https://baccyflap.com/noai/?nxt&s=dzk"
|
||||
randLink="https://baccyflap.com/noai/?rnd"
|
||||
prevSymbol="←"
|
||||
nextSymbol="→"
|
||||
highlightEmojiLeft="🚫"
|
||||
highlightEmojiRight="🤖" />
|
||||
<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} />
|
||||
|
||||
<hr>
|
||||
|
||||
<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="https://baccyflap.com/noai/w95widget.gif" 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>
|
||||
|
||||
</Content>
|
||||
|
||||
<style>
|
||||
.split-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
.split-container {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.webring {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.webring-img {
|
||||
width: initial;
|
||||
}
|
||||
|
||||
.me-img {
|
||||
width: 110px;
|
||||
min-width: 110px;
|
||||
width: 132px;
|
||||
min-width: 132px;
|
||||
float: left;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.update-container {
|
||||
.update-container, .info-container {
|
||||
padding: 8px 24px;
|
||||
border: var(--border-dash-size) var(--color-highlight) var(--border-style);
|
||||
backdrop-filter: blur(var(--blur-radius-background));
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.update-container {
|
||||
border: var(--border-dash-size) var(--color-highlight) var(--border-style);
|
||||
}
|
||||
|
||||
.info-container {
|
||||
border: var(--border-dash-size) var(--color-highlight-alt) var(--border-style);
|
||||
flex: 1;
|
||||
}
|
||||
.info-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-wrap: wrap; */
|
||||
/* gap: 8px; */
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.update-header-link {
|
||||
@@ -146,16 +200,6 @@
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.webring-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 16px 0;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.gradient-title {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
|
||||
Reference in New Issue
Block a user