Feat/dev titles

src/developers/[developerSlug].md

@@ -1,14 +1,23 @@
 ---
 page: true
 footer: false
-title: Vue Developers
+title: Vue Developer
 ---
 
 <script setup>
 import { useData } from 'vitepress'
+import { onMounted, ref } from 'vue'
+import developersData from './developers.json'
 import Page from './components/DeveloperPage.vue'
 
 const { page } = useData()
+const developer = ref(developersData.find(dev => dev.slug === page.value.params.developerSlug) || {})
+
+onMounted(() => {
+  if (developer.value) {
+    document.title = `${developer.value.name} - Vue Developer | Vue.js`
+  }
+})
 </script>
 
-<Page :developerId="page.params.developerId" :developerSlug="page.params.developerSlug" />
+<Page :developer="developer" />

src/developers/[developerSlug].paths.ts

@@ -5,7 +5,7 @@ export default {
     return {
       params: {
         developerId: developer.id,
-        developerSlug: `${developer.id}-${developer.alias.toLowerCase()}-freelance-developer`
+        developerSlug: developer.slug,
       }
     }
   })

src/developers/components/CloudinaryImage.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import partnerConfig from '../partnerConfig.js'
+
+const { cloudinaryUrl } = partnerConfig
 
 const props = withDefaults(defineProps<{
   src: string,
@@ -17,8 +20,6 @@ const props = withDefaults(defineProps<{
   faceRecognition: false,
 });
 
-const cloudinaryUrl = 'https://res.cloudinary.com/proxify-io/image/upload'
-
 const imageSrc = computed(() => {
   const attributes = [
     'f_auto',

src/developers/components/DeveloperCard.vue

@@ -1,35 +1,29 @@
 <script setup lang="ts">
-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'
-
-const router = useRouter()
 
 const props = defineProps<{
   data: DeveloperProfile
   hero?: boolean
 }>()
 
-const { id, alias, name, description, compensations, proficiencies, location } = props.data
+const { id, slug, name, description, compensations, proficiencies, location } = props.data
 
-const profileImage = computed(() => `/vue/developers/${id}.jpg`)
-const trimmedDescription = computed(() => truncateTextFromArray(description, 220))
+const profileLink = `/developers/${slug}.html`
+const profileImage = `/vue/developers/${id}.jpg`
+const trimmedDescription = truncateTextFromArray(description, 220)
 
-function openDeveloperPage() {
-  router.go(`./developers/${id}-${alias.toLowerCase()}-freelance-developer.html`)
-}
 </script>
 
 <template>
-  <div
+  <a
     class="developer-card"
     :class="{ 'developer-card--hero': hero }"
-    @click="openDeveloperPage"
+    :href="profileLink"
   >
     <div class="developer-card__header">
       <div v-if="!hero && profileImage" class="developer-card__avatar">
@@ -80,7 +74,7 @@ function openDeveloperPage() {
         :height="605"
       />
     </div>
-  </div>
+  </a>
 </template>
 
 <style scoped>

src/developers/components/DeveloperCompensations.vue

@@ -13,7 +13,7 @@ defineProps<{
     <h4 v-if="title">{{ title }}</h4>
     <div>
       <div v-if="compensations" class="developer-compensations__list">
-        <div v-for="(compensation, key) in compensations" :key="key">
+        <div v-for="(compensation, key) in compensations" :key="`compensation-${key}`">
           {{ compensation }}
         </div>
       </div>

src/developers/components/DeveloperPage.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import data from '../developers.json'
 import partnerConfig from '../partnerConfig.js'
-import { DeveloperProfiles } from './type'
+import { DeveloperProfile } from './type'
 import { generateUTMUrl } from './utils'
 import { VTIconChevronLeft, VTIconMapPin } from '@vue/theme'
 import CloudinaryImage from './CloudinaryImage.vue'
@@ -15,17 +14,12 @@ import DeveloperPageFooter from './DeveloperPageFooter.vue'
 import { useRoute } from 'vitepress'
 
 const props = defineProps<{
-  developerId: number
-  developerSlug: string
+  developer: DeveloperProfile
 }>()
 
-const developer = (data as DeveloperProfiles).find(
-  (developer) => developer.id === props.developerId
-)!
+const { id, name, location, description, compensations, proficiencies, experiences, education } = props.developer
 
-const { id, name, location, description, compensations, proficiencies, experiences, education } = developer
-
-const profileImage = computed(() => `/vue/developers/${id}.jpg`)
+const profileImage = `/vue/developers/${id}.jpg`
 
 const route = useRoute()
 const hireUsLink = computed(() => generateUTMUrl(partnerConfig.hireUsButtonUrl, route.path))
@@ -63,7 +57,7 @@ const hireUsLink = computed(() => generateUTMUrl(partnerConfig.hireUsButtonUrl,
           </p>
 
           <div v-if="description" class="developer-page__description">
-            <p v-for="desc in description" :key="desc">{{ desc }}</p>
+            <p v-for="(desc, key) in description" :key="`p-desc-${key}`">{{ desc }}</p>
           </div>
         </div>
 

src/developers/components/DeveloperProficiencies.vue

@@ -37,11 +37,11 @@ const toggleShowAll = (event: Event) => {
   <div class="developer-proficiencies">
     <h4 v-if="title" class="developer-proficiencies__title">{{ title }}</h4>
     <div class="developer-proficiencies__list">
-      <span class="developer-proficiencies__item" v-for="p in visibleProficiencies" :key="p">{{ p }}</span>
+      <span class="developer-proficiencies__item" v-for="(p, key) in visibleProficiencies" :key="`prof-${key}`">{{ p }}</span>
       <button
         v-if="shouldShowButton"
-        @click.stop="toggleShowAll"
         class="developer-proficiencies__toggle"
+        @click.stop="toggleShowAll"
       >
         {{ showAll ? 'Show less' : 'Show all' }}
       </button>

src/developers/components/type.ts

@@ -29,6 +29,7 @@ export interface DeveloperCompensations {
 
 export interface DeveloperProfile {
   id: number;
+  slug: string;
   name: string;
   alias: string;
   description: string[];

src/developers/developers.json

@@ -2,6 +2,7 @@
   {
     "id": 1346,
     "name": "Stelios Kitziris",
+    "slug": "stelios-vue-node-fullstack-developer",
     "alias": "Stelios",
     "description": [
       "Stelios is a fullstack developer with over six years of commercial experience, specializing in the MEVN stack.",
@@ -219,6 +220,7 @@
   {
     "id": 2535,
     "name": "Tomek Jankowski",
+    "slug": "tomek-vue-node-fullstack-developer",
     "alias": "Tomek",
     "description": [
       "Tomek is a fullstack developer with over 17 years of commercial experience. Over the years, he has transitioned from using PHP to mastering modern tech stacks, focusing on Vue.js and Node.js in the last six years. His expertise in these technologies has driven the development and support of robust, high-traffic systems.",
@@ -356,6 +358,7 @@
   {
     "id": 3021,
     "name": "Vardan Hayrapetyan",
+    "slug": "vardan-vue-node-fullstack-developer",
     "alias": "Vardan",
     "description": [
       "Vardan is a frontend-heavy fullstack developer with expertise in Vue.js, and Node.js. With six years of experience, he has worked on several large-scale web applications, particularly excelling in the real estate sector.",
@@ -545,6 +548,7 @@
   {
     "id": 5486,
     "name": "Abdulqudus Abubakre",
+    "slug": "abdulqudus-vue-frontend-developer",
     "alias": "Abdulqudus",
     "description": [
       "Abdulqudus is a senior frontend developer with over six years of commercial experience. His main framework of choice is Vue.js. He has also worked with frameworks like Nuxt.js and Vuetify for over three years. He is a fan of TDD and uses Cypress as a main testing tool in all his projects.",
@@ -747,6 +751,7 @@
   {
     "id": 5328,
     "name": "Santiago Anaya",
+    "slug": "santiago-anaya-vue-ruby-fullstack-developer",
     "alias": "Santiago",
     "description": [
       "Santiago is a fullstack engineer with over six years of commercial experience, focusing on frontend development. He is an expert in Vue.js. On the backend, he uses Ruby on Rails and various relational databases, particularly PostgreSQL.",
@@ -889,6 +894,7 @@
   {
     "id": 5697,
     "name": "Harshit Sangani",
+    "slug": "harshit-vue-frontend-developer",
     "alias": "Harshit",
     "description": [
       "Harshit is a frontend engineer with over six years of commercial experience, specializing in Vue.js. He has been integral to various stages of the software development lifecycle, from ideation to deployment, ensuring top-notch user experiences and scalable applications.",
@@ -1076,6 +1082,7 @@
   {
     "id": 3709,
     "name": "Kostiantyn Draliuk",
+    "slug": "kostiantyn-vue-frontend-developer",
     "alias": "Kostiantyn",
     "description": [
       "Kostiantyn is a frontend developer with eight years of commercial experience. His primary expertise lies in Vue.js, where he has demonstrated exceptional proficiency in building robust and scalable web applications.",
@@ -1229,6 +1236,7 @@
   {
     "id": 5022,
     "name": "Eduard Miskov",
+    "slug": "eduard-miskov-vue-frontend-developer",
     "alias": "Eduard",
     "description": [
       "Eduard is a frontend developer with over seven years of commercial experience. His primary expertise is crafting visually appealing and user-friendly web applications using Vue.js.",
@@ -1532,6 +1540,7 @@
   {
     "id": 4747,
     "name": "Emmanuel Sackey",
+    "slug": "emmanuel-vue-js-ts-nuxt-nest-fullstack-dev",
     "alias": "Emmanuel",
     "description": [
       "Emmanuel is a frontend-heavy fullstack developer with seven years of professional experience, proficient in Vue.js and Node.js. His main focus is on creating user-friendly web pages and dependable back-end systems.",
@@ -1735,6 +1744,7 @@
   {
     "id": 1020,
     "name": "Abdusaid Umarov",
+    "slug": "abdusaid-html-css-vue-typescript-frontend-dev",
     "alias": "Abdusaid",
     "intro": "Abdusaid is a Senior Frontend Developer with over six years of experience, where he’s made a name for himself in Vue.js and Nuxt.js. His skill in Vue.js is top-notch, proven by the perfect 100% score he achieved on the Proxify test.",
     "description": [

src/developers/partnerConfig.js

@@ -7,6 +7,7 @@ const websiteLabel = 'proxify.io'
 const websiteUrl = 'https://proxify.io/'
 const applyUrl = 'https://career.proxify.io/apply'
 const hireUrl = 'https://proxify.io/hire-vuejs'
+const cloudinaryUrl = 'https://res.cloudinary.com/proxify-io/image/upload'
 
 
 const partnerConfig = {
@@ -19,6 +20,9 @@ const partnerConfig = {
   websiteUrl: websiteUrl,
   hireUsButtonUrl: hireUrl,
 
+  // Cloudinary storage URL
+  cloudinaryUrl: cloudinaryUrl,
+
   // Hero Section
   pageHeroBanner: {
     title: 'Vue Developers',