From b04e5a00c480517cbec371ab5adf461dd8269e4c Mon Sep 17 00:00:00 2001 From: clement franckelemon <clement.franckelemon.etu@univ-lille.fr> Date: Sat, 1 Mar 2025 23:26:10 +0100 Subject: [PATCH] :lipstick: add infos for competences --- src/components/ComptenceView.vue | 44 +++++++++++++++----------------- src/components/HeaderView.vue | 2 +- src/components/InfoDialog.vue | 26 +++++++++++++++++++ 3 files changed, 47 insertions(+), 25 deletions(-) create mode 100644 src/components/InfoDialog.vue diff --git a/src/components/ComptenceView.vue b/src/components/ComptenceView.vue index 415de89..b00310b 100644 --- a/src/components/ComptenceView.vue +++ b/src/components/ComptenceView.vue @@ -1,44 +1,40 @@ <template> <TitleComposant label="Compétences" class="q-mt-xl" /> <div class="text-h5 row justify-evenly q-my-lg" style="row-gap: 80px; column-gap: 25px"> - <q-btn v-for="comptence in comptences" :key="comptence.name" class="text-center text-bold non-selectable cursor-pointer hoverBtn q-pt-sm" style="transition: 0.2s;" @click="isActive = (isActive !== comptence.name && comptence.name)" :class="{ - activeBtn: isActive === comptence.name, + <q-btn v-for="comptence in comptences" :key="comptence.name" class="text-center text-bold non-selectable cursor-pointer hoverBtn q-pt-sm" style="transition: 0.2s; border-radius: 10px" @click="isActive = true; competenceSelected = comptence" :class="{ 'col-4': $q.screen.lt.md, 'col-3': !$q.screen.lt.md -}" unelevated rounded> - <img style="max-width: 100%; border-radius: 20px;border: 3px solid #FFFFFF" :style="isActive === comptence.name && 'border-color: #eeea14 !important;'" :src="'/clement.franckelemon.etu/portfolio-2025/spa/'+comptence.src"> +}" unelevated> + <img style="max-width: 100%; border-radius: 10px;border: 3px solid #FFFFFF" :src="'/clement.franckelemon.etu/portfolio-2025/spa/'+comptence.src"> <span class="q-ma-xs text-h6 text-bold sub-title" style="line-height: 1.2rem" :style="$q.screen.lt.md && 'font-size: 15px;'" >{{comptence.name}}</span> - <q-popup-proxy v-close-popup @hide="isActive === comptence.name ? isActive = '' : '' " :offset="[10, 10]"> - <div class="q-ma-sm text-secondary text-bold"> - <q-icon name="info" size="md" class="q-mr-xs" /> - <span>{{comptence.msg}}</span> - </div> - </q-popup-proxy> </q-btn> </div> + <InfoDialog v-model="isActive" :content="competenceSelected.msg" /> </template> <script lang="ts"> import TitleComposant from 'components/TitleComposant.vue' +import InfoDialog from 'components/InfoDialog.vue' export default { - components: { TitleComposant }, + components: { InfoDialog, TitleComposant }, data() { return { - isActive: '', + isActive: false, + competenceSelected: {msg: ''}, comptences: [ - {name: 'Java / Java EE / JavaFx',src: '/images/Competences/Java.png', msg: ''}, - {name: 'SQL & NoSQL',src: '/images/Competences/BDD.png', msg: ''}, - {name: 'HTML & CSS',src: '/images/Competences/HTML-CSS.png', msg: ''}, - {name: 'JavaScript / nodeJS',src: '/images/Competences/JS.png', msg: ''}, - {name: 'Python',src: '/images/Competences/Python.png', msg: ''}, - {name: 'Langage C',src: '/images/Competences/C.png', msg: ''}, - {name: 'Réalisation de Documentation (Markdown)',src: '/images/Competences/Pandoc.png', msg: ''}, - {name: 'Outils de Gestion de Version (Git)',src: '/images/Competences/Git.png', msg: ''}, - {name: 'Méthode Scrum',src: '/images/Competences/Scrum.png', msg: ''}, - {name: 'React',src: '/images/Competences/React.png', msg: ''}, - {name: 'Spring',src: '/images/Competences/Spring.png', msg: ''}, - {name: 'Vue',src: '/images/Competences/Vue.png', msg: ''}, + {name: 'Java / Java EE / JavaFx',src: '/images/Competences/Java.png', msg: 'Tout au long de mon parcours de BUT j\'ai pu découvrir et apprendre divers notions au travers de ce language, notament au travers de nombreux projets (serveurs API / application avec JavaFx / ...).'}, + {name: 'SQL & NoSQL',src: '/images/Competences/BDD.png', msg: 'J\'ai appris durant tout mon cursus universitaire à concevoir et mettre en place des base de donnée principalement avec Posgres mais aussi H2. Sans oublier quelques base de donnée NoSQL tel que Cassandra / MongoDB / Redis et enfin ElasticSearch.'}, + {name: 'HTML & CSS',src: '/images/Competences/HTML-CSS.png', msg: 'Durant ma première année de BUT Informatique j\'ai eu l\'occasion de réalisé tout un cours sur l\'HTML et CSS sur de nombreux points different mais avant tout sur les divers structures importantes existantes.'}, + {name: 'JavaScript / nodeJS',src: '/images/Competences/JS.png', msg: 'Lors de mon quatrième semestre en BUT Informatique j\'ai eu l\'occasion de découvrir les bases de JavaScript et explorer NodeJS pour une première introduction au développement backend.'}, + {name: 'Python',src: '/images/Competences/Python.png', msg: 'Lors de ma première et terminal, j\'ai eu l\'occasion de découvrir ce le domaine de la programation et ainsi pu l\'approfondir aux travers de travaux personnel mais aussi lors de ma dernière année de BUT avec une approche de Multimédia et Modélisation Mathématique.'}, + {name: 'Langage C',src: '/images/Competences/C.png', msg: 'Durant ma seconde année, j’ai découvert le langage C dans une démarche d’apprentissage de la programmation bas niveau.'}, + {name: 'Réalisation de Documentation (Markdown)',src: '/images/Competences/Pandoc.png', msg: 'Tout au long de mon parcours en BUT, j’ai eu l’occasion d’apprendre et d’utiliser des outils comme Pandoc pour la création de documents en langage Markdown.'}, + {name: 'Outils de Gestion de Version (Git)',src: '/images/Competences/Git.png', msg: 'Depuis ma première année en BUT, j’ai eu l’opportunité de découvrir et d’apprendre à utiliser Git, ainsi que d’explorer les différents outils qui y sont associés pour gérer efficacement le versionnage et la collaboration sur des projets de développement.'}, + {name: 'Méthode Scrum',src: '/images/Competences/Scrum.png', msg: 'J\'ai eu la chance de découvrir différentes méthodologies SCRUM à travers plusieurs mini-projets réalisés dans le cadre du BUT, mais aussi de manière plus approfondie lors de mon stage chez Nextoo, avec <a href="https://www.hacoeur.biz/people/nico/" class="text-bold text-secondary" >Nicolas Tondeur</a>, en participant à divers serious games.'}, + {name: 'React',src: '/images/Competences/React.png', msg: 'Lors de mon dernier semestre en BUT Informatique, j\'ai enrichi mes compétences en développement web, notamment avec React. J\'ai travaillé sur la création d\'applications interactives en utilisant des composants, la gestion de l\'état local et des événements. J\'ai également appris à optimiser les performances et à intégrer des API externes. De plus, j\'ai eu l\'opportunité de mettre en place une architecture Flux, en particulier avec Redux.'}, + {name: 'Spring',src: '/images/Competences/Spring.png', msg: 'Durant mon stage chez Nextoo, j\'ai eu l\'occasion de découvrir Spring au travers de la Nextoo Academy. Mais J\'ai aussi eu l\'occasion de redécouvrir les bases et le fonctionnement de Spring lors de ma dernière année de BUT Informatique.'}, + {name: 'Vue',src: '/images/Competences/Vue.png', msg: 'Lors de mon stage chez Nextoo, j\'ai eu l\'opportunité de découvrir et apprendre à métriser Vue avec <a href="https://vuetifyjs.com/en/" class="text-bold text-secondary">Vuetify</a> durant la Nextoo Academy. Mais aussi de l\'appliquer au sein de divers projet concret sous diverse forme comme par exemple avec <a href="https://quasar.dev/" class="text-bold text-secondary">Quasar</a>.'}, ] } } diff --git a/src/components/HeaderView.vue b/src/components/HeaderView.vue index 925e2e5..03b5def 100644 --- a/src/components/HeaderView.vue +++ b/src/components/HeaderView.vue @@ -10,7 +10,7 @@ bordered class="bg-secondary" > - <q-btn icon="close" class="q-mr-sm q-mt-sm" unelevated @click="openNav = false" style="max-height: 8%" /> + <q-btn icon="close" class="q-ml-sm q-mt-xs" unelevated @click="openNav = false" style="max-height: 8%" round size="md" /> <div class="full-height row justify-evenly" style="max-height: 90%"> <HeaderButton class="col-6 row justify-center" icon="home" to="/#accueil" label="Accueil" /> <HeaderButton class="col-6 row justify-center" icon="person" to="/#presentation" label="Présentation" /> diff --git a/src/components/InfoDialog.vue b/src/components/InfoDialog.vue new file mode 100644 index 0000000..72da3d8 --- /dev/null +++ b/src/components/InfoDialog.vue @@ -0,0 +1,26 @@ +<template> + <q-dialog> + <q-card style="max-width: 600px;" :style="$q.screen.lt.md ? 'width: 100%;' : 'width: 50%' "> + <q-card-section class="bg-secondary row items-center justify-between"> + <div class="text-primary text-h6 row items-center"> + <q-icon name="info" size="md" class="q-mr-sm" /> + Informations + </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"> + <div v-html="content" /> + </q-card-section> + </q-card> + </q-dialog> +</template> + +<script setup lang="ts"> +defineProps({ + content: String +}) +</script> + +<style scoped> +</style> -- GitLab