added filter tags to projects; added zoom-out animation when hovering over a project page

src/routes/+layout.svelte

@@ -454,5 +454,61 @@
             font-family: var(--font-sans-serif);
             padding: 4px;
         }
+
+        /* TODO this should be in a component! */
+        .post-tag {
+            font-family: var(--font-mono);
+            font-size: 0.8rem;
+            background-color: var(--color-background-highlight-alt);
+            margin: 0;
+            padding: 4px;
+            border-radius: 8px;
+            line-height: 1rem;
+            font-weight: 600;
+        }
+        
+        .tag-filter-header {
+            font-family: var(--font-mono);
+            font-size: 0.9rem;
+            /* margin-left: 10px;    
+            margin-right: 10px; */
+            margin: 12px 10px 4px;
+            color: var(--color-text-highlight-alt);
+        }
+
+        .tag-filter-container {
+            display: flex;
+            gap: 8px 12px;
+            margin: 0 10px 8px;
+            flex-wrap: wrap;
+        }
+
+        .tag-filter {
+            width: fit-content;
+            font-size: 0.9rem;
+            color: var(--color-text);
+            padding: 8px;
+            border-radius: 12px;
+            cursor: pointer;
+            transition: background-color var(--duration-animation) var(--anim-curve);
+        }
+
+        .tag-filter-selected {
+            background-color: var(--color-highlight-alt);
+        }
+
+        .tag-filter:hover {
+            background-color: var(--color-background-highlight-hover-alt);
+        }
+
+        @media screen and (max-width: 600px) {
+            .tag-filter-container {
+                gap: 8px;
+            }
+
+            .tag-filter {
+                font-size: 0.8rem;
+            }
+        }
     }
 </style>

src/routes/+page.svelte

@@ -108,7 +108,7 @@
             <div class="sidebox-container blurred-background">
                 <h4 class="sidebox-header">heads-up</h4>
                 
-                <p>This website works best on Firefox and other Gecko-based browsers! It is also 100% mobile-friendly – or at least trying to be!</p>
+                <p>This website works best on Firefox and other Gecko-based browsers! It is also nearly 100% mobile-friendly!</p>
                 
                 <p>All pages are functional without JavaScript but I recommend you enable it (some elements won't work without it)!</p>
 

src/routes/blog/+layout.svelte

@@ -1,20 +0,0 @@
-<script>
-    let { children } = $props();
-</script>
-
-{@render children()}
-
-<style>
-    :global {
-        .post-tag {
-            font-family: var(--font-mono);
-            font-size: 0.8rem;
-            background-color: var(--color-background-highlight-alt);
-            margin: 0;
-            padding: 4px;
-            border-radius: 8px;
-            line-height: 1rem;
-            font-weight: 600;
-        }
-    }
-</style>

src/routes/blog/+page.svelte

@@ -17,7 +17,6 @@
         }
 
         let a: BlogPostLink[] = posts.filter((post) => post.post.tags.includes(filter))
-        console.log(a);
         return a;
     }
 </script>
@@ -45,50 +44,4 @@
     </div>
 
     <BlogGallery posts={filterPosts()} />
-</Content>
-
-<style>
-    .tag-filter-header {
-        font-family: var(--font-mono);
-        font-size: 0.9rem;
-        /* margin-left: 10px;    
-        margin-right: 10px; */
-        margin: 12px 10px 4px;
-        color: var(--color-text-highlight-alt);
-    }
-
-    .tag-filter-container {
-        display: flex;
-        gap: 8px 12px;
-        margin: 0 10px 8px;
-        flex-wrap: wrap;
-    }
-
-    .tag-filter {
-        width: fit-content;
-        font-size: 0.9rem;
-        color: var(--color-text);
-        padding: 8px;
-        border-radius: 12px;
-        cursor: pointer;
-        transition: background-color var(--duration-animation) var(--anim-curve);
-    }
-
-    .tag-filter-selected {
-        background-color: var(--color-highlight-alt);
-    }
-
-    .tag-filter:hover {
-        background-color: var(--color-background-highlight-hover-alt);
-    }
-
-    @media screen and (max-width: 600px) {
-        .tag-filter-container {
-            gap: 8px;
-        }
-
-        .tag-filter {
-            font-size: 0.8rem;
-        }
-    }
-</style>
+</Content>

src/routes/projects/+page.svelte

@@ -1,28 +1,13 @@
 <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, getStatusText, getStatusCode } from './projects';
-    import { projects, type Project, getStatusCode } from "./projects2";
-    import LinkList from "$lib/lists/link-list.svelte";
+    import { projects, type Project, ProjectCategory } from "./projects2";
     import Content from "$lib/viewport/content.svelte";
-    import GalleryRow, { type GalleryRowEntry } from "$lib/lists/gallery-row.svelte";
 
-    const subpages: GalleryRowEntry[] = [
-        {
-            title: "Small Projects",
-            description: "Showing off the projects that don't get the spotlight",
-            img: "small/crate.webp",
-            altText: "A cardboard box filled with electronic components, tools, and screws. They are arranged in 3D printed Gridfinity containers.",
-            link: "small",
-        },
-        {
-            title: "Discography",
-            description: "Small stories about my past music",
-            img: "/main/hypertext.webp",
-            altText: "",
-            link: "/art/music",
-        },
-    ];
+    let filter = $state(ProjectCategory.NULL);
+
+    function setFilter(tag: ProjectCategory) {
+        filter = tag;
+    }
 
     function getBannerSrc(p: Project): string {
         if (p.banner.startsWith("/")) {
@@ -31,6 +16,15 @@
             return `${p.category}/${p.id}/${p.banner}`;
         }
     }
