Skip to content
Snippets Groups Projects
Commit b04e5a00 authored by Clement Franckelemon's avatar Clement Franckelemon
Browse files

:lipstick: add infos for competences

parent 855ef2c7
No related branches found
No related tags found
No related merge requests found
Pipeline #59431 passed
<template> <template>
<TitleComposant label="Compétences" class="q-mt-xl" /> <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"> <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="{ <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="{
activeBtn: isActive === comptence.name,
'col-4': $q.screen.lt.md, 'col-4': $q.screen.lt.md,
'col-3': !$q.screen.lt.md 'col-3': !$q.screen.lt.md
}" unelevated rounded> }" unelevated>
<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"> <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> <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> </q-btn>
</div> </div>
<InfoDialog v-model="isActive" :content="competenceSelected.msg" />
</template> </template>
<script lang="ts"> <script lang="ts">
import TitleComposant from 'components/TitleComposant.vue' import TitleComposant from 'components/TitleComposant.vue'
import InfoDialog from 'components/InfoDialog.vue'
export default { export default {
components: { TitleComposant }, components: { InfoDialog, TitleComposant },
data() { data() {
return { return {
isActive: '', isActive: false,
competenceSelected: {msg: ''},
comptences: [ comptences: [
{name: 'Java / Java EE / JavaFx',src: '/images/Competences/Java.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: ''}, {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: ''}, {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: ''}, {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: ''}, {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: ''}, {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: ''}, {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: ''}, {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: ''}, {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: ''}, {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: ''}, {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: ''}, {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>.'},
] ]
} }
} }
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
bordered bordered
class="bg-secondary" 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%"> <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="home" to="/#accueil" label="Accueil" />
<HeaderButton class="col-6 row justify-center" icon="person" to="/#presentation" label="Présentation" /> <HeaderButton class="col-6 row justify-center" icon="person" to="/#presentation" label="Présentation" />
......
<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>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment