Merge pull request #463 from dwh-outsite/feature/voorlichter-highlight

Add educators in slideshow to educator page

components/Educators.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="grid xl:grid-cols-2 gap-6">
+    <div v-for="(educator, index) in educators" :key="index">
+      <div class="md:flex items-center md:space-x-6 bg-white rounded-md md:rounded-full p-4 shadow-lg">
+        <div class="w-32 h-32 rounded-full overflow-hidden mx-auto">
+          <img :src="requireImage(educator.name)" class="object-cover h-full" />
+        </div>
+        <div class="flex-1 flex flex-col justify-between relative p-3">
+          <div class="absolute text-mega text-brand-100 -ml-6 pt-6 z-0">“</div>
+          <div class="text-xl z-10 pt-2">
+            {{ educator.quote }}
+          </div>
+          <div>
+            <span class="uppercase tracking-wide font-bold text-brand-400 mr-1" v-text="educator.name" />
+            <span class="text-gray-500 italic" v-text="educator[`pronouns_${$i18n.locale}`]" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      educators: [],
+    }
+  },
+  async fetch() {
+    this.educators = await this.$content('educators').fetch()
+  },
+  methods: {
+    requireImage(name) {
+      return require(`#/assets/images/photos/educators/${name.toLowerCase()}.jpg`)
+    },
+  },
+}
+</script>

content/educators/cas.md

@@ -0,0 +1,13 @@
+---
+name: Cas
+pronouns_en: he/him
+pronouns_nl: hij/hem
+quote:
+  Bij mijn eerste voorlichting over LHBTI+ leerde ik voor het eerst over de term transgender waar ik me meteen in kon 
+  herkennen. 
+text:
+  Hoi! Mijn naam is Cas, ik ben student aan de TU Delft en ben sinds kort ook één van de voorlichters. Bij mijn eerste 
+  voorlichting over LHBTI+ die ik ontving, leerde ik voor het eerst over de term transgender waar ik me meteen in kon 
+  herkennen. Dit heeft een enorme impact gehad op mijn leven. Door voorlichting te geven hoop ik anderen op eenzelfde 
+  manier te kunnen helpen en het onderwerp beter bespreekbaar te maken.
+---

content/educators/dante.md

@@ -0,0 +1,13 @@
+---
+name: Dante
+pronouns_en: they/them
+pronouns_nl: die/diens
+quote:
+  Zelf gaf ik al voorlichting op mijn middelbare school en daar merkte ik hoeveel positieve impact het voor iemand kan 
+  hebben.
+text:
+  Heeyhey, ik ben Dante en ik geef inmiddels al een tijdje voorlichting. Zelf gaf ik al voorlichting op mijn middelbare
+  school en daar merkte ik hoeveel positieve impact het voor iemand kan hebben als er open over LGBTQ+ zaken gepraat 
+  wordt 🧡 Ook was het voor mij persoonlijk fijn geweest als er een keer iemand had verteld dat non-binaire mensen 
+  bestaan 😅 dus nu doe ik dat zelf 😇 xoxo Dante
+---

content/educators/dennis.md

@@ -0,0 +1,13 @@
+---
+name: Dennis
+pronouns_en: he/him
+pronouns_nl: hij/hem
+quote:
+  Voorlichting is vooral ook voor niet LHBTI'ers, om elkaar beter te leren begrijpen en om barrières af te breken.
+text:
+  Hi mijn naam is Dennis en kom uit Delft, in het dagelijks leven ben ik een steward bij een grote 
+  luchtvaartmaatschappij en vlieg heel Europa rond. Al geruime tijd geef ik voorlichtingen op scholen en ik vind het 
+  heel erg leuk om over mijn ervaringen te praten en daarmee anderen te helpen. Voorlichting is niet alleen waardevol 
+  voor mensen die mogelijk onder de LHBTI categorieën vallen maar ook vooral voor niet LHBTI'ers om elkaar beter te 
+  leren begrijpen en om barrières af te breken.
+---

content/educators/jeroen.md

@@ -0,0 +1,11 @@
+---
+name: Jeroen
+pronouns_en: he/him
+pronouns_nl: hij/hem
+quote:
+  Ik vind het leuk als je tijdens de les dit beeld ziet veranderen doordat ze met elkaar in gesprek gaan. 
+text:
+  k ben Jeroen en geef voorlichting sinds 2008. Ik ben voorlichting gaan geven omdat ik het belangrijk vind om
+  leerlingen een meer realistisch beeld te geven en het stereotype beeld wat je op tv ziet en hun vooroordelen te
+  doorbreken. Ik vind het leuk als je tijdens de les dit beeld ziet veranderen doordat ze met elkaar in gesprek gaan.
+---

content/educators/stefan.md

