feat: show new work badge on archive project

src/components/Gallery.astro

@@ -19,12 +19,19 @@ const { items } = Astro.props as Props;
     items.map((item: Item) => (
       <div class="flex-col overflow-hidden rounded-sm">
         {item.src && (
-          <Image
-            src={item.src}
-            alt={item.alt}
-            loading="lazy"
-            class="mt-0 mb-0 h-full max-h-[90svh] w-full object-cover"
-          />
+          <a
+            href={item.src.src}
+            target="_blank"
+            class="cursor-zoom-in"
+            title="Open image in new tab"
+          >
+            <Image
+              src={item.src}
+              alt={item.alt}
+              loading="lazy"
+              class="mt-0 mb-0 h-full max-h-[90svh] w-full object-cover"
+            />
+          </a>
         )}
       </div>
     ))

src/components/ShowcaseProject.astro

@@ -1,6 +1,7 @@
 ---
 import { Image } from "astro:assets";
 import type { CollectionEntry } from "astro:content";
+import { Icon } from "astro-icon/components";
 
 type Props = {
   collection: CollectionEntry<"projects">;
@@ -28,6 +29,19 @@ const { collection } = Astro.props;
           {collection.data.title}
         </p>
       </div>
+      {
+        collection.data.highlight ? (
+          <div class="relative transition-all duration-300 ease-in-out group-hover:opacity-0">
+            <div class="absolute bottom-5 left-5 flex w-fit items-center gap-1 rounded-full bg-green-900/20 p-1 transition-transform duration-300 hover:scale-102 hover:-rotate-2">
+              <Icon
+                name="mdi:plus-circle-outline"
+                class="h-auto w-6 rounded-full bg-green-900/70 p-0.5 text-green-400"
+              />
+              <p>New!</p>
+            </div>
+          </div>
+        ) : null
+      }
     </a>
   </article>
 </li>

src/consts.ts

@@ -49,6 +49,11 @@ export const SITE: Site = {
       href: "https://store.steampowered.com/developer/troy",
       icon: "mdi:steam",
     },
+    {
+      name: "LinkedIn",
+      href: "https://linkedin.com/in/troylusty",
+      icon: "mdi:linkedin",
+    },
   ],
   NAVLINKS: [
     {

src/content/config.ts

@@ -55,6 +55,7 @@ const projects = defineCollection({
         categories: z.array(z.string()),
         featured: z.boolean().optional(),
         collection: z.boolean().optional(),
+        highlight: z.boolean().optional(),
       })
       .merge(rssSchema),
 });

src/content/projects/archive/index.mdx

@@ -14,6 +14,7 @@ tags:
     "affinity photo",
   ]
 categories: ["personal"]
+highlight: true
 ---
 
 import Gallery from "@components/Gallery.astro";
@@ -25,7 +26,7 @@ import video2023_02_08 from "./2023-02-08.webm";
 import video2023_01_08 from "./2023-01-08.webm";
 import video2023_07_19 from "./2023-07-19.webm";
 
-<div class="mb-6 grid grid-cols-1 gap-3 md:grid-cols-2">
+<div class="mb-3 grid grid-cols-1 gap-3 md:grid-cols-2">
   <video
     preload="metadata"
     autoplay

src/content/projects/logofolio/index.mdx

@@ -12,8 +12,8 @@ An ongoing collection of branding and logos designs. Including both 2D and 3D wo
 
 ![Rebrand for juce](juce.jpg)
 
