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

:lipstick: add responsive comptence

parent ffcb9177
No related branches found
No related tags found
No related merge requests found
<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="col-3 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}" unelevated rounded>
<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,
'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">
<span class="q-ma-xs text-h6 text-bold">{{comptence.name}}</span>
<span class="q-ma-xs text-h6 text-bold sub-title" :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" />
......
<template>
<div class="column items-center full-width non-selectable">
<div class="col-3" style="max-width: 450px;">
<div class="col-3" style="max-width: 450px; width: 75%">
<img :src="src"
style="border-radius: 50%; width: 100%; height: 100%; object-fit: cover;"
class="full-height full-width">
</div>
<div class="col-6 column items-center text-h2 text-bold text-secondary">
<div class="col-6 column items-center text-h2 text-bold text-secondary" :class="$q.screen.lt.md ? 'text-h4' : 'text-h2' ">
<span class="arial text-uppercase">{{first}}</span>
<span class="arial text-uppercase" >{{ second }}</span>
<span class="text-dark text-h6" >{{accent}}</span>
......
<template>
<div class="text-h3 text-bold text-uppercase non-selectable q-mb-xl">
<div class="text-h3 text-bold text-uppercase non-selectable q-mb-xl" :class="$q.screen.lt.md ? 'text-h4' : 'text-h3'">
<span class="titre">{{label}}</span>
<span class="double" >{{label}}</span>
<span class="double" :style="$q.screen.lt.md ? 'font-size: 42px;' : 'font-size: 75px;'" >{{label}}</span>
</div>
</template>
......@@ -21,7 +21,6 @@ defineProps({
font-family: arial;
color: var(--q-secondary);
opacity: 0.1;
font-size: 75px;
position: absolute;
margin: 0px;
left:0.6%;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment