added dates to projects

src/lib/projects.ts

@@ -21,6 +21,7 @@ export const projects: Project[] = [
         isActive: true,
         banner: "/projects/projectn5/banner.webp",
         icon: "",
+        date: "September 2023 – now",
         title: "Project N5",
         subtitle: "",
         paragraphs: [
@@ -47,6 +48,7 @@ export const projects: Project[] = [
         isActive: true,
         banner: "/projects/projektike/banner.webp",
         icon: "",
+        date: "August 2024 – now",
         title: "Projektike",
         subtitle: "PvP Game",
         paragraphs: [
@@ -64,6 +66,7 @@ export const projects: Project[] = [
         isActive: false,
         banner: "/projects/daisyfm/banner.webp",
         icon: "",
+        date: "July – September 2024",
         title: "Daisy",
         subtitle: "Electro-Smith Daisy-based FM synth",
         paragraphs: [
@@ -89,6 +92,7 @@ export const projects: Project[] = [
         isActive: false,
         banner: "/projects/weserplaner/banner.webp",
         icon: "/projects/weserplaner/icon.webp",
+        date: "April 2023 – January 2024",
         title: "WeserPlaner",
         subtitle: "University Timetable & Canteen Info App",
         paragraphs: [
@@ -112,6 +116,7 @@ export const projects: Project[] = [
         isActive: false,
         banner: "",
         icon: "/projects/textbasic/icon.webp",
+        date: "May – November 2023",
         title: "Text Basic",
         subtitle: "Extremely Basic Text Widget App",
         paragraphs: [
@@ -132,8 +137,9 @@ export const projects: Project[] = [
     {
         id: "dreamworld",
         isActive: false,
-        banner: "",
+        banner: "/projects/dreamworld/banner.webp",
         icon: "/projects/dreamworld/icon.webp",
+        date: "July 2019 – September 2021",
         title: "Dreamworld",
         subtitle: "My First Album",
         paragraphs: [
@@ -153,33 +159,12 @@ export const projects: Project[] = [
             },
         ],
     },
-    {
-        id: "anewbeginning",
-        isActive: false,
-        banner: "",
-        icon: "/projects/anewbeginning/icon.webp",
-        title: "A New Beginning",
-        subtitle: "",
-        paragraphs: [
-            "<b>A New Beginning</b> is an EP I wrote back in 2018 in an effort to change up my production style. Originally, this EP was released as <i>A New Beginning (3-Track)</i>, featuring A New Beginning as <i>Nowy Początek</i> and <i>Farewell</i> in two different versions, one being an instrumental titled <i>Trzymajcie Się</i>, and the other one being a bootleg of Kelly Clarkson's <i>Behind These Hazel Eyes</i> called <i>Behind These Hazel Eyes (D4rkn355 'Farewell' Bootleg)</i>! For copyright reasons, the bootleg never made it onto Spotify.",
-            "This EP, to me, represents the start of a deviation in tone, production quality, and musical style from my previous works. While it was only a start, I am quite proud of the works I produced.",
-        ],
-        links: [
-            {
-                text: "Listen on <b>Spotify</b>",
-                link: "https://open.spotify.com/album/1OKwmD2ir1mnEOlsh01Woy",
-            },
-            {
-                text: "Listen on <b>YouTube</b>",
-                link: "https://www.youtube.com/playlist?list=OLAK5uy_lw6IbOgCciSSnevP-IDH-kkxAK1PJuA40",
-            },
-        ],
-    },
     {
         id: "qwark",
         isActive: false,
         banner: "",
         icon: "/projects/qwark/icon.webp",
+        date: "June 2019 – March 2020",
         title: "Qwark Grade Log",
         subtitle: "Grade Logging App",
         paragraphs: [
@@ -198,6 +183,7 @@ export const projects: Project[] = [
         id: "avhplan",
         isActive: false,
         banner: "",
+        date: "April 2019 – March 2020",
         icon: "/projects/avhplan/icon.webp",
         title: "AvH-Vertretungsplan",
         subtitle: "Substitution Plan App",
@@ -218,6 +204,29 @@ export const projects: Project[] = [
             },
         ],
     },
+    {
+        id: "anewbeginning",
+        isActive: false,
+        banner: "",
+        icon: "/projects/anewbeginning/icon.webp",
+        date: "May – August 2018",
+        title: "A New Beginning",
+        subtitle: "",
+        paragraphs: [
+            "<b>A New Beginning</b> is an EP I wrote back in 2018 in an effort to change up my production style. Originally, this EP was released as <i>A New Beginning (3-Track)</i>, featuring A New Beginning as <i>Nowy Początek</i> and <i>Farewell</i> in two different versions, one being an instrumental titled <i>Trzymajcie Się</i>, and the other one being a bootleg of Kelly Clarkson's <i>Behind These Hazel Eyes</i> called <i>Behind These Hazel Eyes (D4rkn355 'Farewell' Bootleg)</i>! For copyright reasons, the bootleg never made it onto Spotify.",
+            "This EP, to me, represents the start of a deviation in tone, production quality, and musical style from my previous works. While it was only a start, I am quite proud of the works I produced.",
+        ],
+        links: [
+            {
+                text: "Listen on <b>Spotify</b>",
+                link: "https://open.spotify.com/album/1OKwmD2ir1mnEOlsh01Woy",
+            },
+            {
+                text: "Listen on <b>YouTube</b>",
+                link: "https://www.youtube.com/playlist?list=OLAK5uy_lw6IbOgCciSSnevP-IDH-kkxAK1PJuA40",
+            },
+        ],
+    },
     {
         id: "soundcloud",
         isActive: false,

src/routes/+layout.svelte

@@ -194,6 +194,7 @@
 
         a:link {
             color: var(--color-link-unvisited);
+            text-decoration-style: dashed;
         }
         /* visited link */
         a:visited {
@@ -248,6 +249,7 @@
         
         .project-banner {
             margin: 0; /* reset left/right margins */
+            width: 100%;
         }
 
         .project-icon {
@@ -259,19 +261,23 @@
         .project-date {
             font-size: 1rem;
             font-weight: 700;
-            position: absolute;
+            line-height: 1rem;
-            left: 0;
+            width: fit-content;
-            bottom: 0;
             margin: 0;
             padding: 0;
-            line-height: 1rem;
+            
-
             color: var(--color-text-dark);
             background-color: var(--color-highlight);
             font-family: 'Space Mono', monospace;
             padding: 4px;
         }
 
+        .project-date-embed {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+        }
+
         .pixelated-img {
             image-rendering: pixelated;
         }

src/routes/games/+page.svelte

@@ -44,7 +44,7 @@
         <div class="project-banner-container">
             <img class="project-banner" src="{game.banner}">
             {#if game.date}
-            <p class="project-date">{game.date}</p>
+            <p class="project-date project-date-embed">{game.date}</p>
             {/if}
         </div>
         {/if}

src/routes/projects/+page.svelte

@@ -52,7 +52,16 @@
         <p class="project-subtitle">» {project.subtitle}</p>
         {/if}
         {#if project.banner}
-        <img class="project-banner" src="{project.banner}">
+        <div class="project-banner-container">
+            <img class="project-banner" src="{project.banner}">
+            {#if project.date}
+            <p class="project-date project-date-embed">{project.date}</p>
+            {/if}
+        </div>
+        {:else}
+        {#if project.date}
+        <p class="project-date">{project.date}</p>
+        {/if}
         {/if}
         {#if project.icon}
         <img class="project-icon" src="{project.icon}">