@@ -0,0 +1,12 @@
+---
+name: Stefan
+pronouns_en: he/him
+pronouns_nl: hij/hem
+quote:
+  Enkel het taboe doorbreken door erover te praten kan al het verschil maken in iemands leven. Daar doe ik het voor!
+text:
+  Hoi! Ik ben Stefan, 26 jaar, en sinds enkele jaren actief als voorlichter in mijn geliefde Delft. Ik vind het 
+  belangrijk om voorlichting te geven omdat ik dit zelf gemist heb tijdens mijn schooltijd. Ik ben ervan overtuigd 
+  dat dit mijn coming-out proces een stuk makkelijker gemaakt zou hebben. Enkel het taboe doorbreken door erover te 
+  praten kan al het verschil maken in iemands leven. Daar doe ik het voor!
+---

sites/dwhdelft.nl/pages/education.vue

@@ -3,8 +3,9 @@ nl:
   title: Voorlichting
   titles:
     jongenout: 'Zie ook: <strong>Jong&Out Delft</strong>'
-    voorlichting: Hoe ziet een voorlichting eruit?
+    voorlichting: Hoe ziet een gastles eruit?
     contact: Interesse in een voorlichting?
+    educators: Onze <strong>Voorlichters</strong>
   content:
     intro:
       - DWH geeft gastlessen over LHBT+ onderwerpen zoals gender en seksualiteit, met als doel vooroordelen en
@@ -28,7 +29,8 @@ nl:
       spelletjesmiddagen, drag karaoke of waterfietsen.
     voorlichting:
       - Een voorlichting (op het voortgezet onderwijs) wordt gegeven door twee voorlichters, gedurende een of twee
-        lesuren. Met een associatiespel worden leerlingen gevraagd alle termen te roepen die ze met LHBT+ associëren,
+        lesuren.
+      - Met een associatiespel worden leerlingen gevraagd alle termen te roepen die ze met LHBT+ associëren,
         zonder dat antwoorden als goed of fout worden aangemerkt – zo blijft het gesprek open. Daarna gaan de
         voorlichters in op de verschillende termen binnen LHBT+ en op de genoemde vooroordelen. Door hun persoonlijke
         verhalen te koppelen aan soortgelijke ervaringen van leerlingen bouwen we aan wederzijds begrip en het wegnemen
@@ -44,8 +46,8 @@ nl:
       {{ $t('title') }}
     </SmallHeader>
 
-    <PageIntroText :center="false">
-      <div class="md:flex md:space-x-12">
+    <PageIntroText class="pb-2" :center="false">
+      <div class="lg:flex lg:space-x-12">
         <div class="flex-1">
           <LanguageWarning v-if="$i18n.locale == 'en'" class="mb-12" />
           <p
@@ -55,7 +57,7 @@ nl:
             v-html="paragraph"
           />
         </div>
-        <div class="md:w-1/4">
+        <div class="lg:w-1/3 xl:w-1/4">
           <nuxt-link :to="localePath('jongenout')">
             <Announcement class="space-y-2">
               <h2 class="font-semibold text-2xl" v-html="$t('titles.jongenout')" />
@@ -67,20 +69,29 @@ nl:
       </div>
     </PageIntroText>
 
-    <SkewedSection triangle-class="border-brand-500" content-class="bg-brand-500" :bottom="false">
-      <div
-        class="container px-4 mx-auto relative z-10 md:flex justify-center space-y-12 md:space-y-0 md:space-x-8 pt-4 pb-12"
-      >
-        <div class="bg-brand-100 bg-opacity-80 backdrop-blur p-4 md:p-8 rounded-lg shadow-xl flex-1 mt-[-8.555vw]">
-          <h2 class="text-xl font-bold mb-4 text-brand-500 uppercase tracking-wider" v-text="$t('titles.contact')" />
-          <p v-for="paragraph in $t('content.contact')" :key="paragraph" class="text-lg mb-4" v-html="paragraph" />
-          <EducationForm />
-        </div>
+    <section>
+      <div class="container px-4 mx-auto mb-6">
+        <h1 class="text-brand-400 font-medium text-5xl" v-html="$t('titles.educators')" />
+      </div>
+      <div class="bg-brand-500">
+        <Educators class="container mx-auto px-4 py-12 text-base" />
+      </div>
+    </section>
 
-        <div class="flex-1 text-white">
+    <SkewedSection triangle-class="border-brand-800" content-class="bg-brand-800" class="bg-brand-500" :bottom="false">
+      <div class="container px-4 mx-auto relative z-10 xl:flex justify-center py-12">
+        <div class="xl:w-1/2 text-white mb-12 xl:mb-0 xl:pr-6">
           <h1 class="font-medium leading-none text-5xl mb-4" v-html="$t('titles.voorlichting')"></h1>
           <p v-for="paragraph in $t('content.voorlichting')" :key="paragraph" class="text-lg mb-4" v-html="paragraph" />
         </div>
+
+        <div
+          class="flex-1 bg-brand-100 bg-opacity-80 backdrop-blur p-4 xl:p-8 rounded-lg shadow-xl xl:mt-[-14.555vw] xl:ml-6"
+        >
+          <h2 class="text-xl font-bold mb-4 text-brand-500 uppercase tracking-wider" v-text="$t('titles.contact')" />
+          <p v-for="paragraph in $t('content.contact')" :key="paragraph" class="text-lg mb-4" v-html="paragraph" />
+          <EducationForm />
+        </div>
       </div>
     </SkewedSection>
   </div>