From 9bc15030b32887ede0572326f0587ca73434c479 Mon Sep 17 00:00:00 2001
From: denizk0461 <denizk0461@mailbox.org>
Date: Thu, 9 Apr 2026 21:45:37 +0200
Subject: [PATCH] edited style of projects page entries; now fetching banner
 correctly, respecting both relative and absolute paths

---
 src/routes/projects/+page.svelte              |  72 +++++++++++++++---
 src/routes/projects/projects2.ts              |   8 +-
 .../anewbeginning/{icon.webp => cover.webp}   | Bin
 3 files changed, 67 insertions(+), 13 deletions(-)
 rename static/projects/anewbeginning/{icon.webp => cover.webp} (100%)

diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
index 3591834..4ee9660 100644
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -23,6 +23,14 @@
             link: "/art/music",
         },
     ];
+
+    function getBannerSrc(p: Project): string {
+        if (p.banner.startsWith("/")) {
+            return p.banner;
+        } else {
+            return `${p.category}/${p.id}/${p.banner}`;
+        }
+    }
 </script>
 
 <svelte:head>
@@ -65,11 +73,21 @@
 
 {#snippet projectContent(p: Project)}
     <div class="project-content-container">
-        <img class="project-banner" src={p.banner} alt={p.bannerAlt}>
+        <img class="project-banner" src={getBannerSrc(p)} alt={p.bannerAlt}>
         <div class="project-text-container">
-            <p class="project-title">{p.title}</p>
-            <p class="project-subtitle">{p.subtitle}</p>
-            <p class="project-date">{p.date}</p>
+            <div class="project-text-left">
+                <p class="project-title">
+                    {#if p.isHighlight}
+                        &#10047;
+                    {/if}
+                    {p.title}
+                </p>
+                <p class="project-subtitle">{p.subtitle}</p>
+                <p class="project-date">{p.date}</p>
+            </div>
+            <div class="project-text-right">
+                <p class="project-category">{p.category}</p>
+            </div>
         </div>
     </div>
 {/snippet}
@@ -107,20 +125,23 @@
 
 <style>
     .project-container {
-        display: grid;
+        display: flex;
         /* grid-template-columns: 1fr 1fr; */
-        grid-template-columns: 1fr;
+        /* grid-template-columns: 1fr; */
         gap: 4px;
+        margin: 0 auto;
+        flex-direction: column;
+        justify-content: stretch;
     }
 
     .project-wrapper {
         display: flex;
         flex-direction: column;
         margin: 0;
-        /* border-radius: var(--border-radius); */
         /* gap: 4px; */
         overflow: hidden;
         text-decoration: none;
+        transition: border-radius var(--duration-animation) var(--anim-curve);
     }
 
     .project-content-container {
@@ -136,7 +157,7 @@
         width: 100%;
         height: 100%;
         z-index: -1;
-        filter: brightness(60%) saturate(40%) blur(4px);
+        filter: brightness(40%) saturate(40%) blur(1px);
         transition: filter var(--duration-animation) var(--anim-curve);
     }
 
@@ -144,8 +165,16 @@
         filter: brightness(60%) saturate(100%) blur(0);
     }
 
+    .project-wrapper:hover {
+        border-radius: var(--border-radius);
+    }
+
     .project-text-container {
-        padding: 8px 16px;
+        padding: 16px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: end;
     }
 
     .project-text-container p {
@@ -153,9 +182,14 @@
         margin: 0;
     }
 
+    .project-highlight-marker {
+        color: aqua;
+    }
+
     .project-title {
         font-family: var(--font-mono);
-        font-size: 1.4rem;
+        font-size: 1.5rem;
+        line-height: 1.8rem;
         font-weight: 700;
     }
 
@@ -168,6 +202,24 @@
         font-weight: 600;
     }
 
+    .project-category {
+        font-family: var(--font-mono);
+        font-weight: 600;
+        font-size: 1.0rem;
+    }
+
+    @media screen and (max-width: 800px) {
+        .project-title {
+            font-size: 1.3rem;
+            line-height: 1.5rem;
+        }
+
+        .project-subtitle, .project-date, .project-category {
+            font-size: 1.0rem;
+            line-height: 1.4rem;
+        }
+    }
+
 
     /* .project-subtitle {
         font-family: var(--font-mono);
diff --git a/src/routes/projects/projects2.ts b/src/routes/projects/projects2.ts
index 18feff2..b7fe5d0 100644
--- a/src/routes/projects/projects2.ts
+++ b/src/routes/projects/projects2.ts
@@ -11,6 +11,7 @@ export interface Project {
     date: string;
     status: ProjectStatus;
     links: Link[]; // may pass an empty array
+    isHighlight?: boolean;
 };
 
 export interface Link {
@@ -63,7 +64,7 @@ export const projects: Project[] = [
         banner: "/projects/projectn5/banner2.webp",
         bannerAlt: "",
         title: "Homesick",
-        subtitle: "",
+        subtitle: "my main video game project",
         description: "",
         isOngoing: true,
         date: "September 2023 – now",
@@ -82,6 +83,7 @@ export const projects: Project[] = [
             //     link: "https://files.natconf.dev/public/projectn5",
             // },
         ],
+        isHighlight: true,
     },
 
     // 2026
@@ -147,7 +149,7 @@ export const projects: Project[] = [
         banner: "/projects/projektike/banner.webp",
         bannerAlt: "",
         title: "Projektike",
-        subtitle: "PvP Game",
+        subtitle: "Local PvP Game",
         description: "",
         isOngoing: false,
         date: "August 2024 – May 2025",
@@ -363,7 +365,7 @@ export const projects: Project[] = [
         banner: "",
         bannerAlt: "",
         title: "A New Beginning",
-        subtitle: "",
+        subtitle: "Coming-of-age EP",
         description: "",
         isOngoing: false,
         date: "May – August 2018",
diff --git a/static/projects/anewbeginning/icon.webp b/static/projects/anewbeginning/cover.webp
similarity index 100%
rename from static/projects/anewbeginning/icon.webp
rename to static/projects/anewbeginning/cover.webp