sorted project assets into new folder structure and added (temporary?) banners for all projects

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,12 +73,22 @@
 
 {#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>
+            <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);

src/routes/projects/[category]/[id]/+page.svelte

@@ -49,6 +49,7 @@
         color: var(--color-text);
         padding: 4px 12px;
         margin: 0;
+        font-weight: 600;
 
         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);

src/routes/projects/[category]/[id]/+page.ts

@@ -3,17 +3,8 @@ import { projects, type Project } from '../../projects2';
 export async function load({ params }) {
     const post = await import(`../../${params.category}/${params.id}.md`);
 
-    // const tag: string = `${params.year}/${params.date}`; // link to the page. not to be confused with tags. i know it's confusing naming
-    const projectDetails = projects.find((p: Project) => p.category.toString() == params.category.toString() && p.id == params.id);
+    const projectDetails: Project = projects.find((p: Project) => p.category.toString() == params.category.toString() && p.id == params.id)!;
     const content = post.default;
-    // const title: string = postValues?.title ?? "";
-    // const subtitle: string = postValues?.subtitle ?? "";
-    // const date: string = postValues?.date ?? "";
-    // const dateUpdated: string = postValues?.dateUpdated ?? "";
-    // const time: string = postValues?.time ?? "";
-    // const banner: string = postValues?.banner ?? "";
-    // const description: string = postValues?.description ?? "";
-    // const tags: BlogPostTag[] = postValues?.tags ?? []; // blog post tags. should be renamed 'keywords'
 
     return {
         content,

src/routes/projects/projects2.ts

@@ -9,8 +9,10 @@ export interface Project {
     description: string;
     isOngoing: boolean; // whether the project is currently active (true) or a past project (false)
     date: string;
+    dateUpdated?: string;
     status: ProjectStatus;
     links: Link[]; // may pass an empty array
+    isHighlight?: boolean;
 };
 
 export interface Link {
@@ -63,7 +65,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 +84,7 @@ export const projects: Project[] = [
             //     link: "https://files.natconf.dev/public/projectn5",
             // },
         ],
+        isHighlight: true,
     },
 
     // 2026
@@ -126,7 +129,7 @@ export const projects: Project[] = [
     {
         category: ProjectCategory.GAMES,
         id: "magician",
-        banner: "/projects/magician/banner.webp",
+        banner: "banner.webp",
         bannerAlt: "",
         title: "Magician",
         subtitle: "Online Multiplayer Card Game",
@@ -144,10 +147,10 @@ export const projects: Project[] = [
     {
         category: ProjectCategory.GAMES,
         id: "projektike",
-        banner: "/projects/projektike/banner.webp",
+        banner: "banner.webp",
         bannerAlt: "",
         title: "Projektike",
-        subtitle: "PvP Game",
+        subtitle: "Local PvP Game",
         description: "",
         isOngoing: false,
         date: "August 2024 – May 2025",
@@ -160,7 +163,7 @@ export const projects: Project[] = [
     {
         category: ProjectCategory.ELECTRONICS,
         id: "3ds-usb-c",
-        banner: "",
+        banner: "finished.webp",
         bannerAlt: "",
         title: "3DS USB-C mod",
         subtitle: "DIY charging port mod",
@@ -196,7 +199,7 @@ export const projects: Project[] = [
     {
         category: ProjectCategory.ELECTRONICS,
         id: "deej0461",
-        banner: "",
+        banner: "finished.webp",
         bannerAlt: "",
         title: "deej0461",
         subtitle: "PC companion audio source controller",
@@ -210,7 +213,7 @@ export const projects: Project[] = [
     {
         category: ProjectCategory.APPS,
         id: "weserplaner",
-        banner: "/projects/weserplaner/banner.webp",
+        banner: "banner.webp",
         bannerAlt: "",
         title: "WeserPlaner",
         subtitle: "University Timetable & Canteen Info App",
@@ -234,7 +237,7 @@ export const projects: Project[] = [
     {
         category: ProjectCategory.APPS,
         id: "textbasic",
-        banner: "",
+        banner: "icon.webp",
         bannerAlt: "",
         title: "Text Basic",
         subtitle: "Extremely Basic Text Widget App",
@@ -256,7 +259,7 @@ export const projects: Project[] = [
     {
         category: ProjectCategory.GAMES,
         id: "swordsnstuff",
-        banner: "/projects/swordsnstuff/banner.webp",
+        banner: "banner.webp",
         bannerAlt: "",
         title: "Swords & Stuff",
         subtitle: "Unity 2D RPG",
@@ -274,7 +277,7 @@ export const projects: Project[] = [
     {
         category: ProjectCategory.GAMES,
         id: "tads",
-        banner: "/projects/tads/banner.webp",
+        banner: "banner.webp",
         bannerAlt: "",
         title: "Totally Accurate Dating Simulator",
         subtitle: "HTML Text Adventure",
@@ -298,7 +301,7 @@ export const projects: Project[] = [
     {
         category: ProjectCategory.MUSIC,
         id: "dreamworld",
-        banner: "/projects/dreamworld/banner.webp",
+        banner: "banner.webp",
         bannerAlt: "",
         title: "Dreamworld",
         subtitle: "My First Album",
@@ -318,7 +321,7 @@ export const projects: Project[] = [
     {
         category: ProjectCategory.APPS,
         id: "qwark",
-        banner: "",
+        banner: "icon.webp",
         bannerAlt: "",
         title: "Qwark Grade Log",
         subtitle: "Grade Logging App",
@@ -336,7 +339,7 @@ export const projects: Project[] = [
     {
         category: ProjectCategory.APPS,
         id: "avhplan",
-        banner: "",
+        banner: "icon.webp",
         bannerAlt: "",
         title: "AvH-Vertretungsplan",
         subtitle: "Substitution Plan App",
@@ -360,10 +363,10 @@ export const projects: Project[] = [
     {
         category: ProjectCategory.MUSIC,
         id: "anewbeginning",
-        banner: "",
+        banner: "cover.webp",
         bannerAlt: "",
         title: "A New Beginning",
-        subtitle: "",
+        subtitle: "Coming-of-age EP",
         description: "",
         isOngoing: false,
         date: "May – August 2018",
@@ -380,7 +383,7 @@ export const projects: Project[] = [
     {
         category: ProjectCategory.MUSIC,
         id: "soundcloud",
-        banner: "",
+        banner: "icon2.webp",
         bannerAlt: "",
         title: "Soundcloud",
         subtitle: "Demo Dump & Archive",