add easter egg contact

src/components/ContactDialog.vue

+<template>
+  <q-dialog>
+    <q-card style="max-width: 600px;" :style="$q.screen.lt.md ? 'width: 100%;' : 'width: 50%' ">
+      <q-card-section class="content row items-center justify-between">
+        <div class="text-primary text-h6 row items-center">
+          <q-icon name="groups" size="md" class="q-mr-sm" />
+          Contacts (Easter Egg)
+        </div>
+        <q-btn icon="close" text-color="primary" unelevated round v-close-popup />
+      </q-card-section>
+
+      <q-card-section class="q-mx-md q-my-sm">
+        <ul>
+          <li v-for="contact in contacts" :key="contact.name" class="q-my-sm">
+            <a :href="contact.src" class="text-subtitle1 text-bold" style="color: #222222" >{{contact.name}}</a>
+          </li>
+        </ul>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const contacts = ref([
+  {
+    name: "Victor Singez",
+    src: 'https://baxioo.github.io/CV/index.html'
+  },
+  {
+    name: "Quentin Moutte",
+    src: 'https://gitlabpages.univ-lille.fr/clement.franckelemon.etu/portfolio-2025/spa/#/not_found'
+  },
+])
+</script>
+
+<style scoped>
+.content {
+  border-radius: 20px;
+  overflow: hidden;
+  background: linear-gradient(-45deg, #ff0080, #ff8c00, #40e0d0, #8a2be2);
+  background-size: 400% 400%;
+  animation: gradientBG 10s ease infinite;
+}
+
+/* Animation du dégradé */
+@keyframes gradientBG {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+/* Effet de lumière flottante amélioré */
+.content::before,
+.content::after {
+  content: "";
+  width: 200%;
+  height: 200%;
+  top: -50%;
+  left: -50%;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 10%, transparent 70%);
+  opacity: 0.3;
+  animation: moveGlow 20s ease-in-out infinite;
+  filter: blur(100px);
+}
+
+.content::after {
+  animation-duration: 30s;
+  animation-direction: alternate;
+}
+
+@keyframes moveGlow {
+  0% { transform: translate(0px, 0px) scale(1); }
+  50% { transform: translate(50px, 50px) scale(1.2); }
+  100% { transform: translate(-50px, -50px) scale(1); }
+}
+
+</style>

src/components/ContactView.vue

 <template>
   <div>
-    <a href="https://baxioo.github.io/CV/index.html" style="text-decoration: none; cursor:default;">
+    <div @click="goEaster = true">
       <TitleComposant label="Contacts" class="q-mt-xl" />
-    </a>
+    </div>
     <div class="q-ml-xl text-bold text-h6">
       <p class="flex items-center cursor-pointer" @click="mail" :class="$q.screen.lt.md ? 'q-mr-xl text-subtitle2': ''"><img class="q-mr-xs non-selectable" src="/clement.franckelemon.etu/portfolio-2025/spa/images/Contact/mail.png"/>Clement.Franckelemon@gmail.com</p>
       <p class="flex items-center cursor-pointer" @click="tel" ><img class="q-mr-xs non-selectable" src="/clement.franckelemon.etu/portfolio-2025/spa/images/Contact/telephone.png"/>07 66 55 76 78</p>
       <a class="text-secondary" href="https://www.linkedin.com/in/cl%C3%A9ment-franckelemon-88976b26b/"><p class="flex items-center"><img class="q-mr-xs non-selectable" src="/clement.franckelemon.etu/portfolio-2025/spa/images/Contact/linkedin.png"/>Linkedin</p></a>
     </div>
   </div>
+  <contact-dialog v-model="goEaster" />
 </template>
 
 <script setup lang="ts">
 
 import TitleComposant from 'components/TitleComposant.vue'
+import ContactDialog from 'components/ContactDialog.vue'
+import { ref } from 'vue'
+
+const goEaster = ref(false)
 
 const mail = () => {
   window.location.href = `mailto:clement.franckelemon@gmail.com`