added Small Projects page; added update about status markers on Projects page

src/lib/components/outlined-button.svelte

@@ -21,7 +21,7 @@
         font-family: var(--font-mono);
         font-size: var(--font-size-mono);
         padding: 8px;
-        border: dashed var(--border-dash-size) var(--color-highlight);
+        border: var(--border-style) var(--border-dash-size) var(--color-highlight);
         color: var(--color-highlight);
         font-weight: 700;
         cursor: pointer;

src/lib/components/subtitled-image.svelte

@@ -43,7 +43,7 @@
     .subtitled-img-container {
         display: flex;
         flex-direction: column;
-        border: var(--border-dash-size) var(--color-highlight) dashed;
+        border: var(--border-dash-size) var(--color-highlight) var(--border-style);
         text-decoration: none;
         box-sizing: border-box;
         backdrop-filter: blur(var(--blur-radius-background));

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

@@ -85,7 +85,7 @@
             margin-right: auto;
             background-color: var(--color-background-highlight);
             padding: 16px 0;
-            border: dashed var(--border-dash-size) var(--color-highlight);
+            border: var(--border-style) var(--border-dash-size) var(--color-highlight);
             backdrop-filter: blur(var(--blur-radius-background));
         }
 
@@ -106,8 +106,8 @@
             display: inline-block;
             text-decoration: none;
             box-sizing: border-box;
