feed page indicator now more clearly communicates button behaviour when trying to go to a page earlier than first or later than last

src/lib/banner2.svelte

@@ -56,13 +56,13 @@
 
 <div class="container">
     {#if banner && banner !== ""}
-        <div class="banner-container">
+        <a class="banner-container" href={banner}>
             {#if pixelated}
-                <img class="banner pixelated-img" src="{banner}" alt="{bannerAlt}">
+                <img class="banner pixelated-img" src={banner} alt={bannerAlt}>
             {:else}
-                <img class="banner" src="{banner}" alt="{bannerAlt}">
+                <img class="banner" src={banner} alt={bannerAlt}>
             {/if}
-        </div>
+        </a>
     {/if}
     {@render titles({title, subtitle, date})}
     <hr>
@@ -78,6 +78,8 @@
         height: 300px;
         width: 100%;
         overflow: hidden;
+        margin: 0;
+        display: block;
     }
 
 	.banner {

src/lib/lists/image-gallery.svelte

@@ -107,7 +107,7 @@
         padding-right: 12px;
         display: flex;
         flex-direction: column;
-        gap: 4px;
+        gap: 8px;
     }
     .gallery-desc-container p {
         margin: 0;
@@ -157,12 +157,19 @@
         }
 
         .gallery-text-container {
-            height: initial;
+            height: 40vh;
         }
 
         .gallery-img-container {
             border-right: none;
             border-bottom: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
         }
+        .gallery-img {
+            height: 100%;
+        }
+
+        .gallery-zone > * {
+            height: 40vh;
+        }
     }
 </style>

src/routes/+layout.svelte

@@ -96,6 +96,7 @@
             /* colours */
             --color-text: #d0d0d0;
             --color-text-secondary: #b0b0b0;
+            --color-text-tertiary: #808080;
             --color-text-img: invert(98%) sepia(1%) saturate(4643%) hue-rotate(297deg) brightness(115%) contrast(76%);
             --color-text-dark: #1e1e1e;
 

src/routes/+page.svelte

