Add Skin Renderer project

src/app.css

@@ -6,6 +6,12 @@
     a {
         @apply text-cornflower-normal hover:text-cornflower-light transition;
     }
+
+    .rescale-linear {
+        image-rendering: pixelated;
+        image-rendering: -moz-crisp-edges;
+        image-rendering: crisp-edges;;
+    }
 }
 
 @keyframes fadeIntroduction {

src/lib/data/me.ts

@@ -35,6 +35,7 @@ import quake3BotWebp from '$lib/images/quake-3-bot.webp';
 import postmanIconSvg from '$lib/images/postman-icon.svg';
 import typeScriptIconSvg from '$lib/images/typescript.svg';
 import butterflyMx444IconPng from '$lib/images/butterflymx-444.png';
+import miloMinecraftHeadWebp from '$lib/images/milo-minecraft-head.webp';
 
 function calculateYearsElapsed(since: Date): number {
     return new Date(new Date().getTime() - since.getTime()).getFullYear() - 1970;
@@ -217,4 +218,12 @@ export const projects = [
         image: butterflyMx444IconPng,
         href: 'https://github.com/Iapetus-11/ButterflyMX-444',
     },
+    {
+        name: 'Skin Renderer',
+        description:
+            'A microservice written in Elixir + Phoenix to render Minecraft skins (currently just renders heads)',
+        image: miloMinecraftHeadWebp,
+        href: 'https://github.com/Iapetus-11/minecraft-skins',
+        pixelated: true,
+    },
 ];

src/routes/projects/ProjectCard.svelte

@@ -4,6 +4,7 @@
     export let image: string;
     export let href: string;
     export let idx: number;
+    export let pixelated = false;
 </script>
 
 <a
@@ -14,14 +15,19 @@
     target={href.startsWith('/') ? '_self' : '_blank'}
 >
     <div class="hidden md:flex items-center">
-        <img src={image} alt={name} class="rounded-full shadow w-full" />
+        <img
+            src={image}
+            alt={name}
+            class="rounded-full shadow w-full {pixelated ? 'rescale-linear' : ''}"
+        />
     </div>
 
     <span class="md:col-span-2 my-auto">
         <img
             src={image}
             alt={name}
-            class="md:hidden flex rounded-full shadow w-1/6 float-left mr-3 mt-1"
+            class="md:hidden flex rounded-full shadow w-1/6 float-left mr-3 mt-1
+                   {pixelated ? 'rescale-linear' : ''}"
         />
         <span class="text-aqua-normal text-3xl font-semibold">{name}</span>
         <br />