+
+    function filterProjects(): Project[] {
+        if (filter == ProjectCategory.NULL) {
+            return projects;
+        }
+
+        let a: Project[] = projects.filter((project) => project.category === filter)
+        return a;
+    }
 </script>
 
 <svelte:head>
@@ -46,14 +40,22 @@
 
     <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>This page, in its current form, is inspired by <a href="https://deathsurplus.com/">DeathSurplus' art blog</a> – definitely go check out his website!</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>
 
-    <p>I'll add some more of my past projects, new projects, and an option to filter by project type <i>soon™</i>. Maybe I'll also split the content into pages.</p>
-
-    <hr>
+    <!-- TODO it would be nice if these were green here to separate them from the red tags on the blog page -->
+    <p class="tag-filter-header"># filter projects by category:</p>
+    <div class="tag-filter-container">
+        {#each Object.values(ProjectCategory) as tag}
+            {#if tag == filter}
+                <button class="post-tag tag-filter tag-filter-selected" onclick={() => { setFilter(tag) }}>{tag}</button>
+            {:else}
+                <button class="post-tag tag-filter" onclick={() => { setFilter(tag) }}>{tag}</button>
+            {/if}
+        {/each}
+    </div>
 
     <div class="project-container">
-        {#each projects as p}
+        {#each filterProjects() as p}
             {@render project(p)}    
         {/each}
     </div>
@@ -86,48 +88,16 @@
                 <p class="project-date">{p.date}</p>
             </div>
             <div class="project-text-right">
-                <p class="project-category">{p.category}</p>
+                <p class="project-status">{p.status}</p>
+                <p class="project-category">[{p.category}]</p>
             </div>
         </div>
     </div>
 {/snippet}
 
-<!-- {#snippet projectSummary({
-    project
-}: {
-    project: Project;
-})}
-    <h3 id="{project.id}">{project.title}</h3>
-    {#if project.subtitle}
-        <p class="project-subtitle">[ {project.subtitle} ]</p>
-    {/if}
-    {#if project.banner}
-        <div class="project-banner-container">
-            <img class="project-banner" src="{project.banner}" alt="Overview banner for {project.title}">
-        </div>
-    {/if}
-
-    <p class="project-info blurred-background project-status-c-{getStatusCode(project)}">
-        {#if project.date}
-            {project.date} | 
-        {/if}
-        {project}
-    </p>
-
-    {#if project.icon}
-        <img class="project-icon" src="{project.icon}" alt="Icon for {project.title}">
-    {/if}
-    {#each project.paragraphs as paragraph}
-        <p>{@html paragraph}</p>
-    {/each}
-    <LinkList entries={project.links} />
-{/snippet} -->
-
 <style>
     .project-container {
         display: flex;
-        /* grid-template-columns: 1fr 1fr; */
-        /* grid-template-columns: 1fr; */
         gap: 4px;
         margin: 0 auto;
         flex-direction: column;
@@ -158,11 +128,14 @@
         height: 100%;
         z-index: -1;
         filter: brightness(40%) saturate(40%) blur(1px);
-        transition: filter var(--duration-animation) var(--anim-curve);
+        transition: filter var(--duration-animation) var(--anim-curve),
+                    scale var(--duration-animation) var(--anim-curve);
+        scale: 1.05;
     }
 
     .project-wrapper:hover .project-banner {
         filter: brightness(60%) saturate(100%) blur(0);
+        scale: 1.0;
     }
 
     .project-wrapper:hover {
@@ -178,7 +151,7 @@
     }
 
     .project-text-container p {
-        text-shadow: 0 0 6px black;
+        text-shadow: 0 0 6px black, 0 0 9px black;
         margin: 0;
     }
 
@@ -202,7 +175,17 @@
         font-weight: 600;
     }
 
-    .project-category {
+    .project-text-right {
+        display: flex;
+        flex-direction: column;
+        align-items: end;
+    }
+
+    .project-status {
+        font-style: italic;
+    }
+
+    .project-category, .project-status {
         font-family: var(--font-mono);
         font-weight: 600;
         font-size: 1.0rem;
@@ -220,52 +203,6 @@
         }
     }
 
-
-    /* .project-subtitle {
-        font-family: var(--font-mono);
-        font-size: 1.0rem;
-        margin-top: 0;
-    }
-
-    .project-banner-container {
-        position: relative;
-        width: 100%;
-    }
-    
-    .project-banner {
-        margin: 0;
-        width: 100%;
-        object-fit: cover;
-        max-height: 300px;
-    }
-
-    .project-icon {
-        float: left;
-        margin: 16px 16px 16px 0;
-        width: 19%;
-    }
-
-    .project-date-embed {
-        position: absolute;
-        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;
-
-        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);

src/routes/projects/projects2.ts

@@ -21,6 +21,7 @@ export interface Link {
 }
 
 export enum ProjectCategory {
+    NULL = "all",
     DRAWINGS = "drawings",
     GAMES = "games",
     ELECTRONICS = "electronics",