get dev images optimized from cloudinary

.gitignore

@@ -3,6 +3,7 @@
 .DS_Store
 .AppleDouble
 .LSOverride
+.idea
 
 # Thumbnails
 ._*

src/developers/components/CloudinaryImage.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  src: string,
+  alt: string,
+  width: number,
+  height: number,
+  quality?: {
+    type: string,
+    default: 'q_auto:best',
+  },
+  crop?: {
+    type: string,
+    default: 'c_fit',
+  },
+  faceRecognition?: {
+    type: boolean,
+    default: false,
+  },
+  loading?: 'lazy' | 'eager',
+  className?: {
+    type: string,
+    default: '',
+  },
+}>()
+
+const cloudinaryUrl = 'https://res.cloudinary.com/proxify-io/image/upload'
+
+const imageSrc = computed(() => {
+  const attributes = [
+    'f_auto',
+    'dpr_auto',
+    props.crop,
+    props.quality,
+    props.faceRecognition ? 'g_face' : '',
+    props.width ? `w_${props.width}` : '',
+    props.height ? `h_${props.height}` : '',
+  ]
+    .filter((item) => item !== '')
+    .join(',');
+
+  return `${cloudinaryUrl}/${attributes}/v1/${props.src.replace(/^\/+/, '')}`;
+})
+</script>
+
+<template>
+  <img
+    :src="imageSrc"
+    :alt="alt"
+    :width="width"
+    :height="height"
+    :loading="loading"
+    :class="['c-image', className]"
+  />
+</template>
+
+<style scoped>
+.c-image {
+  max-width: 100%;
+  height: auto;
+  vertical-align: top;
+}
+</style>

src/developers/components/DeveloperCard.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import { DeveloperProfile } from './type'
 import { truncateTextFromArray } from './utils'
 import { VTIconMapPin } from '@vue/theme'
+import CloudinaryImage from './CloudinaryImage.vue'
 import DeveloperProficiencies from './DeveloperProficiencies.vue'
 import DeveloperCompensations from './DeveloperCompensations.vue'
 import { useRouter } from 'vitepress'
@@ -16,8 +17,7 @@ const props = defineProps<{
 
 const { id, alias, name, description, compensations, proficiencies, location } = props.data
 
-const profileImage = computed(() => `/images/developers/${id}.jpg`)
-
+const profileImage = computed(() => `/vue/developers/${id}.jpg`)
 const trimmedDescription = computed(() => truncateTextFromArray(description, 220))
 
 function openDeveloperPage() {
@@ -33,7 +33,16 @@ function openDeveloperPage() {
   >
     <div class="developer-card__header">
       <div v-if="!hero && profileImage" class="developer-card__avatar">
-        <img :src="profileImage" :alt="name" />
+        <CloudinaryImage
+          :src="profileImage"
+          :alt="name"
+          :width="120"
+          :height="120"
+          :faceRecognition="true"
+          crop="c_fill"
+          loading="lazy"
+          class="avatar"
+        />
       </div>
       <div class="developer-card__summary">
         <h3 class="developer-card__name">{{ name }}</h3>
@@ -64,7 +73,12 @@ function openDeveloperPage() {
     />
 
     <div v-if="hero && profileImage" class="developer-card__image">
-      <img :src="profileImage" :alt="name" />
+      <CloudinaryImage
+        :src="profileImage"
+        :alt="name"
+        :width="526"
+        :height="605"
+      />
     </div>
   </div>
 </template>

src/developers/components/DeveloperPage.vue

@@ -5,6 +5,7 @@ import partnerConfig from '../partnerConfig.js'
 import { DeveloperProfiles } from './type'
 import { generateUTMUrl } from './utils'
 import { VTIconChevronLeft, VTIconMapPin } from '@vue/theme'
+import CloudinaryImage from './CloudinaryImage.vue'
 import DeveloperCompensations from './DeveloperCompensations.vue'
 import DeveloperProficiencies from './DeveloperProficiencies.vue'
 import DeveloperProfileDiagram from './DeveloperProfileDiagram.vue'
@@ -24,7 +25,7 @@ const developer = (data as DeveloperProfiles).find(
 
 const { id, name, location, description, compensations, proficiencies, experiences, education } = developer
 
-const profileImage = computed(() => `/images/developers/${id}.jpg`)
+const profileImage = computed(() => `/vue/developers/${id}.jpg`)
 
 const route = useRoute()
 const hireUsLink = computed(() => generateUTMUrl(partnerConfig.hireUsButtonUrl, route.path))
@@ -41,7 +42,12 @@ const hireUsLink = computed(() => generateUTMUrl(partnerConfig.hireUsButtonUrl,
 
     <div class="developer-page__content">
       <div v-if="profileImage" class="developer-page__profile-image">
-        <img :src="profileImage" :alt="name" />
+        <CloudinaryImage
+          :src="profileImage"
+          :alt="name"
+          :width="592"
+          :height="680"
+        />
       </div>
 
       <div class="developer-page__main">

src/developers/components/DeveloperPageFooter.vue

@@ -24,11 +24,15 @@ const { logo, partnerName } = partnerConfig
         class="partner-footer__logo dark"
         :alt="`${partnerName} logo`"
         :src="getLogo(logo, true)"
+        width="135"
+        height="30"
       />
       <img
         class="partner-footer__logo"
         :alt="`${partnerConfig.partnerName} logo`"
         :src="getLogo(logo)"
+        width="135"
+        height="30"
       />
     </a>
 

src/developers/developers.json

@@ -12,7 +12,7 @@
       "MongoDB",
       "Vue.js",
       "Express.js",
-      "Node.js",      
+      "Node.js",
       "TypeScript",
       "Nuxt.js",
       "Laravel",
@@ -1246,7 +1246,7 @@
       "Vagrant",
       "Shopware",
       "jQuery",
-      "Storybook",
+      "Storybook"
     ],
     "compensations": {
       "partTime": "€3,436 /month (20 h per week)",
@@ -1746,7 +1746,7 @@
       "Vue.js",
       "Vuex",
       "Nuxt.js",
-      "Laravel", 
+      "Laravel",
       "Java",
       "Tailwind",
       "Jest",