sonar

src/components/ProjectShow.vue

@@ -21,17 +21,29 @@ watch(() => props.progress, (progress) => {
 </script>
 
 <template>
-  <div class="grid min-h-screen w-full grid-cols-1 lg:grid-cols-2" :style="{ opacity: props.opacity }">
+  <div class="grid min-h-screen w-full grid-cols-1 lg:grid-cols-2 opacity-container">
-    <div class="flex h-[30vh] flex-col items-center justify-center text-3xl lg:h-auto lg:text-3xl" :style="{ transform: `translateY(${translateYright}px)`}">
+    <div class="flex h-[30vh] flex-col items-center justify-center text-3xl lg:h-auto lg:text-3xl transform-container">
       <div class="leading-10 text-white">
         <p class="text-2xl font-medium md:text-3xl xl:text-4xl text-gray-500"> {{ props.title}}</p>
         <p class="text-2xl font-bold md:text-3xl xl:text-4xl text-white"> {{ props.application}}</p>
       </div>
     </div>
-    <div class="flex h-[70vh] lg:h-screen flex-1 justify-center lg:items-center p-4"
+    <div class="flex h-[70vh] lg:h-screen flex-1 justify-center lg:items-center p-4 transform-container-2">
-         :style="{ transform: `translateY(${translateYleft}px)`}">
       <img :src="`images/${ props.image}`" class="w-full h-full object-contain p-20"
-           :alt="`screenshot de ${props.application}`" width="100" height="100">
+           :alt="`screenshot de ${props.application}`">
     </div>
   </div>
 </template>
+<style scoped>
+  .opacity-container {
+    opacity: v-bind('props.opacity')
+  }
+
+  .transform-container{
+    transform: translateY(v-bind('translateYright')+ 'px')
+  }
+
+  .transform-container-2{
+    transform: translateY(v-bind('translateYleft')+ 'px')
+  }
+</style>