project nearly finished. TODO Next : Project page and refine some text

src/Deprecated/Card.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="card" @click="isFlipped = !isFlipped" :class="{ flipped: isFlipped }">
+    <div class="card-content">
+      <div class="card-back">
+        <div class="card-back__frame"></div>
+      </div>
+      <div class="card-front">
+        <div class="card-front__frame">
+          <div class="card-front__content"
+          :class="{ animate: isFlipped }"
+          v-bind:style= "{ 'background-image': 'url(' + require('../assets/' + bg ) + ')'}">
+            <h3>{{ title }}</h3>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, ref } from 'vue';
+//import { useCardsStore } from '@/stores/cards'
+
+const isFlipped = ref(false)
+
+// const cardsStore = useCardsStore()
+
+// const toggleCard = (id) => {
+//   isFlipped.value = !isFlipped.value
+//   cardsStore.reset();
+//   const functionName = 'toggleCard' + id
+//   cardsStore.toggleCard1();
+  
+//}
+
+const props = defineProps({
+  title: String,
+  bg : String,
+  //id : Number
+});
+
+</script>
+
+<style lang="scss">
+.card {
+  position: relative;
+  transform-style: preserve-3d;
+  width: 200px;
+  height: 300px;
+  transition: 1.5s;
+  transform-origin: center;
+  cursor: pointer;
+}
+
+.card-content {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  transition: 1.5s;
+  transform-style: preserve-3d;
+  backface-visibility: hidden;
+}
+
+.flipped .card-content {
+  transform: rotateY(180deg);
+}
+
+.card-back,
+.card-front {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  backface-visibility: hidden;
+  display: grid;
+  place-items: center;
+}
+
+.card-back__frame {
+  transform-style: preserve-3d;
+  height: 100%;
+  width: 100%;
+  background-position: center;
+  background-image: url(../assets/back.svg);
+}
+
+.card-front__frame {
+  background-image: url(../assets/face.svg);
+  background-position: center;
+  height: 100%;
+  width: 100%;
+  transform-style: preserve-3d;
+  //overflow: hidden;
+  
+  display: grid;
+  place-items: center;
+  transform: translateZ(-2px);
+}
+
+.card-front__content {
+  display: grid;
+  place-items: center;
+  transform: translateZ(-0px);
+  background-color: rgb(117, 148, 138);
+  height: 88%;
+  width: 80%;
+  transform-style: preserve-3d;
+  border-radius: 12px;
+  border: solid black 5px;
+  //overflow: hidden; /* a pb here, it dismiss the translate Z*/
+  position : relative;
+  
+  background-size: 300%;
+  background-position: 500px 500px;
+  
+  transition : 2s;
+  
+  &.animate{
+    background-position: center;
+  }
+
+  }
+
+
+h3 {
+  transform: translateZ(-60px) rotateY(180deg);
+  font-size: 2em;
+  font-weight: bold;
+  color: rgb(255, 31, 31);
+  text-align: center;
+  line-height: 1.5;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+
+</style>