feat(refill): adds avatars (#449)

* feat: support not sending image

* feat: adds avatars for speakers

pages/refill.tsx

@@ -4,55 +4,65 @@ import style from 'src/refill/refill.module.css';
 
 const dev: ProgramItemProps[] = [
   {
-    speaker: { name: 'Jacob Berglund', src: '/refill/kari.png' },
+    speaker: { name: 'Jacob Berglund', src: '/refill/people/jacob.jpg' },
     title: 'Det var en gång en request, en response och ett par headers',
   },
   {
-    speaker: { name: 'Jakob Endrestad Kielland', src: '/refill/kari.png' },
+    speaker: {
+      name: 'Jakob Endrestad Kielland',
+    },
     title: 'Hvordan bygge latterlig kule nettsider med View Transitions API',
   },
   {
     speaker: {
       name: 'Truls Henrik Jakobsen',
-      src: '/refill/kari.png',
     },
     title: 'Skjema-endringer med lave skuldre: Bakover­kompatible APIer',
   },
   {
-    speaker: { name: 'Christian Brevik', src: '/refill/kari.png' },
+    speaker: { name: 'Christian Brevik', src: '/refill/people/christian.jpg' },
     title: 'TestContainers er kulere enn ChatGPT',
   },
   {
-    speaker: { name: 'Thomas Hansen', src: '/refill/kari.png' },
+    speaker: { name: 'Thomas Hansen', src: '/refill/people/thomas.jpg' },
     title: 'Erfaringer med prosessarbeid',
   },
   {
-    speaker: { name: 'Anders Njøs Slinde', src: '/refill/kari.png' },
+    speaker: {
+      name: 'Anders Njøs Slinde',
+      src: '/refill/people/anders-njos.jpg',
+    },
     title: 'Plattform sa du? Ja det må vi selvfølgelig ha. Eller?',
   },
   {
-    speaker: { name: 'Mikael Brevik', src: '/refill/kari.png' },
+    speaker: { name: 'Mikael Brevik', src: '/refill/people/mikael.jpg' },
     title: 'RAG-arkitektur avmystifisert',
   },
 ];
 const design: ProgramItemProps[] = [
   {
     speaker: {
       name: 'Jonas Lillevold',
-      src: '/refill/kari.png',
+      src: '/refill/people/jonas.jpg',
     },
     title: 'UX Metrics - Hva, hvorfor og hvordan?',
   },
   {
-    speaker: { name: 'Andreas Sætersdal Hartveit', src: '/refill/kari.png' },
+    speaker: {
+      name: 'Andreas Sætersdal Hartveit',
+      src: '/refill/people/andreas.jpg',
+    },
     title: 'En skikkelig nerdete preik om typografi',
   },
   {
-    speaker: { name: 'Simen Strøm Braaten', src: '/refill/kari.png' },
+    speaker: { name: 'Simen Strøm Braaten', src: '/refill/people/simen.jpg' },
     title: 'Fra å være en god designer til å bli en dårlig utvikler',
   },
   {
-    speaker: { name: 'Andreas Sætersdal Hartveit', src: '/refill/kari.png' },
+    speaker: {
+      name: 'Andreas Sætersdal Hartveit',
+      src: '/refill/people/andreas.jpg',
+    },
     title: 'Mitt voksende produkt / MVP arket',
   },
 ];
@@ -116,7 +126,7 @@ export default function Refill() {
 type ProgramItemProps = {
   speaker: {
     name: string;
-    src: string;
+    src?: string;
   };
   title: string;
 };
@@ -129,12 +139,14 @@ function ProgramItem({ speaker, title }: ProgramItemProps) {
   );
 }
 
-function Speaker({ name }: { name: string; src: string }) {
+function Speaker({ name, src }: ProgramItemProps['speaker']) {
   return (
     <footer className={style.speaker}>
-      {/* <div className={style.avatarContainer}>
-        <Image src={src} alt={name} height={50} width={50} />
-      </div> */}
+      {src && (
+        <div className={style.avatarContainer}>
+          <Image src={src} alt={name} height={50} width={50} />
+        </div>
+      )}
       <h4>{name}</h4>
     </footer>
   );

src/refill/refill.module.css

@@ -92,45 +92,61 @@
   padding: 0;
   color: #fff;
 
+  position: relative;
+
   display: flex;
   flex-direction: column;
 
   justify-content: space-between;
   padding: 2rem;
   gap: 2rem;
+}
+
+.programItem::before {
+  position: absolute;
+  content: '';
+  display: block;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  padding: 0;
+  z-index: -1;
+
   background: url('/refill/bg.jpg') 0 0 no-repeat;
   background-size: 650%;
 
-  filter: grayscale(95%) brightness(1.1);
+  filter: grayscale(95%) brightness(1.2);
   transition: filter 0.15s ease-in-out;
 }
 
-.programItem:nth-child(1) {
+.programItem:nth-child(1)::before {
   background-position: 0 0;
 }
-.programItem:nth-child(2) {
+.programItem:nth-child(2)::before {
   background-position: 20% 0;
 }
-.programItem:nth-child(3) {
+.programItem:nth-child(3)::before {
   background-position: 25% 10%;
 }
-.programItem:nth-child(4) {
+.programItem:nth-child(4)::before {
   background-position: 50% 0;
 }
-.programItem:nth-child(5) {
+.programItem:nth-child(5)::before {
   background-position: 75% 0;
 }
-.programItem:nth-child(6) {
+.programItem:nth-child(6)::before {
   background-position: 40% 20%;
 }
 
-.programItem:hover {
+.programItem:hover::before {
   filter: grayscale(0%) brightness(1);
 }
 
 .speaker {
   display: flex;
-  gap: 0.25rem;
+  gap: 0.5rem;
   align-items: center;
 }
 .speaker h4 {
@@ -148,11 +164,13 @@
   overflow: hidden;
   border-radius: 50%;
 
-  width: 3.75rem;
-  height: 3.75rem;
+  width: 2.75rem;
+  height: 2.75rem;
 }
 .avatarContainer img {
+  display: block;
   width: 100%;
+  height: 100%;
 }
 
 .calendarContainer {