changed transition timing for all animations to use exponential function

src/lib/components/outlined-button.svelte

@@ -25,7 +25,7 @@
         color: var(--color-highlight);
         font-weight: 700;
         cursor: pointer;
-        transition: background-color var(--duration-animation) ease-out;
+        transition: background-color var(--duration-animation) var(--anim-curve);
     }
 
     .outlined-button:hover {

src/lib/components/ring.svelte

@@ -66,9 +66,9 @@
         line-height: 1.4rem;
         font-weight: 500;
         /* border: var(--border-width); */
-        transition: color var(--duration-animation) ease-out,
-                    font-weight var(--duration-animation) ease-out;
-                    /* border-color var(--duration-animation) ease-out; */
+        transition: color var(--duration-animation) var(--anim-curve),
+                    font-weight var(--duration-animation) var(--anim-curve);
+                    /* border-color var(--duration-animation) var(--anim-curve); */
     }
     a:link, a:visited, span {
         color: var(--color-highlight);

src/lib/components/scroll-top-button.svelte

@@ -24,7 +24,7 @@
         background-color: var(--color-background-highlight);
         backdrop-filter: blur(var(--blur-radius-background));
         padding: 12px;
-        transition: background-color var(--duration-animation) ease-out;
+        transition: background-color var(--duration-animation) var(--anim-curve);
         z-index: 10;
     }
 

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>
@@ -55,7 +61,7 @@
         text-decoration: none;
         box-sizing: border-box;
         backdrop-filter: blur(var(--blur-radius-background));
-        transition: background-color var(--duration-animation) ease-out;
+        transition: background-color var(--duration-animation) var(--anim-curve);
     }
 
     .subtitled-img-container-centred {

src/lib/components/table-of-contents.svelte

@@ -107,8 +107,8 @@
             display: inline-block;
             text-decoration: none;
             box-sizing: border-box;
-            /* transition: color var(--duration-animation) ease-out,
-                        background-color var(--duration-animation) ease-out; */
+            /* transition: color var(--duration-animation) var(--anim-curve),
+                        background-color var(--duration-animation) var(--anim-curve); */
         }
         .toc-list a, .toc-list a:link, .toc-list a:visited {
             color: var(--color-text);

src/lib/lists/gallery-row.svelte

@@ -40,9 +40,9 @@
         margin: 0;
         padding: 8px;
         text-decoration: none;
-        transition: background-color var(--duration-animation) ease-out,
-                    border-color var(--duration-animation) ease-out,
-                    backdrop-filter var(--duration-blur) ease-out;
+        transition: background-color var(--duration-animation) var(--anim-curve),
+                    border-color var(--duration-animation) var(--anim-curve),
+                    backdrop-filter var(--duration-blur) var(--anim-curve);
         border: var(--border-dash-size) var(--border-style) transparent;
     }
 
