Add counsellor bios and images

dwhdelft.nl/content/counsellors/andreas.md

@@ -0,0 +1,18 @@
+---
+name: Andreas Zafiropoulos
+pronouns:
+  nl: hij/hem
+  en: he/him
+email: [email protected]
+bio:
+  nl: |
+    Ik ben al sinds 2016 lid bij DWH en heb veel commissies gedaan zoals de OWee commissie en KMG ouderschap. Op het
+    moment ben ik bezig met mijn afstudeeropdracht bij Lucht- en Ruimtevaarttechniek maar daarnaast vind ik het leuk
+    om te gamen, koken en zingen. Ik kan goed naar mensen luisteren en je kunt contact met me opnemen als je met
+    iemand wilt praten in een veilige en vertrouwelijke omgeving.
+  en: |
+    I have been a member of DWH sinds 2016 and have participated in many committees and activities such as being a
+    KMG parent or organizing the OWee. Currently I am working on my thesis at Aerospace Engineering but next to
+    studying I enjoy gaming, cooking and singing. I am a good listener and you can contact me if you need to talk to
+    someone in a safe and confidential environment.
+---

dwhdelft.nl/content/counsellors/bernard.md

@@ -0,0 +1,10 @@
+---
+name: Bernard Schendstok
+pronouns:
+  nl: hij/hem
+  en: he/him
+email: [email protected]
+bio:
+  nl:
+  en:
+---

dwhdelft.nl/content/counsellors/enri.md

@@ -0,0 +1,20 @@
+---
+name: Enri Mammana
+pronouns:
+  nl: she/they
+  en: she/they
+email: [email protected]
+bio:
+  nl: |
+    I am a member of DWH since I was I was 18, right before corona. Since then, I made a lot of friends in Outsite
+    and I am still an active volunteer. At the same time, I am also busy with my study (Nanobiology) and with my
+    handball team. Aside from that, I like to travel, organise fun activities, going to movies, explore cafes in
+    Delft... I keep myself busy but I always prioritise lending a helping hand to a friend or to anyone who needs
+    someone to talk to :)
+  en: |
+    I am a member of DWH since I was I was 18, right before corona. Since then, I made a lot of friends in Outsite
+    and I am still an active volunteer. At the same time, I am also busy with my study (Nanobiology) and with my
+    handball team. Aside from that, I like to travel, organise fun activities, going to movies, explore cafes in
+    Delft... I keep myself busy but I always prioritise lending a helping hand to a friend or to anyone who needs
+    someone to talk to :)
+---

dwhdelft.nl/content/counsellors/niamh.md

@@ -0,0 +1,20 @@
+---
+name: Niamh Henssen
+pronouns:
+  nl: zij/haar
+  en: she/her
+email: [email protected]
+bio:
+  nl: |
+    In mijn vrije tijd brengt werken met mijn handen brengt me het meeste plezier, of het nu gaat om
+    houtbewerking, bierbrouwen of escape rooms ontwerpen. Daarnaast geniet ik van boulderen, wandelen
+    met mijn hond en luisteren naar muziek.  Mijn vrienden zullen waarschijnlijk zeggen dat ik een
+    beetje verlegen ben, maar laat je daar niet door misleiden! Ik sta altijd open voor een goed
+    gesprek. Ervoor zorgen dat iedereen zich veilig en op zijn gemak voelt, zit in mijn aard.
+  en: |
+    In my downtime, creating things brings me the most happiness, whether it's through woodworking, beer brewing or
+    designing escape room props. Besides, I enjoy bouldering, taking leisurely strolls with my dog, and
+    listening to music. If you ask my friends, they'll probably tell you I'm a bit on the shy side, but don't let
+    that fool you! I am always open to a heart-to-heart conversation. Ensuring everyone feels safe and comfortable
+    is in my nature.
+---

dwhdelft.nl/pages/lets-talk.vue

@@ -48,14 +48,12 @@ nl:
 <script setup>
 import BusinessCard from '#shared/components/BusinessCard.vue'
 
