Compare commits
10 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 994d1bb1e6 | |||
| 8deab8fa68 | |||
| 310bec2d74 | |||
| 8ac13f6360 | |||
| 780f5e86c6 | |||
| 3325eaa118 | |||
| bd513b9fb4 | |||
| 69b69d32e6 | |||
| 87821a5d7a | |||
| d268f431d3 |
3
.gitignore
vendored
3
.gitignore
vendored
@@ -21,3 +21,6 @@ pnpm-debug.log*
|
|||||||
*.njsproj
|
*.njsproj
|
||||||
*.sln
|
*.sln
|
||||||
*.sw?
|
*.sw?
|
||||||
|
|
||||||
|
#dockerfile
|
||||||
|
Dockerfile
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 477 KiB |
@@ -1,140 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="card" @click="isFlipped = !isFlipped" :class="{ flipped: isFlipped }">
|
|
||||||
<div class="card-content">
|
|
||||||
<div class="card-back">
|
|
||||||
<div class="card-back__frame"></div>
|
|
||||||
</div>
|
|
||||||
<div class="card-front">
|
|
||||||
<div class="card-front__frame">
|
|
||||||
<div class="card-front__content"
|
|
||||||
:class="{ animate: isFlipped }"
|
|
||||||
v-bind:style= "{ 'background-image': 'url(' + require('../assets/' + bg ) + ')'}">
|
|
||||||
<h3>{{ title }}</h3>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { defineProps, ref } from 'vue';
|
|
||||||
//import { useCardsStore } from '@/stores/cards'
|
|
||||||
|
|
||||||
const isFlipped = ref(false)
|
|
||||||
|
|
||||||
// const cardsStore = useCardsStore()
|
|
||||||
|
|
||||||
// const toggleCard = (id) => {
|
|
||||||
// isFlipped.value = !isFlipped.value
|
|
||||||
// cardsStore.reset();
|
|
||||||
// const functionName = 'toggleCard' + id
|
|
||||||
// cardsStore.toggleCard1();
|
|
||||||
|
|
||||||
//}
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
title: String,
|
|
||||||
bg : String,
|
|
||||||
//id : Number
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.card {
|
|
||||||
position: relative;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
width: 200px;
|
|
||||||
height: 300px;
|
|
||||||
transition: 1.5s;
|
|
||||||
transform-origin: center;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-content {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
transition: 1.5s;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
backface-visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flipped .card-content {
|
|
||||||
transform: rotateY(180deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-back,
|
|
||||||
.card-front {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
backface-visibility: hidden;
|
|
||||||
display: grid;
|
|
||||||
place-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-back__frame {
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
background-position: center;
|
|
||||||
background-image: url(../assets/back.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-front__frame {
|
|
||||||
background-image: url(../assets/face.svg);
|
|
||||||
background-position: center;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
//overflow: hidden;
|
|
||||||
|
|
||||||
display: grid;
|
|
||||||
place-items: center;
|
|
||||||
transform: translateZ(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-front__content {
|
|
||||||
display: grid;
|
|
||||||
place-items: center;
|
|
||||||
transform: translateZ(-0px);
|
|
||||||
background-color: rgb(117, 148, 138);
|
|
||||||
height: 88%;
|
|
||||||
width: 80%;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
border-radius: 12px;
|
|
||||||
border: solid black 5px;
|
|
||||||
//overflow: hidden; /* a pb here, it dismiss the translate Z*/
|
|
||||||
position : relative;
|
|
||||||
|
|
||||||
background-size: 300%;
|
|
||||||
background-position: 500px 500px;
|
|
||||||
|
|
||||||
transition : 2s;
|
|
||||||
|
|
||||||
&.animate{
|
|
||||||
background-position: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
transform: translateZ(-60px) rotateY(180deg);
|
|
||||||
font-size: 2em;
|
|
||||||
font-weight: bold;
|
|
||||||
color: rgb(255, 31, 31);
|
|
||||||
text-align: center;
|
|
||||||
line-height: 1.5;
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -1,129 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="card" @click="isFlipped = !isFlipped" :class="{ flipped: isFlipped }">
|
|
||||||
<div class="card-content">
|
|
||||||
<div class="card-back">
|
|
||||||
<div class="card-back__frame"></div>
|
|
||||||
</div>
|
|
||||||
<div class="card-front">
|
|
||||||
<div class="card-front__frame">
|
|
||||||
<div class="card-front__content"
|
|
||||||
:class="{ animate: isFlipped }">
|
|
||||||
<h3>Who <br> Am <br> I ?<br></h3>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { defineProps, ref } from 'vue';
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
title: String,
|
|
||||||
});
|
|
||||||
|
|
||||||
const isFlipped = ref(false);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.card {
|
|
||||||
position: relative;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
width: 200px;
|
|
||||||
height: 300px;
|
|
||||||
transition: 1.5s;
|
|
||||||
transform-origin: center;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-content {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
transition: 1.5s;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
backface-visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flipped .card-content {
|
|
||||||
transform: rotateY(180deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-back,
|
|
||||||
.card-front {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
backface-visibility: hidden;
|
|
||||||
display: grid;
|
|
||||||
place-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-back__frame {
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
background-position: center;
|
|
||||||
background-image: url(../assets/back.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-front__frame {
|
|
||||||
background-image: url(../assets/face.svg);
|
|
||||||
background-position: center;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
//overflow: hidden;
|
|
||||||
|
|
||||||
display: grid;
|
|
||||||
place-items: center;
|
|
||||||
transform: translateZ(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-front__content {
|
|
||||||
display: grid;
|
|
||||||
place-items: center;
|
|
||||||
transform: translateZ(-0px);
|
|
||||||
background-color: rgb(117, 148, 138);
|
|
||||||
height: 88%;
|
|
||||||
width: 80%;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
border-radius: 12px;
|
|
||||||
border: solid black 5px;
|
|
||||||
//overflow: hidden; /* a pb here, it dismiss the translate Z*/
|
|
||||||
position : relative;
|
|
||||||
background: rgba(76, 175, 80, 0.9); /* Green background with 30% opacity */
|
|
||||||
background-image: url('../assets/question.png');
|
|
||||||
background-size: 200%;
|
|
||||||
background-position: 500px 500px;
|
|
||||||
|
|
||||||
transition : 2s;
|
|
||||||
|
|
||||||
&.animate{
|
|
||||||
background-position: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
transform: translateZ(-60px) rotateY(180deg);
|
|
||||||
padding:0.25rem 1rem;
|
|
||||||
font-size: 2em;
|
|
||||||
font-weight: bold;
|
|
||||||
color: rgb(255, 31, 31);
|
|
||||||
text-align: center;
|
|
||||||
line-height: 1.5;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
background-color: rgba(0, 0, 0, 0.486);
|
|
||||||
box-shadow: 0px 0px 15px rgb(0, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -1,174 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import Name from './Name.vue';
|
|
||||||
import { useBurgerStore } from '@/stores/burger';
|
|
||||||
//import { Ref } from 'vue';
|
|
||||||
|
|
||||||
const burger = useBurgerStore()
|
|
||||||
|
|
||||||
const turnMyCard = (event) => {
|
|
||||||
let link = event.currentTarget
|
|
||||||
link.classList.add('turned')
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
|
|
||||||
<div class="images-grid-gallery">
|
|
||||||
<a class="image-link" href="#"
|
|
||||||
@click="turnMyCard($event)"
|
|
||||||
>
|
|
||||||
<div class="image-container" data-label="Who am I">
|
|
||||||
<img class="image hide"
|
|
||||||
src="@/assets/MaPhoto.jpg"
|
|
||||||
alt=""
|
|
||||||
>
|
|
||||||
<img class="image_background"
|
|
||||||
src="@/assets/question.png"
|
|
||||||
alt="">
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a class="image-link" href="#">
|
|
||||||
<div class="image-container" data-label="Who am I">
|
|
||||||
<img class="image_background" src="@/assets/question.png" alt="">
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a class="image-link" href="#">
|
|
||||||
<div class="image-container" data-label="Who am I">
|
|
||||||
<img class="image_background" src="@/assets/question.png" alt="">
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a class="image-link" href="#">
|
|
||||||
<div class="image-container" data-label="Who am I">
|
|
||||||
<img class="image_background" src="@/assets/question.png" alt="">
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");
|
|
||||||
|
|
||||||
@import '@/style/colors.scss';
|
|
||||||
|
|
||||||
.images-grid-gallery {
|
|
||||||
//max-width: $maxWidth;
|
|
||||||
margin: 0 1em;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat (2, 1fr);
|
|
||||||
//grid-auto-columns: minmax(10px, auto);
|
|
||||||
gap:1em;
|
|
||||||
//border : 3px solid white;
|
|
||||||
height:100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-link {
|
|
||||||
display: flex;
|
|
||||||
border : 3px solid white;
|
|
||||||
background : white;
|
|
||||||
border-radius: 10px;
|
|
||||||
margin:0 auto;
|
|
||||||
margin-bottom: 1em;
|
|
||||||
width: $imageWidth;
|
|
||||||
overflow: hidden;
|
|
||||||
transform: rotateY(0deg);
|
|
||||||
transition: 1s;
|
|
||||||
&.turned{
|
|
||||||
transform: rotateY(180deg);
|
|
||||||
}
|
|
||||||
& > .image-container {
|
|
||||||
border : 3px solid white;
|
|
||||||
border-radius: 22px;
|
|
||||||
overflow: hidden;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-child(1), &:nth-child(2){
|
|
||||||
aspect-ratio: 1/1;
|
|
||||||
aspect-ratio: 8/11;
|
|
||||||
}
|
|
||||||
&:nth-child(3), &:nth-child(4){
|
|
||||||
aspect-ratio: 8/11;
|
|
||||||
}
|
|
||||||
|
|
||||||
@for $i from 1 to 5 {
|
|
||||||
&:nth-child(#{$i}) > .image-container > .image_background{
|
|
||||||
transform:scale(1.0);
|
|
||||||
transition: 0.5s;
|
|
||||||
position:relative;
|
|
||||||
bottom:-400px;
|
|
||||||
left:-120px;
|
|
||||||
animation-duration: 1000ms;
|
|
||||||
animation-name: show-gallery;
|
|
||||||
animation-timing-function: cubic-bezier(0.2, 0.9, 0.44, 1);
|
|
||||||
animation-delay: $i*200 + 1000ms;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:hover .image_background{
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
&:hover > .image_background:before {
|
|
||||||
opacity: 1;
|
|
||||||
left: -5px;
|
|
||||||
top: 50px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hide{
|
|
||||||
display : none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 720px){
|
|
||||||
.images-grid-gallery{
|
|
||||||
grid-template-columns: repeat(4, 1fr);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes show-gallery {
|
|
||||||
0%{
|
|
||||||
|
|
||||||
}
|
|
||||||
100%{
|
|
||||||
bottom: 300px;;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// @keyframes menu-shake{
|
|
||||||
// from {
|
|
||||||
// //opacity: 0;
|
|
||||||
// filter: drop-shadow(-150px 0px 10px #4d0000);
|
|
||||||
// //background-color: rgb(99, 0, 0);
|
|
||||||
// }
|
|
||||||
// 10%{
|
|
||||||
// //opacity: 50%;
|
|
||||||
// filter: drop-shadow(150px 0px 3px #4d0000);
|
|
||||||
// }
|
|
||||||
// 20%{
|
|
||||||
// filter: drop-shadow(-100px 0px 3px #4d0000);
|
|
||||||
|
|
||||||
// }
|
|
||||||
// 30%{
|
|
||||||
// filter: drop-shadow(50px 0px 3px #4d0000);
|
|
||||||
|
|
||||||
// }
|
|
||||||
// 40%{
|
|
||||||
// filter: drop-shadow(-25px 0px 3px #4d0000);
|
|
||||||
|
|
||||||
// }
|
|
||||||
// 50%{
|
|
||||||
// filter: drop-shadow(10px 0px 3px #4d0000);
|
|
||||||
|
|
||||||
// }
|
|
||||||
// 80%{
|
|
||||||
|
|
||||||
// filter: drop-shadow(-10px 0px 3px #4d0000);
|
|
||||||
// }
|
|
||||||
// 100%{
|
|
||||||
// //opacity : 100%;
|
|
||||||
// filter: drop-shadow(0px 0px 3px #4d0000);
|
|
||||||
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
</style>
|
|
||||||
@@ -1,31 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<Card
|
|
||||||
title="Who Am I ?"
|
|
||||||
bg="question.png"
|
|
||||||
></Card>
|
|
||||||
<Card
|
|
||||||
title="Technos I use"
|
|
||||||
bg="legos_vrac.png"
|
|
||||||
></Card>
|
|
||||||
<Card
|
|
||||||
title="Projects"
|
|
||||||
bg="legos_maison.jpg"
|
|
||||||
></Card>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
//import Card_WhoAmI from './Card_WhoAmI.vue';
|
|
||||||
import Card from './Card.vue';
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
div{
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(4, 1fr);
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -1,227 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import Name from './Name.vue';
|
|
||||||
import { useBurgerStore } from '@/stores/burger';
|
|
||||||
//import { Ref } from 'vue';
|
|
||||||
|
|
||||||
const burger = useBurgerStore()
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
|
|
||||||
<div class="menu">
|
|
||||||
<div class="menu-inner">
|
|
||||||
<div class="prez">
|
|
||||||
<Name/>
|
|
||||||
</div>
|
|
||||||
<!-- <ul class="menu-nav">
|
|
||||||
<li class="menu-nav-item"><a class="menu-nav-link" href="#"><span>
|
|
||||||
<div>Who am I</div>
|
|
||||||
</span></a></li>
|
|
||||||
<li class="menu-nav-item"><a class="menu-nav-link" href="#"><span>
|
|
||||||
<div>Projects</div>
|
|
||||||
</span></a></li>
|
|
||||||
<li class="menu-nav-item"><a class="menu-nav-link" href="#"><span>
|
|
||||||
<div>Networks</div>
|
|
||||||
</span></a></li>
|
|
||||||
<li class="menu-nav-item"><a class="menu-nav-link" href="#"><span>
|
|
||||||
<div>Contact</div>
|
|
||||||
</span></a></li>
|
|
||||||
</ul> -->
|
|
||||||
<!-- <div class="title">
|
|
||||||
|
|
||||||
<p>Introducing myself...</p>
|
|
||||||
</div> -->
|
|
||||||
<div class="gallery">
|
|
||||||
<div class="images">
|
|
||||||
<a class="image-link" href="#">
|
|
||||||
<div class="image" data-label="Who am I"><img src="../assets/question.png" alt=""></div>
|
|
||||||
</a>
|
|
||||||
<a class="image-link" href="#">
|
|
||||||
<div class="image" data-label="Sun"><img src="https://i.loli.net/2019/11/16/FLnzi5Kq4tkRZSm.jpg" alt=""></div>
|
|
||||||
</a>
|
|
||||||
<a class="image-link" href="#">
|
|
||||||
<div class="image" data-label="Tree"><img src="https://i.loli.net/2019/10/18/uXF1Kx7lzELB6wf.jpg" alt=""></div>
|
|
||||||
</a>
|
|
||||||
<a class="image-link" href="#">
|
|
||||||
<div class="image" data-label="Sky"><img src="https://i.loli.net/2019/10/18/buDT4YS6zUMfHst.jpg" alt=""></div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.menu {
|
|
||||||
//z-index: 1;
|
|
||||||
|
|
||||||
//position: fixed;
|
|
||||||
padding-top: 4em;
|
|
||||||
//top: 0;
|
|
||||||
//left: 0;
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: flex-start;
|
|
||||||
background: #1a1e23;
|
|
||||||
opacity: 0;
|
|
||||||
//overflow: auto;
|
|
||||||
//visibility:visible;
|
|
||||||
transition: 0.3s;
|
|
||||||
|
|
||||||
&-nav {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
text-align: center;
|
|
||||||
list-style-type: none;
|
|
||||||
|
|
||||||
&-item {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-link {
|
|
||||||
position: relative;
|
|
||||||
display: inline-flex;
|
|
||||||
font-size: 2rem;
|
|
||||||
color: white;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
span {
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
div {
|
|
||||||
transform: translateY(105%);
|
|
||||||
margin: 0.25em 0.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
position: absolute;
|
|
||||||
content: "";
|
|
||||||
top: 100%;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 3px;
|
|
||||||
background: var(--primary-color);
|
|
||||||
transform: scaleX(0);
|
|
||||||
transform-origin: right;
|
|
||||||
transition: transform 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover::after {
|
|
||||||
transform: scaleX(0);
|
|
||||||
transform-origin: left;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.gallery {
|
|
||||||
margin-top: 50px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.images {
|
|
||||||
margin-top: 36px;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap:wrap;
|
|
||||||
// flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.image-link {
|
|
||||||
//min-width: px;
|
|
||||||
width: 20vw;
|
|
||||||
margin: 0 12px;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.image {
|
|
||||||
position: relative;
|
|
||||||
transition: 0.6s;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
position: absolute;
|
|
||||||
content: attr(data-label);
|
|
||||||
//display: block;
|
|
||||||
top: -50px;
|
|
||||||
left: -0px;
|
|
||||||
z-index: 1;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 50px;
|
|
||||||
width: 20vw;
|
|
||||||
color: rgb(218, 218, 218);
|
|
||||||
background: rgba(0, 0, 0, 0.6);
|
|
||||||
opacity: 1;
|
|
||||||
padding : 0 0.2em;
|
|
||||||
transition: 0.5s;
|
|
||||||
transition-delay: 0.2s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover .image {
|
|
||||||
transform: scale(1.1);
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
opacity: 1;
|
|
||||||
left: -5px;
|
|
||||||
top: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
height: 250px;
|
|
||||||
transform: translateY(105%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes menu-shake{
|
|
||||||
from {
|
|
||||||
//opacity: 0;
|
|
||||||
filter: drop-shadow(-150px 0px 10px #4d0000);
|
|
||||||
//background-color: rgb(99, 0, 0);
|
|
||||||
}
|
|
||||||
10%{
|
|
||||||
//opacity: 50%;
|
|
||||||
filter: drop-shadow(150px 0px 3px #4d0000);
|
|
||||||
}
|
|
||||||
20%{
|
|
||||||
filter: drop-shadow(-100px 0px 3px #4d0000);
|
|
||||||
|
|
||||||
}
|
|
||||||
30%{
|
|
||||||
filter: drop-shadow(50px 0px 3px #4d0000);
|
|
||||||
|
|
||||||
}
|
|
||||||
40%{
|
|
||||||
filter: drop-shadow(-25px 0px 3px #4d0000);
|
|
||||||
|
|
||||||
}
|
|
||||||
50%{
|
|
||||||
filter: drop-shadow(10px 0px 3px #4d0000);
|
|
||||||
|
|
||||||
}
|
|
||||||
80%{
|
|
||||||
|
|
||||||
filter: drop-shadow(-10px 0px 3px #4d0000);
|
|
||||||
}
|
|
||||||
100%{
|
|
||||||
//opacity : 100%;
|
|
||||||
filter: drop-shadow(0px 0px 3px #4d0000);
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
<script>
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class = "prez">
|
|
||||||
<h2>
|
|
||||||
Faisons connaissance
|
|
||||||
</h2>
|
|
||||||
<p>
|
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eligendi, alias sed. Distinctio accusantium nam laboriosam velit. Unde, ea cum maiores voluptas voluptates molestias harum consectetur fugiat modi qui, ipsum vel illum officiis fuga quibusdam. Quis perspiciatis doloremque provident! Rerum a voluptate quo earum officiis debitis molestiae nam, soluta nesciunt provident.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="sass" scope>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -1,215 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
||||||
<svg
|
|
||||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
|
||||||
xmlns:cc="http://creativecommons.org/ns#"
|
|
||||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
|
||||||
xmlns:svg="http://www.w3.org/2000/svg"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
|
||||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
|
||||||
width="200"
|
|
||||||
height="300"
|
|
||||||
viewBox="0 0 52.916666 79.374999"
|
|
||||||
version="1.1"
|
|
||||||
id="svg2964"
|
|
||||||
sodipodi:docname="back.svg"
|
|
||||||
inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
|
|
||||||
<sodipodi:namedview
|
|
||||||
pagecolor="#ffffff"
|
|
||||||
bordercolor="#666666"
|
|
||||||
borderopacity="1"
|
|
||||||
objecttolerance="10"
|
|
||||||
gridtolerance="10"
|
|
||||||
guidetolerance="10"
|
|
||||||
inkscape:pageopacity="0"
|
|
||||||
inkscape:pageshadow="2"
|
|
||||||
inkscape:window-width="1920"
|
|
||||||
inkscape:window-height="1005"
|
|
||||||
id="namedview878"
|
|
||||||
showgrid="false"
|
|
||||||
inkscape:zoom="1.337684"
|
|
||||||
inkscape:cx="187.21052"
|
|
||||||
inkscape:cy="45.376874"
|
|
||||||
inkscape:window-x="0"
|
|
||||||
inkscape:window-y="0"
|
|
||||||
inkscape:window-maximized="1"
|
|
||||||
inkscape:current-layer="svg2964"
|
|
||||||
units="px"
|
|
||||||
inkscape:document-rotation="0" />
|
|
||||||
<defs
|
|
||||||
id="defs2958" />
|
|
||||||
<metadata
|
|
||||||
id="metadata2961">
|
|
||||||
<rdf:RDF>
|
|
||||||
<cc:Work
|
|
||||||
rdf:about="">
|
|
||||||
<dc:format>image/svg+xml</dc:format>
|
|
||||||
<dc:type
|
|
||||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
|
||||||
<dc:title></dc:title>
|
|
||||||
</cc:Work>
|
|
||||||
</rdf:RDF>
|
|
||||||
</metadata>
|
|
||||||
<g
|
|
||||||
id="g52"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,2.9932142,1.0903296)">
|
|
||||||
<path
|
|
||||||
d="m 0,0 h 208.874 c 4.687,0 8.516,-3.83 8.516,-8.516 v -323.201 c 0,-4.686 -3.829,-8.517 -8.516,-8.517 H 0 c -4.686,0 -8.516,3.831 -8.516,8.517 V -8.516 C -8.516,-3.83 -4.686,0 0,0"
|
|
||||||
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path54" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g56"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,51.232427,1.6162318)">
|
|
||||||
<path
|
|
||||||
d="m 0,0 c 1.655,-1.557 2.69,-3.761 2.69,-6.198 v -323.201 c 0,-4.686 -3.829,-8.517 -8.516,-8.517 H -214.7 c -2.609,0 -4.949,1.188 -6.515,3.048 z"
|
|
||||||
style="fill:#e7e8e9;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path58" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g60"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,6.5866219,4.9671332)">
|
|
||||||
<path
|
|
||||||
d="m 0,0 h 176.886 c 4.085,0 7.423,-3.337 7.423,-7.424 v -291.211 c 0,-4.085 -3.338,-7.424 -7.423,-7.424 H 0 c -4.085,0 -7.422,3.339 -7.422,7.424 V -7.424 C -7.422,-3.338 -4.085,0 0,0"
|
|
||||||
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path62" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g64"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,6.5866219,4.9671332)"
|
|
||||||
style="fill:#2b9580;fill-opacity:1">
|
|
||||||
<path
|
|
||||||
d="m 0,0 h 176.886 c 4.085,0 7.423,-3.337 7.423,-7.424 v -291.211 c 0,-4.085 -3.338,-7.424 -7.423,-7.424 H 0 c -4.085,0 -7.422,3.339 -7.422,7.424 V -7.424 C -7.422,-3.338 -4.085,0 0,0"
|
|
||||||
style="fill:#2b9580;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path66" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g68"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,47.995298,6.5646935)"
|
|
||||||
style="fill:#277c6b;fill-opacity:1">
|
|
||||||
<path
|
|
||||||
d="m 0,0 c 0.007,-0.126 0.01,-0.253 0.01,-0.382 v -291.212 c 0,-4.085 -3.338,-7.424 -7.423,-7.424 h -176.886 c -4.085,0 -7.422,3.339 -7.422,7.424 v 1.373 z"
|
|
||||||
style="fill:#277c6b;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path70" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g72"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,2.9932142,1.4019369)">
|
|
||||||
<path
|
|
||||||
d="m 0,0 h 208.874 c 3.928,0 7.142,-3.215 7.142,-7.143 v -323.2 c 0,-3.928 -3.214,-7.144 -7.142,-7.144 H 0 c -3.928,0 -7.142,3.216 -7.142,7.144 v 323.2 C -7.142,-3.215 -3.928,0 0,0 m 0.001,6.179 h 208.872 c 7.328,0 13.323,-5.995 13.323,-13.323 v -323.199 c 0,-7.328 -5.995,-13.321 -13.323,-13.321 H 0.001 c -7.328,0 -13.323,5.993 -13.323,13.321 V -7.144 c 0,7.328 5.995,13.323 13.323,13.323"
|
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path74" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g76"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,6.5866219,5.2785134)">
|
|
||||||
<path
|
|
||||||
d="m 0,0 h 176.886 c 3.329,0 6.051,-2.722 6.051,-6.051 v -291.212 c 0,-3.328 -2.722,-6.05 -6.051,-6.05 H 0 c -3.328,0 -6.049,2.722 -6.049,6.05 V -6.051 C -6.049,-2.722 -3.328,0 0,0 m 0.001,6.177 h 176.885 c 6.727,0 12.23,-5.501 12.23,-12.228 v -291.212 c 0,-6.727 -5.503,-12.23 -12.23,-12.23 H 0.001 c -6.726,0 -12.229,5.503 -12.229,12.23 V -6.051 c 0,6.727 5.503,12.228 12.229,12.228"
|
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path78" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g80"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,26.3974,60.691743)">
|
|
||||||
<path
|
|
||||||
d="M 0,0 62.646,-62.648 54.047,-62.786 0,-8.739 -54.973,-63.712 c -3.049,0.017 -5.943,0.043 -8.661,0.078 z m 0,40.518 96.802,-96.802 c -1.131,-2.058 -2.836,-3.487 -4.317,-4.421 L 0,31.779 -92.151,-60.37 c -1.829,1.256 -3.154,2.87 -4.11,4.63 z"
|
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path82" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g84"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,26.3974,62.808039)">
|
|
||||||
<path
|
|
||||||
d="M 0,0 49.845,49.845 H 41.108 L 0,8.737 -41.108,49.845 h -8.739 z M 0,-40.518 90.363,49.845 H 81.627 L 0,-31.78 -81.627,49.845 h -8.739 z"
|
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path86" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g88"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,26.3974,18.683208)">
|
|
||||||
<path
|
|
||||||
d="M 0,0 62.646,62.646 54.047,62.786 0,8.738 -54.973,63.71 c -3.049,-0.018 -5.943,-0.043 -8.661,-0.077 z m 0,-40.52 96.802,96.804 c -1.131,2.058 -2.836,3.486 -4.317,4.421 L 0,-31.781 -92.151,60.368 c -1.829,-1.256 -3.154,-2.871 -4.11,-4.628 z"
|
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path90" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g92"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,26.3974,16.567165)">
|
|
||||||
<path
|
|
||||||
d="M 0,0 49.845,-49.847 H 41.108 L 0,-8.739 -41.108,-49.847 h -8.739 z M 0,40.519 90.363,-49.847 H 81.627 L 0,31.78 -81.627,-49.847 h -8.739 z"
|
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path94" />
|
|
||||||
</g>
|
|
||||||
<path
|
|
||||||
d="m 25.764178,32.384966 h 1.388535 v 14.604977 h -1.388535 z"
|
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.225782"
|
|
||||||
id="path96" />
|
|
||||||
<g
|
|
||||||
id="g98"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,26.458176,28.967155)">
|
|
||||||
<path
|
|
||||||
d="M 0,0 10.639,-10.639 0,-21.279 l -10.638,10.64 z"
|
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path100" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g102"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,26.458176,45.580219)">
|
|
||||||
<path
|
|
||||||
d="M 0,0 10.639,-10.64 0,-21.279 -10.638,-10.64 Z"
|
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path104" />
|
|
||||||
</g>
|
|
||||||
<path
|
|
||||||
d="M 33.690062,40.38865 H 19.226829 v -1.402166 h 14.463233 z"
|
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.225782"
|
|
||||||
id="path106" />
|
|
||||||
<g
|
|
||||||
id="g108"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,37.074672,39.68759)">
|
|
||||||
<path
|
|
||||||
d="M 0,0 -10.641,-10.638 -21.279,0 -10.641,10.639 Z"
|
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path110" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g112"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,20.622846,39.68759)">
|
|
||||||
<path
|
|
||||||
d="M 0,0 -10.638,-10.638 -21.277,0 -10.638,10.639 Z"
|
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path114" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g116"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,40.135246,39.68759)">
|
|
||||||
<path
|
|
||||||
d="M 0,0 -5.029,-5.029 -10.057,0 -5.029,5.029 Z"
|
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path118" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g120"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,41.849278,39.68759)">
|
|
||||||
<path
|
|
||||||
d="M 0,0 -2.157,-2.156 -4.314,0 -2.157,2.157 Z"
|
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path122" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g124"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,12.781106,39.68759)">
|
|
||||||
<path
|
|
||||||
d="M 0,0 5.029,-5.029 10.057,0 5.029,5.029 Z"
|
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path126" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g128"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,11.067569,39.68759)">
|
|
||||||
<path
|
|
||||||
d="M 0,0 2.157,-2.156 4.313,0 2.157,2.157 Z"
|
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path130" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 8.6 KiB |
@@ -1,87 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
||||||
<svg
|
|
||||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
|
||||||
xmlns:cc="http://creativecommons.org/ns#"
|
|
||||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
|
||||||
xmlns:svg="http://www.w3.org/2000/svg"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
|
||||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
|
||||||
width="200"
|
|
||||||
height="300"
|
|
||||||
viewBox="0 0 52.916666 79.374999"
|
|
||||||
version="1.1"
|
|
||||||
id="svg2964"
|
|
||||||
sodipodi:docname="face.svg"
|
|
||||||
inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
|
|
||||||
<rect
|
|
||||||
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.86016;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
|
||||||
id="rect1067"
|
|
||||||
width="52.916664"
|
|
||||||
height="79.375"
|
|
||||||
x="0"
|
|
||||||
y="-1e-06"
|
|
||||||
ry="4.6153121" />
|
|
||||||
<g
|
|
||||||
id="g965"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,51.232424,1.6162327)">
|
|
||||||
<path
|
|
||||||
d="m 0,0 c 1.655,-1.557 2.69,-3.761 2.69,-6.198 v -323.201 c 0,-4.686 -3.829,-8.517 -8.516,-8.517 H -214.7 c -2.609,0 -4.949,1.188 -6.515,3.048 l 13.82594,20.92925 7.27488,-7.76589 182.844792,1.31488 4.142578,4.36599 -0.699128,295.09452 z"
|
|
||||||
style="fill:#e7e8e9;fill-opacity:1;fill-rule:evenodd;stroke:none"
|
|
||||||
id="path963"
|
|
||||||
sodipodi:nodetypes="cssssccccccc" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="g969"
|
|
||||||
transform="matrix(0.22468205,0,0,-0.22688749,2.9932137,1.4019372)"
|
|
||||||
style="fill:#000000;fill-opacity:1;stroke-width:0.99959033;stroke-miterlimit:4;stroke-dasharray:none;stroke:none;stroke-opacity:1">
|
|
||||||
<path
|
|
||||||
d="m 0,0 h 208.874 c 3.928,0 7.142,-3.215 7.142,-7.143 v -323.2 c 0,-3.928 -3.214,-7.144 -7.142,-7.144 H 0 c -3.928,0 -7.142,3.216 -7.142,7.144 v 323.2 C -7.142,-3.215 -3.928,0 0,0 m 0.001,6.179 h 208.872 c 7.328,0 13.323,-5.995 13.323,-13.323 v -323.199 c 0,-7.328 -5.995,-13.321 -13.323,-13.321 H 0.001 c -7.328,0 -13.323,5.993 -13.323,13.321 V -7.144 c 0,7.328 5.995,13.323 13.323,13.323"
|
|
||||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.99959033;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
|
||||||
id="path967" />
|
|
||||||
</g>
|
|
||||||
<rect
|
|
||||||
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:1.54807706;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
|
||||||
id="rect1029"
|
|
||||||
width="43.43111"
|
|
||||||
height="69.889442"
|
|
||||||
x="4.7427778"
|
|
||||||
y="4.7427783"
|
|
||||||
rx="2.6795108" />
|
|
||||||
<sodipodi:namedview
|
|
||||||
pagecolor="#ffffff"
|
|
||||||
bordercolor="#666666"
|
|
||||||
borderopacity="1"
|
|
||||||
objecttolerance="10"
|
|
||||||
gridtolerance="10"
|
|
||||||
guidetolerance="10"
|
|
||||||
inkscape:pageopacity="0"
|
|
||||||
inkscape:pageshadow="2"
|
|
||||||
inkscape:window-width="1920"
|
|
||||||
inkscape:window-height="1005"
|
|
||||||
id="namedview878"
|
|
||||||
showgrid="false"
|
|
||||||
inkscape:zoom="1.8917709"
|
|
||||||
inkscape:cx="89.622571"
|
|
||||||
inkscape:cy="137.14202"
|
|
||||||
inkscape:window-x="0"
|
|
||||||
inkscape:window-y="0"
|
|
||||||
inkscape:window-maximized="1"
|
|
||||||
inkscape:current-layer="svg2964"
|
|
||||||
units="px"
|
|
||||||
inkscape:document-rotation="0" />
|
|
||||||
<defs
|
|
||||||
id="defs2958" />
|
|
||||||
<metadata
|
|
||||||
id="metadata2961">
|
|
||||||
<rdf:RDF>
|
|
||||||
<cc:Work
|
|
||||||
rdf:about="">
|
|
||||||
<dc:format>image/svg+xml</dc:format>
|
|
||||||
<dc:type
|
|
||||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
|
||||||
<dc:title />
|
|
||||||
</cc:Work>
|
|
||||||
</rdf:RDF>
|
|
||||||
</metadata>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 3.4 KiB |
105
src/assets/CV-favicon.svg
Normal file
105
src/assets/CV-favicon.svg
Normal file
@@ -0,0 +1,105 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
width="210mm"
|
||||||
|
height="297mm"
|
||||||
|
viewBox="0 0 210 297"
|
||||||
|
version="1.1"
|
||||||
|
id="svg8"
|
||||||
|
inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
|
||||||
|
sodipodi:docname="CV-favicon.svg">
|
||||||
|
<defs
|
||||||
|
id="defs2" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="base"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="0.35"
|
||||||
|
inkscape:cx="400"
|
||||||
|
inkscape:cy="557.14286"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
inkscape:document-rotation="0"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:window-width="1559"
|
||||||
|
inkscape:window-height="908"
|
||||||
|
inkscape:window-x="361"
|
||||||
|
inkscape:window-y="97"
|
||||||
|
inkscape:window-maximized="0" />
|
||||||
|
<metadata
|
||||||
|
id="metadata5">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<path
|
||||||
|
style="
|
||||||
|
stroke-linejoin:round;
|
||||||
|
stroke-miterlimit:4;
|
||||||
|
stroke-dasharray:none;
|
||||||
|
stroke-opacity:1"
|
||||||
|
d="M 139.17222,9.3942355 C 173.00215,31.292212 218.1812,60.980457 218.48057,79.674699 218.59904,87.056983 99.966521,77.122595 100.0371,73.59533 212.37863,43.378561 246.84869,31.106644 355.29155,12.76416"
|
||||||
|
id="path862"
|
||||||
|
sodipodi:nodetypes="cscc" />
|
||||||
|
<path
|
||||||
|
style="
|
||||||
|
stroke-linejoin:miter;
|
||||||
|
stroke-miterlimit:4;
|
||||||
|
stroke-dasharray:none;
|
||||||
|
stroke-opacity:1"
|
||||||
|
d="m 312.83425,25.675399 0.42594,12.212728"
|
||||||
|
id="path3943" />
|
||||||
|
<path
|
||||||
|
style="stroke-linejoin:miter;
|
||||||
|
stroke-miterlimit:4;
|
||||||
|
stroke-dasharray:none;
|
||||||
|
stroke-opacity:1"
|
||||||
|
d="m 311.63779,8.7395766 0.2454,2.4946354"
|
||||||
|
id="path3945" />
|
||||||
|
<path
|
||||||
|
style="stroke-linejoin:round;
|
||||||
|
stroke-miterlimit:4;
|
||||||
|
stroke-dasharray:none;
|
||||||
|
stroke-opacity:1"
|
||||||
|
d="M 98.736495,1.2925001 C 130.71965,-24.665921 192.41147,-27.93255 195.70827,-12.082894 c 3.52112,16.9281249 -16.15069,23.426128 -5.21999,35.069064 7.51533,8.004927 22.54721,0.801375 22.54721,0.801375"
|
||||||
|
id="path4209"
|
||||||
|
sodipodi:nodetypes="cssc" />
|
||||||
|
<path
|
||||||
|
style="stroke-linejoin:miter;
|
||||||
|
stroke-miterlimit:4;
|
||||||
|
stroke-dasharray:none;
|
||||||
|
stroke-opacity:1"
|
||||||
|
d="m 230.59072,12.767977 c -3.05309,3.537063 -5.46022,13.433154 -3.26784,14.895394 4.2835,2.856811 13.40139,-12.097612 13.1368,-13.525975 -0.40148,-2.164937 -8.06688,-3.457217 -9.86896,-1.369419 z"
|
||||||
|
id="path5599"
|
||||||
|
sodipodi:nodetypes="ssss" />
|
||||||
|
<path
|
||||||
|
style="stroke-linejoin:miter;
|
||||||
|
stroke-miterlimit:4;
|
||||||
|
stroke-dasharray:none;
|
||||||
|
stroke-opacity:1"
|
||||||
|
d="m 283.01637,21.941476 c 13.77166,-17.5948162 20.26231,-58.430437 14.87852,-54.688625 -16.63519,11.561933 1.50986,84.878597 -3.86255,94.259788 -2.77674,4.848515 -20.37598,-8.366388 -16.48804,-18.315105 2.64201,-6.760505 6.86016,-5.127064 11.95096,-8.174896"
|
||||||
|
id="path6508"
|
||||||
|
sodipodi:nodetypes="csssc" />
|
||||||
|
<path
|
||||||
|
style="stroke-linejoin:miter;
|
||||||
|
stroke-miterlimit:4;
|
||||||
|
stroke-dasharray:none;
|
||||||
|
stroke-opacity:1"
|
||||||
|
d="m 268.00837,42.908163 c -26.42894,-1.402892 -17.3056,39.667651 -1.54342,31.364589 9.85909,-5.193503 -6.22644,-101.377213 2.11133,-100.854828 4.16005,0.260637 0.22284,13.904191 -6.67691,26.02389012 C 254.99972,11.56156 245.13969,22.122662 242.18918,19.553315 240.05011,17.69049 240.35315,11.012501 241.34202,8.7752027"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.7 KiB |
62
src/assets/raffi.svg
Normal file
62
src/assets/raffi.svg
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
<svg class="raffi"
|
||||||
|
viewBox="75 -50 300 150"
|
||||||
|
style="fill:none;
|
||||||
|
stroke-width:5;
|
||||||
|
stroke-linecap:round;"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
style="
|
||||||
|
stroke-linejoin:round;
|
||||||
|
stroke-miterlimit:4;
|
||||||
|
stroke-dasharray:none;
|
||||||
|
stroke-opacity:1"
|
||||||
|
d="M 139.17222,9.3942355 C 173.00215,31.292212 218.1812,60.980457 218.48057,79.674699 218.59904,87.056983 99.966521,77.122595 100.0371,73.59533 212.37863,43.378561 246.84869,31.106644 355.29155,12.76416"
|
||||||
|
id="path862"
|
||||||
|
sodipodi:nodetypes="cscc" />
|
||||||
|
<path
|
||||||
|
style="
|
||||||
|
stroke-linejoin:miter;
|
||||||
|
stroke-miterlimit:4;
|
||||||
|
stroke-dasharray:none;
|
||||||
|
stroke-opacity:1"
|
||||||
|
d="m 312.83425,25.675399 0.42594,12.212728"
|
||||||
|
id="path3943" />
|
||||||
|
<path
|
||||||
|
style="stroke-linejoin:miter;
|
||||||
|
stroke-miterlimit:4;
|
||||||
|
stroke-dasharray:none;
|
||||||
|
stroke-opacity:1"
|
||||||
|
d="m 311.63779,8.7395766 0.2454,2.4946354"
|
||||||
|
id="path3945" />
|
||||||
|
<path
|
||||||
|
style="stroke-linejoin:round;
|
||||||
|
stroke-miterlimit:4;
|
||||||
|
stroke-dasharray:none;
|
||||||
|
stroke-opacity:1"
|
||||||
|
d="M 98.736495,1.2925001 C 130.71965,-24.665921 192.41147,-27.93255 195.70827,-12.082894 c 3.52112,16.9281249 -16.15069,23.426128 -5.21999,35.069064 7.51533,8.004927 22.54721,0.801375 22.54721,0.801375"
|
||||||
|
id="path4209"
|
||||||
|
sodipodi:nodetypes="cssc" />
|
||||||
|
<path
|
||||||
|
style="stroke-linejoin:miter;
|
||||||
|
stroke-miterlimit:4;
|
||||||
|
stroke-dasharray:none;
|
||||||
|
stroke-opacity:1"
|
||||||
|
d="m 230.59072,12.767977 c -3.05309,3.537063 -5.46022,13.433154 -3.26784,14.895394 4.2835,2.856811 13.40139,-12.097612 13.1368,-13.525975 -0.40148,-2.164937 -8.06688,-3.457217 -9.86896,-1.369419 z"
|
||||||
|
id="path5599"
|
||||||
|
sodipodi:nodetypes="ssss" />
|
||||||
|
<path
|
||||||
|
style="stroke-linejoin:miter;
|
||||||
|
stroke-miterlimit:4;
|
||||||
|
stroke-dasharray:none;
|
||||||
|
stroke-opacity:1"
|
||||||
|
d="m 283.01637,21.941476 c 13.77166,-17.5948162 20.26231,-58.430437 14.87852,-54.688625 -16.63519,11.561933 1.50986,84.878597 -3.86255,94.259788 -2.77674,4.848515 -20.37598,-8.366388 -16.48804,-18.315105 2.64201,-6.760505 6.86016,-5.127064 11.95096,-8.174896"
|
||||||
|
id="path6508"
|
||||||
|
sodipodi:nodetypes="csssc" />
|
||||||
|
<path
|
||||||
|
style="stroke-linejoin:miter;
|
||||||
|
stroke-miterlimit:4;
|
||||||
|
stroke-dasharray:none;
|
||||||
|
stroke-opacity:1"
|
||||||
|
d="m 268.00837,42.908163 c -26.42894,-1.402892 -17.3056,39.667651 -1.54342,31.364589 9.85909,-5.193503 -6.22644,-101.377213 2.11133,-100.854828 4.16005,0.260637 0.22284,13.904191 -6.67691,26.02389012 C 254.99972,11.56156 245.13969,22.122662 242.18918,19.553315 240.05011,17.69049 240.35315,11.012501 241.34202,8.7752027"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.4 KiB |
@@ -2,6 +2,7 @@
|
|||||||
import { useBurgerStore } from '@/stores/burger'
|
import { useBurgerStore } from '@/stores/burger'
|
||||||
|
|
||||||
const burger = useBurgerStore();
|
const burger = useBurgerStore();
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|||||||
@@ -5,24 +5,25 @@ const show = ref(false)
|
|||||||
|
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
|
<button class="arrow" @click="show = !show">
|
||||||
<svg
|
<svg
|
||||||
viewBox="0 0 20 20"
|
viewBox="0 0 10 7.4"
|
||||||
class="arrow"
|
class="arrow"
|
||||||
v-bind:class="show ? 'down' : ''"
|
:class="{'down': show}"
|
||||||
@click="show = !show"
|
|
||||||
>
|
>
|
||||||
<circle
|
<!--
|
||||||
style="stroke:#000000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
This circle is now make the button...
|
||||||
id="path833"
|
<circle
|
||||||
cx="10"
|
style="stroke:#000000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
cy="10"
|
id="path833"
|
||||||
r="8" />
|
cx="10"
|
||||||
<path
|
cy="10"
|
||||||
style="fill:none;stroke:#000000;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
r="8" /> -->
|
||||||
d="M 5.5,11 10,7 14.5,11"
|
<path
|
||||||
id="path841"
|
style="fill:none;stroke:#000000;stroke-width:1.0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
sodipodi:nodetypes="ccc" />
|
d="M 1,5 5,1 9,5"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
<div class="footer"
|
<div class="footer"
|
||||||
v-bind:class="show ? '' : 'hide'">
|
v-bind:class="show ? '' : 'hide'">
|
||||||
@@ -133,70 +134,27 @@ const show = ref(false)
|
|||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
<svg
|
|
||||||
viewBox="75 -50 300 150"
|
<svg id = "raffi" viewBox="75 -50 300 150">
|
||||||
style="fill:none;
|
<path id="raffi_path"
|
||||||
stroke:white;
|
style="fill:none;
|
||||||
stroke-width:5;
|
stroke-width:6;
|
||||||
stroke-linecap:round;"
|
stroke-linecap:round;
|
||||||
>
|
stroke-linejoin:round;
|
||||||
<path
|
stroke-miterlimit:4;
|
||||||
style="
|
stroke-dasharray:none;
|
||||||
stroke-linejoin:round;
|
stroke-opacity:1;
|
||||||
stroke-miterlimit:4;
|
stroke:rgb(235, 235, 235);"
|
||||||
stroke-dasharray:none;
|
|
||||||
stroke-opacity:1"
|
d="M 139.17222,9.3942355 C 173.00215,31.292212 218.1812,60.980457 218.48057,79.674699 218.59904,87.056983 99.966521,77.122595 100.0371,73.59533 212.37863,43.378561 246.84869,31.106644 355.29155,12.76416
|
||||||
d="M 139.17222,9.3942355 C 173.00215,31.292212 218.1812,60.980457 218.48057,79.674699 218.59904,87.056983 99.966521,77.122595 100.0371,73.59533 212.37863,43.378561 246.84869,31.106644 355.29155,12.76416"
|
M 98.736495,1.2925001 C 130.71965,-24.665921 192.41147,-27.93255 195.70827,-12.082894 c 3.52112,16.9281249 -16.15069,23.426128 -5.21999,35.069064 7.51533,8.004927 22.54721,0.801375 22.54721,0.801375
|
||||||
id="path862"
|
M 230.59072,12.767977 c -3.05309,3.537063 -5.46022,13.433154 -3.26784,14.895394 4.2835,2.856811 13.40139,-12.097612 13.1368,-13.525975 -0.40148,-2.164937 -8.06688,-3.457217 -9.86896,-1.369419
|
||||||
sodipodi:nodetypes="cscc" />
|
M 268.00837,42.908163 c -26.42894,-1.402892 -17.3056,39.667651 -1.54342,31.364589 9.85909,-5.193503 -6.22644,-101.377213 2.11133,-100.854828 4.16005,0.260637 0.22284,13.904191 -6.67691,26.02389012 C 254.99972,11.56156 245.13969,22.122662 242.18918,19.553315 240.05011,17.69049 240.35315,11.012501 241.34202,8.7752027
|
||||||
<path
|
M 283.01637,21.941476 c 13.77166,-17.5948162 20.26231,-58.430437 14.87852,-54.688625 -16.63519,11.561933 1.50986,84.878597 -3.86255,94.259788 -2.77674,4.848515 -20.37598,-8.366388 -16.48804,-18.315105 2.64201,-6.760505 6.86016,-5.127064 11.95096,-8.174896
|
||||||
style="
|
M 312.83425,36 313,29
|
||||||
stroke-linejoin:miter;
|
M 311.63779,10 312.2454,10"/>
|
||||||
stroke-miterlimit:4;
|
|
||||||
stroke-dasharray:none;
|
|
||||||
stroke-opacity:1"
|
|
||||||
d="m 312.83425,25.675399 0.42594,12.212728"
|
|
||||||
id="path3943" />
|
|
||||||
<path
|
|
||||||
style="stroke-linejoin:miter;
|
|
||||||
stroke-miterlimit:4;
|
|
||||||
stroke-dasharray:none;
|
|
||||||
stroke-opacity:1"
|
|
||||||
d="m 311.63779,8.7395766 0.2454,2.4946354"
|
|
||||||
id="path3945" />
|
|
||||||
<path
|
|
||||||
style="stroke-linejoin:round;
|
|
||||||
stroke-miterlimit:4;
|
|
||||||
stroke-dasharray:none;
|
|
||||||
stroke-opacity:1"
|
|
||||||
d="M 98.736495,1.2925001 C 130.71965,-24.665921 192.41147,-27.93255 195.70827,-12.082894 c 3.52112,16.9281249 -16.15069,23.426128 -5.21999,35.069064 7.51533,8.004927 22.54721,0.801375 22.54721,0.801375"
|
|
||||||
id="path4209"
|
|
||||||
sodipodi:nodetypes="cssc" />
|
|
||||||
<path
|
|
||||||
style="stroke-linejoin:miter;
|
|
||||||
stroke-miterlimit:4;
|
|
||||||
stroke-dasharray:none;
|
|
||||||
stroke-opacity:1"
|
|
||||||
d="m 230.59072,12.767977 c -3.05309,3.537063 -5.46022,13.433154 -3.26784,14.895394 4.2835,2.856811 13.40139,-12.097612 13.1368,-13.525975 -0.40148,-2.164937 -8.06688,-3.457217 -9.86896,-1.369419 z"
|
|
||||||
id="path5599"
|
|
||||||
sodipodi:nodetypes="ssss" />
|
|
||||||
<path
|
|
||||||
style="stroke-linejoin:miter;
|
|
||||||
stroke-miterlimit:4;
|
|
||||||
stroke-dasharray:none;
|
|
||||||
stroke-opacity:1"
|
|
||||||
d="m 283.01637,21.941476 c 13.77166,-17.5948162 20.26231,-58.430437 14.87852,-54.688625 -16.63519,11.561933 1.50986,84.878597 -3.86255,94.259788 -2.77674,4.848515 -20.37598,-8.366388 -16.48804,-18.315105 2.64201,-6.760505 6.86016,-5.127064 11.95096,-8.174896"
|
|
||||||
id="path6508"
|
|
||||||
sodipodi:nodetypes="csssc" />
|
|
||||||
<path
|
|
||||||
style="stroke-linejoin:miter;
|
|
||||||
stroke-miterlimit:4;
|
|
||||||
stroke-dasharray:none;
|
|
||||||
stroke-opacity:1"
|
|
||||||
d="m 268.00837,42.908163 c -26.42894,-1.402892 -17.3056,39.667651 -1.54342,31.364589 9.85909,-5.193503 -6.22644,-101.377213 2.11133,-100.854828 4.16005,0.260637 0.22284,13.904191 -6.67691,26.02389012 C 254.99972,11.56156 245.13969,22.122662 242.18918,19.553315 240.05011,17.69049 240.35315,11.012501 241.34202,8.7752027"
|
|
||||||
/>
|
|
||||||
</svg>
|
</svg>
|
||||||
<svg
|
<svg
|
||||||
viewBox="465 -39 150 175"
|
viewBox="465 -39 150 175"
|
||||||
style="height : 1.8em"
|
style="height : 1.8em"
|
||||||
>
|
>
|
||||||
@@ -261,7 +219,7 @@ const show = ref(false)
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
background-color: hsla(0, 0%, 0%, 0.904);
|
background-color: hsla(0, 0%, 0%, 0.904);
|
||||||
min-height:3.5em;
|
min-height:2.5em;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: $maxWidth;
|
max-width: $maxWidth;
|
||||||
z-index: 9;
|
z-index: 9;
|
||||||
@@ -270,37 +228,56 @@ const show = ref(false)
|
|||||||
transform:translateY(100%)
|
transform:translateY(100%)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
svg{
|
svg{
|
||||||
height: 2.5em;
|
height: 2em;
|
||||||
& > circle{
|
|
||||||
fill:$action-normal;
|
|
||||||
transition : 0.25s;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
h1{
|
|
||||||
font-size: 2em;
|
button.arrow{
|
||||||
margin-right: 0.5em;
|
position:fixed;
|
||||||
color:white;
|
|
||||||
}
|
|
||||||
.arrow{
|
|
||||||
margin-left: 0.4em;
|
|
||||||
position : fixed;
|
|
||||||
bottom:0.5em;
|
bottom:0.5em;
|
||||||
transition: 0.35s;
|
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
&.up{
|
aspect-ratio: 1;
|
||||||
transform: rotate(0deg);
|
width:2.1em;
|
||||||
}
|
text-align: center;
|
||||||
&.down{
|
border: none;
|
||||||
transform: rotate(180deg);
|
background-color: $action-normal;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
margin-left:0.5em;
|
||||||
|
padding:0;
|
||||||
|
//box-sizing: border-box;
|
||||||
|
& > svg{
|
||||||
|
transition: 0.35s;
|
||||||
|
width:75%;
|
||||||
|
margin: 0;
|
||||||
|
//position: absolute;
|
||||||
|
transform: scale(1, 1);
|
||||||
|
&.down {
|
||||||
|
transform: scale(1, -1);
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
&:hover{
|
&:hover{
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
& > circle{
|
& > circle{
|
||||||
fill:$action-light;
|
fill:$action-light;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
h1{
|
||||||
|
font-size: 2em;
|
||||||
|
margin-right: 0.5em;
|
||||||
|
color:white;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@supports (backdrop-filter: blur(0.5rem)){
|
@supports (backdrop-filter: blur(0.5rem)){
|
||||||
div.footer{
|
div.footer{
|
||||||
background-color: hsla(0, 100%, 0%, 0.25);
|
background-color: hsla(0, 100%, 0%, 0.25);
|
||||||
|
|||||||
303
src/components/Footer_1.vue
Normal file
303
src/components/Footer_1.vue
Normal file
@@ -0,0 +1,303 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const show = ref(false)
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
class="arrow"
|
||||||
|
v-bind:class="show ? 'down' : ''"
|
||||||
|
@click="show = !show"
|
||||||
|
>
|
||||||
|
<circle
|
||||||
|
style="fill:#e65353;stroke:#000000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
id="path833"
|
||||||
|
cx="10"
|
||||||
|
cy="10"
|
||||||
|
r="8" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#000000;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 5.5,11 10,7 14.5,11"
|
||||||
|
id="path841"
|
||||||
|
sodipodi:nodetypes="ccc" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<div class="footer"
|
||||||
|
v-bind:class="show ? '' : 'hide'">
|
||||||
|
<h1>
|
||||||
|
Design
|
||||||
|
</h1>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 100 100"
|
||||||
|
style="stroke:#fff;stroke-opacity:1;stroke-width:0.8;stroke-miterlimit:4;stroke-dasharray:none;stroke-linecap:square;stroke-linejoin:miter;fill:#fff;fill-opacity:1">
|
||||||
|
<g
|
||||||
|
id="g1053"
|
||||||
|
transform="matrix(3.2926021,0,0,3.2926021,13.394942,5.0000002)"
|
||||||
|
style="fill:#fff;fill-opacity:1;stroke:#fff;stroke-width:0.24296893;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;stroke-linecap:square;stroke-linejoin:miter">
|
||||||
|
<path
|
||||||
|
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:#fff;stroke-width:0.24296893;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000"
|
||||||
|
d="m 0,13.56745 c -5e-6,2.75062 2.261097,5.01172 5.011719,5.01171 2.750621,0 5.013677,-2.26109 5.013672,-5.01171 m 0,0 C 10.025388,10.81683 7.762335,8.55377 5.011719,8.55377 2.261103,8.55377 3e-6,10.81683 0,13.56745 m 3,0 c 1e-6,-1.1293 0.882422,-2.01368 2.011719,-2.01368 1.129297,0 2.013671,0.88438 2.013672,2.01368 m 0,0 c 2e-6,1.12929 -0.884373,2.01171 -2.013672,2.01171 -1.1293,0 -2.011721,-0.88242 -2.011719,-2.01171"
|
||||||
|
id="path843"
|
||||||
|
sodipodi:nodetypes="csccsccsccsc" />
|
||||||
|
<path
|
||||||
|
id="rect841"
|
||||||
|
style="fill:#fff;fill-opacity:1;stroke:#fff;stroke-width:0.24296893;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 0,0 H 3 V 13.56714 H 0 Z" />
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
id="path894"
|
||||||
|
transform="matrix(3.2926021,0,0,3.2926021,19.411444,-4.7252006)"
|
||||||
|
style="fill:#fff;fill-opacity:1;stroke:#fff;stroke-width:0.24296893;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;stroke-linecap:square;stroke-linejoin:miter">
|
||||||
|
<g
|
||||||
|
id="path954"
|
||||||
|
style="opacity:1;fill:#fff;fill-opacity:1;stroke:#fff;stroke-width:0.24296893;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;stroke-linecap:square;stroke-linejoin:miter">
|
||||||
|
<path
|
||||||
|
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:#fff;stroke-width:0.24296893;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000;stop-opacity:1"
|
||||||
|
d="m 8.375,11.507812 4.9375,10.226563 1.755005,-2.977802 -3.469849,-7.248761 z"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
id="g985"
|
||||||
|
style="fill:#fff;
|
||||||
|
fill-opacity:1;
|
||||||
|
stroke:#fff;
|
||||||
|
stroke-width:0.24296893;
|
||||||
|
stroke-miterlimit:4;
|
||||||
|
stroke-dasharray:none;
|
||||||
|
stroke-opacity:1;
|
||||||
|
stroke-linecap:square;
|
||||||
|
stroke-linejoin:miter"
|
||||||
|
transform="matrix(3.2926021,0,0,3.2926021,32.860095,5.3294217)">
|
||||||
|
<g
|
||||||
|
id="g973"
|
||||||
|
transform="matrix(-1,0,0,1,29.989768,-3.053701)"
|
||||||
|
style="fill:#fff;
|
||||||
|
fill-opacity:1;
|
||||||
|
stroke:#fff;
|
||||||
|
stroke-width:0.24296893;
|
||||||
|
stroke-miterlimit:4;
|
||||||
|
stroke-dasharray:none;
|
||||||
|
stroke-opacity:1;
|
||||||
|
stroke-linecap:square;
|
||||||
|
stroke-linejoin:miter" />
|
||||||
|
<g
|
||||||
|
id="g977"
|
||||||
|
transform="matrix(-1,0,0,1,25.149768,6.974189)"
|
||||||
|
style="fill:#fff;
|
||||||
|
fill-opacity:1;
|
||||||
|
stroke:#fff;
|
||||||
|
stroke-width:0.24296893;
|
||||||
|
stroke-miterlimit:4;
|
||||||
|
stroke-dasharray:none;
|
||||||
|
stroke-opacity:1;
|
||||||
|
stroke-linecap:square;
|
||||||
|
stroke-linejoin:miter">
|
||||||
|
<g
|
||||||
|
id="path975"
|
||||||
|
style="opacity:1;
|
||||||
|
fill:#fff;
|
||||||
|
fill-opacity:1;
|
||||||
|
stroke:#fff;
|
||||||
|
stroke-width:0.24296893;
|
||||||
|
stroke-miterlimit:4;
|
||||||
|
stroke-dasharray:none;
|
||||||
|
stroke-opacity:1;
|
||||||
|
stroke-linecap:square;
|
||||||
|
stroke-linejoin:miter">
|
||||||
|
<path
|
||||||
|
style="fill:#fff;
|
||||||
|
fill-opacity:1;
|
||||||
|
fill-rule:nonzero;
|
||||||
|
stroke:#fff;
|
||||||
|
stroke-width:0.24296893;
|
||||||
|
stroke-linecap:square;
|
||||||
|
stroke-linejoin:miter;
|
||||||
|
stroke-miterlimit:4;
|
||||||
|
stroke-dasharray:none;
|
||||||
|
stroke-dashoffset:0;
|
||||||
|
stroke-opacity:1;
|
||||||
|
color-rendering:auto;
|
||||||
|
image-rendering:auto;
|
||||||
|
shape-rendering:auto;
|
||||||
|
text-rendering:auto;
|
||||||
|
enable-background:accumulate;
|
||||||
|
stop-color:#000000;
|
||||||
|
stop-opacity:1"
|
||||||
|
d="M 8.8268232,1.4804688 17.883467,20.259766 h 3.222656 L 12.04948,1.4804688 Z"
|
||||||
|
id="path1039"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
viewBox="75 -50 300 150"
|
||||||
|
style="fill:none;
|
||||||
|
stroke:rgb(189, 25, 25);
|
||||||
|
stroke-width:5;
|
||||||
|
stroke-linecap:round;"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
style="
|
||||||
|
stroke-linejoin:round;
|
||||||
|
stroke-miterlimit:4;
|
||||||
|
stroke-dasharray:none;
|
||||||
|
stroke-opacity:1"
|
||||||
|
d="M 139.17222,9.3942355 C 173.00215,31.292212 218.1812,60.980457 218.48057,79.674699 218.59904,87.056983 99.966521,77.122595 100.0371,73.59533 212.37863,43.378561 246.84869,31.106644 355.29155,12.76416"
|
||||||
|
id="path862"
|
||||||
|
sodipodi:nodetypes="cscc" />
|
||||||
|
<path
|
||||||
|
style="
|
||||||
|
stroke-linejoin:miter;
|
||||||
|
stroke-miterlimit:4;
|
||||||
|
stroke-dasharray:none;
|
||||||
|
stroke-opacity:1"
|
||||||
|
d="m 312.83425,25.675399 0.42594,12.212728"
|
||||||
|
id="path3943" />
|
||||||
|
<path
|
||||||
|
style="stroke-linejoin:miter;
|
||||||
|
stroke-miterlimit:4;
|
||||||
|
stroke-dasharray:none;
|
||||||
|
stroke-opacity:1"
|
||||||
|
d="m 311.63779,8.7395766 0.2454,2.4946354"
|
||||||
|
id="path3945" />
|
||||||
|
<path
|
||||||
|
style="stroke-linejoin:round;
|
||||||
|
stroke-miterlimit:4;
|
||||||
|
stroke-dasharray:none;
|
||||||
|
stroke-opacity:1"
|
||||||
|
d="M 98.736495,1.2925001 C 130.71965,-24.665921 192.41147,-27.93255 195.70827,-12.082894 c 3.52112,16.9281249 -16.15069,23.426128 -5.21999,35.069064 7.51533,8.004927 22.54721,0.801375 22.54721,0.801375"
|
||||||
|
id="path4209"
|
||||||
|
sodipodi:nodetypes="cssc" />
|
||||||
|
<path
|
||||||
|
style="stroke-linejoin:miter;
|
||||||
|
stroke-miterlimit:4;
|
||||||
|
stroke-dasharray:none;
|
||||||
|
stroke-opacity:1"
|
||||||
|
d="m 230.59072,12.767977 c -3.05309,3.537063 -5.46022,13.433154 -3.26784,14.895394 4.2835,2.856811 13.40139,-12.097612 13.1368,-13.525975 -0.40148,-2.164937 -8.06688,-3.457217 -9.86896,-1.369419 z"
|
||||||
|
id="path5599"
|
||||||
|
sodipodi:nodetypes="ssss" />
|
||||||
|
<path
|
||||||
|
style="stroke-linejoin:miter;
|
||||||
|
stroke-miterlimit:4;
|
||||||
|
stroke-dasharray:none;
|
||||||
|
stroke-opacity:1"
|
||||||
|
d="m 283.01637,21.941476 c 13.77166,-17.5948162 20.26231,-58.430437 14.87852,-54.688625 -16.63519,11.561933 1.50986,84.878597 -3.86255,94.259788 -2.77674,4.848515 -20.37598,-8.366388 -16.48804,-18.315105 2.64201,-6.760505 6.86016,-5.127064 11.95096,-8.174896"
|
||||||
|
id="path6508"
|
||||||
|
sodipodi:nodetypes="csssc" />
|
||||||
|
<path
|
||||||
|
style="stroke-linejoin:miter;
|
||||||
|
stroke-miterlimit:4;
|
||||||
|
stroke-dasharray:none;
|
||||||
|
stroke-opacity:1"
|
||||||
|
d="m 268.00837,42.908163 c -26.42894,-1.402892 -17.3056,39.667651 -1.54342,31.364589 9.85909,-5.193503 -6.22644,-101.377213 2.11133,-100.854828 4.16005,0.260637 0.22284,13.904191 -6.67691,26.02389012 C 254.99972,11.56156 245.13969,22.122662 242.18918,19.553315 240.05011,17.69049 240.35315,11.012501 241.34202,8.7752027"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
viewBox="465 -39 150 175"
|
||||||
|
style="height : 1.8em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
style="
|
||||||
|
fill:hsl(0, 0%, 100%);
|
||||||
|
fill-opacity:1;"
|
||||||
|
d="m 521.33907,-32.100947 c -15.696,0 -29.8501,8.729044 -37.09062,22.1790455 -7.24053,13.4500045 -5.91492,32.3446665 7.17197,47.3022185 1.43732,1.642749 2.73071,2.928216 4.18011,4.572672 -20.02696,12.307516 -29.31825,31.315366 -27.02756,49.047466 2.9147,22.562305 23.06212,41.445905 49.20662,41.095695 18.2011,-0.24382 34.35419,-5.08829 46.57016,-15.17682 l 10.19351,11.31199 h 33.48737 c 0,0 -11.40008,-11.45583 -29.00271,-30.005825 7.62555,-15.07261 10.59424,-34.29628 9.60156,-58.272386 l -23.51583,0.976066 c 0.67379,16.27413 -0.91616,28.50638 -3.78227,38.04548 -8.45792,-9.04987 -17.26393,-18.82395 -26.48118,-28.95849 18.17595,-10.00276 28.62124,-26.326473 28.99029,-42.851552 0.22733,-10.173154 -3.52637,-20.406463 -11.12929,-27.770227 -7.60295,-7.363764 -18.67436,-11.495333 -31.37213,-11.495333 z m 0,23.537054 c 7.83107,0 12.28773,2.235786 15.00174,4.864433 2.71403,2.628646 4.06455,6.013533 3.96794,10.338903 -0.17763,7.953448 -6.4503,18.778829 -22.19495,25.070124 -3.12812,-3.52063 -5.90343,-6.306983 -8.98089,-9.824346 -7.894,-9.022371 -7.14525,-15.113741 -4.16423,-20.6512899 2.98102,-5.5375481 9.84988,-9.7978241 16.37039,-9.7978241 z m -9.29389,68.499888 c 12.77594,14.14387 25.16291,27.83514 36.50712,39.92866 -7.12746,5.655985 -16.83937,8.508835 -31.091,8.699735 -15.02851,0.20131 -24.1429,-9.703835 -25.54754,-20.577015 -1.19923,-9.28313 3.16266,-20.11957 20.13142,-28.05138 z"/>
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
viewBox="144 105 45 27"
|
||||||
|
style="stroke:#ffffff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;"
|
||||||
|
>
|
||||||
|
|
||||||
|
<circle
|
||||||
|
style="display:inline; fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;"
|
||||||
|
id="path905-7"
|
||||||
|
cx="80.57341"
|
||||||
|
cy="225.22316"
|
||||||
|
r="0.95786411"
|
||||||
|
transform="matrix(1.0762321,0,0,1.0762321,69.515692,-132.21175)" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="m 145.67023,114.3131 c 1.78592,-2.29773 3.12471,-4.35186 3.94309,-6.12246 l 0.48061,4.00796 2.67648,-3.44512 c 0,0 -1.33095,6.24196 0.31881,10.88518"
|
||||||
|
id="path929"
|
||||||
|
sodipodi:nodetypes="ccccc" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="m 155.88053,113.34602 c -0.45893,4.69925 -1.25065,3.69121 -0.18477,4.04488 1.55502,0.51598 4.4305,-0.81121 10.33621,-4.63748"
|
||||||
|
id="path931"
|
||||||
|
sodipodi:nodetypes="csc" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="m 160.60127,112.03858 c 0,0 -1.72603,7.30276 -7.26034,13.1046"
|
||||||
|
id="path933"
|
||||||
|
sodipodi:nodetypes="cc" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="m 159.24101,117.33599 c 0,0 1.82586,2.56841 3.00349,5.26021 2.17197,-3.1972 4.23136,-5.70438 6.74074,-10.34101 0,0 8.08433,12.22102 13.33159,16.24117 1.18468,0.90765 5.45607,1.69302 4.48962,-3.15342"
|
||||||
|
id="path935"
|
||||||
|
sodipodi:nodetypes="cccsc" />
|
||||||
|
<path
|
||||||
|
style="fill:none;fill-opacity:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="m 165.97522,118.73555 c 0.217,0.2611 2.78332,2.20999 2.78332,2.20999 l 3.36893,-3.46208"
|
||||||
|
id="path939"
|
||||||
|
sodipodi:nodetypes="ccc" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "../style/colors.scss";
|
||||||
|
@import "../style/widths.scss";
|
||||||
|
|
||||||
|
div.footer{
|
||||||
|
position : fixed;
|
||||||
|
bottom: 0em;
|
||||||
|
padding-left:3em;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
background-color: hsla(0, 0%, 1%, 0.904);
|
||||||
|
min-height:3.5em;
|
||||||
|
width: 100%;
|
||||||
|
max-width: $maxWidth;
|
||||||
|
z-index: 9;
|
||||||
|
transition: 0.5s;
|
||||||
|
&.hide{
|
||||||
|
transform:translateY(100%)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
svg{
|
||||||
|
height: 2.5em;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
font-size: 2em;
|
||||||
|
margin-right: 0.5em;
|
||||||
|
color:white;
|
||||||
|
}
|
||||||
|
.arrow{
|
||||||
|
margin-left: 0.4em;
|
||||||
|
position : fixed;
|
||||||
|
bottom:0.5em;
|
||||||
|
transition: 0.35s;
|
||||||
|
z-index: 99;
|
||||||
|
&.up{
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
&.down{
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@supports (backdrop-filter: blur(0.5rem)){
|
||||||
|
div.footer{
|
||||||
|
background-color: hsla(0, 100%, 0%, 0.25);
|
||||||
|
backdrop-filter: blur(0.5rem);
|
||||||
|
/* adding backdrop-filter compatibility for firefox and safari */
|
||||||
|
-webkit-backdrop-filter: blur(0.6rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -3,22 +3,15 @@ import axios from "axios";
|
|||||||
export const formService =
|
export const formService =
|
||||||
{
|
{
|
||||||
// Propriété qui stocke la BASE URL de notre API
|
// Propriété qui stocke la BASE URL de notre API
|
||||||
//base_url : "http://192.168.42.124/projets_wordpress/BOPortfolio/wordpress/wp-json/",
|
base_url : "https://orange-firefly-f5a4.raffiskender.workers.dev/",
|
||||||
//base_url : "http://192.168.1.41/projets_wordpress/BOPortfolio/wordpress/wp-json/",
|
|
||||||
base_url : "https://bo-portfolio.raffiskender.com/wp-json/",
|
|
||||||
//base_url : "http://localhost/projets_wordpress/BOPortfolio/wordpress/wp-json/",
|
|
||||||
|
|
||||||
// Retrieve data from backend
|
// Retrieve data from backend
|
||||||
async sendMessage(token, payload)
|
async sendMessage(token, payload)
|
||||||
{
|
{
|
||||||
//console.log(token, payload);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const response = await axios.post(
|
const response = await axios.post(
|
||||||
this.base_url + "bo-portfolio/v1/submitForm",
|
this.base_url,
|
||||||
{
|
{
|
||||||
token: token,
|
token,
|
||||||
json: payload
|
json: payload
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -28,13 +21,3 @@ export const formService =
|
|||||||
return response.data;
|
return response.data;
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
// async verifyRecaptcha(token){
|
|
||||||
|
|
||||||
|
|
||||||
// return fetch(VERIFY_URL, {
|
|
||||||
// method: "POST",
|
|
||||||
// headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
|
||||||
// body: `secret=${SECRET_KEY}&response=${req.body['g-recaptcha-response']}`,
|
|
||||||
// })
|
|
||||||
// },
|
|
||||||
@@ -59,7 +59,6 @@ const onSubmit = () => {
|
|||||||
{action: 'submit'})
|
{action: 'submit'})
|
||||||
.then( async (token) => {
|
.then( async (token) => {
|
||||||
const response = await formService.sendMessage(token, payload)
|
const response = await formService.sendMessage(token, payload)
|
||||||
//console.log(response)
|
|
||||||
if (response === true){
|
if (response === true){
|
||||||
awaiting.value = false;
|
awaiting.value = false;
|
||||||
name.value = '';
|
name.value = '';
|
||||||
|
|||||||
@@ -1,72 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import { onMounted } from 'vue';
|
|
||||||
import { useBurgerStore } from '@/stores/burger'
|
|
||||||
const burger = useBurgerStore();
|
|
||||||
onMounted(() => {
|
|
||||||
burger.check()
|
|
||||||
//console.log("Mounted")
|
|
||||||
})
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="content">
|
|
||||||
<div class="title">
|
|
||||||
<div class="logo"></div>
|
|
||||||
<h3>Talking about code</h3>
|
|
||||||
</div>
|
|
||||||
<p>As you guessed, my name is Raffi. I have been working in the beautiful world of maintenance for 20 years, where I have learned a lot about logic. Throughout my life, both for professional purposes and for fun, I have learned several programming languages. Here are some of them: Video Designer, Twido Soft, Zelio Soft, PL7. When I was younger, I also dabbled in Turbo Pascal, Qbasic, and more recently, during the confinement, I explored a bit of C.</p>
|
|
||||||
|
|
||||||
<p>In 2022, I took a five-month training course to further my knowledge of web programming. During this time, I learned HTML, CSS, JavaScript, WordPress, Vue.js, PHP, SQL, database management, and much more! After completing the training, I continued to work independently to delve deeper into WordPress API-REST and gain a better understanding of what can be achieved with Vue.js. Now, I feel prepared to move forward!</p>
|
|
||||||
<p>I'm accustomed to working with deadlines, challenges, and all kinds of unforeseen circumstances. I thrive in situations that push me out of my comfort zone and require quick thinking. As a native French speaker, I'm also fluent in English and Turkish, allowing me to communicate effectively in multiple languages. I enjoy discovering new things and seizing opportunities to learn and grow. With my experience and language skills, I'm ready to take on new challenges and contribute to motivating projects.</p>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import '../style/colors.scss';
|
|
||||||
|
|
||||||
|
|
||||||
.content{
|
|
||||||
& .title{
|
|
||||||
& > .logo{
|
|
||||||
background-image: url('../assets/questionSolo.png');
|
|
||||||
background-size: 80%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
& > p{
|
|
||||||
|
|
||||||
color : $main-normal;
|
|
||||||
opacity: 1;
|
|
||||||
padding:1em 1.25em 0em 1em;
|
|
||||||
line-height: 1.5em;
|
|
||||||
animation: text 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes text{
|
|
||||||
0%{
|
|
||||||
opacity : 0;
|
|
||||||
}
|
|
||||||
33%{
|
|
||||||
opacity : 0;
|
|
||||||
}
|
|
||||||
100%{
|
|
||||||
opacity:1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes image_show{
|
|
||||||
0%{
|
|
||||||
opacity: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
33%{
|
|
||||||
opacity: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (width < 600px){
|
|
||||||
.content{
|
|
||||||
width: 95%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -13,7 +13,7 @@ onMounted(() => {
|
|||||||
|
|
||||||
const items = ref([
|
const items = ref([
|
||||||
{ id:1,
|
{ id:1,
|
||||||
selected : true,
|
selected : false,
|
||||||
name : "Poils O pattes",
|
name : "Poils O pattes",
|
||||||
bg_image : "url('https://picsum.photos/id/20/200/300')"
|
bg_image : "url('https://picsum.photos/id/20/200/300')"
|
||||||
},
|
},
|
||||||
@@ -28,6 +28,12 @@ const items = ref([
|
|||||||
bg_image : "url('https://picsum.photos/id/23/200/300')"
|
bg_image : "url('https://picsum.photos/id/23/200/300')"
|
||||||
},
|
},
|
||||||
|
|
||||||
|
{ id:4,
|
||||||
|
selected : true,
|
||||||
|
name : "A backend for an artist",
|
||||||
|
bg_image : "url('https://picsum.photos/id/23/200/300')"
|
||||||
|
},
|
||||||
|
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const handleLeftArrow = () =>{
|
const handleLeftArrow = () =>{
|
||||||
@@ -146,10 +152,9 @@ const changeSelectedTab = (id) => {
|
|||||||
|
|
||||||
<div class="project"
|
<div class="project"
|
||||||
v-else-if ="items[1].selected">
|
v-else-if ="items[1].selected">
|
||||||
<p>A presentation of this (finally useful) project... is to be watched soon</p>
|
<p>A presentation of this (finally useful) project can be watched in the video below... in the language of Shakespeare!</p>
|
||||||
<!-- <p>A presentation of this Watch a presentation of this (finally useful) project... And in the English language!</p> -->
|
<!-- <p>A presentation of this Watch a presentation of this (finally useful) project... And in the English language!</p> -->
|
||||||
<iframe class="video unavailable" src="https://www.youtube.com/embed" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
<iframe class = "video" src="https://www.youtube.com/embed/3ZlYSN8dt5U" title="Presentation of (my) shopping list project" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> <h4>The project</h4>
|
||||||
<h4>The project</h4>
|
|
||||||
<p class="project-summary">
|
<p class="project-summary">
|
||||||
The project <a href="https://liste-v2.raffiskender.com" target="_blank">"shopping list"</a> began when I was bored, thinking of what I could code. A teacher used to tell us "make little projects, like a list or a calculator...". So I thought, "Okay, let's create a shopping list for my wife that can also be used by my mom."
|
The project <a href="https://liste-v2.raffiskender.com" target="_blank">"shopping list"</a> began when I was bored, thinking of what I could code. A teacher used to tell us "make little projects, like a list or a calculator...". So I thought, "Okay, let's create a shopping list for my wife that can also be used by my mom."
|
||||||
</p>
|
</p>
|
||||||
@@ -197,6 +202,19 @@ const changeSelectedTab = (id) => {
|
|||||||
<p>Please note that this project will not work on mobile devices</p>
|
<p>Please note that this project will not work on mobile devices</p>
|
||||||
<p><a href="https://memory.raffiskender.com" target="_blank">See this project</a></p>
|
<p><a href="https://memory.raffiskender.com" target="_blank">See this project</a></p>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="project"
|
||||||
|
v-else-if ="items[3].selected">
|
||||||
|
<!-- <p>A presentation of this Watch a presentation of this (finally useful) project... And in the English language!</p> -->
|
||||||
|
<p class="project-summary">
|
||||||
|
|
||||||
|
This website, created by my wife and me, showcases the remarkable work of a great artist. The purpose is to display his own creations, share news, introduce his students, and showcase their artistic endeavors.
|
||||||
|
</p>
|
||||||
|
<p class="project-summary">
|
||||||
|
I created a brief video to showcase and explain the backend I developed for him.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<iframe class= "video" src="https://www.youtube.com/embed/5oV5-I_yuYA" title="Wordpress backend for an artist" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
</Transition>
|
</Transition>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1,130 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import { onMounted, ref } from 'vue';
|
|
||||||
import { useBurgerStore } from '@/stores/burger'
|
|
||||||
const burger = useBurgerStore();
|
|
||||||
onMounted(() => {
|
|
||||||
burger.check();
|
|
||||||
})
|
|
||||||
|
|
||||||
const items = ref([
|
|
||||||
{ id:1,
|
|
||||||
selected : true,
|
|
||||||
name : "Poils O pattes",
|
|
||||||
bg_image : "url('https://picsum.photos/id/20/200/300')"
|
|
||||||
},
|
|
||||||
{ id:2,
|
|
||||||
selected : false,
|
|
||||||
name : "courses",
|
|
||||||
bg_image : "url('https://picsum.photos/id/23/200/300')"
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
|
|
||||||
const background = () => {
|
|
||||||
//console.log(items)
|
|
||||||
for (const item of items.value) {
|
|
||||||
if (item.selected)
|
|
||||||
return item.bg_image
|
|
||||||
};
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="content">
|
|
||||||
<div class="title">
|
|
||||||
<div class="logo">
|
|
||||||
</div>
|
|
||||||
<h3><span>Projects</span></h3>
|
|
||||||
</div>
|
|
||||||
<div class = "slider">
|
|
||||||
<div class="projects-banner"
|
|
||||||
:style="{backgroundImage : background()}"
|
|
||||||
>
|
|
||||||
<div class="arrow left">
|
|
||||||
〈
|
|
||||||
</div>
|
|
||||||
<div class="tab">
|
|
||||||
<h4 class="project-name">Poils O Pattes</h4>
|
|
||||||
<h4 class="project-name toto">Poils O Pattes</h4>
|
|
||||||
<!-- v-for="item in items"
|
|
||||||
v-bind:key="items.id">
|
|
||||||
<h4 class="project-name"
|
|
||||||
:style="{opacity:item.selected ? 1 : 0, width : item.selected ? '100%' : 0, display:item.selected ? 'block' : 'none'}" >{{item.name}}</h4>
|
|
||||||
-->
|
|
||||||
</div>
|
|
||||||
<!-- <h4 class="project-title poils" v-else-if="items[1].selected" >Pas POP</h4> -->
|
|
||||||
<div class="arrow right">
|
|
||||||
〉
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="project-content">
|
|
||||||
<p class="project-description">
|
|
||||||
A grooming salon management project undertaken with a team of 5 people over a duration of one month. I had the pleasure of contributing to it as a backend coder and scrum master...
|
|
||||||
</p>
|
|
||||||
<iframe class="video" src="https://www.youtube.com/embed/Q3WiRGLeXSQ?start=2329" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import '../style/colors.scss';
|
|
||||||
.content{
|
|
||||||
& > .title {
|
|
||||||
& .logo{
|
|
||||||
background-image: url('../assets/maison.svg');
|
|
||||||
background-size: 70%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
p{
|
|
||||||
margin: 0 0.5em;
|
|
||||||
line-height: 1.3em;
|
|
||||||
}
|
|
||||||
.video{
|
|
||||||
display: block;
|
|
||||||
width: 90%;
|
|
||||||
aspect-ratio: 560/315;
|
|
||||||
margin:auto;
|
|
||||||
}
|
|
||||||
.projects-banner{
|
|
||||||
// position:relative;
|
|
||||||
margin: 1em 0.5em;
|
|
||||||
height:3em;
|
|
||||||
width: 90%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
//background-image: url('https://picsum.photos/seed/picsum/200/300');
|
|
||||||
background-size: 90%;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
&.tab{
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h4.project-name{
|
|
||||||
width: 0%;
|
|
||||||
//position:absolute;
|
|
||||||
display: inline;
|
|
||||||
border: 1px solid blueviolet;
|
|
||||||
font-family: 'acme', Arial, Helvetica, sans-serif;
|
|
||||||
font-size:1.7em;
|
|
||||||
letter-spacing: 0.1em;
|
|
||||||
color:$page-bg;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.arrow{
|
|
||||||
color:white;
|
|
||||||
font-weight: bold;
|
|
||||||
border: 1px solid red;
|
|
||||||
&.left{
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.tab{
|
|
||||||
overflow-x: hidden;
|
|
||||||
& > .project-name{
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
Reference in New Issue
Block a user