Add Last Broadcast archive project!

src/lib/components/common/Tags.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  export let tags: string[];
+</script>
+
+<div class="tags">
+  {#each tags as tag}
+    <p>{tag}</p>
+  {/each}
+</div>
+
+<style lang="scss">
+    .tags {
+        display: flex;
+        gap: 0.7em;
+
+        p {
+            padding: 0.4em 1.3em;
+            background-color: $dark-gray;
+            border-radius: 1em;
+            margin-top: 0;
+        }
+    }
+</style>

src/lib/data/md/last-broadcast.md

@@ -0,0 +1,54 @@
+---
+title: Last Broadcast
+date: 2023
+link: https://store.steampowered.com/app/2508870/Last_Broadcast/
+tags:
+  - UI/UX Design
+  - Graphic Design
+---
+
+<script lang="ts">
+  import "$lib/scss/markdown.scss";
+
+  import ColorLink from "$lib/components/common/ColorLink.svelte";
+
+  import banner from "$lib/images/md-assets/last-broadcast/banner.png";
+  import pinboard from "$lib/images/md-assets/last-broadcast/pinboard.png";
+  import assets from "$lib/images/md-assets/last-broadcast/ui-assets.jpg";
+  import albumMock from "$lib/images/md-assets/last-broadcast/album-mockup.jpg";
+  import itemMock from "$lib/images/md-assets/last-broadcast/item-mockup.jpg";
+  import subtitleMock from "$lib/images/md-assets/last-broadcast/subtitle-mockup.png";
+</script>
+
+<img alt="Last Broadcast banner" src={banner}>
+
+<div class="split-layout">
+    <img alt="Last Broadcast in-game screenshot" src={pinboard}>
+    <div>
+
+        ### Introduction
+        *<small>A 2022-2023 USC MFA Project</small>*
+
+        An experimental narrative game set at a radio station at the end of the world. Host your last show as the sun turns red and the world burns down.
+
+        <ColorLink
+            href="https://store.steampowered.com/app/2508870/Last_Broadcast/"
+            target="_blank"
+            colorArt={false}
+        >View it on Steam!</ColorLink>
+
+    </div>
+
+</div>
+
+### UI Assets
+A collection of assets I made for Last Broadcast.
+<img alt="UI assets" src={assets}>
+
+
+### UI Mockups
+Not all of these made it to the final game.
+
+<img alt="Dialogue mockup" src={subtitleMock}>
+<img alt="Album selection mockup" src={albumMock}>
+<img alt="Item closeup mockup" src={itemMock}>

src/lib/data/md/re-store.md

@@ -1,10 +1,18 @@
 ---
 title: Re:STORE
 date: 2021
+link: https://jteaaa.itch.io/re-store
+tags:
+  - Illustration
+  - Prop Art
+  - Concept Art
 ---
 
 <script lang="ts">
   import "$lib/scss/markdown.scss";
+
+  import ColorLink from "$lib/components/common/ColorLink.svelte";
+
   import banner from "$lib/images/md-assets/re-store/banner.png";
   import altBanner from "$lib/images/md-assets/re-store/alt-banner.png";
   import screenshot from "$lib/images/md-assets/re-store/screenshot.png";
@@ -13,17 +21,25 @@ date: 2021
 
 <img alt="Re:STORE banner" src={banner}>
 
-<div class="split">
+<div class="split-layout">
     <img alt="Re:STORE in-game screenshot" src={screenshot}>
     <div>
 
-        ### Introduction 
+        ### Introduction
 
-        RE:Store is an isometric shooter featuring a potion-wielding shopkeeper. When your toy store is taken over by cursed, murderous teddy bears, you must "restore" your store back to its former state with your potions.
+        Your toy shop is suddenly taken over by murderous teddy bears! Use your potions to restore them back to their normal state and save your store.
+
+        <ColorLink
+            href="https://jteaaa.itch.io/re-store"
+            target="_blank"
+            colorArt={false}
+        >Play the game!</ColorLink>
 
         *MEGA Newbies and Vets Game Jam 2021*
-        
+
+
     </div>
+
 </div>
 
 ### Game Assets
@@ -33,4 +49,3 @@ date: 2021
 ### Ending Banner
 
 <img alt="Re:STORE ending banner" src={altBanner}>
-

src/lib/data/yml/archive.yml

@@ -1,9 +1,10 @@
-# next_id: 2
+# next_id: 3
 projects:
   - id: 1
     title: Re:STORE
-    desc: Your toy shop is suddenly taken over by murderous teddy bears! Use your potions to restore them back to their normal state and save your store.
     date: 2021
     slug: /archive/re-store
-    link: https://jteaaa.itch.io/re-store
-    link_text: Play the game
+  - id: 2
+    title: Last Broadcast
+    date: 2023
+    slug: /archive/last-broadcast

src/lib/scss/markdown.scss

@@ -1,7 +1,9 @@
 @import 'mixins';
 
 .markdown {
-    p {
+
+    p,
+    a {
         font-size: 1.2em;
     }
 
@@ -11,17 +13,28 @@
         border-radius: 1em;
     }
 
-    .split {
+    .split-layout {
+        margin-top: 4em;
         display: inline-grid;
         grid-template-columns: 1fr 1fr;
         gap: 3em;
 
+        h3 {
+            margin-top: 1em;
+        }
+
         @include respond-to('small') {
             display: inherit;
         }
     }
 
     h3 {
+        margin-top: 4em;
         margin-bottom: 0em;
     }
+
+
+    p:has(small) {
+        margin-top: 0.25em;
+    }
 }

src/routes/(app)/archive/+page.svelte

@@ -3,6 +3,8 @@
   import LazyImage from "$lib/components/common/LazyImage.svelte";
   import data from "$lib/data/yml/archive.yml";
 
+// TODO: Add image resolver for archive folder (it will hold project thumbnails) 
+
   let projects: any = data.projects;
 </script>
 

src/routes/(app)/archive/[slug]/+page.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import Tags from "$lib/components/common/Tags.svelte";
+
   /** @type {import('./$types').PageData} */
   export let data: any;
 </script>
@@ -7,18 +9,47 @@
   <title>{data.title} | Milkcee Studios</title>
 </svelte:head>
 
-<p>
+<p class="breadcrumbs">
   <a href="/archive">Archive</a> &gt;
   <a href="/archive/{data.slug}">{data.title}</a>
 </p>
 
-<h2 class="title">{data.title}</h2>
-<p>{data.date}</p>
+<div class="title">
+  <p><i>{data.date}</i></p>
+  <h2>{data.title}</h2>
+  <Tags tags={data.tags} />
+</div>
+
+<svelte:component this={data.content} />
 
-<svelte:component this={data.content}/>
+<p class="footer">&lt; <a href="/archive">Back to archive</a></p>
 
 <style lang="scss">
-    .title {
-        margin-bottom: 0;
+  .title {
+    margin: 4em 0 1em;
+    h2 {
+      margin-top: 0em;
+      margin-bottom: 0.3em;
+    }
+
+    p {
+      margin-bottom: 0.5em;
     }
+  }
+
+  .footer {
+    text-align: center;
+  }
+
+  .breadcrumbs a,
+  .footer {
+    transition: opacity 0.3s;
+    &:hover {
+      opacity: 0.6;
+    }
+  }
+
+  .footer {
+    margin-top: 6em;
+  }
 </style>

src/routes/(app)/archive/[slug]/+page.ts

@@ -7,13 +7,14 @@ export async function load({ params }) {
     `../../../../lib/data/md/${params.slug}.md`
   ]();
 
-  const { title, date } = project.metadata;
+  const { title, date, tags } = project.metadata;
   const content = project.default;
 
   return {
     slug: params.slug,
     title: title,
     date: date,
+    tags: tags,
     content: content,
   };
 }