-const { t } = useT()
+const { t, tt } = useT()
 
-const counsellors = [
-  { name: 'Andreas Zafiropoulos', email: '[email protected]' },
-  { name: 'Bernard Schendstok', email: '[email protected]' },
-  { name: 'Enri Mammana', email: '[email protected]' },
-  { name: 'Niamh Henssen', email: '[email protected]' },
-]
+const counsellors = (await useAsyncData(() => queryContent('counsellors').find())).data
+
+const { image } = useDynamicImages(import.meta.glob('~/assets/images/photos/counsellors/*', { eager: true }))
+const requireImage = (name) => image(name.toLowerCase().split(' ')[0])
 </script>
 
 <template>
@@ -69,13 +67,19 @@ const counsellors = [
     <p>{{ t('outro_text') }}</p>
   </LayoutPageIntroText>
 
-  <LayoutStraightSection contentBackgroundClass="!bg-gray-200" contentClass="grid grid-cols-2 gap-8">
+  <LayoutStraightSection contentBackgroundClass="!bg-gray-200" contentClass="grid md:grid-cols-2 gap-8">
     <BusinessCard
       v-for="counsellor in counsellors"
       :key="counsellor.name"
       :name="counsellor.name"
+      :pronouns="tt(counsellor.pronouns)"
       :email="counsellor.email"
       :role="t('role_title')"
-    />
+      :photo="requireImage(counsellor.name)"
+    >
+      <template #bio>
+        {{ tt(counsellor.bio) }}
+      </template>
+    </BusinessCard>
   </LayoutStraightSection>
 </template>

shared/components/BusinessCard.vue

@@ -3,7 +3,8 @@ import { IconEnvelope } from '@iconify-prerendered/vue-zondicons'
 
 defineProps({
   name: { type: String, required: true },
-  role: { type: String, required: true },
+  pronouns: { type: Object, required: true },
+  role: { type: String, default: null },
   email: { type: String, required: true },
   photo: { type: String, default: null },
 })
@@ -13,14 +14,26 @@ defineProps({
   <ElementsActionCard
     :title="name"
     headerPosition="left"
-    :headerClass="photo && 'bg-brand-450 w-36 overflow-hidden'"
+    :headerClass="photo && 'bg-brand-450 md:w-36 overflow-hidden'"
     contentClass="!text-base"
   >
     <template #header>
-      <img v-if="photo" :src="photo" class="w-full h-full object-cover hidden md:block" />
+      <div
+        v-if="photo"
+        class="w-32 md:w-full h-32 md:h-full rounded-full md:rounded-none overflow-hidden mx-auto my-4 md:my-0 border-4 md:border-0 border-white"
+      >
+        <img :src="photo" class="object-cover h-full w-full" />
+      </div>
     </template>
+    <template #subtitle>
+      <div class="text-gray-500 ml-2">{{ pronouns }}</div>
+    </template>
+
+    <div v-if="role" class="text-gray-600 -mt-4 mb-8">{{ role }}</div>
 
-    <div class="text-gray-600 -mt-4 mb-8">{{ role }}</div>
+    <div v-if="$slots.bio" class="text-gray-500 text-sm -mt-6 mb-4">
+      <slot name="bio" />
+    </div>
 
     <div v-if="email" class="flex items-center space-x-3">
       <ElementsIconCircle class="p-2">

shared/components/elements/ActionCard.vue

@@ -30,7 +30,10 @@ const slots = useSlots()
       <div v-if="title || slots.button" class="flex justify-between items-center mb-4">
         <div class="flex items-center space-x-4">
           <slot name="icon" />
-          <h2 class="text-2xl font-bold text-brand-450 uppercase tracking-wider" :class="titleClass" v-text="title" />
+          <div class="flex items-baseline">
+            <h2 class="text-2xl font-bold text-brand-450 uppercase tracking-wider" :class="titleClass" v-text="title" />
+            <slot name="subtitle" />
+          </div>
         </div>
         <div class="hidden md:block">
           <slot name="button" />