feat: add profile pictures

also already add other pictures to the assets

components/profile/person.vue

@@ -1,12 +1,16 @@
 <template>
   <div class="mb-2">
-    <h1 class="flex-shrink-0 text-3xl">
-      {{ props.person.name.first }} {{ props.person.name.last }}
-    </h1>
-
-    <p class="text-base mb-1">
-      {{ props.person.shortText }}
-    </p>
+    <div class="flex space-x-4 md:space-x-8 mb-2 md:mb-4">
+      <ProfilePicture :person="props.person" class="flex-shrink-0" />
+      <div>
+        <h1 class="flex-shrink-0 text-3xl">
+          {{ props.person.name.first }} {{ props.person.name.last }}
+        </h1>
+        <p class="text-base">
+          {{ props.person.shortText }}
+        </p>
+      </div>
+    </div>
     <div>
       <LocationTag
         v-if="props.person.meta.basedIn"

components/profile/picture.vue

@@ -0,0 +1,16 @@
+<template>
+  <NuxtPicture
+    v-if="props.person.image"
+    sizes="sm:64px md:96px lg:128px"
+    class="[&>img]:rounded-full [&>img]:border-white [&>img]:border-[1px]"
+    :src="`/profile/${props.person.name.first.toLowerCase()}/${
+      props.person.image.path
+    }`"
+  />
+</template>
+
+<script setup lang="ts">
+import type { Profile } from '~/server/profile.types';
+
+const props = defineProps<{ person: Profile['person'] }>();
+</script>

nuxt.config.ts

@@ -40,4 +40,8 @@ export default defineNuxtConfig({
       buildDate: new Date().toISOString(),
     },
   },
+  image: {
+    format: ['avif', 'webp', 'png'],
+    dir: 'assets/images',
+  },
 });

server/profile.types.ts

@@ -25,12 +25,22 @@ export type SocialInfo =
       email: string;
     };
 
+export type Image =
+  | {
+      isURL: false;
+      path: string;
+    }
+  | {
+      isURL: true;
+      path: URL;
+    };
+
 type Person = {
   name: {
     first: string;
     last: 'Di Luzio'; // we could support other spellings of the name later on
   };
-  image?: { isURL: boolean; path: string };
+  image?: Image;
   shortText?: string;
   socials: Array<SocialInfo>;
   meta: {
@@ -54,7 +64,7 @@ export enum EducationType {
 export type Project = {
   title: string;
   role: string;
-  image?: string;
+  image?: Image;
   description: string;
   highlights?: Array<string>;
   url?: string;

server/profiles/marc.ts

@@ -41,7 +41,7 @@ export const marc: Profile = {
         title: 'Unity',
         role: 'Lead Software Engineer',
         url: 'https://unity.com/',
-        image: 'unity.png',
+        image: { isURL: false, path: 'unity.png' },
         description:
           'Leading a tools team in Release Engineering, working on a variety of projects focusing on better release workflows, bug tracking and quality barriers.',
         timeframe: {
@@ -57,7 +57,7 @@ export const marc: Profile = {
         title: 'Unity',
         role: 'Senior Software Engineer',
         url: 'https://unity.com/',
-        image: 'unity.png',
+        image: { isURL: false, path: 'unity.png' },
         description:
           'Worked in Sustained Engineering, focusing on Linux bugs and infrastructure.',
         timeframe: {
@@ -73,7 +73,7 @@ export const marc: Profile = {
         title: 'Rove',
         role: 'Developer and Designer',
         url: 'https://github.com/mdiluz/rove',
-        image: 'rove.png',
+        image: { isURL: false, path: 'rove.png' },
         description:
           'An asynchronous nomadic game about exploring as part of a loose community.',
         timeframe: {
@@ -105,7 +105,7 @@ export const marc: Profile = {
         title: 'Feral Interactive',
         role: 'Linux Group lead',
         url: 'https://www.feralinteractive.com/en/',
-        image: 'feral_interactive.png',
+        image: { isURL: false, path: 'feral_interactive.png' },
         description:
           'Lead the Linux platform development while porting many AAA games such as XCOM2, Mad Max and HITMAN',
         timeframe: {
@@ -125,7 +125,7 @@ export const marc: Profile = {
         title: 'Feral Interactive',
         role: 'Software Developer',
         url: 'https://www.feralinteractive.com/en/',
-        image: 'feral_interactive.png',
+        image: { isURL: false, path: 'feral_interactive.png' },
         description:
           'Worked on Mac and Linux ports for a variety of games including ROME: Total War, Tomb Raider and XCOM',
         timeframe: {

server/profiles/sebastian.ts

@@ -40,7 +40,7 @@ export const sebastian: Profile = {
         title: 'IU International University',
         role: 'Full Stack Developer',
         url: 'https://www.iu.org',
-        image: 'iu.png',
+        image: { isURL: false, path: 'iu.png' },
         timeframe: {
           start: new Date(2021, 9),
           end: 'current',
@@ -85,7 +85,7 @@ export const sebastian: Profile = {
         title: 'Magibot',
         role: 'Creator and maintainer',
         url: 'https://bots.ondiscord.xyz/bots/384820232583249921',
-        image: 'magibot.png',
+        image: { isURL: false, path: 'magibot.png' },
         timeframe: {
           start: new Date(2017, 6),
           end: 'current',
@@ -100,7 +100,7 @@ export const sebastian: Profile = {
         title: 'BLAPI - the BotListAPI',
         role: 'Creator and maintainer',
         url: 'https://github.com/botblock/BLAPI',
-        image: 'botblock.png',
+        image: { isURL: false, path: 'botblock.png' },
         timeframe: {
           start: new Date(2018, 7),
           end: 'current',
@@ -119,7 +119,7 @@ export const sebastian: Profile = {
         title: 'flint.gg',
         role: 'Co-Founder and CTO',
         url: 'https://flint.gg',
-        image: 'flint.png',
+        image: { isURL: false, path: 'flint.png' },
         timeframe: {
           start: new Date(2019, 7),
           end: new Date(2021, 6),
@@ -148,7 +148,7 @@ export const sebastian: Profile = {
         title: 'easyshare',
         role: 'Creator and maintainer',
         url: 'https://github.com/flint-gg/easyshare',
-        image: 'easyshare.png',
+        image: { isURL: false, path: 'easyshare.png' },
         timeframe: {
           start: new Date(2020, 5),
           end: new Date(2021, 6),