@@ -56,6 +56,13 @@
     ];
 
     const galleryBottomRow: GalleryRowEntry[] = [
+        {
+            title: "Creative Feed",
+            description: `The small things I make find a home here`,
+            img: "feed/banner.webp",
+            altText: ".",
+            link: "feed",
+        },
         {
             title: "Blog",
             description: `A place where I write about random things. <i>latest post: ${latestBlogDate}</i>`,

src/routes/feed/+page.svelte

@@ -13,7 +13,7 @@
 {#snippet pageButtons(currentIndex: number)}
     <div class="page-button-container blurred-background">
         {#if currentIndex == 1}
-            <p class="page-button page-button-left">x</p>
+            <p class="page-button page-button-left page-button-disabled">x</p>
         {:else}
             <a class="page-button page-button-left page-button-clickable" href="?p={currentIndex - 1}">&lt;</a>
         {/if}
@@ -23,7 +23,7 @@
         {/each}
 
         {#if currentIndex == data.maxPages}
-            <p class="page-button page-button-right">x</p>
+            <p class="page-button page-button-right page-button-disabled">x</p>
         {:else}
             <a class="page-button page-button-right page-button-clickable" href="?p={currentIndex + 1}">&gt;</a>
         {/if}
@@ -32,26 +32,37 @@
 
 <Content>
     <Banner2
-        title="Art & Project Feed"
+        title="Creative Feed"
         banner="banner.webp"
         bannerAlt="Mirror picture of me, pixelated beyond recognition"
-        subtitle="subtitle missing"
+        subtitle="minor things I have worked on"
     />
 
-    {@render pageButtons(data.currentPage)}
-
-    <p>Welcome to my (new) art feed! It is heavily inspired by <a href="https://deathsurplus.com/">DeathSurplus' art blog</a> – definitely go check out his page!</p>
+    <p>Welcome to my creative feed! It is heavily inspired by <a href="https://deathsurplus.com/">DeathSurplus' art blog</a> – definitely go check out his website!</p>
 
     <p>This page is intended to be a contrasting companion to the <a href="/projects"><code>projects</code> page</a>; I'll use this page for smaller things that don't fit the dedicated-page-format.</p>
 
     <!-- <TableOfContents /> -->
 
+    {@render pageButtons(data.currentPage)}
+    
     {#each data.feedEntries as entry}
         <h2>{entry.title}</h2>
         <p class="subtitle">{entry.subtitle}</p>
         <p class="subtitle">{entry.date}</p>
         <svelte:component this={entry.content} />
+        {#if entry.images && entry.images.length > 0}
+            <div class="image-gallery">
+                {#each entry.images as i, index}
+                    <a class="image-gallery-link" href="{entry.path}/{i}.webp">
+                        <img class="image-gallery-img" loading="lazy" src="{entry.path}/{i}.webp" alt={entry.imageAlts[index]}>
+                    </a>
                 {/each}
+            </div>
+        {/if}
+    {/each}
+
+    {@render pageButtons(data.currentPage)}
 
 </Content>
 
@@ -90,6 +101,11 @@
         cursor: pointer;
     }
 
+    .page-button-disabled {
+        color: var(--color-text-tertiary);
+        cursor: not-allowed;
+    }
+
     .page-index:link, .page-index:visited {
         color: var(--color-text)
     }
@@ -99,6 +115,44 @@
         background-color: var(--color-background-highlight-alt);
     }
 
+    .image-gallery {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+        gap: 4px;
+    }
+
+    .image-gallery-img {
+        width: 100%;
+        height: 100%;
+        display: block;
+        object-fit: cover;
+        filter: brightness(60%) saturate(80%);
+        max-height: 320px;
+        transition: filter var(--duration-animation) var(--anim-curve),
+                    scale var(--duration-animation) var(--anim-curve),
+                    border-radius var(--duration-animation) var(--anim-curve);
+        scale: 1.04;
+    }
+
+    .image-gallery-link {
+        outline: var(--border-style) var(--border-dash-size) transparent;
+        border-radius: var(--border-radius);
+        z-index: 10;
+        transition: outline-color var(--duration-animation) var(--anim-curve);
+        overflow: hidden;
+        margin: 0;
+    }
+
+    .image-gallery-link:hover .image-gallery-img {
+        border-radius: var(--border-radius);
+        filter: brightness(100%) saturate(100%);
+        scale: 1.0;
+    }
+
+    .image-gallery-link:hover {
+        outline-color: var(--color-highlight);
+    }
+
     .subtitle {
         font-family: var(--font-mono);
         margin: 0;
@@ -116,4 +170,20 @@
     .subtitle::after {
         content: " -->";
     }
+
+    @media screen and (max-width: 800px) {
+        .image-gallery-link, .image-gallery-link:hover .image-gallery-img {
+            border-radius: 0;
+        }
+
+        .image-gallery-link:hover {
+            outline-color: transparent;
+        }
+
+        .image-gallery-img {
+            border-radius: 0;
+            scale: 1.0;
+            filter: brightness(100%) saturate(100%);
+        }
+    }
 </style>

src/routes/feed/+page.ts

@@ -1,10 +1,13 @@
 import { entries } from './feed';
 
 interface FeedEntry {
+    path: string;
     content: any;
     title: string;
     subtitle: string;
     date: string;
+    images: string[];
+    imageAlts: string[];
 }
 
 let entriesPerPage = 8;
@@ -26,16 +29,26 @@ export async function load({ params, url }) {
         if (i >= entries.length) {
             break;
         }
+        let pathArray = entries[i].split("/");
+        let path = `./${pathArray[0]}/${pathArray[1]}`;
         // Vite complains if I don't do this even though it's stupid
-        const path = entries[i].split("/");
-        const page = await import(`./${path[0]}/${path[1]}.md`);
-        const md = page.metadata;
+        let page = await import(`./${pathArray[0]}/${pathArray[1]}.md`);
+        let md = page.metadata;
+
+        let date = md.date;
+        // prevent SvelteKit from being smart and formatting a YYYY-MM-DD string to a Date object or similar
+        if ((date as string).endsWith("0Z")) {
+            date = date.split("T")[0];
+        }
 
         feedEntries.push({
+            path,
             content: page.default,
             title: md.title,
             subtitle: md.subtitle,
-            date: md.date,
+            date: date,
+            images: md.images,
+            imageAlts: md.imageAlts,
         });
     }
 

src/routes/feed/drawings/2026-march.md

@@ -1,5 +0,0 @@
----
-title: asdf
-subtitle: asd
-date: aaa
----

src/routes/feed/drawings/lecturer-gender.md

@@ -0,0 +1,15 @@
+---
+title: Lecturer Confused About Gender
+subtitle: uni doodles
+date: 2026-04-10
+images:
+    - drawing
+    - hinge
+imageAlts:
+    - 
+    - 
+---
+
+I had my first day of uni in quite a while. For my class in descriptive statistics, I used my drawing tablet to take notes in Krita, which also proved excellent for doodling. This drawing was inspired by my lecturer, in good faith, saying: "there's male and female, but there's also diverse, which is a lot of genders, well I actually don't know how many".
+
+I also noticed that my drawing tablet's hinge broke!! It's very frustrating, though I can fortunately still use it, just without the ability to adjust it (it's just stuck on the max angle).

src/routes/feed/drawings/mossig-gender.md

@@ -1,5 +0,0 @@
----
-title: asdf
-subtitle: asd
-date: aaa
----

src/routes/feed/electronics/trans-phone.md

@@ -0,0 +1,21 @@
+---
+title: Transparent Phone Back
+subtitle: nowhere to hide!
+date: 2026-04-11 – 2026-04-12
+images:
+    - scratching
+    - halfway
+    - clear
+    - final
+imageAlts:
+    - The back of a Samsung Galaxy S20 FE lying face-down on a deskmat. Toothpicks, cotton pads, and a metal spudger are lying nearby.
+    - A white phone back that's half-scratched off to reveal the clear plastic.
+    - An entirely clear phone back.
+    - A Samsung Galaxy S20 FE with a clear back inside a clear phone case. The phone has a sticker in the middle of the back that shows a lantern with leaves around it.
+---
+
+Inspired by Nothing phones and cool dbrand skins from way back, I gave my phone a clear back mod! I've grown a bit tired of the white back and wanted to do something cool and unique instead of just buying a new back and sticking that on there. I've been using this phone for 5 years and the glue has been struggling hard to hold onto the back, so I didn't feel bad doing this.
+
+This was arduous and took a lot of time too (5 hours). I used a metal spudger, bamboo toothpicks, and cottons swabs and pads soaked in acetone-free nail polish remover to remove the two paint layers slowly but surely, being careful not to scratch the back too much. It revealed a slightly cloudly but actually decently transparent back that still preserved its slightly pearlescent purple glow!
+
+Only contra is that the back can't hold on anymore because I removed all the glue, but since I'm keeping the phone in a case at all times, this isn't really an issue. Oh and, the exposure to alcohol made the back develop plenty of hairline cracks around the top and bottom, but it's still in one piece!

src/routes/feed/feed.ts

@@ -1,9 +1,4 @@
 export let entries: string[] = [
-    // 2026
-    // "misc/lightyears-font",
-    "drawings/mossig-gender",
-    "drawings/2026-march",
-    // 2024
-    // "electronics/3ds-usb-c",
-    // "electronics/deej0461",
+    "electronics/trans-phone",
+    "drawings/lecturer-gender",
 ];

static/icons/bluesky.svg

@@ -1 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Bluesky</title><path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z"/></svg>

static/icons/codeberg.svg

@@ -1 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Codeberg</title><path d="M11.955.49A12 12 0 0 0 0 12.49a12 12 0 0 0 1.832 6.373L11.838 5.928a.187.14 0 0 1 .324 0l10.006 12.935A12 12 0 0 0 24 12.49a12 12 0 0 0-12-12 12 12 0 0 0-.045 0zm.375 6.467l4.416 16.553a12 12 0 0 0 5.137-4.213z"/></svg>

static/icons/github.svg

@@ -1 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>

static/icons/mailboxdotorg.svg

@@ -1 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>mailbox.org</title><path d="M2.229 22.844H24V10.501l-8.628 5.882c-.613.419-1.226-.003-1.226-.003L0 6.646v13.969s0 2.229 2.229 2.229m12.558-9.273L24 7.261V1.156H2.229S0 1.156 0 3.384v.06l14.787 10.127Z"/></svg>