restored feed page

src/lib/components/reaction-quote.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    // currently available reactions: pointing, joy
+    // currently available reactions: pointing, joy, quote
     let {
         reaction,
         text,
@@ -11,9 +11,13 @@
     function getReactionAlt(r: string): string {
         switch (r) {
             case "joy":
-                return ""
+                return "";
+            case "quote":
+                return "";
+            case "pointing":
+                return "";
             default:
-                return "placeholder reaction"
+                return "reaction image missing";
         }
     }
 </script>

src/lib/lists/gallery-row.svelte

@@ -90,7 +90,7 @@
     .row-description {
         font-size: 1.0rem;
         line-height: 1.3rem;
-        margin: 0;
+        margin: 0 0 4px 0;
     }
 
     @media screen and (max-width: 600px) {

src/routes/+page.svelte

@@ -205,10 +205,9 @@
     }
 
     .me-img {
-        width: 132px;
-        min-width: 132px;
+        width: 9.6rem;
         float: left;
-        margin-right: 12px;
+        margin: 16px 12px 0 0;
     }
 
     .sidebox-container {

src/routes/blog/2026/0402.md

@@ -1,6 +1,7 @@
 <script lang="ts">
     import SubtitledImage from "$lib/components/subtitled-image.svelte";
     import Callout from "$lib/components/callout.svelte";
+    import ReactionQuote from "$lib/components/reaction-quote.svelte";
 </script>
 
 fuck i'm so sick of this shit. i need to incoherently ramble about this
@@ -79,18 +80,15 @@ I've taken down my Anubis instance for now. This doesn't mean I won't ever use i
 
 Another thing that perplexed me was that [the mascot for Anubis was initially AI generated](https://en.wikipedia.org/wiki/Anubis_(software)#/media/File:Former_Anubis_mascot_pensive.webp). I *hate* when people claim their AI use is justified when they use it as "placeholder art". Gamedevs keep doing that more and more lately and it's infuriating. Speaking of which...
 
-
 ## shovelware in 2026
 
 Lately, whenever I'm looking for new games on Steam, one of the first things I do is scroll down to see whether there's an "AI Generated Content Disclosure". I'm actually quite happy Valve implemented this, as it allows me to very quickly identify games that are not worth my time. Thing is though, I can't decide whether the blubs that these "developers" keep writing are hilarious or pathetic.
 
 Take this blurb by the team behind the title "I Am Jesus Christ" (weird. not linking it):
 
-<Callout
-    type="quote"
-    content={[
-        "AI tools were used in the production of the voice acting. We are a five-person team that has been working on this project for several years without the budget of a large studio. In our case, this was a practical solution that allowed us to complete the game at the level of quality we were aiming for. All creative decisions and the final shape of the game were made by our team. AI was used as a supporting production tool, not as a replacement for the creative work behind the game.",    
-    ]}
+<ReactionQuote
+    reaction="quote"
+    text='"AI tools were used in the production of the voice acting. We are a five-person team that has been working on this project for several years without the budget of a large studio. In our case, this was a practical solution that allowed us to complete the game at the level of quality we were aiming for. All creative decisions and the final shape of the game were made by our team. AI was used as a supporting production tool, not as a replacement for the creative work behind the game."'
     />
 
 This, when dissected, is saying:

src/routes/feed/+page.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+    import Content from "$lib/viewport/content.svelte";
+    import Banner2 from "$lib/banner2.svelte";
+    import TableOfContents from "$lib/components/table-of-contents.svelte";
+
+    export let data;
+</script>
+
+<svelte:head>
+    <title>Art Feed | denizk0461</title>
+</svelte:head>
+
+{#snippet pageButtons(currentIndex: number)}
+    <div class="page-button-container blurred-background">
+        {#if currentIndex == 1}
+            <p class="page-button page-button-left">x</p>
+        {:else}
+            <a class="page-button page-button-left page-button-clickable" href="?p={currentIndex - 1}">&lt;</a>
+        {/if}
+
+        {#each { length: data.maxPages }, index}
+            <a class="page-index" href="?p={index + 1}">{index + 1}</a>
+        {/each}
+
+        {#if currentIndex == data.maxPages}
+            <p class="page-button page-button-right">x</p>
+        {:else}
+            <a class="page-button page-button-right page-button-clickable" href="?p={currentIndex + 1}">&gt;</a>
+        {/if}
+    </div>
+{/snippet}
+
+<Content>
+    <Banner2
+        title="Art & Project Feed"
+        banner="banner.webp"
+        bannerAlt="Mirror picture of me, pixelated beyond recognition"
+        subtitle="subtitle missing"
+    />
+
+    {@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>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 /> -->
+    
+    {#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} />
+    {/each}
+
+</Content>
+
+<style>
+    .page-button-container {
+        display: flex;
+        flex-direction: row;
+        align-items: stretch;
+        justify-content: center;
+        border-radius: var(--border-radius);
+        overflow: hidden;
+        width: fit-content;
+        margin: 12px auto;
+        border-top: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
+        border-bottom: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
+    }
+
+    .page-button, .page-index {
+        font-family: var(--font-mono);
+        padding: 8px 18px;
+        font-weight: 600;
+        margin: 0;
+        transition: background-color var(--duration-animation) var(--anim-curve);
+    }
+
+    .page-button {
+        color: var(--color-text);
+    }
+    .page-button-left {
+        border-right: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
+    }
+    .page-button-right {
+        border-left: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
+    }
+    .page-button-clickable:hover {
+        cursor: pointer;
+    }
+
+    .page-index:link, .page-index:visited {
+        color: var(--color-text)
+    }
+
+    .page-index:hover, .page-button-clickable:hover {
+        text-decoration: none;
+        background-color: var(--color-background-highlight-alt);
+    }
+
+    .subtitle {
+        font-family: var(--font-mono);
+        margin: 0;
+        font-size: 1rem;
+        line-height: 1.4rem;
+        font-style: italic;
+        font-weight: 700;
+        color: var(--color-highlight-alt);
+    }
+
+    .subtitle::before {
+        content: "<!-- ";
+    }
+
+    .subtitle::after {
+        content: " -->";
+    }
+</style>

src/routes/feed/+page.ts

@@ -0,0 +1,50 @@
+import { entries } from './feed';
+
+interface FeedEntry {
+    content: any;
+    title: string;
+    subtitle: string;
+    date: string;
+}
+
+let entriesPerPage = 8;
+
+export async function load({ params, url }) {
+    // Get page index
+    let pageIndex = Number(url.searchParams.get('p'));
+    if (pageIndex == 0) {
+        pageIndex = 1;
+    }
+
+    // TODO check if index exceeds maximum permitted and redirect (to max page?)
+
+    let feedEntries: FeedEntry[] = [];
+    let start = (pageIndex - 1) * entriesPerPage;
+
+    for (let i = start; i < start + entriesPerPage; i += 1) {
+        // Stop iterating when end reached
+        if (i >= entries.length) {
+            break;
+        }
+        // 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;
+        
+        feedEntries.push({
+            content: page.default,
+            title: md.title,
+            subtitle: md.subtitle,
+            date: md.date,
+        });
+    }
+
+    let currentPage = pageIndex;
+    let maxPages = Math.ceil(entries.length / entriesPerPage);
+
+    return {
+        currentPage,
+        maxPages,
+        feedEntries,
+    };
+}

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

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

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

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

src/routes/feed/feed.ts

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

src/routes/projects/+page.svelte

@@ -36,9 +36,9 @@
         title="My Disordered Projects"
         banner="/projects/banner.webp"
         bannerAlt="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."
-        subtitle="Things I have worked on" />
+        subtitle="things I have worked on" />
 
-    <p>Welcome to my (new) projects page! Here I show off all the things I have done. Projects are ordered reverse-chronologically and have some other neat information displayed. have fun browsing~!</p>
+    <p>Welcome to my 💫new💫 projects page! Here I show off all the things I have done. Projects are ordered reverse-chronologically and have some other neat information displayed. have fun browsing~!</p>
 
     <p>I'll add some more of my past projects, new projects, and more details about individual projects. Maybe I'll also split the content into pages.</p>