-Rebrand for [juce](https://www.twitch.tv/juceboi).
+Twitch and YouTube branding for [juce](https://www.twitch.tv/juceboi).
 
 ![Header design for @_railz_](troy-lusty-logofolio-railz.avif)
 
-Twitter header and rebrand for [railz](https://twitter.com/@_railz_). Inspired by [Cloakzy concept broadcast asset redesign](https://www.behance.net/gallery/100498021/Cloakzy-Concept-Broadcast-Assets).
+Twitter header for [railz](https://twitter.com/@_railz_) inspired by [Cloakzy- Concept Broadcast Assets](https://www.behance.net/gallery/100498021/Cloakzy-Concept-Broadcast-Assets).

src/content/projects/must-find-beans/index.mdx

@@ -24,7 +24,7 @@ import bruteimage from "brute.png";
 
 <div role="alert">
   <div class="rounded-t bg-amber-500 px-4 py-2 font-bold text-white">
-    <p class="m-0 mt-0 mb-0">Notice</p>
+    <p class="m-0 mt-0 mb-0">Announcement</p>
   </div>
   <div class="rounded-b border border-t-0 border-amber-400 bg-amber-100 px-4 py-3 text-amber-700 dark:border-amber-600 dark:bg-amber-900 dark:text-amber-300">
     <p class="m-0 mt-0 mb-0">This game is very early in development. There is a public playtest available on Steam if you wish to give the game a try, with any feedback being greatly appreciated.</p>
@@ -55,7 +55,7 @@ The game is not yet available but can be wishlisted on [Steam](https://store.ste
   ]}
 />
 
-### Early screenshots
+### Earlier development screenshots
 
 <Gallery
   items={[

src/content/projects/sinkie-soldiers/index.mdx

@@ -2,18 +2,31 @@
 title: "Sinkie Soldiers"
 description: "Keep control of the castle, but more importantly: your armour."
 date: 2024-03-15
-updated: 2024-12-12
-image: { url: "EsTSQ3.jpg", alt: "Sinkie Soldiers Logo" }
+image: { url: "sinkie_soldiers_logo.png", alt: "Sinkie Soldiers Logo" }
 categories: ["personal"]
-tags: ["unreal engine", "blender", "gimp", "fl studio"]
+tags: ["unreal engine", "blender", "gimp", "fl studio", "inkscape"]
 extraAuthors: [{ name: "Sam Griffiths", url: "https://samgriffiths.dev" }]
 ---
 
-**This project was previously only a game jam submission but very soon it will be polished up and published onto [Steam](https://store.steampowered.com/app/3368860/Sinkie_Soldiers)!**
+import Gallery from "@components/Gallery.astro";
+
+import image1 from "EsTSQ3.jpg";
+import image2 from "screenshot-2.jpg";
+import image3 from "screenshot-3.jpg";
+import image4 from "MicrosoftTeams-image(3).jpg";
+
+**This project was previously only a game jam submission but very soon it will be polished up and published onto [Steam](https://store.steampowered.com/app/3368860/Sinkie_Soldiers/)!**
+
+<div class="hidden">
+  {" "}
+  As of today we have finished polishing up the game and it is now available on
+  [Steam](https://store.steampowered.com/app/3368860/Sinkie_Soldiers) to play
+  against your friends in local or online co-op!
+</div>
 
 If you're interested in looking at our original [submission](https://troylusty.itch.io/sinkie-soldiers), it was done as a part of the [Ukie Student Game Jam 2024](https://itch.io/jam/ukie-student-game-jam-2024), in which the team consisted of myself and Sam Griffiths. The jam ran for one day from 14 Mar 2024 9:00 AM to 15 Mar 2024 5:00 PM.
 
-![Sinkie Soldiers Logo](EsTSQ3.jpg)
+![Sinkie Soldiers logo](sinkie_soldiers_logo.png)
 
 ## Keep control of the castle, but more importantly: your armour.
 
@@ -21,51 +34,16 @@ Sinkie Soldiers is a local co-op versus game in which you battle against your fr
 
 The game is located on a kids bouncy castle play area and is based around what they might be imagining whilst playing there.
 
-![Sinkie Soldiers Characters](screenshot-3.jpg)
+### Game jam gallery
 
-![Sinkie Soldiers Environment](screenshot-2.jpg)
-
-![Sinkie Soldiers Playtest](<MicrosoftTeams-image(3).jpg>)
-
-### Rules
-
-- First to reach 3 rounds wins
-- Win a round by either:
-  - Removing all the other players armour and eliminating them
-  - Making the enemy player fall into the water below the arena
-- There are pickups and random level modifiers included. Currently these are:
-  - The Halo - One additional hit point
-  - Slippery floor
-  - Low gravity
-  - Obstacle overdrive
-
-### Controls
-
-It is recommended to use 2 controllers.
-
-- Movement - Left thumbstick
-- Camera - Right thumbstick
-- Jump - Bottom face button
-- Attack - Right trigger
-
-#### In menus
-
-- Play - Bottom face button
-- Quit - Right face button
-
-#### Keyboard
-
-- If playing on keyboard, WASD to move, Mouse to look around, and Left Mouse Click to Attack and select menu items.
-
-### Third-party assets list
-
-- [Animated Characters 2](https://kenney.nl/assets/animated-characters-2)
-- [Bossy Enemy Animation Pack](https://www.unrealengine.com/marketplace/en-US/product/bossy-enemy-animation-pack)
-- [Knicknack font](https://www.myfonts.com/collections/knicknack-font-great-scott)
-- [Evil Empire font](https://www.dafont.com/evil-empire.font)
-- [Punch Your Way Through MIDI](https://opengameart.org/content/punch-your-way-through)
-- [man in red shorts standing near green plant stock photo](https://unsplash.com/photos/man-in-red-shorts-standing-near-green-plant-A0VqdVOv6c4)
-- [Plastic 010 (the roughness map)](https://ambientcg.com/view?id=Plastic010)
+<Gallery
+  items={[
+    { src: image1, alt: "Sinkie Soldiers original logo" },
+    { src: image2, alt: "Sinkie Soldiers characters" },
+    { src: image3, alt: "Sinkie Soldiers environment" },
+    { src: image4, alt: "Sinkie Soldiers playtest" },
+  ]}
+/>
 
 ### External links