project nearly finished. TODO Next : Project page and refine some text
This commit is contained in:
3160
package-lock.json
generated
3160
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -7,8 +7,15 @@
|
|||||||
"build": "vue-cli-service build"
|
"build": "vue-cli-service build"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@fortawesome/fontawesome-svg-core": "^6.4.0",
|
||||||
|
"@fortawesome/free-regular-svg-icons": "^6.4.0",
|
||||||
|
"@fortawesome/vue-fontawesome": "^3.0.3",
|
||||||
|
"axios": "^1.4.0",
|
||||||
"core-js": "^3.8.3",
|
"core-js": "^3.8.3",
|
||||||
"vue": "^3.2.13"
|
"fontawesome": "^5.6.3",
|
||||||
|
"pinia": "^2.0.34",
|
||||||
|
"vue": "^3.2.13",
|
||||||
|
"vue-router": "^4.2.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vue/cli-plugin-babel": "~5.0.0",
|
"@vue/cli-plugin-babel": "~5.0.0",
|
||||||
|
|||||||
BIN
public/icons8-info-16.png
Normal file
BIN
public/icons8-info-16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 562 B |
@@ -4,7 +4,7 @@
|
|||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
<link rel="icon" href="<%= BASE_URL %>icons8-info-16.png">
|
||||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -12,6 +12,6 @@
|
|||||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||||
</noscript>
|
</noscript>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<!-- built files will be auto injected -->
|
<script id="grecaptcha" src="https://www.google.com/recaptcha/api.js?render=6LemkQ8mAAAAAL-l-wG8W9VV73xrL5VeUO1FiAeW" async="" defer=""></script><!-- built files will be auto injected -->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
196
src/App.vue
196
src/App.vue
@@ -1,26 +1,184 @@
|
|||||||
<template>
|
<script setup>
|
||||||
<img alt="Vue logo" src="./assets/logo.png">
|
//import { onMounted, onUnmounted } from 'vue';
|
||||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
import Burger from '@/components/Burger.vue'
|
||||||
</template>
|
import { useBurgerStore } from './stores/burger';
|
||||||
|
|
||||||
|
import Name from '@/components/Name.vue';
|
||||||
|
import Footer from './components/Footer.vue';
|
||||||
|
|
||||||
|
|
||||||
|
import Menu from '@/components/Menu.vue';
|
||||||
|
|
||||||
|
const burger = useBurgerStore();
|
||||||
|
//clé du site : 6LemkQ8mAAAAAL-l-wG8W9VV73xrL5VeUO1FiAeW
|
||||||
|
// clé secrete: 6LemkQ8mAAAAAGKikUbV_rKv7O4hCp_gx1f5pULu
|
||||||
|
|
||||||
<script>
|
|
||||||
import HelloWorld from './components/HelloWorld.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'App',
|
|
||||||
components: {
|
|
||||||
HelloWorld
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
|
||||||
|
<Burger/>
|
||||||
|
<div v-bind:class="burger.checked ? 'page' : 'index'" >
|
||||||
|
<router-view v-slot="{ Component }">
|
||||||
|
<!-- <Transition name="fade"> -->
|
||||||
|
<!-- <div> -->
|
||||||
|
<Name v-if="burger.checked"/>
|
||||||
|
<Menu class="menu" v-if="burger.checked"/>
|
||||||
|
<Transition name="fade">
|
||||||
|
<component :is="Component" v-if="burger.checked"/>
|
||||||
|
</Transition>
|
||||||
|
<component :is="Component" v-if="!burger.checked"/>
|
||||||
|
<!-- </div> -->
|
||||||
|
<!-- </Transition> -->
|
||||||
|
</router-view>
|
||||||
|
<Footer/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
#app {
|
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap');
|
||||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap');
|
||||||
-webkit-font-smoothing: antialiased;
|
@import "@/style/shared.scss";
|
||||||
-moz-osx-font-smoothing: grayscale;
|
html {
|
||||||
text-align: center;
|
font-size: 16px;
|
||||||
color: #2c3e50;
|
}
|
||||||
margin-top: 60px;
|
|
||||||
|
body{
|
||||||
|
//min-height: 100vh;
|
||||||
|
//background-color: $body-bg;
|
||||||
|
//margin-bottom: 1em;
|
||||||
|
//overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
p, li, label{
|
||||||
|
font-size: 1.25rem;
|
||||||
|
color:$font-color;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
p{
|
||||||
|
text-indent: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu{
|
||||||
|
position: sticky;
|
||||||
|
top: 0em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content{
|
||||||
|
background-color: $page-bg;
|
||||||
|
padding: 0.5em 0 3em 0;
|
||||||
|
margin: 0em auto 1em auto;
|
||||||
|
width: 90%;
|
||||||
|
border-radius: 20px;
|
||||||
|
box-shadow:0px 0px 30px #ffffff;
|
||||||
|
& > .title {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin : 0.5em;
|
||||||
|
padding: 0.5em 0.5em 0 0.5em;
|
||||||
|
overflow: hidden;
|
||||||
|
& .logo{
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
width: 3em;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
border-radius: 50%;
|
||||||
|
border : $red-light solid 3px;
|
||||||
|
}
|
||||||
|
& > h3 {
|
||||||
|
//display: inline;
|
||||||
|
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
|
||||||
|
color: $green;
|
||||||
|
opacity: 1;
|
||||||
|
font-size: 3rem;
|
||||||
|
text-align: right;
|
||||||
|
font-weight: 300;
|
||||||
|
text-transform: uppercase;
|
||||||
|
//filter:drop-shadow(2px 2px 3px $green);
|
||||||
|
//transform: translateY(0em);
|
||||||
|
animation: title 0.45s cubic-bezier(0,.37,.27,.94);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.grecaptcha-badge{
|
||||||
|
opacity : 0;
|
||||||
|
width: 0;
|
||||||
|
height:0;
|
||||||
|
}
|
||||||
|
@media (width < 420px){
|
||||||
|
.title{
|
||||||
|
flex-direction : column;
|
||||||
|
gap:0.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes title{
|
||||||
|
0%{
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(3em);
|
||||||
|
}
|
||||||
|
50%{
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(3em);
|
||||||
|
}
|
||||||
|
75%{
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
opacity:1;
|
||||||
|
transform: translateY(0em);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.index, .page{
|
||||||
|
//position : relative;
|
||||||
|
margin: 0 auto;
|
||||||
|
//border : 2px solid white;
|
||||||
|
background-color: rgb(182, 182, 182);
|
||||||
|
box-shadow: 0px 0px 20px 20px #363636;
|
||||||
|
max-width: $maxWidth;
|
||||||
|
padding-bottom: 2em;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav.menu-container{
|
||||||
|
z-index: 99;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
background-color: $page-bg;
|
||||||
|
background-image: url('../src/assets/points.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2 {
|
||||||
|
font-family: 'Courier Prime', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* we will explain what these classes do next! */
|
||||||
|
.fade-leave-active {
|
||||||
|
transition: opacity 0.150s ease-out;
|
||||||
|
}
|
||||||
|
.fade-enter-active{
|
||||||
|
transition: opacity 0.35s ease-out;
|
||||||
|
transition-delay: 0.25s;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-enter-from,
|
||||||
|
.fade-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (width > 600px){
|
||||||
|
html{
|
||||||
|
font-size:18px;
|
||||||
|
}
|
||||||
|
.content{
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 477 KiB |
140
src/Deprecated/Card.vue
Normal file
140
src/Deprecated/Card.vue
Normal file
@@ -0,0 +1,140 @@
|
|||||||
|
<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>
|
||||||
129
src/Deprecated/Card_WhoAmI.vue
Normal file
129
src/Deprecated/Card_WhoAmI.vue
Normal file
@@ -0,0 +1,129 @@
|
|||||||
|
<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>
|
||||||
174
src/Deprecated/Cards.vue
Normal file
174
src/Deprecated/Cards.vue
Normal file
@@ -0,0 +1,174 @@
|
|||||||
|
<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/shared.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>
|
||||||
31
src/Deprecated/MenuCards.vue
Normal file
31
src/Deprecated/MenuCards.vue
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
<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>
|
||||||
227
src/Deprecated/OldMenu.vue
Normal file
227
src/Deprecated/OldMenu.vue
Normal file
@@ -0,0 +1,227 @@
|
|||||||
|
<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>
|
||||||
19
src/Deprecated/Prez.vue
Normal file
19
src/Deprecated/Prez.vue
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
<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>
|
||||||
215
src/Deprecated/back.svg
Normal file
215
src/Deprecated/back.svg
Normal file
@@ -0,0 +1,215 @@
|
|||||||
|
<?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>
|
||||||
|
After Width: | Height: | Size: 8.6 KiB |
87
src/Deprecated/face.svg
Normal file
87
src/Deprecated/face.svg
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
<?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>
|
||||||
|
After Width: | Height: | Size: 3.4 KiB |
BIN
src/assets/MaPhoto.jpg
Normal file
BIN
src/assets/MaPhoto.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
72
src/assets/arrow up.svg
Normal file
72
src/assets/arrow up.svg
Normal file
@@ -0,0 +1,72 @@
|
|||||||
|
<?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="100"
|
||||||
|
height="100"
|
||||||
|
viewBox="0 0 26.458333 26.458334"
|
||||||
|
version="1.1"
|
||||||
|
id="svg8"
|
||||||
|
inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
|
||||||
|
sodipodi:docname="arrow up.svg">
|
||||||
|
<defs
|
||||||
|
id="defs2" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="base"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="2.8"
|
||||||
|
inkscape:cx="42.233491"
|
||||||
|
inkscape:cy="42.00001"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
inkscape:document-rotation="0"
|
||||||
|
showgrid="false"
|
||||||
|
units="px"
|
||||||
|
inkscape:window-width="1559"
|
||||||
|
inkscape:window-height="908"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
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 />
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
inkscape:label="Calque 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1">
|
||||||
|
<g
|
||||||
|
id="g845"
|
||||||
|
transform="matrix(0.97184002,0,0,0.97192162,-2.856759,-2.8573003)">
|
||||||
|
<circle
|
||||||
|
style="fill:none;stroke:#000000;stroke-width:1.2;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
id="path833"
|
||||||
|
transform="rotate(135)"
|
||||||
|
cx="1.9988192e-07"
|
||||||
|
cy="-18.708866"
|
||||||
|
r="9.6932478" />
|
||||||
|
<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 18.93664,15.024557 13.229167,9.3170836 7.5216933,15.024557"
|
||||||
|
id="path841"
|
||||||
|
sodipodi:nodetypes="ccc" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.2 KiB |
60
src/assets/bulle.svg
Normal file
60
src/assets/bulle.svg
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
<?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="100mm"
|
||||||
|
height="50mm"
|
||||||
|
viewBox="0 0 100 50"
|
||||||
|
version="1.1"
|
||||||
|
id="svg888"
|
||||||
|
inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
|
||||||
|
sodipodi:docname="bulle.svg">
|
||||||
|
<defs
|
||||||
|
id="defs882" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="base"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="1.4"
|
||||||
|
inkscape:cx="378.70655"
|
||||||
|
inkscape:cy="295.42153"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
inkscape:document-rotation="0"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1005"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1" />
|
||||||
|
<metadata
|
||||||
|
id="metadata885">
|
||||||
|
<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
|
||||||
|
inkscape:label="Calque 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1">
|
||||||
|
<path
|
||||||
|
id="rect1465"
|
||||||
|
style="fill:none;fill-opacity:0.251969;stroke:#000000;stroke-width:1.3;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
|
||||||
|
d="m 10.500085,1.4714159 c -4.4319983,0 -8.0000262,3.5680281 -8.0000262,8.0000291 v 13.999662 c 0,4.431998 3.5680279,8.000026 8.0000262,8.000026 h 14.219803 c 1.648079,5.789509 0.338492,9.676648 -7.101268,17.057513 13.153236,-3.561877 18.474557,-11.228478 20.512444,-17.246494 l 51.368851,0.188981 c 4.431969,0.0163 8.000026,-3.568028 8.000026,-8.000026 V 9.471445 c 0,-4.432001 -3.568027,-8.0000291 -8.000026,-8.0000291 z"
|
||||||
|
sodipodi:nodetypes="sssscccsssss" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.2 KiB |
87
src/assets/burger.svg
Normal file
87
src/assets/burger.svg
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
<?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"
|
||||||
|
class="hamburger"
|
||||||
|
viewBox="5 2 100 100"
|
||||||
|
version="1.1"
|
||||||
|
id="svg963"
|
||||||
|
sodipodi:docname="burger.svg"
|
||||||
|
inkscape:version="1.0.2 (e86c870879, 2021-01-15)"><metadata
|
||||||
|
id="metadata969">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<defs
|
||||||
|
id="defs967">
|
||||||
|
<marker
|
||||||
|
style="overflow:visible"
|
||||||
|
id="marker1262"
|
||||||
|
refX="0.0"
|
||||||
|
refY="0.0"
|
||||||
|
orient="auto"
|
||||||
|
inkscape:stockid="Arrow1Lstart"
|
||||||
|
inkscape:isstock="true">
|
||||||
|
<path
|
||||||
|
transform="scale(0.8) translate(12.5,0)"
|
||||||
|
style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#000000;fill-opacity:1"
|
||||||
|
d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
|
||||||
|
id="path1260" />
|
||||||
|
</marker>
|
||||||
|
<marker
|
||||||
|
style="overflow:visible"
|
||||||
|
id="Arrow1Lstart"
|
||||||
|
refX="0.0"
|
||||||
|
refY="0.0"
|
||||||
|
orient="auto"
|
||||||
|
inkscape:stockid="Arrow1Lstart"
|
||||||
|
inkscape:isstock="true">
|
||||||
|
<path
|
||||||
|
transform="scale(0.8) translate(12.5,0)"
|
||||||
|
style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#000000;fill-opacity:1"
|
||||||
|
d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
|
||||||
|
id="path984" />
|
||||||
|
</marker>
|
||||||
|
</defs>
|
||||||
|
<sodipodi:namedview
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1"
|
||||||
|
objecttolerance="10"
|
||||||
|
gridtolerance="10"
|
||||||
|
guidetolerance="10"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:window-width="1706"
|
||||||
|
inkscape:window-height="979"
|
||||||
|
id="namedview965"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="7.3"
|
||||||
|
inkscape:cx="65.227351"
|
||||||
|
inkscape:cy="70.906094"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="0"
|
||||||
|
inkscape:current-layer="svg963" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
|
||||||
|
d="M 36,21 H 74 L 73.926979,33.073021 55,52 36.073021,70.926987 36,83 H 74 L 73.926979,70.926987 36.073021,33.073021 Z"
|
||||||
|
id="path978"
|
||||||
|
sodipodi:nodetypes="cccccccccc" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#000000;stroke-width:1.01957px;stroke-linecap:round;stroke-linejoin:bevel;stroke-opacity:1"
|
||||||
|
d="M 36.019762,52 H 73.980238 C 90.038524,51.867982 82.074782,68.84115 76.597762,73.917743 71.070413,79.526983 63.434451,82.99637 55,82.99637 38.131099,82.99637 24.456152,69.118822 24.456152,52 24.456152,34.881178 38.131099,21.00363 55,21.00363 c 16.868901,0 30.543848,13.877548 30.543848,30.99637 0,8.559411 -3.418737,16.308504 -8.946086,21.917743"
|
||||||
|
id="path982"
|
||||||
|
sodipodi:nodetypes="cccssssc" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.0 KiB |
194
src/assets/by.svg
Normal file
194
src/assets/by.svg
Normal file
@@ -0,0 +1,194 @@
|
|||||||
|
<?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="100mm"
|
||||||
|
height="100mm"
|
||||||
|
viewBox="0 0 100 100"
|
||||||
|
version="1.1"
|
||||||
|
id="svg8"
|
||||||
|
inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
|
||||||
|
sodipodi:docname="by.svg">
|
||||||
|
<defs
|
||||||
|
id="defs2">
|
||||||
|
<clipPath
|
||||||
|
clipPathUnits="userSpaceOnUse"
|
||||||
|
id="cp2">
|
||||||
|
<path
|
||||||
|
d="M 0,0 H 1528.35 V 331.39 H 0 Z"
|
||||||
|
id="path7" />
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="base"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="0.32459884"
|
||||||
|
inkscape:cx="716.96845"
|
||||||
|
inkscape:cy="118.61483"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
inkscape:current-layer="layer3"
|
||||||
|
inkscape:document-rotation="0"
|
||||||
|
showgrid="false"
|
||||||
|
showguides="true"
|
||||||
|
inkscape:guide-bbox="true"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1005"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1">
|
||||||
|
<sodipodi:guide
|
||||||
|
position="453.1069,114.42707"
|
||||||
|
orientation="1,0"
|
||||||
|
id="guide944" />
|
||||||
|
<sodipodi:guide
|
||||||
|
position="398.99166,60.180208"
|
||||||
|
orientation="0,-1"
|
||||||
|
id="guide948" />
|
||||||
|
</sodipodi:namedview>
|
||||||
|
<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 />
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
inkscape:label="By"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1">
|
||||||
|
<g
|
||||||
|
id="g1100"
|
||||||
|
style="stroke:#00008a;stroke-opacity:1;stroke-width:0.8;stroke-miterlimit:4;stroke-dasharray:none;stroke-linecap:square;stroke-linejoin:miter;fill:#00008a;fill-opacity:1">
|
||||||
|
<g
|
||||||
|
id="g1053"
|
||||||
|
transform="matrix(3.2926021,0,0,3.2926021,13.394942,5.0000002)"
|
||||||
|
style="fill:#00008a;fill-opacity:1;stroke:#00008a;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:#00008a;fill-opacity:1;fill-rule:nonzero;stroke:#00008a;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:#00008a;fill-opacity:1;stroke:#00008a;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:#00008a;fill-opacity:1;stroke:#00008a;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:#00008a;fill-opacity:1;stroke:#00008a;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:#00008a;fill-opacity:1;fill-rule:nonzero;stroke:#00008a;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"
|
||||||
|
id="path1027"
|
||||||
|
sodipodi:nodetypes="ccccc" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
id="g985"
|
||||||
|
style="fill:#00008a;fill-opacity:1;stroke:#00008a;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:#00008a;fill-opacity:1;stroke:#00008a;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:#00008a;fill-opacity:1;stroke:#00008a;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:#00008a;fill-opacity:1;stroke:#00008a;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:#00008a;fill-opacity:1;fill-rule:nonzero;stroke:#00008a;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"
|
||||||
|
sodipodi:nodetypes="ccccc" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer2"
|
||||||
|
inkscape:label="Raffi">
|
||||||
|
<g
|
||||||
|
id="g919"
|
||||||
|
transform="translate(49.479263,25.318911)"
|
||||||
|
style="stroke-width:4.8;stroke-miterlimit:4;stroke-dasharray:none">
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#4a70bd;stroke-width:4.8;stroke-linecap:round;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="fill:none;stroke:#4a70bd;stroke-width:4.8;stroke-linecap:round;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="fill:none;stroke:#4a70bd;stroke-width:4.8;stroke-linecap:round;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="fill:none;stroke:#4a70bd;stroke-width:4.8;stroke-linecap:round;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="fill:none;stroke:#4a70bd;stroke-width:4.8;stroke-linecap:round;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="fill:none;stroke:#4a70bd;stroke-width:4.8;stroke-linecap:round;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="fill:none;stroke:#4a70bd;stroke-width:4.8;stroke-linecap:round;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"
|
||||||
|
id="path8454"
|
||||||
|
sodipodi:nodetypes="cssssc" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer3"
|
||||||
|
inkscape:label="and plein"
|
||||||
|
style="display:inline">
|
||||||
|
<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:#58b2ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.71602;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.49007;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000"
|
||||||
|
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"
|
||||||
|
id="path942"
|
||||||
|
sodipodi:nodetypes="ssscssccccccccsssssscsssccssc" />
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer4"
|
||||||
|
inkscape:label="and trait"
|
||||||
|
style="display:none">
|
||||||
|
<path
|
||||||
|
style="display:inline;fill:none;stroke:#00ff66;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.49007"
|
||||||
|
d="m 665.21371,-16.698761 c 0.86286,20.8404781 -6.65615,29.210811 -21.81549,29.413877 -15.15934,0.203066 -21.54281,-21.1978738 0.0222,-27.840967 16.85699,-5.19279 16.46382,-23.94901 1.34694,-23.94901 -8.1798,0 -15.4792,9.567366 -7.75433,18.396438 17.26043,19.72765507 37.34323,40.206447 37.34323,40.206447"
|
||||||
|
id="path942-3"
|
||||||
|
sodipodi:nodetypes="czsssc" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 16 KiB |
BIN
src/assets/lego_bridge.png
Normal file
BIN
src/assets/lego_bridge.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 195 KiB |
BIN
src/assets/legos_maison.jpg
Normal file
BIN
src/assets/legos_maison.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 277 KiB |
BIN
src/assets/legos_maison2.jpg
Normal file
BIN
src/assets/legos_maison2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
BIN
src/assets/legos_vrac.jpg
Normal file
BIN
src/assets/legos_vrac.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
BIN
src/assets/legos_vrac.png
Normal file
BIN
src/assets/legos_vrac.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 258 KiB |
BIN
src/assets/legos_vrac_solo.png
Normal file
BIN
src/assets/legos_vrac_solo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
BIN
src/assets/legos_vrac_solo2.png
Normal file
BIN
src/assets/legos_vrac_solo2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
91
src/assets/mailbox.svg
Normal file
91
src/assets/mailbox.svg
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
<?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="250"
|
||||||
|
height="250"
|
||||||
|
viewBox="0 0 66.145832 66.145835"
|
||||||
|
version="1.1"
|
||||||
|
id="svg943"
|
||||||
|
inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
|
||||||
|
sodipodi:docname="mailbox.svg">
|
||||||
|
<defs
|
||||||
|
id="defs937" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="base"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="2.8"
|
||||||
|
inkscape:cx="113.92229"
|
||||||
|
inkscape:cy="130.92943"
|
||||||
|
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="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="0"
|
||||||
|
units="px" />
|
||||||
|
<metadata
|
||||||
|
id="metadata940">
|
||||||
|
<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
|
||||||
|
inkscape:label="Calque 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1">
|
||||||
|
<g
|
||||||
|
id="g1565"
|
||||||
|
style="fill:#ffffff;fill-opacity:1;stroke-width:3.5;stroke-miterlimit:4;stroke-dasharray:none"
|
||||||
|
transform="translate(-37.088253,-32.856546)">
|
||||||
|
<path
|
||||||
|
id="rect1536"
|
||||||
|
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;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:13.2283;stroke-linecap:round;stroke-linejoin:round;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 332.00781,184.59961 c 0.41407,1.99878 0.62292,4.03752 0.62305,6.08203 -10e-4,2.96291 -0.44042,5.90807 -1.30274,8.73242 10.01926,6.96528 16.51954,18.5592 16.51954,31.83008 v 56.25781 c 0,9.01331 -7.0492,16.0625 -16.0625,16.0625 H 194.28125 c -9.0133,0 -16.0625,-7.04919 -16.0625,-16.0625 v -56.25781 c 0,-21.57646 17.16378,-38.74024 38.74023,-38.74023 h 60.01368 c -0.0373,-0.60665 -0.0562,-1.21438 -0.0566,-1.82227 3e-4,-3.92171 0.76847,-7.8024 2.25781,-11.40625 h -62.21485 c -28.67614,0 -51.96875,23.29261 -51.96875,51.96875 v 56.25781 c 0,16.113 13.17802,29.29102 29.29102,29.29102 H 331.7852 c 16.11299,0 29.29101,-13.17802 29.29101,-29.29102 v -56.25781 c 0,-20.45862 -11.86031,-38.16973 -29.06836,-46.64453 z"
|
||||||
|
transform="matrix(0.26458333,0,0,0.26458333,0.56695852,-0.47246303)"
|
||||||
|
sodipodi:nodetypes="cccssssssscccsssssssc" />
|
||||||
|
<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;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-linecap:round;stroke-linejoin:round;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 57.970703,46.960938 c -7.573187,0 -13.75,6.176812 -13.75,13.75 0.347413,2.528674 3.441915,1.911055 3.5,0 0,-5.681647 4.568353,-10.25 10.25,-10.25 5.681647,0 10.25,4.568353 10.25,10.25 0.489151,1.300269 3.016698,1.060621 3.5,0 0,-7.573188 -6.176813,-13.75 -13.75,-13.75 z"
|
||||||
|
id="path1545"
|
||||||
|
sodipodi:nodetypes="sccsccs" />
|
||||||
|
<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;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-linecap:butt;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 71.720703,60.710938 h -3.5 v 20.835937 h 3.5"
|
||||||
|
id="path1548"
|
||||||
|
sodipodi:nodetypes="cccc" />
|
||||||
|
</g>
|
||||||
|
<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:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:bevel;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 17.03756,27.003022 a 1.75,1.75 0 0 0 -1.75,1.75 1.75,1.75 0 0 0 1.75,1.75 h 7.748046 a 1.75,1.75 0 0 0 1.75,-1.75 1.75,1.75 0 0 0 -1.75,-1.75 z"
|
||||||
|
id="path1554" />
|
||||||
|
<path
|
||||||
|
id="rect1692"
|
||||||
|
style="fill:#ff0004;fill-opacity:1;stroke:none;stroke-width:1.17775;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="m 41.720614,7.190031 h 7.224416 c 0.700113,0 1.263744,0.58193 1.263744,1.304774 v 4.023555 c 0,0.722844 -0.563631,1.304774 -1.263744,1.304774 h -8.488161 c -0.0079,-1.860367 0,-4.804671 0,-5.328329 0,-0.722844 0.56363,-1.304774 1.263745,-1.304774 z"
|
||||||
|
sodipodi:nodetypes="ssssscss" />
|
||||||
|
<path
|
||||||
|
style="fill:#ffffff;fill-opacity:1;stroke:#ff0004;stroke-width:3.79065;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 42.348683,12.17031 V 28.264979"
|
||||||
|
id="path1694"
|
||||||
|
sodipodi:nodetypes="cc" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 9.3 KiB |
101
src/assets/maison.svg
Normal file
101
src/assets/maison.svg
Normal file
@@ -0,0 +1,101 @@
|
|||||||
|
<?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="110mm"
|
||||||
|
height="110mm"
|
||||||
|
viewBox="0 0 110 110"
|
||||||
|
version="1.1"
|
||||||
|
id="svg8"
|
||||||
|
inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
|
||||||
|
sodipodi:docname="maison.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.7"
|
||||||
|
inkscape:cx="467.83687"
|
||||||
|
inkscape:cy="231.18152"
|
||||||
|
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 />
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
inkscape:label="Calque 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1">
|
||||||
|
<path
|
||||||
|
id="rect847"
|
||||||
|
style="fill:none;fill-opacity:0.516428;stroke:#ffffff;stroke-width:4.1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
|
||||||
|
d="m 54.715612,3.2931141 c -1.172671,0 -2.345166,0.4126997 -3.243731,1.2376494 L 31.39507,22.962715 v -8.534363 c 0,-0.700809 -0.564229,-1.265039 -1.265039,-1.265039 h -9.497094 c -0.70081,0 -1.265039,0.56423 -1.265039,1.265039 V 34.004934 L 7.7174475,44.700921 c -1.7971214,1.64991 -1.7971241,4.306316 0,5.956226 32.7463405,-0.448029 41.5779265,-3.13794 93.9968425,0 1.79712,-1.649899 1.79711,-4.306316 0,-5.956226 L 57.959856,4.5307635 C 57.061302,3.7058085 55.88828,3.2931115 54.715612,3.2931141 Z" />
|
||||||
|
<path
|
||||||
|
id="rect854"
|
||||||
|
style="fill:none;fill-opacity:0.516428;stroke:#ffffff;stroke-width:4.1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
|
||||||
|
d="m 95.958313,50.666816 v 49.470324 c 0,3.37313 -2.71556,6.08869 -6.08869,6.08869 H 20.594371 c -3.373133,0 -6.088688,-2.71556 -6.088688,-6.08869 V 51.422756"
|
||||||
|
sodipodi:nodetypes="cssssc" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#ffffff;stroke-width:4.1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 19.367898,34.004936 31.39507,22.962716"
|
||||||
|
id="path861" />
|
||||||
|
<rect
|
||||||
|
style="fill:none;fill-opacity:0.516428;stroke:#ffffff;stroke-width:4.1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
|
||||||
|
id="rect863"
|
||||||
|
width="15.118817"
|
||||||
|
height="16.630697"
|
||||||
|
x="22.631977"
|
||||||
|
y="59.546436"
|
||||||
|
ry="1.2649993" />
|
||||||
|
<rect
|
||||||
|
style="fill:none;fill-opacity:0.516428;stroke:#ffffff;stroke-width:4.1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
|
||||||
|
id="rect865"
|
||||||
|
width="15.118817"
|
||||||
|
height="16.630697"
|
||||||
|
x="72.902046"
|
||||||
|
y="59.546436"
|
||||||
|
ry="1.2649993" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#ffffff;stroke-width:4.1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 45.500189,105.5089 V 77.236366 c 2e-6,-5.44948 4.417675,-9.86715 9.867154,-9.86716 5.44949,0 9.86717,4.41767 9.86786,9.86716 l 7e-4,28.952874"
|
||||||
|
id="path881"
|
||||||
|
sodipodi:nodetypes="ccscc" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#ffffff;stroke-width:4.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="m 45.560656,87.196236 h 6.681631"
|
||||||
|
id="path886" />
|
||||||
|
<path
|
||||||
|
id="path888"
|
||||||
|
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:4.1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
|
||||||
|
d="m 22.446262,90.172531 a 9.1152429,7.8849377 0 0 0 -9.053193,7.884843 9.1152429,7.8849377 0 0 0 0.01913,0.505143 9.1152429,7.8849377 0 0 0 -0.257866,-0.0033 9.1152429,7.8849377 0 0 0 -9.115205,7.885263 9.1152429,7.8849377 0 0 0 0.00516,0.26189 h 36.260319 a 9.1152429,7.8849377 0 0 0 0.0052,-0.26189 9.1152429,7.8849377 0 0 0 -8.705411,-7.876752 9.1152429,7.8849377 0 0 0 0.01963,-0.510416 9.1152429,7.8849377 0 0 0 -9.115721,-7.884843 9.1152429,7.8849377 0 0 0 -0.06201,0 z" />
|
||||||
|
<path
|
||||||
|
id="path902"
|
||||||
|
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:4.1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
|
||||||
|
d="m 87.926303,89.285886 a 9.1152429,8.3077936 0 0 0 -9.05319,8.30769 9.1152429,8.3077936 0 0 0 0.0191,0.53224 9.1152429,8.3077936 0 0 0 -0.25786,-0.003 9.1152429,8.3077936 0 0 0 -9.11521,8.308134 9.1152429,8.3077936 0 0 0 0.005,0.27594 h 36.260327 a 9.1152429,8.3077936 0 0 0 0.005,-0.27594 9.1152429,8.3077936 0 0 0 -8.705417,-8.299164 9.1152429,8.3077936 0 0 0 0.0196,-0.53779 9.1152429,8.3077936 0 0 0 -9.11572,-8.3077 9.1152429,8.3077936 0 0 0 -0.062,0 z" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 5.6 KiB |
BIN
src/assets/meme.png
Normal file
BIN
src/assets/meme.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
BIN
src/assets/meme1.png
Normal file
BIN
src/assets/meme1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
BIN
src/assets/memeWink.png
Normal file
BIN
src/assets/memeWink.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
106
src/assets/mika-signe.svg
Normal file
106
src/assets/mika-signe.svg
Normal file
@@ -0,0 +1,106 @@
|
|||||||
|
<?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="163"
|
||||||
|
height="86"
|
||||||
|
viewBox="0 0 43.127083 22.754167"
|
||||||
|
version="1.1"
|
||||||
|
id="svg928"
|
||||||
|
inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
|
||||||
|
sodipodi:docname="mika-signe.svg">
|
||||||
|
<defs
|
||||||
|
id="defs922">
|
||||||
|
<filter
|
||||||
|
inkscape:collect="always"
|
||||||
|
style="color-interpolation-filters:sRGB"
|
||||||
|
id="filter901-3"
|
||||||
|
x="-8.2848252e-05"
|
||||||
|
width="1.0001657"
|
||||||
|
y="-0.00011756585"
|
||||||
|
height="1.0002351">
|
||||||
|
<feGaussianBlur
|
||||||
|
inkscape:collect="always"
|
||||||
|
stdDeviation="0.0072497633"
|
||||||
|
id="feGaussianBlur903-6" />
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="base"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="1.979899"
|
||||||
|
inkscape:cx="49.397112"
|
||||||
|
inkscape:cy="82.415947"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
inkscape:document-rotation="0"
|
||||||
|
showgrid="false"
|
||||||
|
units="px"
|
||||||
|
inkscape:window-width="1559"
|
||||||
|
inkscape:window-height="908"
|
||||||
|
inkscape:window-x="1920"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="0" />
|
||||||
|
<metadata
|
||||||
|
id="metadata925">
|
||||||
|
<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
|
||||||
|
inkscape:label="Calque 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1">
|
||||||
|
<g
|
||||||
|
id="g1525"
|
||||||
|
transform="translate(-144.82023,-107.34086)">
|
||||||
|
<circle
|
||||||
|
style="display:inline;fill:#54335e;fill-opacity:1;stroke:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;filter:url(#filter901-3)"
|
||||||
|
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:#54335e;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;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:#54335e;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;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:#54335e;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;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:#54335e;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;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:#54335e;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;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" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.2 KiB |
97
src/assets/networks.svg
Normal file
97
src/assets/networks.svg
Normal file
@@ -0,0 +1,97 @@
|
|||||||
|
<?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="100"
|
||||||
|
height="100"
|
||||||
|
viewBox="0 0 26.458333 26.458333"
|
||||||
|
version="1.1"
|
||||||
|
id="svg8"
|
||||||
|
inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
|
||||||
|
sodipodi:docname="networks.svg">
|
||||||
|
<defs
|
||||||
|
id="defs2" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="base"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="1.979899"
|
||||||
|
inkscape:cx="-53.636169"
|
||||||
|
inkscape:cy="40.380358"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
inkscape:document-rotation="0"
|
||||||
|
showgrid="false"
|
||||||
|
units="px"
|
||||||
|
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 />
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
inkscape:label="Calque 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1">
|
||||||
|
<circle
|
||||||
|
style="fill:none;stroke:#ffffff;stroke-width:2.36068;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
id="path847"
|
||||||
|
cx="-15.750234"
|
||||||
|
cy="12.999578"
|
||||||
|
r="5.9580221"
|
||||||
|
transform="rotate(-105)" />
|
||||||
|
<circle
|
||||||
|
style="fill:none;stroke:#ffffff;stroke-width:0.602004;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
id="path851"
|
||||||
|
cx="-28.247391"
|
||||||
|
cy="13.462278"
|
||||||
|
r="2.0649688"
|
||||||
|
transform="rotate(-105)" />
|
||||||
|
<circle
|
||||||
|
style="fill:none;stroke:#ffffff;stroke-width:0.9;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
id="circle855"
|
||||||
|
cx="-23.112471"
|
||||||
|
cy="-1.4377497"
|
||||||
|
r="1.7150782"
|
||||||
|
transform="rotate(-105)" />
|
||||||
|
<circle
|
||||||
|
style="fill:none;stroke:#ffffff;stroke-width:1.0624;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
id="circle857"
|
||||||
|
cx="-5.5470781"
|
||||||
|
cy="6.3255496"
|
||||||
|
r="2.6030009"
|
||||||
|
transform="rotate(-105)" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#ffffff;stroke-width:0.7;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 19.838512,21.586154 18.793213,17.685042"
|
||||||
|
id="path859" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#ffffff;stroke-width:0.7;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 6.0207894,21.469715 11.362858,16.261291"
|
||||||
|
id="path861"
|
||||||
|
sodipodi:nodetypes="cc" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#ffffff;stroke-width:0.7;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 11.892409,7.8092934 9.5009033,5.4177871"
|
||||||
|
id="path863" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.5 KiB |
98
src/assets/points.svg
Normal file
98
src/assets/points.svg
Normal file
@@ -0,0 +1,98 @@
|
|||||||
|
<?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="12mm"
|
||||||
|
height="12mm"
|
||||||
|
viewBox="0 0 12 12"
|
||||||
|
version="1.1"
|
||||||
|
id="svg8"
|
||||||
|
sodipodi:docname="points.svg"
|
||||||
|
inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
|
||||||
|
<defs
|
||||||
|
id="defs2">
|
||||||
|
<marker
|
||||||
|
style="overflow:visible"
|
||||||
|
id="DotM"
|
||||||
|
refX="0"
|
||||||
|
refY="0"
|
||||||
|
orient="auto"
|
||||||
|
inkscape:stockid="DotM"
|
||||||
|
inkscape:isstock="true">
|
||||||
|
<path
|
||||||
|
transform="matrix(0.4,0,0,0.4,2.96,0.4)"
|
||||||
|
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
|
||||||
|
d="m -2.5,-1 c 0,2.76 -2.24,5 -5,5 -2.76,0 -5,-2.24 -5,-5 0,-2.76 2.24,-5 5,-5 2.76,0 5,2.24 5,5 z"
|
||||||
|
id="path901" />
|
||||||
|
</marker>
|
||||||
|
</defs>
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="base"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="11.2"
|
||||||
|
inkscape:cx="31.768427"
|
||||||
|
inkscape:cy="19.420112"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
inkscape:document-rotation="0"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1005"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1" />
|
||||||
|
<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 />
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
inkscape:label="Calque 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1">
|
||||||
|
<circle
|
||||||
|
style="fill:#2c2c2c;stroke-width:0.105;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:0.105, 2.52000000000000002;paint-order:stroke fill markers;fill-opacity:1"
|
||||||
|
id="circle862"
|
||||||
|
cx="4.2426405"
|
||||||
|
cy="4.2426405"
|
||||||
|
r="0.75"
|
||||||
|
transform="rotate(-44.999999)" />
|
||||||
|
<circle
|
||||||
|
style="fill:#2c2c2c;stroke-width:0.105;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:0.105, 2.52000000000000002;paint-order:stroke fill markers;fill-opacity:1"
|
||||||
|
id="circle872"
|
||||||
|
cx="4.2426405"
|
||||||
|
cy="12.727921"
|
||||||
|
r="0.75"
|
||||||
|
transform="rotate(-44.999999)" />
|
||||||
|
<circle
|
||||||
|
style="fill:#2c2c2c;stroke-width:0.105;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:0.105, 2.52000000000000002;paint-order:stroke fill markers;fill-opacity:1"
|
||||||
|
id="circle878"
|
||||||
|
cx="-4.2428379"
|
||||||
|
cy="4.2424421"
|
||||||
|
r="0.75"
|
||||||
|
transform="rotate(-44.999999)" />
|
||||||
|
<circle
|
||||||
|
style="fill:#2c2c2c;stroke-width:0.105;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:0.105, 2.52000000000000002;paint-order:stroke fill markers;fill-opacity:1"
|
||||||
|
id="circle880"
|
||||||
|
cx="-4.1927266"
|
||||||
|
cy="12.678008"
|
||||||
|
r="0.75"
|
||||||
|
transform="rotate(-44.999999)" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.2 KiB |
BIN
src/assets/question.png
Normal file
BIN
src/assets/question.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
BIN
src/assets/question3.png
Normal file
BIN
src/assets/question3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 843 KiB |
BIN
src/assets/questionSolo.png
Normal file
BIN
src/assets/questionSolo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 420 KiB |
140
src/components/Burger.vue
Normal file
140
src/components/Burger.vue
Normal file
@@ -0,0 +1,140 @@
|
|||||||
|
<script setup>
|
||||||
|
import { useBurgerStore } from '@/stores/burger'
|
||||||
|
|
||||||
|
const burger = useBurgerStore();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<button class="button"
|
||||||
|
v-bind:class="{center : !burger.checked}"
|
||||||
|
@click="burger.toggle()">
|
||||||
|
<svg class="hamburger"
|
||||||
|
v-bind:class="{open : burger.checked}"
|
||||||
|
viewBox="0 0 100 100">
|
||||||
|
|
||||||
|
<path
|
||||||
|
class="line-middle"
|
||||||
|
style="fill:none;
|
||||||
|
stroke-linecap:round;
|
||||||
|
stroke-linejoin:round;
|
||||||
|
stroke-miterlimit:4;
|
||||||
|
stroke-dasharray:none;
|
||||||
|
stroke-opacity:1"/>
|
||||||
|
<path
|
||||||
|
class="arrow-down"
|
||||||
|
style="fill:none;
|
||||||
|
stroke-width:6;
|
||||||
|
stroke-linecap:round;
|
||||||
|
stroke-linejoin:round;
|
||||||
|
stroke-miterlimit:4;
|
||||||
|
stroke-dasharray:none;
|
||||||
|
stroke-opacity:1"/>
|
||||||
|
<path
|
||||||
|
class="arrow-up"
|
||||||
|
style="fill:none;
|
||||||
|
stroke-width:6;
|
||||||
|
stroke-linecap:round;
|
||||||
|
stroke-linejoin:round;
|
||||||
|
stroke-miterlimit:4;
|
||||||
|
stroke-dasharray:none;
|
||||||
|
stroke-opacity:1"/>
|
||||||
|
<path
|
||||||
|
class="line-and-door"
|
||||||
|
style="fill:none;
|
||||||
|
stroke-linecap:round;
|
||||||
|
stroke-linejoin:round;
|
||||||
|
stroke-miterlimit:4;
|
||||||
|
stroke-dashoffset: 12 ;
|
||||||
|
stroke-opacity:1"
|
||||||
|
d="m 35 70 v 12 l 38, 0 V 20 H 35 v 12"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<!-- <input type="checkbox" class="burger-toggle">
|
||||||
|
<label for="burger-toggle" class="burger-menu" @click="burger.toggle()">
|
||||||
|
<div class="line"></div>
|
||||||
|
<div class="line"></div>
|
||||||
|
<div class="line"></div>
|
||||||
|
</label> -->
|
||||||
|
<!-- <h1>{{ burger.checked }}</h1> -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "@/style/shared.scss";
|
||||||
|
.button{
|
||||||
|
position:absolute;
|
||||||
|
top: 0.2em;
|
||||||
|
left : -0.5em;
|
||||||
|
width: 4.5em;
|
||||||
|
background-color:transparent;
|
||||||
|
border: none;
|
||||||
|
transition:1s ;
|
||||||
|
z-index : 2;
|
||||||
|
&:hover{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.center {
|
||||||
|
left: calc(50% - 2.25em);
|
||||||
|
transition:1s ;
|
||||||
|
}
|
||||||
|
.line-and-door, .line-middle, .arrow-up, .arrow-down{
|
||||||
|
transition:1s ;
|
||||||
|
stroke-width:10;
|
||||||
|
stroke:$green;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line-and-door{
|
||||||
|
stroke-dashoffset: 12 ;
|
||||||
|
d:path("m 35 70 v 12 l 38, 0 V 20 H 35 v 12");
|
||||||
|
stroke-dasharray: 12 12 38 62 38;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line-middle{
|
||||||
|
d:path("M 73, 50 H 35");
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-up, .arrow-down{
|
||||||
|
d:path("m 42, 50 15, 0");
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger.open{
|
||||||
|
& > .arrow-up {
|
||||||
|
d:path("m 21, 50 15, -9");
|
||||||
|
stroke-width:6;
|
||||||
|
stroke:$green;
|
||||||
|
|
||||||
|
}
|
||||||
|
& > .arrow-down {
|
||||||
|
d:path("m 21, 50 15, 9");
|
||||||
|
stroke-width:6;
|
||||||
|
stroke:$green;
|
||||||
|
}
|
||||||
|
& > .line-middle{
|
||||||
|
d:path("M 65, 50 H 21");
|
||||||
|
stroke-width:6;
|
||||||
|
stroke:$green;
|
||||||
|
}
|
||||||
|
& > .line-and-door{
|
||||||
|
stroke-dashoffset: 0 ;
|
||||||
|
d:path("m 42 70 v 12 l 38, 0 V 20 H 42 v 12");
|
||||||
|
//stroke-dasharray: 12 12 38 62 38;
|
||||||
|
stroke-width:6;
|
||||||
|
stroke-dasharray: 205 ;
|
||||||
|
stroke:$green;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width:$maxWidth){
|
||||||
|
.button{
|
||||||
|
left:calc((50% - 2.25em) - 550px);
|
||||||
|
//transform: rotate(180deg);
|
||||||
|
|
||||||
|
}
|
||||||
|
.button.center{
|
||||||
|
left: calc(50% - 2.25em);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
0
src/components/Button.vue
Normal file
0
src/components/Button.vue
Normal file
302
src/components/Footer.vue
Normal file
302
src/components/Footer.vue
Normal file
@@ -0,0 +1,302 @@
|
|||||||
|
<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:white;
|
||||||
|
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/shared.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>
|
||||||
@@ -1,57 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="hello">
|
|
||||||
<h1>{{ msg }}</h1>
|
|
||||||
<p>
|
|
||||||
For a guide and recipes on how to configure / customize this project,<br>
|
|
||||||
check out the
|
|
||||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
|
||||||
</p>
|
|
||||||
<h3>Installed CLI Plugins</h3>
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
|
||||||
</ul>
|
|
||||||
<h3>Essential Links</h3>
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
|
||||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
|
||||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
|
||||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
|
||||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
|
||||||
</ul>
|
|
||||||
<h3>Ecosystem</h3>
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
|
||||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
|
||||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
|
||||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
|
||||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'HelloWorld',
|
|
||||||
props: {
|
|
||||||
msg: String
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
||||||
<style scoped lang="scss">
|
|
||||||
h3 {
|
|
||||||
margin: 40px 0 0;
|
|
||||||
}
|
|
||||||
ul {
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 10px;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: #42b983;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
370
src/components/Menu.vue
Normal file
370
src/components/Menu.vue
Normal file
@@ -0,0 +1,370 @@
|
|||||||
|
<script setup>
|
||||||
|
import {ref, onMounted} from 'vue'
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
window.addEventListener('scroll', onScroll)
|
||||||
|
|
||||||
|
const allLinks = document.querySelectorAll('a')
|
||||||
|
for (const a of allLinks){
|
||||||
|
a.addEventListener('mouseleave', () => {
|
||||||
|
if (a.classList[1] != 'router-link-exact-active'){
|
||||||
|
a.classList.add('hover-out');
|
||||||
|
a.addEventListener('transitionend', () => {
|
||||||
|
a.classList.remove('hover-out')
|
||||||
|
}, {once : true})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
const onScroll = () => {
|
||||||
|
const menu = document.querySelector(".menu")
|
||||||
|
const menuYPosition = menu.getBoundingClientRect().y
|
||||||
|
|
||||||
|
//console.log(menu)
|
||||||
|
if (menuYPosition <= 0){
|
||||||
|
document.querySelector('.nav-menu').classList.add('sticked')
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
document.querySelector('.nav-menu').classList.remove('sticked')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const menuOpen = ref(false)
|
||||||
|
const liShow = ref(false)
|
||||||
|
const menuIsClosing = ref(false)
|
||||||
|
|
||||||
|
const closeMenu = () => {
|
||||||
|
menuIsClosing.value = true;
|
||||||
|
menuOpen.value = false;
|
||||||
|
|
||||||
|
const sideBarNav = document.querySelector('.nav-menu')
|
||||||
|
sideBarNav.addEventListener('transitionend', () => {
|
||||||
|
liShow.value = false
|
||||||
|
menuIsClosing.value = false;
|
||||||
|
//if menu is reopen during animation, let show all the li :
|
||||||
|
if (menuOpen.value){
|
||||||
|
liShow.value = true
|
||||||
|
}
|
||||||
|
}, {once : true})
|
||||||
|
}
|
||||||
|
|
||||||
|
const toggleMenu = () => {
|
||||||
|
menuOpen.value = !menuOpen.value;
|
||||||
|
if (menuOpen.value){
|
||||||
|
liShow.value = true
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
closeMenu();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<nav class="menu-container">
|
||||||
|
<div class="burger">
|
||||||
|
<button class="button"
|
||||||
|
@click="toggleMenu()"
|
||||||
|
>
|
||||||
|
<svg class="hamburger"
|
||||||
|
v-bind:class="{open : menuOpen}"
|
||||||
|
viewBox="2 0 100 100">
|
||||||
|
<path
|
||||||
|
class="cross"
|
||||||
|
style="fill:none;
|
||||||
|
stroke-linecap:round;
|
||||||
|
stroke-linejoin:round;
|
||||||
|
stroke-opacity:1"
|
||||||
|
d="M 36,21 H 74 L 74,33 55,52 36,71 36,83 H 74 L 74,71 36,33 Z"
|
||||||
|
id="path978"
|
||||||
|
sodipodi:nodetypes="cccccccccc" />
|
||||||
|
<path
|
||||||
|
class="middle"
|
||||||
|
style="fill:none;
|
||||||
|
stroke-linecap:round;
|
||||||
|
stroke-linejoin:bevel;
|
||||||
|
stroke-opacity:1"
|
||||||
|
d="M 36,52 H 74 C 90,52 82,69 77,74 71,80 63,83 55,83 38,83 24,69 24,52 24,35 38,21 55,21 c 17,0 31,14 31,31 0,9 -3,16 -9,22"
|
||||||
|
id="path982"
|
||||||
|
sodipodi:nodetypes="cccssssc" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<ul class="nav-menu"
|
||||||
|
v-bind:class="{open : menuOpen}"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
class=""
|
||||||
|
v-bind:class="{show : liShow, closing : menuIsClosing}"
|
||||||
|
@click="closeMenu()">
|
||||||
|
<router-link
|
||||||
|
:to="{name:'whoAmI'}">
|
||||||
|
Who Am I
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class=""
|
||||||
|
v-bind:class="{show : liShow, closing : menuIsClosing}"
|
||||||
|
@click="closeMenu()">
|
||||||
|
<router-link
|
||||||
|
:to="{name:'technologies'}">
|
||||||
|
Technologies
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class=""
|
||||||
|
v-bind:class="{show : liShow, closing : menuIsClosing}"
|
||||||
|
@click="closeMenu()">
|
||||||
|
<router-link
|
||||||
|
:to="{name:'projects'}">
|
||||||
|
Projects
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class=""
|
||||||
|
v-bind:class="{show : liShow, closing : menuIsClosing}"
|
||||||
|
@click="closeMenu()">
|
||||||
|
<router-link
|
||||||
|
:to="{name:'networks'}">
|
||||||
|
Networks
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
v-bind:class="{show : liShow, closing : menuIsClosing}"
|
||||||
|
@click="closeMenu()">
|
||||||
|
<router-link
|
||||||
|
:to="{name:'contact'}">
|
||||||
|
Contact
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</nav>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import '../style/shared.scss';
|
||||||
|
|
||||||
|
.burger{
|
||||||
|
display: none;
|
||||||
|
opacity:0;
|
||||||
|
transition:0.5s;
|
||||||
|
& .button{
|
||||||
|
width: 3.5em;
|
||||||
|
// height: 4.5em;
|
||||||
|
background-color:$red-light;
|
||||||
|
border: none;
|
||||||
|
transition:1s ;
|
||||||
|
&:hover{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
& .hamburger{
|
||||||
|
& .cross, & .middle {
|
||||||
|
stroke-width:7;
|
||||||
|
transition:1s ;
|
||||||
|
stroke:$white;
|
||||||
|
}
|
||||||
|
& .cross{
|
||||||
|
stroke-dashoffset: 0 ;
|
||||||
|
stroke-dasharray: 0 0 36 80 36 80;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .middle{
|
||||||
|
stroke-dashoffset: 0 ;
|
||||||
|
stroke-dasharray: 36 250;
|
||||||
|
}
|
||||||
|
&.open{
|
||||||
|
& .cross{
|
||||||
|
stroke-width:7;
|
||||||
|
stroke-dashoffset: -61 ;
|
||||||
|
stroke-dasharray: 33 82 33 79;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .middle{
|
||||||
|
stroke-width:7;
|
||||||
|
stroke-dashoffset: -60 ;
|
||||||
|
stroke-dasharray: 270 ;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ul.nav-menu{
|
||||||
|
//z-index: 999;
|
||||||
|
margin-top: 1em;
|
||||||
|
margin-bottom: 1.5em;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
background-color: rgba(0, 0, 0, 0.233);
|
||||||
|
padding:1rem 0.5rem;
|
||||||
|
//overflow: hidden;
|
||||||
|
//transition: 0.5s;
|
||||||
|
&.sticked{
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
a{
|
||||||
|
font-size:1em;
|
||||||
|
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
text-align: center;
|
||||||
|
color : $white;
|
||||||
|
text-decoration: none;
|
||||||
|
&::after{
|
||||||
|
content: "";
|
||||||
|
background-color: $red-light;
|
||||||
|
width: 0%;
|
||||||
|
margin-left:0;
|
||||||
|
height: 4px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover, &.router-link-exact-active{
|
||||||
|
color:$red-light;
|
||||||
|
transition: color 0.25s;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
&.router-link-exact-active{
|
||||||
|
filter: drop-shadow(0 0 4px $red-light);
|
||||||
|
transition: filter 0.3s;
|
||||||
|
}
|
||||||
|
&:hover::after, &.router-link-exact-active::after{
|
||||||
|
width: 100%;
|
||||||
|
//This transition fires on the hover
|
||||||
|
transition: 0.25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.hover-out::after{
|
||||||
|
margin-left:100%;
|
||||||
|
//This transition fires on hover-out class
|
||||||
|
transition:0.5s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
transform: translateY(1.25em);
|
||||||
|
opacity:0;
|
||||||
|
overflow: hidden;
|
||||||
|
@for $i from 1 to 6 {
|
||||||
|
&:nth-child(#{$i}){
|
||||||
|
animation: 250ms theMenu (100 * $i - 0ms) ease forwards;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@media (width < 750px ){
|
||||||
|
nav.menu-container{
|
||||||
|
//border: $white solid 3px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
& .burger{
|
||||||
|
margin-bottom: 1.5em;
|
||||||
|
display: block;
|
||||||
|
position: sticky;
|
||||||
|
top:0;
|
||||||
|
opacity: 0;
|
||||||
|
z-index:9999;
|
||||||
|
animation: burger 0.5s ease-in-out forwards;
|
||||||
|
}
|
||||||
|
& > ul.nav-menu{
|
||||||
|
position:fixed;
|
||||||
|
top:0;
|
||||||
|
bottom:0;
|
||||||
|
|
||||||
|
z-index: 99;
|
||||||
|
right:-250px;
|
||||||
|
transform: translateX(0%);
|
||||||
|
margin-top:0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
width: 250px;
|
||||||
|
background: hsl(0 0% 0% / 0.95);
|
||||||
|
transition: 0.5s ease-out;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
padding-right: 1em;
|
||||||
|
text-align: right;
|
||||||
|
&.open{
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
& > li{
|
||||||
|
display: none;
|
||||||
|
opacity:0;
|
||||||
|
}
|
||||||
|
& > li.show{
|
||||||
|
display: block;
|
||||||
|
transform: translateY(1.25em);
|
||||||
|
@for $i from 1 to 6 {
|
||||||
|
&:nth-child(#{$i}){
|
||||||
|
animation: 250ms theMenu (80 * $i + 0ms) ease-out forwards;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& > li.closing {
|
||||||
|
transform: translateY(0em);
|
||||||
|
opacity: 1;
|
||||||
|
@for $i from 1 to 6 {
|
||||||
|
&:nth-child(#{$i}){
|
||||||
|
//animation in reverse side...
|
||||||
|
animation: 150ms closeMe ( 50ms * (5 - $i)) ease-out forwards;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& > li > a {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@supports (backdrop-filter: blur(0.5rem)){
|
||||||
|
nav.menu-container > ul.nav-menu{
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (height < 650px) and (width < 750px) {
|
||||||
|
div.menu-container .burger{
|
||||||
|
position : fixed;
|
||||||
|
top:0;
|
||||||
|
right:0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes burger {
|
||||||
|
100%{
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes theMenu{
|
||||||
|
100%{
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity:1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes closeMe{
|
||||||
|
100%{
|
||||||
|
opacity:0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes border-hover {
|
||||||
|
0%{
|
||||||
|
border-bottom: none;
|
||||||
|
border-width: 0%;
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
border-width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
145
src/components/Modal.vue
Normal file
145
src/components/Modal.vue
Normal file
@@ -0,0 +1,145 @@
|
|||||||
|
<template>
|
||||||
|
|
||||||
|
<Transition name="modal-animation">
|
||||||
|
<div v-show="modalActive" class="modal">
|
||||||
|
<transition name="modal-frame-animation">
|
||||||
|
<div v-show="modalActive" class="modal-frame">
|
||||||
|
<font-awesome-icon class="close-btn" @click="close" icon="fa-regular fa-circle-xmark" />
|
||||||
|
<h1>{{ title }}</h1>
|
||||||
|
<slot>
|
||||||
|
</slot>
|
||||||
|
<button @click="close" class="button">
|
||||||
|
Fermer
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</div>
|
||||||
|
</Transition>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
//import { defineEmits, defineProps } from 'vue';
|
||||||
|
|
||||||
|
const props = defineProps ({
|
||||||
|
modalActive : Boolean,
|
||||||
|
title: String,
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits(['close']);
|
||||||
|
|
||||||
|
const close = () => {
|
||||||
|
emit("close");
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import '@/style/shared.scss';
|
||||||
|
/*Modale annimation*/
|
||||||
|
|
||||||
|
.modal-animation-enter-from,
|
||||||
|
.modal-animation-leave-to{
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-animation-enter-active{
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
.modal-animation-leave-active{
|
||||||
|
transition: opacity 0.3s ease 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Modal inner animation*/
|
||||||
|
|
||||||
|
.modal-frame-animation-enter-from, .modal-frame-animation-leave-to{
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0);
|
||||||
|
}
|
||||||
|
.modal-frame-animation-enter-active, .modal-frame-animation-leave-active{
|
||||||
|
transition: all 0.3s cubic-bezier(0.52, -0.02, 0.19, 1.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*modal mise en forme*/
|
||||||
|
.modal{
|
||||||
|
position:fixed;
|
||||||
|
top:0;
|
||||||
|
left: 00;
|
||||||
|
background: rgba(140, 140, 140, 0.75);
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.modal-frame{
|
||||||
|
//border : dashed red 2px;
|
||||||
|
position: relative;
|
||||||
|
width: 80%;
|
||||||
|
min-width: 230px;
|
||||||
|
max-width: 350px;
|
||||||
|
max-height: 80vh;
|
||||||
|
overflow: visible;
|
||||||
|
|
||||||
|
background:#e5e5e5;
|
||||||
|
border-top-left-radius: 1em;
|
||||||
|
border-bottom-left-radius: 1em;
|
||||||
|
border-bottom-right-radius: 1em;
|
||||||
|
padding: 1em;
|
||||||
|
padding-top:0em;
|
||||||
|
margin: 3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1{
|
||||||
|
margin-top:0.5em;
|
||||||
|
font-size: 1.5em;
|
||||||
|
//border:dashed 2px red;
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-btn{
|
||||||
|
|
||||||
|
margin: auto;
|
||||||
|
position: absolute;
|
||||||
|
right: -17px;
|
||||||
|
top: -17px;
|
||||||
|
text-align: center;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0.75em;
|
||||||
|
padding: 0.25em;
|
||||||
|
background-color: #e5e5e5;
|
||||||
|
color: $red;
|
||||||
|
font-size: 1.7em;
|
||||||
|
transition: color 0.5s ease;
|
||||||
|
&:hover{
|
||||||
|
color: lighten($red, 15%);
|
||||||
|
cursor:pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.modal-content{
|
||||||
|
//border: 2px dashed red;
|
||||||
|
max-height: calc(80vh - 7.5em);
|
||||||
|
overflow-y: auto;
|
||||||
|
//FireFox
|
||||||
|
scrollbar-width: none;
|
||||||
|
//Edge
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
}
|
||||||
|
.button{
|
||||||
|
border-radius: 0.5em;
|
||||||
|
margin:0.5em auto;
|
||||||
|
display: block;
|
||||||
|
padding: 0.4em 0.75em;
|
||||||
|
border:none;
|
||||||
|
color:$red;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 600;
|
||||||
|
background-color: $green;
|
||||||
|
outline: $red;
|
||||||
|
outline-style: solid;
|
||||||
|
outline-offset: -5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
135
src/components/Name.vue
Normal file
135
src/components/Name.vue
Normal file
@@ -0,0 +1,135 @@
|
|||||||
|
<script setup>
|
||||||
|
//import { onMounted } from 'vue';
|
||||||
|
import { useBurgerStore } from '@/stores/burger';
|
||||||
|
const burger = useBurgerStore()
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="header">
|
||||||
|
<div class = "name">
|
||||||
|
<h1 class="spans">
|
||||||
|
<div class="first-name">
|
||||||
|
<span class="r-letter">R</span>
|
||||||
|
<span>a</span>
|
||||||
|
<span>f</span>
|
||||||
|
<span>f</span>
|
||||||
|
<span class="i-letter">i</span>
|
||||||
|
</div>
|
||||||
|
<div class="last-name">
|
||||||
|
<span>A</span>
|
||||||
|
<span>l</span>
|
||||||
|
<span>e</span>
|
||||||
|
<span>x</span>
|
||||||
|
<span>a</span>
|
||||||
|
<span>n</span>
|
||||||
|
<span>i</span>
|
||||||
|
<span>a</span>
|
||||||
|
<span>n</span>
|
||||||
|
</div>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<div class="come-in">
|
||||||
|
<h2>
|
||||||
|
I'm a web developer
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "@/style/shared.scss";
|
||||||
|
|
||||||
|
.name{
|
||||||
|
display:flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: center;
|
||||||
|
margin:0 2.4rem;
|
||||||
|
|
||||||
|
// border : #f0f solid 1px;
|
||||||
|
& h1{
|
||||||
|
font-size: 2.7rem;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
position :relative;
|
||||||
|
color: $page-title;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-top: 0.5em;
|
||||||
|
padding: 0em ;
|
||||||
|
// border : #f0f solid 1px;
|
||||||
|
|
||||||
|
animation: title-h1 1000ms cubic-bezier(0.2, 0.9, 0.44, 1);
|
||||||
|
& div {
|
||||||
|
display:flex;
|
||||||
|
margin:0;
|
||||||
|
// border : #f0f solid 1px;
|
||||||
|
}
|
||||||
|
& span{
|
||||||
|
transform: rotateY(0deg);
|
||||||
|
animation: title-spans 1500ms;
|
||||||
|
}
|
||||||
|
.i-letter{
|
||||||
|
margin-right: 1ch ;
|
||||||
|
}
|
||||||
|
.r-letter{
|
||||||
|
margin:0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.come-in, .name{
|
||||||
|
overflow:hidden;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
margin: 0.5em 3em 0.5em 1em;
|
||||||
|
top:100px;
|
||||||
|
position: relative;
|
||||||
|
font-size:1.7rem;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: right;
|
||||||
|
color:$white;
|
||||||
|
animation: 600ms subtitle 300ms cubic-bezier(.55,.01,.44,1) forwards;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@keyframes title-h1{
|
||||||
|
0%{
|
||||||
|
margin-top: 1.6em
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
@keyframes title-spans{
|
||||||
|
0% {
|
||||||
|
transform: rotateY(360deg);
|
||||||
|
// color: $red;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotateY(0deg);
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes subtitle{
|
||||||
|
|
||||||
|
100% {
|
||||||
|
top:0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 320px){
|
||||||
|
.name{
|
||||||
|
margin : 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 520px){
|
||||||
|
.name h1 .r-letter{
|
||||||
|
margin-left:2ch;
|
||||||
|
}
|
||||||
|
.name h1 .i-letter{
|
||||||
|
margin-right:2ch;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
1
src/ici.txt
Normal file
1
src/ici.txt
Normal file
@@ -0,0 +1 @@
|
|||||||
|
file:///home/raffi/Images/Images/MaPhoto.jpg
|
||||||
20
src/main.js
20
src/main.js
@@ -1,4 +1,22 @@
|
|||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue'
|
||||||
|
import './reset.css'
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
import { createPinia } from 'pinia'
|
||||||
|
|
||||||
createApp(App).mount('#app')
|
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||||
|
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||||
|
import { faCircleXmark } from '@fortawesome/free-regular-svg-icons'
|
||||||
|
|
||||||
|
library.add( faCircleXmark )
|
||||||
|
|
||||||
|
|
||||||
|
const pinia = createPinia()
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
createApp(App)
|
||||||
|
.use(router)
|
||||||
|
.use(pinia)
|
||||||
|
.component('font-awesome-icon', FontAwesomeIcon)
|
||||||
|
.mount('#app')
|
||||||
|
|||||||
54
src/reset.css
Normal file
54
src/reset.css
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
/* http://meyerweb.com/eric/tools/css/reset/
|
||||||
|
v2.0 | 20110126
|
||||||
|
License: none (public domain)
|
||||||
|
*/
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::after,
|
||||||
|
*::before{
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body, div, span, applet, object, iframe,
|
||||||
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||||
|
a, abbr, acronym, address, big, cite, code,
|
||||||
|
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||||
|
small, strike, strong, sub, sup, tt, var,
|
||||||
|
b, u, i, center,
|
||||||
|
dl, dt, dd, ol, ul, li,
|
||||||
|
fieldset, form, label, legend,
|
||||||
|
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||||
|
article, aside, canvas, details, embed,
|
||||||
|
figure, figcaption, footer, header, hgroup,
|
||||||
|
menu, nav, output, ruby, section, summary,
|
||||||
|
time, mark, audio, video {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
font-size: 100%;
|
||||||
|
font: inherit;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
/* HTML5 display-role reset for older browsers */
|
||||||
|
article, aside, details, figcaption, figure,
|
||||||
|
footer, header, hgroup, menu, nav, section {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
ol, ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
blockquote, q {
|
||||||
|
quotes: none;
|
||||||
|
}
|
||||||
|
blockquote:before, blockquote:after,
|
||||||
|
q:before, q:after {
|
||||||
|
content: '';
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
53
src/router/index.js
Executable file
53
src/router/index.js
Executable file
@@ -0,0 +1,53 @@
|
|||||||
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
|
||||||
|
const page = {
|
||||||
|
template:'<div>Je Sais Pas trop quoi</div>'
|
||||||
|
}
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'home',
|
||||||
|
component: () => import('@/views/Index.vue')
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
path: '/footer',
|
||||||
|
name: 'footer',
|
||||||
|
component: () => import('@/components/Footer.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/whoAmI',
|
||||||
|
name: 'whoAmI',
|
||||||
|
component: () => import('@/views/WhoAmI.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/technologies',
|
||||||
|
name: 'technologies',
|
||||||
|
component: () => import('@/views/Technologies.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/projects',
|
||||||
|
name: 'projects',
|
||||||
|
component: () => import('@/views/Projects.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/networks',
|
||||||
|
name: 'networks',
|
||||||
|
component: () => import('@/views/Networks.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/contact',
|
||||||
|
name: 'contact',
|
||||||
|
component: () => import('@/views/Contact.vue')
|
||||||
|
},
|
||||||
|
|
||||||
|
]
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(),
|
||||||
|
routes
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
40
src/services/form.js
Normal file
40
src/services/form.js
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
export const formService =
|
||||||
|
{
|
||||||
|
// 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 : "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
|
||||||
|
async sendMessage(token, payload)
|
||||||
|
{
|
||||||
|
//console.log(token, payload);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const response = await axios.post(
|
||||||
|
this.base_url + "bo-portfolio/v1/submitForm",
|
||||||
|
{
|
||||||
|
token: token,
|
||||||
|
json: payload
|
||||||
|
},
|
||||||
|
|
||||||
|
).catch( function() {
|
||||||
|
return { data : null };
|
||||||
|
});
|
||||||
|
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']}`,
|
||||||
|
// })
|
||||||
|
// },
|
||||||
36
src/stores/burger.js
Normal file
36
src/stores/burger.js
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
import { defineStore } from 'pinia'
|
||||||
|
import router from '@/router'
|
||||||
|
|
||||||
|
export const useBurgerStore = defineStore('Burger', {
|
||||||
|
state: () => ({
|
||||||
|
checked: false,
|
||||||
|
}),
|
||||||
|
|
||||||
|
actions:
|
||||||
|
{
|
||||||
|
toggle(){
|
||||||
|
if (this.checked){
|
||||||
|
this.unCheck()
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
this.check()
|
||||||
|
}
|
||||||
|
|
||||||
|
//console.log("checked by toggle ? : " + this.checked)
|
||||||
|
if (this.checked){
|
||||||
|
router.push({name:'whoAmI'})
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
router.push({name:'home'})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
unCheck(){
|
||||||
|
this.checked = false;
|
||||||
|
//console.log("checked ? : " + this.checked)
|
||||||
|
},
|
||||||
|
check(){
|
||||||
|
this.checked = true;
|
||||||
|
//console.log("checked ? : " + this.checked)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
34
src/stores/cards.js
Normal file
34
src/stores/cards.js
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
import { defineStore } from 'pinia'
|
||||||
|
|
||||||
|
export const useCardsStore = defineStore('Cards', {
|
||||||
|
state: () => ({
|
||||||
|
card1: false,
|
||||||
|
card2: false,
|
||||||
|
card3: false,
|
||||||
|
card4: false,
|
||||||
|
}),
|
||||||
|
|
||||||
|
actions:
|
||||||
|
{
|
||||||
|
reset(){
|
||||||
|
this.card1 = false;
|
||||||
|
this.card2 = false;
|
||||||
|
this.card3 = false;
|
||||||
|
this.card4 = false;
|
||||||
|
|
||||||
|
},
|
||||||
|
toggleCard1(){
|
||||||
|
this.card1 = true;
|
||||||
|
},
|
||||||
|
toggleCard2(){
|
||||||
|
this.card2 = true;
|
||||||
|
},
|
||||||
|
toggleCard3(){
|
||||||
|
this.card3 = true;
|
||||||
|
},
|
||||||
|
toggleCard4(){
|
||||||
|
this.card4 = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
25
src/stores/menu.js
Normal file
25
src/stores/menu.js
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
import { defineStore } from 'pinia'
|
||||||
|
|
||||||
|
export const useMenuStore = defineStore('menu', {
|
||||||
|
state: () => ({
|
||||||
|
whoAmI: true,
|
||||||
|
technologies: false,
|
||||||
|
projects: false,
|
||||||
|
networks: false,
|
||||||
|
contact: false,
|
||||||
|
}),
|
||||||
|
|
||||||
|
actions:
|
||||||
|
{
|
||||||
|
selected(event){
|
||||||
|
this.whoAmI = false
|
||||||
|
this.technologies = false
|
||||||
|
this.projects = false
|
||||||
|
this.networks = false
|
||||||
|
this.contact = false
|
||||||
|
|
||||||
|
this[event.currentTarget.dataset.name] = true
|
||||||
|
|
||||||
|
},
|
||||||
|
}
|
||||||
|
})
|
||||||
15
src/style/shared.scss
Normal file
15
src/style/shared.scss
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
$body-bg:rgb(206, 206, 206);
|
||||||
|
$page-bg:#3D405B;
|
||||||
|
$page-bg1:#999;
|
||||||
|
|
||||||
|
$red:rgba(141, 0, 0, 1);
|
||||||
|
$red-light: #E07A5F;
|
||||||
|
$red-light-transparent: #e07b5fe9;
|
||||||
|
$white:#F4F1DE;
|
||||||
|
$green:#A5E6BA;
|
||||||
|
$page-title: #F2CC8F;
|
||||||
|
|
||||||
|
$font-color:$white;
|
||||||
|
|
||||||
|
$maxWidth: 1200px;
|
||||||
|
$imageWidth: 100%;
|
||||||
262
src/views/Contact.vue
Normal file
262
src/views/Contact.vue
Normal file
@@ -0,0 +1,262 @@
|
|||||||
|
<script setup>
|
||||||
|
import { useBurgerStore } from '@/stores/burger'
|
||||||
|
import Modal from '@/components/Modal.vue';
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
import { formService } from '@/services/form';
|
||||||
|
//import { badge } from 'fontawesome';
|
||||||
|
onMounted(() => {
|
||||||
|
burger.check()
|
||||||
|
|
||||||
|
})
|
||||||
|
const burger = useBurgerStore();
|
||||||
|
|
||||||
|
const name = ref('');
|
||||||
|
const coordinates = ref('');
|
||||||
|
const company = ref('');
|
||||||
|
const content = ref('');
|
||||||
|
const awaiting = ref(false);
|
||||||
|
const errors = ref({
|
||||||
|
name : false,
|
||||||
|
coordinates : false,
|
||||||
|
company: false,
|
||||||
|
content : false,
|
||||||
|
database : false
|
||||||
|
});
|
||||||
|
|
||||||
|
const modalActive = ref(false)
|
||||||
|
const toggleModal = () => {
|
||||||
|
modalActive.value = ! modalActive.value
|
||||||
|
}
|
||||||
|
const onSubmit = () => {
|
||||||
|
//document.getElementById("demo-form").submit();
|
||||||
|
// initializing forms erors :
|
||||||
|
errors.value = {
|
||||||
|
name : false,
|
||||||
|
coordinates : false,
|
||||||
|
company: false,
|
||||||
|
content : false
|
||||||
|
};
|
||||||
|
|
||||||
|
// initializing spinner
|
||||||
|
awaiting.value = true;
|
||||||
|
|
||||||
|
// checking errors
|
||||||
|
errors.value.name = (name.value === '')
|
||||||
|
errors.value.coordinates = (coordinates.value === '')
|
||||||
|
errors.value.company = (company.value === '')
|
||||||
|
errors.value.content = (content.value === '')
|
||||||
|
|
||||||
|
// send the form...
|
||||||
|
if (!errors.value.name && !errors.value.coordinates && !errors.value.company && !errors.value.content){
|
||||||
|
const payload = {
|
||||||
|
'name' : name.value,
|
||||||
|
'coordinates' : coordinates.value,
|
||||||
|
'company' : company.value,
|
||||||
|
'content' : content.value
|
||||||
|
}
|
||||||
|
grecaptcha.execute('6LemkQ8mAAAAAL-l-wG8W9VV73xrL5VeUO1FiAeW',
|
||||||
|
{action: 'submit'})
|
||||||
|
.then( async (token) => {
|
||||||
|
const response = await formService.sendMessage(token, payload)
|
||||||
|
//console.log(response)
|
||||||
|
if (response === true){
|
||||||
|
awaiting.value = false;
|
||||||
|
name.value = '';
|
||||||
|
coordinates.value = '';
|
||||||
|
company.value = '';
|
||||||
|
content.value = '';
|
||||||
|
toggleModal();
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
errors.value.database = response;
|
||||||
|
awaiting.value = false;
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
//... or not
|
||||||
|
else{
|
||||||
|
awaiting.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<div class="title">
|
||||||
|
<div class="logo">
|
||||||
|
</div>
|
||||||
|
<h3><span>contact</span></h3>
|
||||||
|
</div>
|
||||||
|
<div class="form">
|
||||||
|
<p>Please full up the form to keep in touch !</p>
|
||||||
|
<form @submit.prevent="onSubmit()">
|
||||||
|
<div class="form-item">
|
||||||
|
<label class="first" for="name">Your name</label>
|
||||||
|
<input v-model="name" id="name" type="text" placeholder="Name">
|
||||||
|
<div class="error" v-if="errors.name">
|
||||||
|
Please enter your name
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-item">
|
||||||
|
<label for="coordinates">Your coordinates</label>
|
||||||
|
<input v-model="coordinates" id="coordinates" type="text" placeholder="A phone or a mail (or both)">
|
||||||
|
<div class="error" v-if="errors.coordinates">
|
||||||
|
Please enter some coordinates
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-item">
|
||||||
|
<label for="company">Your company</label>
|
||||||
|
<input v-model="company" id="company" type="text" placeholder="Company ">
|
||||||
|
<div class="error" v-if="errors.company">
|
||||||
|
Please enter your company
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-item">
|
||||||
|
<label for="message-content">Your message</label>
|
||||||
|
<textarea v-model="content" id="message-content" rows="5" cols="22" placeholder="Message"></textarea>
|
||||||
|
<div class="error" v-if="errors.content">
|
||||||
|
Please write something
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="small">
|
||||||
|
This site is protected by reCAPTCHA. The Google <a href="https://policies.google.com/privacy" target="_blank">Privacy Policy</a> and <a href="https://policies.google.com/privacy" target="_blank">Terms of Service</a> apply.
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
class="g-recaptcha"
|
||||||
|
data-sitekey="6LemkQ8mAAAAAL-l-wG8W9VV73xrL5VeUO1FiAeW"
|
||||||
|
:disabled="awaiting || name === '' || coordinates === '' || company === '' || content === ''"
|
||||||
|
>
|
||||||
|
<div v-if="!awaiting">
|
||||||
|
Send !
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
Sending
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
<div class="error" v-if="errors.database">
|
||||||
|
There were a problem with backend. Message :
|
||||||
|
{{ errors.database }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Modal @close="toggleModal" :modalActive="modalActive">
|
||||||
|
<div class="modal-content">
|
||||||
|
<h1 class="modal-title">Merci !</h1>
|
||||||
|
<p class="modal-p">Votre message a bien été envoyé !</p>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import '../style/shared.scss';
|
||||||
|
.modal-content{
|
||||||
|
& > .modal-title{
|
||||||
|
text-align: center;
|
||||||
|
font-size : 1.5em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > .modal-p{
|
||||||
|
text-indent: 0;
|
||||||
|
color:black;
|
||||||
|
font-size : 1.25rem;
|
||||||
|
text-align: center;
|
||||||
|
margin: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content{
|
||||||
|
& > .title {
|
||||||
|
& .logo{
|
||||||
|
background-image: url('../assets/mailbox.svg');
|
||||||
|
background-size: 85%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& form{
|
||||||
|
border: solid 2px white;
|
||||||
|
margin: auto;
|
||||||
|
padding: 1em;
|
||||||
|
width: clamp(15em, 95%, 20em);
|
||||||
|
//width : 50%;
|
||||||
|
//border: solid 2px white;
|
||||||
|
margin-top: 1.25em;
|
||||||
|
display:flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
& .form-item{
|
||||||
|
display:flex;
|
||||||
|
flex-direction: column;
|
||||||
|
& label{
|
||||||
|
margin-top: 1em;
|
||||||
|
margin-left: 1em;
|
||||||
|
margin-bottom: 0.25em;
|
||||||
|
}
|
||||||
|
& label.first{
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
& input, textarea{
|
||||||
|
font-size: 1.25em;
|
||||||
|
padding: 0.25em 0.25em;
|
||||||
|
width: clamp(10em, 100%, 20em);
|
||||||
|
margin:auto;
|
||||||
|
}
|
||||||
|
& textarea{
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& p.small{
|
||||||
|
text-indent: 0;
|
||||||
|
font-size : 0.75em;
|
||||||
|
padding: 1em 0.5em;
|
||||||
|
& > a{
|
||||||
|
color: rgb(169, 162, 255);
|
||||||
|
text-decoration: none;
|
||||||
|
transition : 0.25s;
|
||||||
|
&:hover{
|
||||||
|
text-decoration: underline;
|
||||||
|
color: lighten(rgb(169, 162, 255), 5%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& button{
|
||||||
|
margin: 0.5em;
|
||||||
|
border: none;
|
||||||
|
//border-radius: 10px;
|
||||||
|
font-size:1.5rem;
|
||||||
|
background-color: white;
|
||||||
|
outline : 3px;
|
||||||
|
outline-style: solid;
|
||||||
|
outline-offset: -5px;
|
||||||
|
outline-color: black;
|
||||||
|
color:black;
|
||||||
|
padding: 0.3em 0.9em;
|
||||||
|
transition:0.3s;
|
||||||
|
&:hover{
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: darken(white, 15%);
|
||||||
|
}
|
||||||
|
&:disabled{
|
||||||
|
background-color: rgb(165, 165, 165);
|
||||||
|
&:hover{
|
||||||
|
cursor : default;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.error{
|
||||||
|
color: $red-light;
|
||||||
|
text-align: center;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
font-size: 1.25em;
|
||||||
|
}
|
||||||
|
.grecaptcha-badge{
|
||||||
|
transition : 0.5s;
|
||||||
|
opacity : 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
205
src/views/Index.vue
Normal file
205
src/views/Index.vue
Normal file
@@ -0,0 +1,205 @@
|
|||||||
|
<script setup>
|
||||||
|
import { useBurgerStore } from '@/stores/burger'
|
||||||
|
const burger = useBurgerStore();
|
||||||
|
|
||||||
|
import { onMounted } from 'vue';
|
||||||
|
onMounted(()=>{
|
||||||
|
burger.unCheck()
|
||||||
|
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div v-if="!burger.checked">
|
||||||
|
<div class = "name">
|
||||||
|
<h1 class = "spans">
|
||||||
|
<div class="first-name">
|
||||||
|
<div><span class="r-letter">R</span></div>
|
||||||
|
<div><span>a</span></div>
|
||||||
|
<div><span>f</span></div>
|
||||||
|
<div><span>f</span></div>
|
||||||
|
<div><span class="i-letter">i</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="last-name">
|
||||||
|
<span>A</span>
|
||||||
|
<span>l</span>
|
||||||
|
<span>e</span>
|
||||||
|
<span>x</span>
|
||||||
|
<span>a</span>
|
||||||
|
<span>n</span>
|
||||||
|
<span>i</span>
|
||||||
|
<span>a</span>
|
||||||
|
<span>n</span>
|
||||||
|
</div>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<div class="come-in">
|
||||||
|
<h2>
|
||||||
|
Come in to watch my portfolio !
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div class="face"
|
||||||
|
@click="burger.toggle()">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "@/style/shared.scss";
|
||||||
|
|
||||||
|
.name{
|
||||||
|
display:flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: center;
|
||||||
|
margin:0 2.4rem;
|
||||||
|
// border : #f0f solid 1px;
|
||||||
|
& h1{
|
||||||
|
opacity: 1;
|
||||||
|
font-size: 2.7rem;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
position :relative;
|
||||||
|
color: $red-light;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-top: 1.6em;
|
||||||
|
padding: 0.1em ;
|
||||||
|
// border : #f0f solid 1px;
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
display:flex;
|
||||||
|
margin:0;
|
||||||
|
// border : #f0f solid 1px;
|
||||||
|
&.last-name{
|
||||||
|
opacity: 1;
|
||||||
|
@for $i from 1 to 10 {
|
||||||
|
& span:nth-child(#{$i}){
|
||||||
|
position : relative;
|
||||||
|
transform:rotateY(90deg);
|
||||||
|
animation-duration: 1000ms;
|
||||||
|
animation-name: title-last-name;
|
||||||
|
animation-timing-function: cubic-bezier(0.2, 0.9, 0.44, 1);
|
||||||
|
animation-delay: $i*50 + 300ms;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.first-name{
|
||||||
|
& > div{
|
||||||
|
overflow: hidden;
|
||||||
|
& > span{
|
||||||
|
position : relative;
|
||||||
|
right:0ch;
|
||||||
|
animation: title-name 1000ms cubic-bezier(0.2, 0.9, 0.44, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.i-letter{
|
||||||
|
margin-right: 1ch ;
|
||||||
|
}
|
||||||
|
.r-letter{
|
||||||
|
margin:0;
|
||||||
|
}
|
||||||
|
.come-in, .name{
|
||||||
|
overflow:hidden;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
margin: 0.5em 3em 0.5em 1em;
|
||||||
|
position: relative;
|
||||||
|
top:150px;
|
||||||
|
font-size:1.7rem;
|
||||||
|
text-align: right;
|
||||||
|
color:$white;
|
||||||
|
animation: 1200ms subtitle 500ms cubic-bezier(0.2, 0.9, 0.44, 1) forwards;
|
||||||
|
|
||||||
|
}
|
||||||
|
.face{
|
||||||
|
text-align: center;
|
||||||
|
aspect-ratio: 1/1;
|
||||||
|
width : 80%;
|
||||||
|
max-width:450px;
|
||||||
|
opacity : 0;
|
||||||
|
animation: 1400ms image_appear 1200ms ease forwards;
|
||||||
|
background-color: $green;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin:2em auto 0 auto;
|
||||||
|
border: 5px white solid;
|
||||||
|
background-size: 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
background-image: url('../assets/meme.png');
|
||||||
|
&:hover{
|
||||||
|
background-image: url('../assets/memeWink.png');
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
&::after{
|
||||||
|
content: "";
|
||||||
|
background-image: url('../assets/memeWink.png');
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes title-name{
|
||||||
|
0% {
|
||||||
|
right:1ch;
|
||||||
|
//opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
right : 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes title-last-name{
|
||||||
|
0%{
|
||||||
|
transform : rotateX(270deg);
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
transform : rotateX(0deg);
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes subtitle{
|
||||||
|
0% {
|
||||||
|
top:150px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
top:0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes image_appear{
|
||||||
|
0%{
|
||||||
|
opacity : 0;
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 320px){
|
||||||
|
.name{
|
||||||
|
margin : 0;
|
||||||
|
}
|
||||||
|
.image{
|
||||||
|
//width:250px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 321px) and (max-width: 520px){
|
||||||
|
.name h1 .r-letter{
|
||||||
|
margin-left:2ch;
|
||||||
|
//color:blue;
|
||||||
|
}
|
||||||
|
.name h1 .i-letter{
|
||||||
|
margin-right:2ch;
|
||||||
|
//color:blue;
|
||||||
|
}
|
||||||
|
.image{
|
||||||
|
//width: 350px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
109
src/views/Networks.vue
Normal file
109
src/views/Networks.vue
Normal file
@@ -0,0 +1,109 @@
|
|||||||
|
<script setup>
|
||||||
|
import { onMounted } from 'vue';
|
||||||
|
import { useBurgerStore } from '@/stores/burger'
|
||||||
|
const burger = useBurgerStore();
|
||||||
|
onMounted(() => {
|
||||||
|
burger.check();
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="content">
|
||||||
|
<div class="title">
|
||||||
|
<div class="logo"></div>
|
||||||
|
<h3>Networks</h3>
|
||||||
|
</div>
|
||||||
|
<div class="list github">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" width="2em">
|
||||||
|
<path
|
||||||
|
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/>
|
||||||
|
</svg>
|
||||||
|
<p>Github page and projects: <a href="https://www.github.com/Raffiskender" target="_blank">github.com/Raffiskender</a> </p>
|
||||||
|
</div>
|
||||||
|
<div class="list linkedin">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="2em">
|
||||||
|
<path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>
|
||||||
|
<p>A Linkedin profil: <a href="https://fr.linkedin.com/in/raffi-alexanian" target="_blank">fr.linkedin.com/in/raffi-alexanian</a> </p>
|
||||||
|
</div>
|
||||||
|
<div class="list cv">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="2em">
|
||||||
|
<path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/>
|
||||||
|
</svg>
|
||||||
|
<p>And also a CV (in french) <a href="https://cv.raffiskender.com" target="_blank">https://cv.raffiskender.com</a> </p>
|
||||||
|
</div>
|
||||||
|
<p>And that should be fine !</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import '../style/shared.scss';
|
||||||
|
.content{
|
||||||
|
& > .title {
|
||||||
|
& .logo{
|
||||||
|
background-image: url('../assets/networks.svg');
|
||||||
|
background-size: 80%;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& .list{
|
||||||
|
display: flex;
|
||||||
|
justify-content: left;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 1.25em;
|
||||||
|
padding-bottom: 1em;
|
||||||
|
&.github{
|
||||||
|
padding-top: 2em;
|
||||||
|
}
|
||||||
|
& svg{
|
||||||
|
fill: $page-title;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > p{
|
||||||
|
color : $white;
|
||||||
|
opacity: 1;
|
||||||
|
animation: text 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
|
||||||
|
padding-left:1em;
|
||||||
|
text-indent:0;
|
||||||
|
width: 80%;
|
||||||
|
word-wrap: break-word;
|
||||||
|
//border: white 2px solid;
|
||||||
|
& a{
|
||||||
|
color:inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@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 .list{
|
||||||
|
padding-left: 3em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
33
src/views/Projects.vue
Normal file
33
src/views/Projects.vue
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
<script setup>
|
||||||
|
import { onMounted } from 'vue';
|
||||||
|
import { useBurgerStore } from '@/stores/burger'
|
||||||
|
const burger = useBurgerStore();
|
||||||
|
onMounted(() => {
|
||||||
|
burger.check();
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="content">
|
||||||
|
<div class="title">
|
||||||
|
<div class="logo">
|
||||||
|
</div>
|
||||||
|
<h3><span>Projects</span></h3>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
here are some projects I made.</p>
|
||||||
|
<p>And bla and bla and bla</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.content{
|
||||||
|
& > .title {
|
||||||
|
& .logo{
|
||||||
|
background-image: url('../assets/maison.svg');
|
||||||
|
background-size: 70%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
96
src/views/Technologies.vue
Normal file
96
src/views/Technologies.vue
Normal file
@@ -0,0 +1,96 @@
|
|||||||
|
<script setup>
|
||||||
|
import { onMounted } from 'vue';
|
||||||
|
import { useBurgerStore } from '@/stores/burger'
|
||||||
|
const burger = useBurgerStore();
|
||||||
|
onMounted(() => {
|
||||||
|
burger.check();
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div class="content">
|
||||||
|
<div class="title">
|
||||||
|
<div class="logo">
|
||||||
|
</div>
|
||||||
|
<h3><span>technos</span></h3>
|
||||||
|
</div>
|
||||||
|
<p class="first">Technologies are just like legos. I mean, it's a variety of bricks you can put together to build an all. Here are certains languages I feel confortable with:</p>
|
||||||
|
<ul>
|
||||||
|
<li>html</li>
|
||||||
|
<li>css</li>
|
||||||
|
<li>js</li>
|
||||||
|
<li>php (this old guy)</li>
|
||||||
|
</ul>
|
||||||
|
<p>And also some other stuff:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Vue.js</li>
|
||||||
|
<li>Worpress</li>
|
||||||
|
<li>Yarn</li>
|
||||||
|
<li>npm</li>
|
||||||
|
<li>Google API console</li>
|
||||||
|
<li>Figma</li>
|
||||||
|
<li>Linux systems</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p>As you may suppose I do not stop learning, and this list is not exhaustive.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import '../style/shared.scss';
|
||||||
|
|
||||||
|
.content{
|
||||||
|
& > .title {
|
||||||
|
& .logo{
|
||||||
|
background-image: url('../assets/legos_vrac_solo2.png');
|
||||||
|
background-size: 120%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& > p, & li{
|
||||||
|
//color : $white;
|
||||||
|
//opacity : 0;
|
||||||
|
line-height: 1.25em;
|
||||||
|
// animation: text 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
& > p{
|
||||||
|
padding: 1em 1em 0 1em;
|
||||||
|
&.first{
|
||||||
|
padding-top: 2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& ul{
|
||||||
|
padding: 0.5em 1em 0 3em;
|
||||||
|
}
|
||||||
|
& li::before{
|
||||||
|
margin-left: 1em;
|
||||||
|
content: "• ";
|
||||||
|
word-spacing: 0.5em;
|
||||||
|
color: $green;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes text{
|
||||||
|
0%{
|
||||||
|
opacity : 0;
|
||||||
|
}
|
||||||
|
33%{
|
||||||
|
opacity : 0;
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
opacity:1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes image_show{
|
||||||
|
0%{
|
||||||
|
opacity: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
33%{
|
||||||
|
opacity: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
71
src/views/WhoAmI.vue
Normal file
71
src/views/WhoAmI.vue
Normal file
@@ -0,0 +1,71 @@
|
|||||||
|
<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>Who Am I ?</h3>
|
||||||
|
</div>
|
||||||
|
<p>As you guessed it, my name is Raffi. I've been working 20 years long in the beutyfull world of maintenance where I learnt a lot about logic. I've learnt several programmation languages during my life, for proffesionnal purposes... And also for fun. Here are some of them : Vidjeo Designer, Twido Soft, Zelio Soft, PL7... Also when Iwas young : Turbo Pascal, Qbasic, and more recently a little bit of C (during confinement).</p>
|
||||||
|
<p>in 2022 I've followed a 5 months training courses to learn more about web programmation. So I learnt html, css, js, wordPress and Vue.js, php, sql, database management and so much more ! After that I worked on my own to go deeper in wordpress api-rest, to understand what can be done with Vue etc. Now I feel ready to go !</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import '../style/shared.scss';
|
||||||
|
|
||||||
|
|
||||||
|
.content{
|
||||||
|
& .title{
|
||||||
|
& > .logo{
|
||||||
|
background-image: url('../assets/questionSolo.png');
|
||||||
|
background-size: 80%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& > p{
|
||||||
|
|
||||||
|
color : $white;
|
||||||
|
opacity: 1;
|
||||||
|
padding:2em;
|
||||||
|
line-height: 1.25em;
|
||||||
|
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>
|
||||||
@@ -1,4 +1,12 @@
|
|||||||
const { defineConfig } = require('@vue/cli-service')
|
const { defineConfig } = require('@vue/cli-service')
|
||||||
module.exports = defineConfig({
|
module.exports = defineConfig({
|
||||||
transpileDependencies: true
|
transpileDependencies: true,
|
||||||
|
chainWebpack: config => {
|
||||||
|
config
|
||||||
|
.plugin('html')
|
||||||
|
.tap(args => {
|
||||||
|
args[0].title = "Raffi's Portfolio";
|
||||||
|
return args;
|
||||||
|
})
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user