-            transition: color var(--duration-animation) ease-out,
+            /* transition: color var(--duration-animation) ease-out,
-                        background-color var(--duration-animation) ease-out;
+                        background-color var(--duration-animation) ease-out; */
         }
         .toc-list a, .toc-list a:link, .toc-list a:visited {
             color: var(--color-text);

src/lib/lists/gallery-row.svelte

@@ -43,7 +43,7 @@
         transition: background-color var(--duration-animation) ease-out,
                     border-color var(--duration-animation) ease-out,
                     backdrop-filter var(--duration-blur) ease-out;
-        border: var(--border-dash-size) dashed transparent;
+        border: var(--border-dash-size) var(--border-style) transparent;
     }
 
     .row-entry:hover {

src/lib/lists/gallery.svelte

@@ -85,7 +85,7 @@
         height: 100%;
         padding-left: 16px;
         padding-right: 16px;
-        border-style: dashed;
+        border-style: var(--border-style);
         justify-content: center;
         border-color: transparent;
         border-width: var(--border-dash-size);

src/lib/viewport/footer.svelte

@@ -68,7 +68,7 @@
 
     footer a:hover {
         font-weight: 700;
-        text-decoration: dashed var(--underline-dash-size) var(--color-highlight) underline;
+        text-decoration: var(--border-style) var(--underline-dash-size) var(--color-highlight) underline;
     }
 
     .bottom-rat {

src/lib/viewport/header.svelte

@@ -46,7 +46,7 @@
     a:hover {
         font-weight: 700;
         /* color: var(--color-highlight); */
-        text-decoration: dashed var(--underline-dash-size) var(--color-highlight) underline;
+        text-decoration: var(--border-style) var(--underline-dash-size) var(--color-highlight) underline;
     }
 
     @media screen and (max-width: 500px) {

src/routes/+layout.svelte

@@ -134,6 +134,7 @@
             --blur-radius-background: 6px;
 
             /* borders */
+            --border-style: dashed;
             --border-dash-size: 2px;
             --underline-dash-size: 1px;
             
@@ -277,7 +278,7 @@
             width: 100%;
             height: 1px;
             border: none;
-            border-top: var(--border-dash-size) dashed var(--color-highlight);
+            border-top: var(--border-dash-size) var(--border-style) var(--color-highlight);
             margin: 8px 0;
         }
 
@@ -328,7 +329,7 @@
             color: var(--color-link-unvisited);
             text-decoration-thickness: var(--underline-dash-size);
             text-decoration-color: transparent;
-            text-decoration-style: dashed;
+            text-decoration-style: var(--border-style);
         }
         /* visited link */
         a:visited {

src/routes/+page.svelte

@@ -131,7 +131,7 @@
 
     .update-container {
         padding: 8px 24px;
-        border: var(--border-dash-size) var(--color-highlight) dashed;
+        border: var(--border-dash-size) var(--color-highlight) var(--border-style);
         backdrop-filter: blur(var(--blur-radius-background));
     }
 
@@ -139,7 +139,7 @@
         text-decoration: none;
     }
     .update-header-link:hover {
-        text-decoration: underline dashed var(--border-dash-size) var(--color-highlight);
+        text-decoration: underline var(--border-style) var(--border-dash-size) var(--color-highlight);
     }
     
     .update-header {

src/routes/meta/about/+page.svelte

@@ -169,6 +169,8 @@
 
     <p>The <a href="https://ratchetandclank.fandom.com/wiki/Ratchet">rat</a> in the bottom right of the screen is property of <a href="https://insomniac.games/">Insomniac Games</a>. Clicking it will bring you good fortune.</p>
 
+    <p>The style of the webring elements is adapted from a template provided by Rainbow Cemetery for the <a href="https://www.rainbowcemetery.com/devring/">Gamedev webring</a>. I adapted it into <a href="https://code.denizk0461.dev/denizk0461/pages/src/branch/master/src/lib/components/ring.svelte">a Svelte component</a> that allows setting the links, emojis, and arrows more easily.</p>
+
     <h2 id="contact">Contact / Where to find me</h2>
 
     <p>Best to e-mail me if you want to get in touch – it's the only way I'm currently reliably available!</p>
@@ -199,7 +201,7 @@
 
     <hr>
 
-    <p><i>Last updated: 2026-02-21</i></p>
+    <p><i>Last updated: 2026-02-25</i></p>
 </Content>
 
 <style>

src/routes/meta/updates/updates.ts

@@ -1,6 +1,12 @@
 import { type UpdateEntry } from "$lib/components/update-entry.svelte";
 
 export const entries: UpdateEntry[] = [
+    {
+        date: "2026-02-25",
+        time: "19:33",
+        content: "Added cool status markers to the projects page that show whether a project is currently active.",
+        link: "/projects",
+    },
     {
         date: "2026-02-21",
         time: "16:25",

src/routes/projects/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import Banner2 from "$lib/banner2.svelte";
     import TableOfContents from "$lib/components/table-of-contents.svelte";
-    import { type Project, games, hardware, apps, music } from './projects';
+    import { type Project, games, hardware, apps, music, getStatusText, getStatusCode } from './projects';
     import LinkList from "$lib/lists/link-list.svelte";
     import Content from "$lib/viewport/content.svelte";
 </script>
@@ -17,6 +17,10 @@
         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" />
 
+    <p>Welcome to my projects page! Here I show off all the things I have done. Projects are ordered by general topic, sorted reverse-chronologically, and have a status marker assigned that shows whether they are active or not. have fun browsing~!</p>
+
+    <p>The projects page also has <a href="small">a sister page</a> where I document some of my smaller projects, if that interests you.</p>
+
     <TableOfContents />
 
     <h2 id="games">Games</h2>
@@ -35,6 +39,11 @@
     {/each}
 
     <h2 id="music">Music</h2>
+
+    <p>I made a lot of music in the past; over a hundred songs in total. There's at least a small story behind pretty much every one of them here, and I am chronicling my memories on a subpage.</p>
+
+    <p>You can find this <a href="my-tracks">here</a>, if you're interested.</p>
+
     {#each music as project}
         {@render projectSummary({ project: project })}
     {/each}
@@ -52,15 +61,16 @@
     {#if project.banner}
         <div class="project-banner-container">
             <img class="project-banner" src="{project.banner}" alt="Overview banner for {project.title}">
-            {#if project.date}
-                <p class="date-marker project-date-embed">{project.date}</p>
-            {/if}
         </div>
-    {:else}
-        {#if project.date}
-            <p class="date-marker">{project.date}</p>
-        {/if}
     {/if}
+
+    <p class="project-info project-status-c-{getStatusCode(project)}">
+        {#if project.date}
+            {project.date} | 
+        {/if}
+        {getStatusText(project)}
+    </p>
+
     {#if project.icon}
         <img class="project-icon" src="{project.icon}" alt="Icon for {project.title}">
     {/if}
@@ -101,4 +111,42 @@
         left: 0;
         bottom: 0;
     }
+
+    .project-info {
+        width: fit-content;
+        display: flex;
+        flex-direction: row;
+        margin-top: 16px;
+        background-color: color-mix(in srgb, var(--color-status) 6%, transparent);
+        border: var(--border-style) var(--border-dash-size) var(--color-status);
+        padding: 2px 8px;
+        backdrop-filter: blur(var(--blur-radius-background));
+
+        font-family: var(--font-mono);
+        font-size: 1.0rem;
+        font-weight: 700;
+        color: var(--color-status);
+    }
+
+    /* #region Project Status Colours */
+    .project-status-c-act {
+        --color-status: var(--color-highlight);
+    }
+
+    .project-status-c-ina {
+        --color-status: #B89751;
+    }
+
+    .project-status-c-aba {
+        --color-status: #D15555;
+    }
+
+    .project-status-c-fin {
+        --color-status: #5486D8;
+    }
+
+    .project-status-c-eol {
+        --color-status: #C353C1;
+    }
+    /* #endregion */
 </style>

src/routes/projects/my-tracks/+page.svelte

@@ -0,0 +1,20 @@
+<script>
+    import Banner2 from "$lib/banner2.svelte";
+    import Content from "$lib/viewport/content.svelte";
+</script>
+
+<svelte:head>
+    <title>My Tracks | denizk0461</title> 
+</svelte:head>
+
+<Content>
+    <Banner2
+        title="My Tracks"
+        subtitle=""
+        banner=""
+        bannerAlt="" />
+
+    well this is awkward. there's nothing here yet. come back later?
+
+    <!-- <p>Fun fact: this page is named 'my tracks' because the folder on my PC where I store my finished songs is called 'my tracks' and it's been like this for a very long time.</p> -->
+</Content>

src/routes/projects/projects.ts

@@ -8,13 +8,56 @@ export interface Project {
     subtitle: string;
     paragraphs: string[];
     links: Link[];
+    status: ProjectStatus;
 };
 
+export enum ProjectStatus {
+    ACTIVE,
+    INACTIVE,
+    ABANDONED,
+    FINISHED,
+    EOL, // end of life
+}
+
 export interface Link {
     text: string;
     link: string;
 }
 
+export function getStatusText(project: Project): String {
+    switch (project.status) {
+        case ProjectStatus.ACTIVE:
+            return "active";
+        case ProjectStatus.INACTIVE:
+            return "inactive";
+        case ProjectStatus.ABANDONED:
+            return "abandoned";
+        case ProjectStatus.FINISHED:
+            return "finished";
+        case ProjectStatus.EOL:
+            return "end-of-life";
+    }
+}
+
+/**
+ * Returns static codes that can be used to reference same-name CSS classes
+ * without relying on display text.
+ */
+export function getStatusCode(project: Project): String {
+    switch (project.status) {
+        case ProjectStatus.ACTIVE:
+            return "act";
+        case ProjectStatus.INACTIVE:
+            return "ina";
+        case ProjectStatus.ABANDONED:
+            return "aba";
+        case ProjectStatus.FINISHED:
+            return "fin";
+        case ProjectStatus.EOL:
+            return "eol";
+    }
+}
+
 export const games: Project[] = [
     {
         id: "projectn5",
@@ -42,6 +85,7 @@ export const games: Project[] = [
                 link: "https://files.denizk0461.dev/projectn5",
             },
         ],
+        status: ProjectStatus.ACTIVE,
     },
     {
         id: "magician",
@@ -61,6 +105,7 @@ export const games: Project[] = [
                 link: "https://apps.denizk0461.dev/magician",
             },
         ],
+        status: ProjectStatus.ABANDONED,
     },
     {
         id: "projektike",
@@ -76,6 +121,7 @@ export const games: Project[] = [
         ],
         links: [
         ],
+        status: ProjectStatus.ABANDONED,
     },
     {
         id: "swordsnstuff",
@@ -96,6 +142,7 @@ export const games: Project[] = [
                 link: "https://apps.denizk0461.dev/swordsnstuff",
             },
         ],
+        status: ProjectStatus.ABANDONED,
     },
     {
         id: "tads",
@@ -119,6 +166,7 @@ export const games: Project[] = [
                 link: "https://apps.denizk0461.dev/tads/2",
             },
         ],
+        status: ProjectStatus.FINISHED,
     },
 ];
 
@@ -148,6 +196,7 @@ export const hardware: Project[] = [
                 link: "https://codeberg.org/denizk0461/daisy-fm-synth",
             },
         ],
+        status: ProjectStatus.FINISHED,
     },
 ];
 
@@ -175,6 +224,7 @@ export const apps: Project[] = [
                 link: "https://play.google.com/store/apps/details?id=com.denizk0461.weserplaner",
             },
         ],
+        status: ProjectStatus.EOL,
     },
     {
         id: "textbasic",
@@ -198,6 +248,7 @@ export const apps: Project[] = [
                 link: "https://play.google.com/store/apps/details?id=com.denizk0461.textbasic",
             },
         ],
