diff --git a/src/components/ContactDialog.vue b/src/components/ContactDialog.vue new file mode 100644 index 0000000000000000000000000000000000000000..49b8711d8678c29a4024c329c4748c392109fd66 --- /dev/null +++ b/src/components/ContactDialog.vue @@ -0,0 +1,79 @@ +<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> diff --git a/src/components/ContactView.vue b/src/components/ContactView.vue index 4361e9f3927779eaaad98d0ecc1bd0d5b1b80c23..31348ff5c87348df63753344f42552b366c528fe 100644 --- a/src/components/ContactView.vue +++ b/src/components/ContactView.vue @@ -1,19 +1,24 @@ <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`