changed layout of main page

src/lib/components/split-container.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import ScrollTopButton from "$lib/components/scroll-top-button.svelte";
+
+    let { children } = $props();
+</script>
+
+<div class="split-container">
+    {@render children()}
+</div>
+
+<style>
+    .split-container {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+    }
+
+    .split-container * {
+        flex-basis: 1;
+    }
+
+    @media screen and (max-width: 800px) {
+        .split-container {
+            flex-direction: column;
+        }
+    }
+</style>

src/lib/components/subtitled-image.svelte

@@ -8,21 +8,27 @@
         // options: left, right. leaving empty means centred
         alignment,
         video,
+        pixelated,
     }: {
         image: string;
         altText?: string;
         subtitle?: string;
         alignment?: string;
         video?: boolean;
+        pixelated?: boolean;
     } = $props();
 </script>
 
 {#snippet subtitledImageContent()}
     {#if video}
         <Video src={image} />
+    {:else}
+        {#if pixelated}
+            <img class="subtitled-img pixelated-img" src="{image}" alt="{altText}">
         {:else}
             <img class="subtitled-img" src="{image}" alt="{altText}">
         {/if}
+    {/if}
 
     {#if subtitle}
         <hr>

src/routes/+page.svelte

@@ -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.">
+        <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>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>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>
+        <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"><h6 class="update-header">website updates <span class="small-supertext">(new!)</span></h6></a>
+            <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 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="&lt;"
-            nextSymbol="&gt;"
-            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>
 
     <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;
+        width: 132px;
-        min-width: 110px;
+        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,