+        status: ProjectStatus.EOL,
     },
     {
         id: "qwark",
@@ -218,6 +269,7 @@ export const apps: Project[] = [
                 link: "https://github.com/denizk0461/qwark",
             },
         ],
+        status: ProjectStatus.EOL,
     },
     {
         id: "avhplan",
@@ -243,6 +295,7 @@ export const apps: Project[] = [
                 link: "https://github.com/denizk0461/avh-plan-ios",
             },
         ],
+        status: ProjectStatus.EOL,
     },
 ];
 
@@ -267,6 +320,7 @@ export const music: Project[] = [
                 link: "https://files.denizk0461.dev/my_tracks/Dreamworld/",
             },
         ],
+        status: ProjectStatus.FINISHED,
     },
     {
         id: "anewbeginning",
@@ -286,6 +340,7 @@ export const music: Project[] = [
                 link: "https://files.denizk0461.dev/my_tracks/A%20New%20Beginning/",
             },
         ],
+        status: ProjectStatus.FINISHED,
     },
     {
         id: "soundcloud",
@@ -308,5 +363,6 @@ export const music: Project[] = [
                 link: "https://soundcloud.com/djd4rkn355",
             },
         ],
+        status: ProjectStatus.INACTIVE,
     },
 ];

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

@@ -0,0 +1,21 @@
+<script>
+    import Banner2 from "$lib/banner2.svelte";
+    import Content from "$lib/viewport/content.svelte";
+</script>
+
+<svelte:head>
+    <title>Small Projects | denizk0461</title> 
+</svelte:head>
+
+<Content>
+    <Banner2
+        title="My Small Projects"
+        subtitle="the ones that don't get the spotlight"
+        banner=""
+        bannerAlt="" />
+
+    <p>Not all of my projects are big, month-long endeavours. Some of them are short and sweet. Sometimes, they're even more rewarding than the bigger ones, because you end up with a finished 'thing' much quicker! And because I like my small projects just as much as my bigger ones, I figured it would be nice to give them a space on my website as well.</p>
+
+    <p>Or at least I would... if you had come here a bit later. There's nothing here yet.</p>
+
+</Content>