@@ -53,7 +53,7 @@
     }
 
     .row-entry:hover .row-img {
-        scale: 1.06;
+        scale: 1.2;
     }
 
     .row-img-container {
@@ -67,7 +67,7 @@
     .row-img {
         width: 100%;
         object-fit: cover;
-        transition: scale var(--duration-animation) ease-out;
+        transition: scale var(--duration-animation) var(--anim-curve);
     }
 
     .row-text-container {

src/lib/lists/gallery.svelte

@@ -5,6 +5,7 @@
         img: string;
         imgAlt: string;
         link: string;
+        description: string;
     }
 
     let {
@@ -34,9 +35,11 @@
             {#if reverseTextOrder}
                 <p class="gallery-subtitle">{@html entry.subtitle}</p>
                 <p class="gallery-title">{entry.title}</p>
+                <p class="gallery-description">{entry.description}</p>
             {:else}
                 <p class="gallery-title">{entry.title}</p>
                 <p class="gallery-subtitle">{@html entry.subtitle}</p>
+                <p class="gallery-description">{entry.description}</p>
             {/if}
         </div>
     </a>
@@ -56,22 +59,24 @@
 
     .gallery-container {
         box-sizing: content-box;
-        height: 80px;
+        height: 120px;
         display: flex;
         flex-direction: row;
         text-decoration: none;
         align-items: center;
-        margin: 6px 0;
+        margin: 0;
+        justify-content: center;
+        border: var(--border-style) transparent var(--border-dash-size);
+        transition: border-color var(--duration-animation) var(--anim-curve);
     }
 
     .gallery-img, .gallery-img-placeholder {
-        width: 145px;
-        min-width: 145px;
+        width: 180px;
+        min-width: 180px;
         height: 100%;
         margin: 0;
         object-fit: cover;
-        /* filter: grayscale(60%); */
-        transition: margin var(--duration-animation) ease-out;
+        transition: width var(--duration-animation) var(--anim-curve);
     }
 
     .gallery-img-placeholder {
@@ -79,53 +84,66 @@
     }
 
     .gallery-text-container {
-        display: flex;
-        flex-direction: column;
+        display: grid;
+        grid-auto-columns: 1fr;
+        grid-template-rows: 1fr 1fr 0fr;
+        align-items: center;
+        overflow: hidden;
         flex-grow: 1;
-        height: 100%;
-        padding-left: 16px;
-        padding-right: 16px;
-        border-style: var(--border-style);
-        justify-content: center;
-        border-color: transparent;
-        border-width: var(--border-dash-size);
-        border-left: none;
-        transition: border-color var(--duration-animation) ease-out,
-                    padding-right var(--duration-animation) ease-out,
-                    background-color var(--duration-animation) ease-out,
-                    backdrop-filter var(--duration-blur) ease-out;
+        padding: 0 16px;
+        transition: background-color var(--duration-animation) var(--anim-curve),
+                    backdrop-filter var(--duration-blur) var(--anim-curve),
+                    grid-template-rows var(--duration-blur) var(--anim-curve);
     }
 
-    .gallery-title, .gallery-subtitle {
+    .gallery-title, .gallery-subtitle, .gallery-description {
         margin: 0;
-        transition: color var(--duration-animation) ease-out;
+        transition: color var(--duration-animation) var(--anim-curve),
+                    opacity var(--duration-animation) var(--anim-curve);
     }
 
     .gallery-title {
         font-family: var(--font-mono);
         font-weight: 700;
+        font-size: 1.4rem;
+        line-height: 2.0rem;
     }
 
-    .gallery-subtitle {
+    .gallery-subtitle, .gallery-description {
         font-size: 1.0rem;
         line-height: 1.2rem;
+        overflow: hidden;
     }
 
-    .gallery-container:hover .gallery-text-container {
+    .gallery-description {
+        font-weight: 500;
+        opacity: 0;
+    }
+
+    .gallery-container:hover {
         border-color: var(--color-highlight);
         background-color: var(--color-background-highlight);
         backdrop-filter: blur(var(--blur-radius-background));
     }
     .gallery-container:hover .gallery-img, .gallery-container:hover .gallery-img-placeholder {
         /* filter: grayscale(0%); */
-        margin-left: 8px;
+        /* margin-left: 8px; */
+        width: 260px;
     }
     .gallery-container:hover .gallery-text-container {
-        padding-right: 8px;
+        /* padding-right: 8px; */
+        grid-template-rows: 0fr 1fr 1fr;
     }
     .gallery-container:hover p {
         color: var(--color-highlight);
     }
+    .gallery-container:hover .gallery-subtitle {
+        opacity: 0;
+        
+    }
+    .gallery-container:hover .gallery-description {
+        opacity: 1;
+    }
 
     @media screen and (max-width: 700px) {
         /* .gallery-title {

src/routes/+layout.svelte

@@ -139,9 +139,12 @@
             --underline-dash-size: 1px;
             
             /* durations */
-            --duration-animation: 0.1s;
             --duration-blur: 0.2s;
 
+            /* animation */
+            --duration-animation: 0.3s;
+            --anim-curve: cubic-bezier(0.22, 1, 0.36, 1);
+
             /* fonts */
             --font-line-height: 1.6rem;
 
@@ -163,7 +166,7 @@
             --media-width: 80%;
 
             /* page sizing */
-            --page-width: 900px;
+            --page-width: 1200px;
             --screen-width-mobile: 800px;
 
             --margin-content-side: 24px;

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.">
-        <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="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;
-        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,

src/routes/blog/+page.svelte

@@ -18,6 +18,7 @@
             img: banner,
             link: `/blog/${entry.key}/`,
             imgAlt: `Preview image for ${entry.post.title}`,
+            description: entry.post.description,
         };
     }
 </script>

src/routes/projects/projectn5/+page.svelte

@@ -13,6 +13,7 @@
             img: `/projects/projectn5/devlog/${entry.key}/preview.webp`,
             link: `/projects/projectn5/devlog/${entry.key}/`,
             imgAlt: `Preview image for ${entry.post.title}`,
+            description: entry.post.description,
         };
     }