Compare commits
10 Commits
3be7a4adfd
...
780f5e86c6
| Author | SHA1 | Date | |
|---|---|---|---|
| 780f5e86c6 | |||
| 3325eaa118 | |||
| bd513b9fb4 | |||
| 69b69d32e6 | |||
| 87821a5d7a | |||
| d268f431d3 | |||
| 17e5e3fcfe | |||
| e214326ad5 | |||
| 1d224c7396 | |||
| ff3ea2cdcd |
10
htaccess/.htaccess
Normal file
10
htaccess/.htaccess
Normal file
@@ -0,0 +1,10 @@
|
||||
<IfModule mod_rewrite.c>
|
||||
RewriteEngine On
|
||||
RewriteCond %{SERVER_PORT} !=443
|
||||
RewriteRule ^(.*)$ https://www.raffiskender.com/$1 [R=301,L]
|
||||
RewriteBase /
|
||||
RewriteRule ^index\.html$ - [L]
|
||||
RewriteCond %{REQUEST_FILENAME} !-f
|
||||
RewriteCond %{REQUEST_FILENAME} !-d
|
||||
RewriteRule . /index.html [L]
|
||||
</IfModule>
|
||||
3173
package-lock.json
generated
3173
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
10
package.json
10
package.json
@@ -7,8 +7,16 @@
|
||||
"build": "vue-cli-service build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^6.4.0",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.4.0",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.4.0",
|
||||
"@fortawesome/vue-fontawesome": "^3.0.3",
|
||||
"axios": "^1.4.0",
|
||||
"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": {
|
||||
"@vue/cli-plugin-babel": "~5.0.0",
|
||||
|
||||
BIN
public/image.ico
Normal file
BIN
public/image.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
@@ -4,7 +4,7 @@
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<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 %>image.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<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>
|
||||
</noscript>
|
||||
<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>
|
||||
</html>
|
||||
|
||||
196
src/App.vue
196
src/App.vue
@@ -1,26 +1,184 @@
|
||||
<template>
|
||||
<img alt="Vue logo" src="./assets/logo.png">
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
||||
</template>
|
||||
<script setup>
|
||||
//import { onMounted, onUnmounted } from 'vue';
|
||||
import Burger from '@/components/Burger.vue'
|
||||
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>
|
||||
|
||||
<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">
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Acme&family=Courier+Prime&display=swap');
|
||||
@import "@/style/widths.scss";
|
||||
@import "@/style/colors.scss";
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body{
|
||||
background-color: $body-bg
|
||||
}
|
||||
p, li, label{
|
||||
font-size: 1.25rem;
|
||||
color:$main-normal;
|
||||
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 : $title-normal solid 3px;
|
||||
}
|
||||
& > h3 {
|
||||
//display: inline;
|
||||
font-family: 'acme', Arial, Helvetica, sans-serif;
|
||||
color:$title-normal;
|
||||
opacity: 1;
|
||||
font-size: 3rem;
|
||||
text-align: right;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
//filter:drop-shadow(2px 2px 3px $action-normal);
|
||||
//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;
|
||||
box-shadow: 0px 0px 20px 20px #363636;
|
||||
max-width: $maxWidth;
|
||||
padding-bottom: 2em;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
nav.menu-container{
|
||||
z-index: 99;
|
||||
}
|
||||
.index{
|
||||
background-color: rgb(182, 182, 182);
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
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/colors.scss';
|
||||
|
||||
.images-grid-gallery {
|
||||
//max-width: $maxWidth;
|
||||
margin: 0 1em;
|
||||
display: grid;
|
||||
grid-template-columns: repeat (2, 1fr);
|
||||
//grid-auto-columns: minmax(10px, auto);
|
||||
gap:1em;
|
||||
//border : 3px solid white;
|
||||
height:100vh;
|
||||
}
|
||||
|
||||
.image-link {
|
||||
display: flex;
|
||||
border : 3px solid white;
|
||||
background : white;
|
||||
border-radius: 10px;
|
||||
margin:0 auto;
|
||||
margin-bottom: 1em;
|
||||
width: $imageWidth;
|
||||
overflow: hidden;
|
||||
transform: rotateY(0deg);
|
||||
transition: 1s;
|
||||
&.turned{
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
& > .image-container {
|
||||
border : 3px solid white;
|
||||
border-radius: 22px;
|
||||
overflow: hidden;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:nth-child(1), &:nth-child(2){
|
||||
aspect-ratio: 1/1;
|
||||
aspect-ratio: 8/11;
|
||||
}
|
||||
&:nth-child(3), &:nth-child(4){
|
||||
aspect-ratio: 8/11;
|
||||
}
|
||||
|
||||
@for $i from 1 to 5 {
|
||||
&:nth-child(#{$i}) > .image-container > .image_background{
|
||||
transform:scale(1.0);
|
||||
transition: 0.5s;
|
||||
position:relative;
|
||||
bottom:-400px;
|
||||
left:-120px;
|
||||
animation-duration: 1000ms;
|
||||
animation-name: show-gallery;
|
||||
animation-timing-function: cubic-bezier(0.2, 0.9, 0.44, 1);
|
||||
animation-delay: $i*200 + 1000ms;
|
||||
animation-fill-mode: forwards;
|
||||
|
||||
}
|
||||
}
|
||||
&:hover .image_background{
|
||||
transform: scale(1.1);
|
||||
}
|
||||
&:hover > .image_background:before {
|
||||
opacity: 1;
|
||||
left: -5px;
|
||||
top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.hide{
|
||||
display : none;
|
||||
}
|
||||
|
||||
@media (min-width: 720px){
|
||||
.images-grid-gallery{
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes show-gallery {
|
||||
0%{
|
||||
|
||||
}
|
||||
100%{
|
||||
bottom: 300px;;
|
||||
}
|
||||
}
|
||||
// @keyframes menu-shake{
|
||||
// from {
|
||||
// //opacity: 0;
|
||||
// filter: drop-shadow(-150px 0px 10px #4d0000);
|
||||
// //background-color: rgb(99, 0, 0);
|
||||
// }
|
||||
// 10%{
|
||||
// //opacity: 50%;
|
||||
// filter: drop-shadow(150px 0px 3px #4d0000);
|
||||
// }
|
||||
// 20%{
|
||||
// filter: drop-shadow(-100px 0px 3px #4d0000);
|
||||
|
||||
// }
|
||||
// 30%{
|
||||
// filter: drop-shadow(50px 0px 3px #4d0000);
|
||||
|
||||
// }
|
||||
// 40%{
|
||||
// filter: drop-shadow(-25px 0px 3px #4d0000);
|
||||
|
||||
// }
|
||||
// 50%{
|
||||
// filter: drop-shadow(10px 0px 3px #4d0000);
|
||||
|
||||
// }
|
||||
// 80%{
|
||||
|
||||
// filter: drop-shadow(-10px 0px 3px #4d0000);
|
||||
// }
|
||||
// 100%{
|
||||
// //opacity : 100%;
|
||||
// filter: drop-shadow(0px 0px 3px #4d0000);
|
||||
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
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 |
105
src/assets/CV-favicon.svg
Normal file
105
src/assets/CV-favicon.svg
Normal file
@@ -0,0 +1,105 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="210mm"
|
||||
height="297mm"
|
||||
viewBox="0 0 210 297"
|
||||
version="1.1"
|
||||
id="svg8"
|
||||
inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
|
||||
sodipodi:docname="CV-favicon.svg">
|
||||
<defs
|
||||
id="defs2" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="0.35"
|
||||
inkscape:cx="400"
|
||||
inkscape:cy="557.14286"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:current-layer="layer1"
|
||||
inkscape:document-rotation="0"
|
||||
showgrid="false"
|
||||
inkscape:window-width="1559"
|
||||
inkscape:window-height="908"
|
||||
inkscape:window-x="361"
|
||||
inkscape:window-y="97"
|
||||
inkscape:window-maximized="0" />
|
||||
<metadata
|
||||
id="metadata5">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<path
|
||||
style="
|
||||
stroke-linejoin:round;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1"
|
||||
d="M 139.17222,9.3942355 C 173.00215,31.292212 218.1812,60.980457 218.48057,79.674699 218.59904,87.056983 99.966521,77.122595 100.0371,73.59533 212.37863,43.378561 246.84869,31.106644 355.29155,12.76416"
|
||||
id="path862"
|
||||
sodipodi:nodetypes="cscc" />
|
||||
<path
|
||||
style="
|
||||
stroke-linejoin:miter;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1"
|
||||
d="m 312.83425,25.675399 0.42594,12.212728"
|
||||
id="path3943" />
|
||||
<path
|
||||
style="stroke-linejoin:miter;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1"
|
||||
d="m 311.63779,8.7395766 0.2454,2.4946354"
|
||||
id="path3945" />
|
||||
<path
|
||||
style="stroke-linejoin:round;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1"
|
||||
d="M 98.736495,1.2925001 C 130.71965,-24.665921 192.41147,-27.93255 195.70827,-12.082894 c 3.52112,16.9281249 -16.15069,23.426128 -5.21999,35.069064 7.51533,8.004927 22.54721,0.801375 22.54721,0.801375"
|
||||
id="path4209"
|
||||
sodipodi:nodetypes="cssc" />
|
||||
<path
|
||||
style="stroke-linejoin:miter;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1"
|
||||
d="m 230.59072,12.767977 c -3.05309,3.537063 -5.46022,13.433154 -3.26784,14.895394 4.2835,2.856811 13.40139,-12.097612 13.1368,-13.525975 -0.40148,-2.164937 -8.06688,-3.457217 -9.86896,-1.369419 z"
|
||||
id="path5599"
|
||||
sodipodi:nodetypes="ssss" />
|
||||
<path
|
||||
style="stroke-linejoin:miter;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1"
|
||||
d="m 283.01637,21.941476 c 13.77166,-17.5948162 20.26231,-58.430437 14.87852,-54.688625 -16.63519,11.561933 1.50986,84.878597 -3.86255,94.259788 -2.77674,4.848515 -20.37598,-8.366388 -16.48804,-18.315105 2.64201,-6.760505 6.86016,-5.127064 11.95096,-8.174896"
|
||||
id="path6508"
|
||||
sodipodi:nodetypes="csssc" />
|
||||
<path
|
||||
style="stroke-linejoin:miter;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1"
|
||||
d="m 268.00837,42.908163 c -26.42894,-1.402892 -17.3056,39.667651 -1.54342,31.364589 9.85909,-5.193503 -6.22644,-101.377213 2.11133,-100.854828 4.16005,0.260637 0.22284,13.904191 -6.67691,26.02389012 C 254.99972,11.56156 245.13969,22.122662 242.18918,19.553315 240.05011,17.69049 240.35315,11.012501 241.34202,8.7752027"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
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/arrow-list.svg
Normal file
60
src/assets/arrow-list.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="10mm"
|
||||
height="20mm"
|
||||
viewBox="0 0 10 20"
|
||||
version="1.1"
|
||||
id="svg8"
|
||||
inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
|
||||
sodipodi:docname="arrow-list.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="78.255282"
|
||||
inkscape:cy="123.82238"
|
||||
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" />
|
||||
<metadata
|
||||
id="metadata5">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Calque 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<path
|
||||
style="fill:#a5e6ba;stroke:none;stroke-width:0.0685365px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
|
||||
d="M 0,0 V 20 L 10,10 Z"
|
||||
id="path833"
|
||||
sodipodi:nodetypes="cccc" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 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/images/LDC/LDC_screenshot_1.png
Normal file
BIN
src/assets/images/LDC/LDC_screenshot_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
src/assets/images/LDC/LDC_screenshot_2.png
Normal file
BIN
src/assets/images/LDC/LDC_screenshot_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
src/assets/images/LDC/LDC_screenshot_3.png
Normal file
BIN
src/assets/images/LDC/LDC_screenshot_3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
src/assets/images/pop/Screenshot_pop1.webp
Normal file
BIN
src/assets/images/pop/Screenshot_pop1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
src/assets/images/pop/Screenshot_pop2.webp
Normal file
BIN
src/assets/images/pop/Screenshot_pop2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
src/assets/images/pop/Screenshot_pop3.webp
Normal file
BIN
src/assets/images/pop/Screenshot_pop3.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
src/assets/images/pop/back.webp
Normal file
BIN
src/assets/images/pop/back.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 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 |
120
src/assets/portfolio-mini.svg
Normal file
120
src/assets/portfolio-mini.svg
Normal file
@@ -0,0 +1,120 @@
|
||||
<?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"
|
||||
version="1.0"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 12 12"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
id="svg939"
|
||||
sodipodi:docname="portfolio-mini.svg"
|
||||
inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
|
||||
<metadata
|
||||
id="metadata945">
|
||||
<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>
|
||||
<defs
|
||||
id="defs943" />
|
||||
<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="namedview941"
|
||||
showgrid="false"
|
||||
units="px"
|
||||
inkscape:zoom="6.7346939"
|
||||
inkscape:cx="12.465035"
|
||||
inkscape:cy="14.182917"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="g1085" />
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer2"
|
||||
inkscape:label="First Wallet"
|
||||
style="display:none">
|
||||
<g
|
||||
transform="matrix(0.1,0,0,-0.1,0.23462133,637.24871)"
|
||||
fill="#797979"
|
||||
stroke="none"
|
||||
id="g937">
|
||||
<path
|
||||
d="M 2910,6358 C 2289,6306 1680,6060 1185,5664 1044,5551 819,5326 706,5185 -210,4042 -237,2435 641,1270 1161,580 1924,138 2795,24 c 165,-22 580,-25 740,-6 586,72 1097,274 1558,619 692,516 1137,1282 1254,2158 24,181 24,599 0,780 -76,570 -283,1079 -620,1527 -658,875 -1722,1349 -2817,1256 z M 4021,5320 c 48,-13 118,-75 140,-124 16,-36 19,-70 19,-298 v -258 h 259 c 143,0 294,-5 337,-11 151,-21 272,-81 377,-186 76,-77 129,-163 165,-268 l 27,-80 3,-1000 c 2,-651 -1,-1027 -7,-1078 -35,-261 -190,-452 -448,-550 l -58,-22 -1615,-3 c -1810,-3 -1686,-8 -1843,71 -111,55 -227,170 -279,277 -77,157 -73,80 -73,1255 v 1050 l 27,80 c 68,199 214,353 401,421 98,35 196,44 478,44 h 259 v 258 c 0,228 3,262 19,298 21,46 91,111 136,123 43,13 1631,13 1676,1 z"
|
||||
id="path927" />
|
||||
<path
|
||||
d="m 2407,5103 c -4,-3 -7,-109 -7,-235 v -228 h 785 785 l -2,233 -3,232 -776,3 c -426,1 -779,-1 -782,-5 z"
|
||||
id="path929" />
|
||||
<path
|
||||
d="m 1573,4405 c -204,-55 -333,-228 -333,-445 0,-63 2,-68 28,-80 311,-145 567,-254 813,-343 173,-64 463,-157 487,-157 8,0 12,23 12,78 0,53 6,90 19,118 22,48 82,101 131,114 46,13 864,13 910,0 49,-13 109,-66 131,-114 13,-28 19,-65 19,-118 0,-52 4,-78 11,-78 22,0 253,72 409,127 247,87 648,255 883,369 l 37,18 v 66 c 0,218 -131,391 -335,445 -52,13 -248,15 -1615,14 -1305,0 -1563,-3 -1607,-14 z"
|
||||
id="path931" />
|
||||
<path
|
||||
d="m 1240,2847 c 0,-680 2,-812 15,-860 38,-148 136,-254 285,-308 l 65,-24 h 1580 1580 l 65,24 c 155,57 261,178 290,331 16,84 14,1644 -2,1637 -7,-3 -87,-39 -178,-80 -379,-170 -727,-299 -1092,-402 l -58,-16 v -100 c 0,-146 -27,-199 -125,-245 l -50,-24 h -430 -430 l -50,24 c -98,46 -125,99 -125,245 v 100 l -57,16 c -349,98 -759,250 -1136,421 -78,35 -142,64 -144,64 -2,0 -3,-361 -3,-803 z"
|
||||
id="path933" />
|
||||
<path
|
||||
d="m 2790,3240 v -240 h 395 395 v 240 240 h -395 -395 z"
|
||||
id="path935" />
|
||||
</g>
|
||||
</g>
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer3"
|
||||
inkscape:label="New Wallet"
|
||||
style="display:inline">
|
||||
<g
|
||||
id="g1085"
|
||||
transform="matrix(1.0716333,0,0,1.0716333,-0.10571635,-1.2352784)">
|
||||
<rect
|
||||
style="display:inline;fill:#ffffff;fill-opacity:0;stroke:#000000;stroke-width:0.601028;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
|
||||
id="rect1017"
|
||||
width="4.7357831"
|
||||
height="2.570173"
|
||||
x="3.3296895"
|
||||
y="1.8662591"
|
||||
ry="0.81402433" />
|
||||
<rect
|
||||
style="display:inline;fill:#ce4d03;fill-opacity:1;stroke:#000000;stroke-width:1.20206;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
|
||||
id="rect995"
|
||||
width="9.9958"
|
||||
height="7.2557173"
|
||||
x="0.69967973"
|
||||
y="4.0807805"
|
||||
ry="1.2539839" />
|
||||
<path
|
||||
style="display:inline;fill:none;stroke:#000000;stroke-width:0.601028;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 0.28812392,5.6025295 c 0,0 3.41048588,1.774885 5.30693298,1.784842 1.8964474,0.00996 5.4973151,-1.784842 5.4973151,-1.784842"
|
||||
id="path1019"
|
||||
sodipodi:nodetypes="czc" />
|
||||
<rect
|
||||
style="display:inline;fill:#a8a8a8;fill-opacity:1;stroke:#000000;stroke-width:1.20206;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
|
||||
id="rect1013"
|
||||
width="2.1054513"
|
||||
height="1.5281495"
|
||||
x="4.6448545"
|
||||
y="6.4479675"
|
||||
rx="0"
|
||||
ry="0" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.4 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 |
62
src/assets/raffi.svg
Normal file
62
src/assets/raffi.svg
Normal file
@@ -0,0 +1,62 @@
|
||||
<svg class="raffi"
|
||||
viewBox="75 -50 300 150"
|
||||
style="fill:none;
|
||||
stroke-width:5;
|
||||
stroke-linecap:round;"
|
||||
>
|
||||
<path
|
||||
style="
|
||||
stroke-linejoin:round;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1"
|
||||
d="M 139.17222,9.3942355 C 173.00215,31.292212 218.1812,60.980457 218.48057,79.674699 218.59904,87.056983 99.966521,77.122595 100.0371,73.59533 212.37863,43.378561 246.84869,31.106644 355.29155,12.76416"
|
||||
id="path862"
|
||||
sodipodi:nodetypes="cscc" />
|
||||
<path
|
||||
style="
|
||||
stroke-linejoin:miter;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1"
|
||||
d="m 312.83425,25.675399 0.42594,12.212728"
|
||||
id="path3943" />
|
||||
<path
|
||||
style="stroke-linejoin:miter;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1"
|
||||
d="m 311.63779,8.7395766 0.2454,2.4946354"
|
||||
id="path3945" />
|
||||
<path
|
||||
style="stroke-linejoin:round;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1"
|
||||
d="M 98.736495,1.2925001 C 130.71965,-24.665921 192.41147,-27.93255 195.70827,-12.082894 c 3.52112,16.9281249 -16.15069,23.426128 -5.21999,35.069064 7.51533,8.004927 22.54721,0.801375 22.54721,0.801375"
|
||||
id="path4209"
|
||||
sodipodi:nodetypes="cssc" />
|
||||
<path
|
||||
style="stroke-linejoin:miter;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1"
|
||||
d="m 230.59072,12.767977 c -3.05309,3.537063 -5.46022,13.433154 -3.26784,14.895394 4.2835,2.856811 13.40139,-12.097612 13.1368,-13.525975 -0.40148,-2.164937 -8.06688,-3.457217 -9.86896,-1.369419 z"
|
||||
id="path5599"
|
||||
sodipodi:nodetypes="ssss" />
|
||||
<path
|
||||
style="stroke-linejoin:miter;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1"
|
||||
d="m 283.01637,21.941476 c 13.77166,-17.5948162 20.26231,-58.430437 14.87852,-54.688625 -16.63519,11.561933 1.50986,84.878597 -3.86255,94.259788 -2.77674,4.848515 -20.37598,-8.366388 -16.48804,-18.315105 2.64201,-6.760505 6.86016,-5.127064 11.95096,-8.174896"
|
||||
id="path6508"
|
||||
sodipodi:nodetypes="csssc" />
|
||||
<path
|
||||
style="stroke-linejoin:miter;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1"
|
||||
d="m 268.00837,42.908163 c -26.42894,-1.402892 -17.3056,39.667651 -1.54342,31.364589 9.85909,-5.193503 -6.22644,-101.377213 2.11133,-100.854828 4.16005,0.260637 0.22284,13.904191 -6.67691,26.02389012 C 254.99972,11.56156 245.13969,22.122662 242.18918,19.553315 240.05011,17.69049 240.35315,11.012501 241.34202,8.7752027"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 420 KiB |
142
src/components/Burger.vue
Normal file
142
src/components/Burger.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<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/colors.scss";
|
||||
@import "@/style/widths.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:$action-normal;
|
||||
}
|
||||
|
||||
.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:$action-normal;
|
||||
|
||||
}
|
||||
& > .arrow-down {
|
||||
d:path("m 21, 50 15, 9");
|
||||
stroke-width:6;
|
||||
stroke:$action-normal;
|
||||
}
|
||||
& > .line-middle{
|
||||
d:path("M 65, 50 H 21");
|
||||
stroke-width:6;
|
||||
stroke:$action-normal;
|
||||
}
|
||||
& > .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:$action-normal;
|
||||
}
|
||||
}
|
||||
@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
290
src/components/Footer.vue
Normal file
290
src/components/Footer.vue
Normal file
@@ -0,0 +1,290 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const show = ref(false)
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<button class="arrow" @click="show = !show">
|
||||
<svg
|
||||
viewBox="0 0 10 7.4"
|
||||
class="arrow"
|
||||
:class="{'down': show}"
|
||||
>
|
||||
<!--
|
||||
This circle is now make the button...
|
||||
<circle
|
||||
style="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.0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 1,5 5,1 9,5"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div class="footer"
|
||||
v-bind:class="show ? '' : 'hide'">
|
||||
<h1>
|
||||
Designed
|
||||
</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 id = "raffi" viewBox="75 -50 300 150">
|
||||
<path id="raffi_path"
|
||||
style="fill:none;
|
||||
stroke-width:6;
|
||||
stroke-linecap:round;
|
||||
stroke-linejoin:round;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1;
|
||||
stroke:rgb(235, 235, 235);"
|
||||
|
||||
d="M 139.17222,9.3942355 C 173.00215,31.292212 218.1812,60.980457 218.48057,79.674699 218.59904,87.056983 99.966521,77.122595 100.0371,73.59533 212.37863,43.378561 246.84869,31.106644 355.29155,12.76416
|
||||
M 98.736495,1.2925001 C 130.71965,-24.665921 192.41147,-27.93255 195.70827,-12.082894 c 3.52112,16.9281249 -16.15069,23.426128 -5.21999,35.069064 7.51533,8.004927 22.54721,0.801375 22.54721,0.801375
|
||||
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
|
||||
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
|
||||
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
|
||||
M 312.83425,36 313,29
|
||||
M 311.63779,10 312.2454,10"/>
|
||||
</svg>
|
||||
<svg
|
||||
viewBox="465 -39 150 175"
|
||||
style="height : 1.8em"
|
||||
>
|
||||
<path
|
||||
style="
|
||||
fill:hsl(0, 0%, 100%);
|
||||
fill-opacity:1;"
|
||||
d="m 521.33907,-32.100947 c -15.696,0 -29.8501,8.729044 -37.09062,22.1790455 -7.24053,13.4500045 -5.91492,32.3446665 7.17197,47.3022185 1.43732,1.642749 2.73071,2.928216 4.18011,4.572672 -20.02696,12.307516 -29.31825,31.315366 -27.02756,49.047466 2.9147,22.562305 23.06212,41.445905 49.20662,41.095695 18.2011,-0.24382 34.35419,-5.08829 46.57016,-15.17682 l 10.19351,11.31199 h 33.48737 c 0,0 -11.40008,-11.45583 -29.00271,-30.005825 7.62555,-15.07261 10.59424,-34.29628 9.60156,-58.272386 l -23.51583,0.976066 c 0.67379,16.27413 -0.91616,28.50638 -3.78227,38.04548 -8.45792,-9.04987 -17.26393,-18.82395 -26.48118,-28.95849 18.17595,-10.00276 28.62124,-26.326473 28.99029,-42.851552 0.22733,-10.173154 -3.52637,-20.406463 -11.12929,-27.770227 -7.60295,-7.363764 -18.67436,-11.495333 -31.37213,-11.495333 z m 0,23.537054 c 7.83107,0 12.28773,2.235786 15.00174,4.864433 2.71403,2.628646 4.06455,6.013533 3.96794,10.338903 -0.17763,7.953448 -6.4503,18.778829 -22.19495,25.070124 -3.12812,-3.52063 -5.90343,-6.306983 -8.98089,-9.824346 -7.894,-9.022371 -7.14525,-15.113741 -4.16423,-20.6512899 2.98102,-5.5375481 9.84988,-9.7978241 16.37039,-9.7978241 z m -9.29389,68.499888 c 12.77594,14.14387 25.16291,27.83514 36.50712,39.92866 -7.12746,5.655985 -16.83937,8.508835 -31.091,8.699735 -15.02851,0.20131 -24.1429,-9.703835 -25.54754,-20.577015 -1.19923,-9.28313 3.16266,-20.11957 20.13142,-28.05138 z"/>
|
||||
</svg>
|
||||
<svg
|
||||
viewBox="144 105 45 27"
|
||||
style="stroke:#ffffff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;"
|
||||
>
|
||||
|
||||
<circle
|
||||
style="display:inline; fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;"
|
||||
id="path905-7"
|
||||
cx="80.57341"
|
||||
cy="225.22316"
|
||||
r="0.95786411"
|
||||
transform="matrix(1.0762321,0,0,1.0762321,69.515692,-132.21175)" />
|
||||
<path
|
||||
style="fill:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 145.67023,114.3131 c 1.78592,-2.29773 3.12471,-4.35186 3.94309,-6.12246 l 0.48061,4.00796 2.67648,-3.44512 c 0,0 -1.33095,6.24196 0.31881,10.88518"
|
||||
id="path929"
|
||||
sodipodi:nodetypes="ccccc" />
|
||||
<path
|
||||
style="fill:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 155.88053,113.34602 c -0.45893,4.69925 -1.25065,3.69121 -0.18477,4.04488 1.55502,0.51598 4.4305,-0.81121 10.33621,-4.63748"
|
||||
id="path931"
|
||||
sodipodi:nodetypes="csc" />
|
||||
<path
|
||||
style="fill:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 160.60127,112.03858 c 0,0 -1.72603,7.30276 -7.26034,13.1046"
|
||||
id="path933"
|
||||
sodipodi:nodetypes="cc" />
|
||||
<path
|
||||
style="fill:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 159.24101,117.33599 c 0,0 1.82586,2.56841 3.00349,5.26021 2.17197,-3.1972 4.23136,-5.70438 6.74074,-10.34101 0,0 8.08433,12.22102 13.33159,16.24117 1.18468,0.90765 5.45607,1.69302 4.48962,-3.15342"
|
||||
id="path935"
|
||||
sodipodi:nodetypes="cccsc" />
|
||||
<path
|
||||
style="fill:none;fill-opacity:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 165.97522,118.73555 c 0.217,0.2611 2.78332,2.20999 2.78332,2.20999 l 3.36893,-3.46208"
|
||||
id="path939"
|
||||
sodipodi:nodetypes="ccc" />
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/style/colors.scss';
|
||||
@import '@/style/widths.scss';
|
||||
|
||||
div.footer{
|
||||
position : fixed;
|
||||
bottom: 0em;
|
||||
padding-left:3em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
background-color: hsla(0, 0%, 0%, 0.904);
|
||||
min-height:2.5em;
|
||||
width: 100%;
|
||||
max-width: $maxWidth;
|
||||
z-index: 9;
|
||||
transition: 0.5s;
|
||||
&.hide{
|
||||
transform:translateY(100%)
|
||||
}
|
||||
}
|
||||
svg{
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
button.arrow{
|
||||
position:fixed;
|
||||
bottom:0.5em;
|
||||
z-index: 99;
|
||||
aspect-ratio: 1;
|
||||
width:2.1em;
|
||||
text-align: center;
|
||||
border: none;
|
||||
background-color: $action-normal;
|
||||
border-radius: 50%;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
margin-left:0.5em;
|
||||
padding:0;
|
||||
//box-sizing: border-box;
|
||||
& > svg{
|
||||
transition: 0.35s;
|
||||
width:75%;
|
||||
margin: 0;
|
||||
//position: absolute;
|
||||
transform: scale(1, 1);
|
||||
&.down {
|
||||
transform: scale(1, -1);
|
||||
}
|
||||
|
||||
}
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
& > circle{
|
||||
fill:$action-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
h1{
|
||||
font-size: 2em;
|
||||
margin-right: 0.5em;
|
||||
color:white;
|
||||
}
|
||||
|
||||
|
||||
@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>
|
||||
303
src/components/Footer_1.vue
Normal file
303
src/components/Footer_1.vue
Normal file
@@ -0,0 +1,303 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const show = ref(false)
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
class="arrow"
|
||||
v-bind:class="show ? 'down' : ''"
|
||||
@click="show = !show"
|
||||
>
|
||||
<circle
|
||||
style="fill:#e65353;stroke:#000000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="path833"
|
||||
cx="10"
|
||||
cy="10"
|
||||
r="8" />
|
||||
<path
|
||||
style="fill:none;stroke:#000000;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 5.5,11 10,7 14.5,11"
|
||||
id="path841"
|
||||
sodipodi:nodetypes="ccc" />
|
||||
</svg>
|
||||
|
||||
<div class="footer"
|
||||
v-bind:class="show ? '' : 'hide'">
|
||||
<h1>
|
||||
Design
|
||||
</h1>
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
style="stroke:#fff;stroke-opacity:1;stroke-width:0.8;stroke-miterlimit:4;stroke-dasharray:none;stroke-linecap:square;stroke-linejoin:miter;fill:#fff;fill-opacity:1">
|
||||
<g
|
||||
id="g1053"
|
||||
transform="matrix(3.2926021,0,0,3.2926021,13.394942,5.0000002)"
|
||||
style="fill:#fff;fill-opacity:1;stroke:#fff;stroke-width:0.24296893;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;stroke-linecap:square;stroke-linejoin:miter">
|
||||
<path
|
||||
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:#fff;stroke-width:0.24296893;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000"
|
||||
d="m 0,13.56745 c -5e-6,2.75062 2.261097,5.01172 5.011719,5.01171 2.750621,0 5.013677,-2.26109 5.013672,-5.01171 m 0,0 C 10.025388,10.81683 7.762335,8.55377 5.011719,8.55377 2.261103,8.55377 3e-6,10.81683 0,13.56745 m 3,0 c 1e-6,-1.1293 0.882422,-2.01368 2.011719,-2.01368 1.129297,0 2.013671,0.88438 2.013672,2.01368 m 0,0 c 2e-6,1.12929 -0.884373,2.01171 -2.013672,2.01171 -1.1293,0 -2.011721,-0.88242 -2.011719,-2.01171"
|
||||
id="path843"
|
||||
sodipodi:nodetypes="csccsccsccsc" />
|
||||
<path
|
||||
id="rect841"
|
||||
style="fill:#fff;fill-opacity:1;stroke:#fff;stroke-width:0.24296893;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 0,0 H 3 V 13.56714 H 0 Z" />
|
||||
</g>
|
||||
<g
|
||||
id="path894"
|
||||
transform="matrix(3.2926021,0,0,3.2926021,19.411444,-4.7252006)"
|
||||
style="fill:#fff;fill-opacity:1;stroke:#fff;stroke-width:0.24296893;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;stroke-linecap:square;stroke-linejoin:miter">
|
||||
<g
|
||||
id="path954"
|
||||
style="opacity:1;fill:#fff;fill-opacity:1;stroke:#fff;stroke-width:0.24296893;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;stroke-linecap:square;stroke-linejoin:miter">
|
||||
<path
|
||||
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:#fff;stroke-width:0.24296893;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000;stop-opacity:1"
|
||||
d="m 8.375,11.507812 4.9375,10.226563 1.755005,-2.977802 -3.469849,-7.248761 z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<g
|
||||
id="g985"
|
||||
style="fill:#fff;
|
||||
fill-opacity:1;
|
||||
stroke:#fff;
|
||||
stroke-width:0.24296893;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1;
|
||||
stroke-linecap:square;
|
||||
stroke-linejoin:miter"
|
||||
transform="matrix(3.2926021,0,0,3.2926021,32.860095,5.3294217)">
|
||||
<g
|
||||
id="g973"
|
||||
transform="matrix(-1,0,0,1,29.989768,-3.053701)"
|
||||
style="fill:#fff;
|
||||
fill-opacity:1;
|
||||
stroke:#fff;
|
||||
stroke-width:0.24296893;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1;
|
||||
stroke-linecap:square;
|
||||
stroke-linejoin:miter" />
|
||||
<g
|
||||
id="g977"
|
||||
transform="matrix(-1,0,0,1,25.149768,6.974189)"
|
||||
style="fill:#fff;
|
||||
fill-opacity:1;
|
||||
stroke:#fff;
|
||||
stroke-width:0.24296893;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1;
|
||||
stroke-linecap:square;
|
||||
stroke-linejoin:miter">
|
||||
<g
|
||||
id="path975"
|
||||
style="opacity:1;
|
||||
fill:#fff;
|
||||
fill-opacity:1;
|
||||
stroke:#fff;
|
||||
stroke-width:0.24296893;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1;
|
||||
stroke-linecap:square;
|
||||
stroke-linejoin:miter">
|
||||
<path
|
||||
style="fill:#fff;
|
||||
fill-opacity:1;
|
||||
fill-rule:nonzero;
|
||||
stroke:#fff;
|
||||
stroke-width:0.24296893;
|
||||
stroke-linecap:square;
|
||||
stroke-linejoin:miter;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-dashoffset:0;
|
||||
stroke-opacity:1;
|
||||
color-rendering:auto;
|
||||
image-rendering:auto;
|
||||
shape-rendering:auto;
|
||||
text-rendering:auto;
|
||||
enable-background:accumulate;
|
||||
stop-color:#000000;
|
||||
stop-opacity:1"
|
||||
d="M 8.8268232,1.4804688 17.883467,20.259766 h 3.222656 L 12.04948,1.4804688 Z"
|
||||
id="path1039"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<svg
|
||||
viewBox="75 -50 300 150"
|
||||
style="fill:none;
|
||||
stroke:rgb(189, 25, 25);
|
||||
stroke-width:5;
|
||||
stroke-linecap:round;"
|
||||
>
|
||||
<path
|
||||
style="
|
||||
stroke-linejoin:round;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1"
|
||||
d="M 139.17222,9.3942355 C 173.00215,31.292212 218.1812,60.980457 218.48057,79.674699 218.59904,87.056983 99.966521,77.122595 100.0371,73.59533 212.37863,43.378561 246.84869,31.106644 355.29155,12.76416"
|
||||
id="path862"
|
||||
sodipodi:nodetypes="cscc" />
|
||||
<path
|
||||
style="
|
||||
stroke-linejoin:miter;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1"
|
||||
d="m 312.83425,25.675399 0.42594,12.212728"
|
||||
id="path3943" />
|
||||
<path
|
||||
style="stroke-linejoin:miter;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1"
|
||||
d="m 311.63779,8.7395766 0.2454,2.4946354"
|
||||
id="path3945" />
|
||||
<path
|
||||
style="stroke-linejoin:round;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1"
|
||||
d="M 98.736495,1.2925001 C 130.71965,-24.665921 192.41147,-27.93255 195.70827,-12.082894 c 3.52112,16.9281249 -16.15069,23.426128 -5.21999,35.069064 7.51533,8.004927 22.54721,0.801375 22.54721,0.801375"
|
||||
id="path4209"
|
||||
sodipodi:nodetypes="cssc" />
|
||||
<path
|
||||
style="stroke-linejoin:miter;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1"
|
||||
d="m 230.59072,12.767977 c -3.05309,3.537063 -5.46022,13.433154 -3.26784,14.895394 4.2835,2.856811 13.40139,-12.097612 13.1368,-13.525975 -0.40148,-2.164937 -8.06688,-3.457217 -9.86896,-1.369419 z"
|
||||
id="path5599"
|
||||
sodipodi:nodetypes="ssss" />
|
||||
<path
|
||||
style="stroke-linejoin:miter;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1"
|
||||
d="m 283.01637,21.941476 c 13.77166,-17.5948162 20.26231,-58.430437 14.87852,-54.688625 -16.63519,11.561933 1.50986,84.878597 -3.86255,94.259788 -2.77674,4.848515 -20.37598,-8.366388 -16.48804,-18.315105 2.64201,-6.760505 6.86016,-5.127064 11.95096,-8.174896"
|
||||
id="path6508"
|
||||
sodipodi:nodetypes="csssc" />
|
||||
<path
|
||||
style="stroke-linejoin:miter;
|
||||
stroke-miterlimit:4;
|
||||
stroke-dasharray:none;
|
||||
stroke-opacity:1"
|
||||
d="m 268.00837,42.908163 c -26.42894,-1.402892 -17.3056,39.667651 -1.54342,31.364589 9.85909,-5.193503 -6.22644,-101.377213 2.11133,-100.854828 4.16005,0.260637 0.22284,13.904191 -6.67691,26.02389012 C 254.99972,11.56156 245.13969,22.122662 242.18918,19.553315 240.05011,17.69049 240.35315,11.012501 241.34202,8.7752027"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
viewBox="465 -39 150 175"
|
||||
style="height : 1.8em"
|
||||
>
|
||||
<path
|
||||
style="
|
||||
fill:hsl(0, 0%, 100%);
|
||||
fill-opacity:1;"
|
||||
d="m 521.33907,-32.100947 c -15.696,0 -29.8501,8.729044 -37.09062,22.1790455 -7.24053,13.4500045 -5.91492,32.3446665 7.17197,47.3022185 1.43732,1.642749 2.73071,2.928216 4.18011,4.572672 -20.02696,12.307516 -29.31825,31.315366 -27.02756,49.047466 2.9147,22.562305 23.06212,41.445905 49.20662,41.095695 18.2011,-0.24382 34.35419,-5.08829 46.57016,-15.17682 l 10.19351,11.31199 h 33.48737 c 0,0 -11.40008,-11.45583 -29.00271,-30.005825 7.62555,-15.07261 10.59424,-34.29628 9.60156,-58.272386 l -23.51583,0.976066 c 0.67379,16.27413 -0.91616,28.50638 -3.78227,38.04548 -8.45792,-9.04987 -17.26393,-18.82395 -26.48118,-28.95849 18.17595,-10.00276 28.62124,-26.326473 28.99029,-42.851552 0.22733,-10.173154 -3.52637,-20.406463 -11.12929,-27.770227 -7.60295,-7.363764 -18.67436,-11.495333 -31.37213,-11.495333 z m 0,23.537054 c 7.83107,0 12.28773,2.235786 15.00174,4.864433 2.71403,2.628646 4.06455,6.013533 3.96794,10.338903 -0.17763,7.953448 -6.4503,18.778829 -22.19495,25.070124 -3.12812,-3.52063 -5.90343,-6.306983 -8.98089,-9.824346 -7.894,-9.022371 -7.14525,-15.113741 -4.16423,-20.6512899 2.98102,-5.5375481 9.84988,-9.7978241 16.37039,-9.7978241 z m -9.29389,68.499888 c 12.77594,14.14387 25.16291,27.83514 36.50712,39.92866 -7.12746,5.655985 -16.83937,8.508835 -31.091,8.699735 -15.02851,0.20131 -24.1429,-9.703835 -25.54754,-20.577015 -1.19923,-9.28313 3.16266,-20.11957 20.13142,-28.05138 z"/>
|
||||
</svg>
|
||||
<svg
|
||||
viewBox="144 105 45 27"
|
||||
style="stroke:#ffffff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;"
|
||||
>
|
||||
|
||||
<circle
|
||||
style="display:inline; fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;"
|
||||
id="path905-7"
|
||||
cx="80.57341"
|
||||
cy="225.22316"
|
||||
r="0.95786411"
|
||||
transform="matrix(1.0762321,0,0,1.0762321,69.515692,-132.21175)" />
|
||||
<path
|
||||
style="fill:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 145.67023,114.3131 c 1.78592,-2.29773 3.12471,-4.35186 3.94309,-6.12246 l 0.48061,4.00796 2.67648,-3.44512 c 0,0 -1.33095,6.24196 0.31881,10.88518"
|
||||
id="path929"
|
||||
sodipodi:nodetypes="ccccc" />
|
||||
<path
|
||||
style="fill:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 155.88053,113.34602 c -0.45893,4.69925 -1.25065,3.69121 -0.18477,4.04488 1.55502,0.51598 4.4305,-0.81121 10.33621,-4.63748"
|
||||
id="path931"
|
||||
sodipodi:nodetypes="csc" />
|
||||
<path
|
||||
style="fill:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 160.60127,112.03858 c 0,0 -1.72603,7.30276 -7.26034,13.1046"
|
||||
id="path933"
|
||||
sodipodi:nodetypes="cc" />
|
||||
<path
|
||||
style="fill:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 159.24101,117.33599 c 0,0 1.82586,2.56841 3.00349,5.26021 2.17197,-3.1972 4.23136,-5.70438 6.74074,-10.34101 0,0 8.08433,12.22102 13.33159,16.24117 1.18468,0.90765 5.45607,1.69302 4.48962,-3.15342"
|
||||
id="path935"
|
||||
sodipodi:nodetypes="cccsc" />
|
||||
<path
|
||||
style="fill:none;fill-opacity:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 165.97522,118.73555 c 0.217,0.2611 2.78332,2.20999 2.78332,2.20999 l 3.36893,-3.46208"
|
||||
id="path939"
|
||||
sodipodi:nodetypes="ccc" />
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../style/colors.scss";
|
||||
@import "../style/widths.scss";
|
||||
|
||||
div.footer{
|
||||
position : fixed;
|
||||
bottom: 0em;
|
||||
padding-left:3em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
background-color: hsla(0, 0%, 1%, 0.904);
|
||||
min-height:3.5em;
|
||||
width: 100%;
|
||||
max-width: $maxWidth;
|
||||
z-index: 9;
|
||||
transition: 0.5s;
|
||||
&.hide{
|
||||
transform:translateY(100%)
|
||||
}
|
||||
}
|
||||
svg{
|
||||
height: 2.5em;
|
||||
}
|
||||
h1{
|
||||
font-size: 2em;
|
||||
margin-right: 0.5em;
|
||||
color:white;
|
||||
}
|
||||
.arrow{
|
||||
margin-left: 0.4em;
|
||||
position : fixed;
|
||||
bottom:0.5em;
|
||||
transition: 0.35s;
|
||||
z-index: 99;
|
||||
&.up{
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
&.down{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
@supports (backdrop-filter: blur(0.5rem)){
|
||||
div.footer{
|
||||
background-color: hsla(0, 100%, 0%, 0.25);
|
||||
backdrop-filter: blur(0.5rem);
|
||||
/* adding backdrop-filter compatibility for firefox and safari */
|
||||
-webkit-backdrop-filter: blur(0.6rem);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -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>
|
||||
375
src/components/Menu.vue
Normal file
375
src/components/Menu.vue
Normal file
@@ -0,0 +1,375 @@
|
||||
<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:'profile'}">
|
||||
Profile
|
||||
</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/colors.scss';
|
||||
|
||||
.burger{
|
||||
display: none;
|
||||
opacity:0;
|
||||
transition:0.5s;
|
||||
& .button{
|
||||
width: 3.5em;
|
||||
// height: 4.5em;
|
||||
background-color:$action-normal;
|
||||
border: none;
|
||||
transition:1s ;
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
& .hamburger{
|
||||
& .cross, & .middle {
|
||||
stroke-width:7;
|
||||
transition:1s ;
|
||||
-moz-transition:1s ;
|
||||
-webkit-transition:1s ;
|
||||
stroke:black;
|
||||
}
|
||||
& .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: 'acme', Arial, Helvetica, sans-serif;
|
||||
//font-style: italic;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
color : $main-normal;
|
||||
text-decoration: none;
|
||||
&::after{
|
||||
content: "";
|
||||
background-color: $action-normal;
|
||||
width: 0%;
|
||||
margin-left:0;
|
||||
height: 4px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:hover, &.router-link-exact-active{
|
||||
color:$action-normal;
|
||||
transition: color 0.25s;
|
||||
cursor: pointer;
|
||||
}
|
||||
&.router-link-exact-active{
|
||||
filter: drop-shadow(0 0 3px $action-normal);
|
||||
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 {
|
||||
padding: 0 0.3em;
|
||||
transform: translateY(1.25em);
|
||||
opacity:0;
|
||||
overflow: hidden;
|
||||
font-style: italic;
|
||||
@for $i from 1 to 6 {
|
||||
&:nth-child(#{$i}){
|
||||
animation: 250ms theMenu (100 * $i - 0ms) ease forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (width < 750px ){
|
||||
nav.menu-container{
|
||||
//border: $main-normal 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) {
|
||||
nav.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>
|
||||
171
src/components/Modal.vue
Normal file
171
src/components/Modal.vue
Normal file
@@ -0,0 +1,171 @@
|
||||
<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">
|
||||
Close
|
||||
</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/colors.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: 999;
|
||||
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: darken($action-normal, 30%);
|
||||
font-size: 1.7em;
|
||||
transition: color 0.25s ease;
|
||||
&:hover{
|
||||
color: darken($action-normal, 45%);;
|
||||
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{
|
||||
|
||||
display: block;
|
||||
margin: 0.5em auto;
|
||||
border: none;
|
||||
border-radius: 7px;
|
||||
font-size:1.3rem;
|
||||
background-color: $action-normal;
|
||||
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($action-normal, 15%)
|
||||
}
|
||||
}
|
||||
// .button{
|
||||
// border-radius: 0.5em;
|
||||
// margin:0.5em auto;
|
||||
// display: block;
|
||||
// padding: 0.5em 1em;
|
||||
// border:none;
|
||||
// color:$renforced-normal;
|
||||
// font-family: Arial, Helvetica, sans-serif;
|
||||
// font-size: 1.2rem;
|
||||
// font-weight: 600;
|
||||
// background-color: $action-normal;
|
||||
// outline: $renforced-normal;
|
||||
// outline-style: solid;
|
||||
// outline-offset: -5px;
|
||||
// transition: 0.25s ease;
|
||||
// &:hover{
|
||||
// background-color: darken($action-normal, 10%);
|
||||
// cursor:pointer;
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
143
src/components/Name.vue
Normal file
143
src/components/Name.vue
Normal file
@@ -0,0 +1,143 @@
|
||||
<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/colors.scss';
|
||||
|
||||
.name{
|
||||
display:flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
margin:0 2.4rem;
|
||||
|
||||
// border : #f0f solid 1px;
|
||||
& h1{
|
||||
position :relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin-top: 0.5em;
|
||||
padding: 0em ;
|
||||
font-family: 'acme', Arial, Helvetica, sans-serif;
|
||||
font-size: 2.7rem;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.2em;
|
||||
color: $title-normal;
|
||||
// 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:$main-normal;
|
||||
animation: 600ms subtitle 300ms cubic-bezier(.55,.01,.44,1) forwards;
|
||||
font-family: 'acme', Arial, Helvetica, sans-serif;
|
||||
font-style: italic;
|
||||
letter-spacing: 0.2ch;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@keyframes title-h1{
|
||||
0%{
|
||||
margin-top: 1.6em;
|
||||
color:$renforced-normal
|
||||
}
|
||||
|
||||
}
|
||||
@keyframes title-spans{
|
||||
0% {
|
||||
transform: rotateY(360deg);
|
||||
// color: $renforced-normal;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotateY(0deg);
|
||||
|
||||
}
|
||||
}
|
||||
@keyframes subtitle{
|
||||
|
||||
100% {
|
||||
top:0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width < 400px){
|
||||
.name{
|
||||
margin : 0;
|
||||
}
|
||||
}
|
||||
@media (width < 520px){
|
||||
|
||||
.name h1 .r-letter{
|
||||
margin-left:2ch;
|
||||
}
|
||||
.name h1 .i-letter{
|
||||
margin-right:2ch;
|
||||
}
|
||||
.come-in h2{
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
55
src/components/Spinner.vue
Normal file
55
src/components/Spinner.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name : 'SpinnerCpnt'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
div{
|
||||
//display: inline-block;
|
||||
width: 1.0em;
|
||||
margin-right: 1ch;
|
||||
aspect-ratio: 1;
|
||||
border:3px solid #ff00c8;
|
||||
border-top:3px solid rgb(216, 226, 253);
|
||||
border-radius:50%;
|
||||
|
||||
-webkit-transition-property: -webkit-transform;
|
||||
-webkit-transition-duration: 1.2s;
|
||||
-webkit-animation-name: rotate;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-webkit-animation-timing-function: linear;
|
||||
|
||||
-moz-transition-property: -moz-transform;
|
||||
-moz-animation-name: rotate;
|
||||
-moz-animation-duration: 1.2s;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-moz-animation-timing-function: linear;
|
||||
|
||||
transition-property: transform;
|
||||
animation-name: rotate;
|
||||
animation-duration: 1.2s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;}
|
||||
|
||||
@-webkit-keyframes rotate {
|
||||
from {-webkit-transform: rotate(0deg);}
|
||||
to {-webkit-transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
@-moz-keyframes rotate {
|
||||
from {-moz-transform: rotate(0deg);}
|
||||
to {-moz-transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from {transform: rotate(0deg);}
|
||||
to {transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
1
src/ici.txt
Normal file
1
src/ici.txt
Normal file
@@ -0,0 +1 @@
|
||||
file:///home/raffi/Images/Images/MaPhoto.jpg
|
||||
19
src/main.js
19
src/main.js
@@ -1,4 +1,21 @@
|
||||
import { createApp } from 'vue'
|
||||
import './reset.css'
|
||||
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'
|
||||
import { faLessThan, faGreaterThan } from '@fortawesome/free-solid-svg-icons'
|
||||
library.add( faCircleXmark, faLessThan, faGreaterThan )
|
||||
|
||||
|
||||
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;
|
||||
}
|
||||
48
src/router/index.js
Executable file
48
src/router/index.js
Executable file
@@ -0,0 +1,48 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
|
||||
const routes = [
|
||||
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: () => import('@/views/Index.vue')
|
||||
},
|
||||
{
|
||||
path: '/profile',
|
||||
name: 'profile',
|
||||
component: () => import('@/views/Profile.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')
|
||||
},
|
||||
{
|
||||
path: '/:pathMatch(.*)',
|
||||
name: '404',
|
||||
component: () => import('@/views/404.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:'profile'})
|
||||
}
|
||||
else {
|
||||
router.push({name:'home'})
|
||||
}
|
||||
},
|
||||
unCheck(){
|
||||
this.checked = false;
|
||||
//console.log("checked ? : " + this.checked)
|
||||
},
|
||||
check(){
|
||||
this.checked = true;
|
||||
//console.log("checked ? : " + this.checked)
|
||||
}
|
||||
}
|
||||
})
|
||||
21
src/style/colors.scss
Normal file
21
src/style/colors.scss
Normal file
@@ -0,0 +1,21 @@
|
||||
$body-bg:hsl(0, 0%, 93%);
|
||||
$page-bg:hsl(234, 20%, 30%);
|
||||
//$page-bg1:hsl(0, 0%, 60%);
|
||||
|
||||
$renforced-light : hsl(13, 68%, 60%);
|
||||
$renforced-normal: hsl(13, 68%, 40%);
|
||||
$renforced-dark : hsl(13, 68%, 20%);
|
||||
|
||||
$hypertext-light : hsl(245, 100%, 87%);
|
||||
$hypertext-normal : hsl(245, 100%, 82%);
|
||||
|
||||
$main-normal: hsl(52, 50%, 90%);
|
||||
$main-dark : hsl(52, 50%, 70%);
|
||||
|
||||
$title-light : hsl(37, 79%, 90%);
|
||||
$title-normal: hsl(37, 79%, 75%);
|
||||
$title-dark : hsl(37, 79%, 60%);
|
||||
|
||||
$action-light : hsl(139, 57%, 85%);
|
||||
$action-normal: hsl(139, 57%, 77%);
|
||||
$action-dark : hsl(139, 57%, 67%);
|
||||
15
src/style/shared_old.scss
Normal file
15
src/style/shared_old.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
$body-bg:rgb(206, 206, 206);
|
||||
$page-bg:#3D405B;
|
||||
$page-bg1:#999;
|
||||
|
||||
$renforced-normal:rgba(141, 0, 0, 1);
|
||||
$renforced-light: #E07A5F;
|
||||
$renforced-light-transparent: #e07b5fe9;
|
||||
$main-normal:#F4F1DE;
|
||||
$action-normal:#A5E6BA;
|
||||
$title-normal: #F2CC8F;
|
||||
|
||||
$font-color:$main-normal;
|
||||
|
||||
$maxWidth: 1200px;
|
||||
$imageWidth: 100%;
|
||||
2
src/style/widths.scss
Normal file
2
src/style/widths.scss
Normal file
@@ -0,0 +1,2 @@
|
||||
$maxWidth: 1200px;
|
||||
$imageWidth: 100%;
|
||||
70
src/views/404.vue
Normal file
70
src/views/404.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<script setup>
|
||||
import { onMounted } from 'vue';
|
||||
import { useBurgerStore } from '@/stores/burger'
|
||||
const burger = useBurgerStore();
|
||||
onMounted(() => {
|
||||
burger.check()
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<p class="p-404">
|
||||
404...
|
||||
</p>
|
||||
<p class="emoji">🤔<span class="small">(Hmmm...)</span></p>
|
||||
<p>The page you are looking for does not seem to exist!</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../style/colors.scss';
|
||||
|
||||
|
||||
.content{
|
||||
|
||||
& > p{
|
||||
text-indent:0;
|
||||
color : $main-normal;
|
||||
opacity: 1;
|
||||
font-size : 2em;
|
||||
padding:1rem 1.25rem;
|
||||
text-align: center;
|
||||
animation: text 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
|
||||
&.p-404{
|
||||
padding:1rem 1.25rem;
|
||||
font-size : 7rem;
|
||||
|
||||
}
|
||||
&.emoji{
|
||||
margin-top : 5rem;
|
||||
padding:1rem 1.25rem;
|
||||
font-size : 15rem;
|
||||
line-height: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.small{
|
||||
font-size : 3rem;
|
||||
|
||||
}
|
||||
|
||||
@keyframes text{
|
||||
0%{
|
||||
opacity : 0;
|
||||
}
|
||||
33%{
|
||||
opacity : 0;
|
||||
}
|
||||
100%{
|
||||
opacity:1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width < 600px){
|
||||
.content{
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
276
src/views/Contact.vue
Normal file
276
src/views/Contact.vue
Normal file
@@ -0,0 +1,276 @@
|
||||
<script setup>
|
||||
import { useBurgerStore } from '@/stores/burger'
|
||||
import Modal from '@/components/Modal.vue';
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { formService } from '@/services/form';
|
||||
import Spinner from '@/components/Spinner.vue';
|
||||
|
||||
//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 = () => {
|
||||
// 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 class="subtitle">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>
|
||||
<Spinner/>
|
||||
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">Thank you !</h1>
|
||||
<p class="modal-p">Your message has been sent successfully!</p>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../style/colors.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: $hypertext-normal;
|
||||
text-decoration: none;
|
||||
transition : 0.25s;
|
||||
&:hover{
|
||||
text-decoration: underline;
|
||||
color: $hypertext-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
& button{
|
||||
|
||||
margin: 0.5em;
|
||||
border: none;
|
||||
border-radius: 7px;
|
||||
font-size:1.5rem;
|
||||
background-color: $action-normal;
|
||||
outline : 3px;
|
||||
outline-style: solid;
|
||||
outline-offset: -5px;
|
||||
outline-color: black;
|
||||
color:black;
|
||||
outline-color: $page-bg;
|
||||
color:$page-bg;
|
||||
padding: 0.3em 0.9em;
|
||||
transition:0.3s;
|
||||
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
background-color: darken($action-normal, 15%)
|
||||
}
|
||||
&:disabled{
|
||||
background-color: hsl(0, 0%, 55%);
|
||||
outline-color: $page-bg;
|
||||
color:$page-bg;
|
||||
&:hover{
|
||||
cursor : default;
|
||||
}
|
||||
}
|
||||
& > div{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
p.subtitle{
|
||||
margin: auto 0.5em;
|
||||
}
|
||||
.error{
|
||||
color: $renforced-light;
|
||||
text-align: center;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
</style>
|
||||
72
src/views/I_am copy.vue
Normal file
72
src/views/I_am copy.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<script setup>
|
||||
import { onMounted } from 'vue';
|
||||
import { useBurgerStore } from '@/stores/burger'
|
||||
const burger = useBurgerStore();
|
||||
onMounted(() => {
|
||||
burger.check()
|
||||
//console.log("Mounted")
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="title">
|
||||
<div class="logo"></div>
|
||||
<h3>Talking about code</h3>
|
||||
</div>
|
||||
<p>As you guessed, my name is Raffi. I have been working in the beautiful world of maintenance for 20 years, where I have learned a lot about logic. Throughout my life, both for professional purposes and for fun, I have learned several programming languages. Here are some of them: Video Designer, Twido Soft, Zelio Soft, PL7. When I was younger, I also dabbled in Turbo Pascal, Qbasic, and more recently, during the confinement, I explored a bit of C.</p>
|
||||
|
||||
<p>In 2022, I took a five-month training course to further my knowledge of web programming. During this time, I learned HTML, CSS, JavaScript, WordPress, Vue.js, PHP, SQL, database management, and much more! After completing the training, I continued to work independently to delve deeper into WordPress API-REST and gain a better understanding of what can be achieved with Vue.js. Now, I feel prepared to move forward!</p>
|
||||
<p>I'm accustomed to working with deadlines, challenges, and all kinds of unforeseen circumstances. I thrive in situations that push me out of my comfort zone and require quick thinking. As a native French speaker, I'm also fluent in English and Turkish, allowing me to communicate effectively in multiple languages. I enjoy discovering new things and seizing opportunities to learn and grow. With my experience and language skills, I'm ready to take on new challenges and contribute to motivating projects.</p>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
@import '../style/colors.scss';
|
||||
|
||||
|
||||
.content{
|
||||
& .title{
|
||||
& > .logo{
|
||||
background-image: url('../assets/questionSolo.png');
|
||||
background-size: 80%;
|
||||
}
|
||||
}
|
||||
& > p{
|
||||
|
||||
color : $main-normal;
|
||||
opacity: 1;
|
||||
padding:1em 1.25em 0em 1em;
|
||||
line-height: 1.5em;
|
||||
animation: text 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes text{
|
||||
0%{
|
||||
opacity : 0;
|
||||
}
|
||||
33%{
|
||||
opacity : 0;
|
||||
}
|
||||
100%{
|
||||
opacity:1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes image_show{
|
||||
0%{
|
||||
opacity: 0;
|
||||
left: 0;
|
||||
}
|
||||
33%{
|
||||
opacity: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
@media (width < 600px){
|
||||
.content{
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
299
src/views/Index.vue
Normal file
299
src/views/Index.vue
Normal file
@@ -0,0 +1,299 @@
|
||||
<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/colors.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: $renforced-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);
|
||||
-moz-transform:rotateY(90deg);
|
||||
-webkit-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;
|
||||
|
||||
-moz-animation-duration: 1000ms;
|
||||
-moz-animation-name: title-last-name;
|
||||
-moz-animation-timing-function: cubic-bezier(0.2, 0.9, 0.44, 1);
|
||||
-moz-animation-delay: $i*50 + 300ms;
|
||||
-moz-animation-fill-mode: forwards;
|
||||
|
||||
-webkit-animation-duration: 1000ms;
|
||||
-webkit-animation-name: title-last-name;
|
||||
-webkit-animation-timing-function: cubic-bezier(0.2, 0.9, 0.44, 1);
|
||||
-webkit-animation-delay: $i*50 + 300ms;
|
||||
-webkit-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);
|
||||
-moz-animation: title-name 1000ms cubic-bezier(0.2, 0.9, 0.44, 1);
|
||||
-webkit-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:$main-normal;
|
||||
|
||||
|
||||
animation: 1200ms subtitle 500ms cubic-bezier(0.2, 0.9, 0.44, 1) forwards;
|
||||
-moz-animation: 1200ms subtitle 500ms cubic-bezier(0.2, 0.9, 0.44, 1) forwards;
|
||||
-webkit-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;
|
||||
-moz-animation: 1400ms image_appear 1200ms ease forwards;
|
||||
-webkit-animation: 1400ms image_appear 1200ms ease forwards;
|
||||
|
||||
background-color: $action-normal;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes title-name{
|
||||
0% {
|
||||
right:1ch;
|
||||
//opacity: 0;
|
||||
}
|
||||
100% {
|
||||
right : 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes title-name{
|
||||
0% {
|
||||
right:1ch;
|
||||
//opacity: 0;
|
||||
}
|
||||
100% {
|
||||
right : 0px;
|
||||
}
|
||||
}
|
||||
@keyframes title-last-name{
|
||||
0%{
|
||||
transform : rotateX(270deg);
|
||||
}
|
||||
100%{
|
||||
transform : rotateX(0deg);
|
||||
|
||||
}
|
||||
}
|
||||
@-moz-keyframes title-last-name{
|
||||
0%{
|
||||
transform : rotateX(270deg);
|
||||
}
|
||||
100%{
|
||||
transform : rotateX(0deg);
|
||||
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes title-last-name{
|
||||
0%{
|
||||
transform : rotateX(270deg);
|
||||
}
|
||||
100%{
|
||||
transform : rotateX(0deg);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes subtitle{
|
||||
0% {
|
||||
top:150px;
|
||||
}
|
||||
100% {
|
||||
top:0;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes subtitle{
|
||||
0% {
|
||||
top:150px;
|
||||
}
|
||||
100% {
|
||||
top:0;
|
||||
}
|
||||
}
|
||||
@keyframes subtitle{
|
||||
0% {
|
||||
top:150px;
|
||||
}
|
||||
100% {
|
||||
top:0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes image_appear{
|
||||
0%{
|
||||
opacity : 0;
|
||||
}
|
||||
100%{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes image_appear{
|
||||
0%{
|
||||
opacity : 0;
|
||||
}
|
||||
100%{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-webkit-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>
|
||||
126
src/views/Networks.vue
Normal file
126
src/views/Networks.vue
Normal file
@@ -0,0 +1,126 @@
|
||||
<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 linkedin">
|
||||
<a href="https://fr.linkedin.com/in/raffi-alexanian" target="_blank">
|
||||
<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>
|
||||
</a>
|
||||
<p>A Linkedin profile (but be aware I'm not so talkative 😉): <a href="https://fr.linkedin.com/in/raffi-alexanian" target="_blank">fr.linkedin.com/in/raffi-alexanian</a> </p>
|
||||
</div>
|
||||
<div class="list github">
|
||||
<a href="https://www.github.com/Raffiskender" target="_blank">
|
||||
<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>
|
||||
</a>
|
||||
<p>Github page and projects: <a href="https://www.github.com/Raffiskender" target="_blank">github.com/Raffiskender</a> </p>
|
||||
</div>
|
||||
<div class="list code-pen">
|
||||
<a href="https://codepen.io/Raffiskender" target="_blank">
|
||||
<svg fill="#000000" width="2em" viewBox="0 0 24 24">
|
||||
<path d="M18.144 13.067v-2.134L16.55 12zm1.276 1.194a.628.628 0 01-.006.083l-.005.028-.011.053-.01.031c-.005.016-.01.031-.017.047l-.014.03a.78.78 0 01-.021.043l-.019.03a.57.57 0 01-.08.1l-.026.025a.602.602 0 01-.036.03l-.029.022-.01.008-6.782 4.522a.637.637 0 01-.708 0L4.864 14.79l-.01-.008a.599.599 0 01-.065-.052l-.026-.025-.032-.034-.021-.028a.588.588 0 01-.067-.11l-.014-.031a.644.644 0 01-.017-.047l-.01-.03c-.004-.018-.008-.036-.01-.054l-.006-.028a.628.628 0 01-.006-.083V9.739c0-.028.002-.055.006-.083l.005-.027.011-.054.01-.03a.574.574 0 01.12-.217l.031-.034.026-.025a.62.62 0 01.065-.052l.01-.008 6.782-4.521a.638.638 0 01.708 0l6.782 4.521.01.008.03.022.035.03c.01.008.017.016.026.025a.545.545 0 01.08.1l.019.03a.633.633 0 01.021.043l.014.03c.007.016.012.032.017.047l.01.031c.004.018.008.036.01.054l.006.027a.619.619 0 01.006.083zM12 0C5.373 0 0 5.372 0 12 0 18.627 5.373 24 12 24c6.628 0 12-5.372 12-12 0-6.627-5.372-12-12-12m0 10.492L9.745 12 12 13.51 14.255 12zm.638 4.124v2.975l4.996-3.33-2.232-1.493zm-6.272-.356l4.996 3.33v-2.974l-2.764-1.849zm11.268-4.52l-4.996-3.33v2.974l2.764 1.85zm-6.272-.356V6.41L6.366 9.74l2.232 1.493zm-5.506 1.549v2.134L7.45 12Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<p>Some CodePen: <a href="https://codepen.io/Raffiskender" target="_blank">codepen.io/Raffiskender</a> </p>
|
||||
</div>
|
||||
|
||||
<div class="list cv">
|
||||
<a href="https://cv.raffiskender.com" target="_blank">
|
||||
<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>
|
||||
</a>
|
||||
<p>And also a CV (in french): <a href="https://cv.raffiskender.com" target="_blank">https://cv.raffiskender.com</a> </p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
@import '../style/colors.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;
|
||||
&.linkedin{
|
||||
padding-top: 2em;
|
||||
}
|
||||
& svg{
|
||||
fill: $title-normal;
|
||||
}
|
||||
|
||||
& > p{
|
||||
color : $main-normal;
|
||||
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: $hypertext-normal;
|
||||
text-decoration: none;
|
||||
transition : 0.25s;
|
||||
&:hover{
|
||||
text-decoration: underline;
|
||||
color: $hypertext-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@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>
|
||||
86
src/views/Profile.vue
Normal file
86
src/views/Profile.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<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>Profile</h3>
|
||||
</div>
|
||||
|
||||
<p>As you guessed, my name is Raffi. I am a full-stack web developer. I'm comfortable with both back-end and front-end programming (with a slight preference for front-end). While I can code many things in vanilla (pure) HTML, CSS, and JavaScript, I commonly use frameworks for both front-end and back-end development. For example, the portfolio you are currently viewing was coded with Vue.js. It provides all the necessary tools to easily build, organize, and maintain applications. It utilizes a store and a router, as well as some services to communicate with the backend. Yes, this portfolio also includes a small backend specifically for handling form submissions. It is actually a WordPress plugin I developed to send the form via email.
|
||||
</p>
|
||||
<h4>Security</h4>
|
||||
<p>I always rigorously test my code and push it to its limits because I am highly concerned about security. Therefore, the contact form on this portfolio incorporates various security measures both on the front-end and back-end. For example, if you try to manipulate the sending button through the console, you will see what happens... And if you manage to find the backend address and attempt to send a contact form request there, you will see what happens...
|
||||
</p>
|
||||
<h4>My Journey...</h4>
|
||||
<p>I have always been fascinated by coding and programming. I started when I was young, around 9 years old. I picked up a book from my father and read about the basics of programming languages. That's how I began. Then came Turbo Pascal, and it continued from there. While working in maintenance, I continued programming, but this time focusing on electronic devices, stepper motors, programmable logic controllers (PLCs), and various other components. Logic has always been my stronghold. In 2022, I had the opportunity to participate in a five-month training course to enhance my knowledge of web programming. During this period, I delved deeper into HTML, CSS, JavaScript, PHP, WordPress, Vue.js, SQL, database management, object-oriented programming, project management, and much more!
|
||||
</p>
|
||||
<p>I am accustomed to working with deadlines, challenges, and all kinds of unforeseen circumstances. I thrive in situations that push me beyond my comfort zone and demand quick thinking. As a native French speaker, I am also fluent in English and Turkish, allowing me to communicate effectively in multiple languages. I enjoy exploring new horizons and seizing opportunities for learning and personal growth. With my experience and language skills, I am prepared to embrace fresh challenges and contribute to inspiring projects.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
@import '../style/colors.scss';
|
||||
|
||||
|
||||
.content{
|
||||
& .title{
|
||||
& > .logo{
|
||||
background-image: url('../assets/questionSolo.png');
|
||||
background-size: 80%;
|
||||
}
|
||||
}
|
||||
& h4{
|
||||
color: $title-normal;
|
||||
font-family: 'acme', Arial, Helvetica, sans-serif;
|
||||
font-size:1.5em;
|
||||
margin-left: 2em;
|
||||
margin-top: 1.25em;
|
||||
}
|
||||
& > p{
|
||||
|
||||
color : $main-normal;
|
||||
opacity: 1;
|
||||
padding:1em 1.25em 0em 1em;
|
||||
line-height: 1.5em;
|
||||
animation: text 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes text{
|
||||
0%{
|
||||
opacity : 0;
|
||||
}
|
||||
33%{
|
||||
opacity : 0;
|
||||
}
|
||||
100%{
|
||||
opacity:1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes image_show{
|
||||
0%{
|
||||
opacity: 0;
|
||||
left: 0;
|
||||
}
|
||||
33%{
|
||||
opacity: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
@media (width < 600px){
|
||||
.content{
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
449
src/views/Projects.vue
Normal file
449
src/views/Projects.vue
Normal file
@@ -0,0 +1,449 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useBurgerStore } from '@/stores/burger'
|
||||
//import { faThermometerQuarter } from '@fortawesome/free-solid-svg-icons';
|
||||
const burger = useBurgerStore();
|
||||
onMounted(() => {
|
||||
burger.check();
|
||||
const allTabs = document.querySelector('.all-tabs')
|
||||
allTabs.addEventListener('scrollLeft', handleLeftArrow)
|
||||
allTabs.addEventListener('scrollRight', handleRightArrow)
|
||||
})
|
||||
|
||||
|
||||
const items = ref([
|
||||
{ id:1,
|
||||
selected : false,
|
||||
name : "Poils O pattes",
|
||||
bg_image : "url('https://picsum.photos/id/20/200/300')"
|
||||
},
|
||||
{ id:2,
|
||||
selected : false,
|
||||
name : "Liste de course",
|
||||
bg_image : "url('https://picsum.photos/id/23/200/300')"
|
||||
},
|
||||
{ id:3,
|
||||
selected : false,
|
||||
name : "Memory",
|
||||
bg_image : "url('https://picsum.photos/id/23/200/300')"
|
||||
},
|
||||
|
||||
{ id:4,
|
||||
selected : true,
|
||||
name : "A backend for an artist",
|
||||
bg_image : "url('https://picsum.photos/id/23/200/300')"
|
||||
},
|
||||
|
||||
]);
|
||||
|
||||
const handleLeftArrow = () =>{
|
||||
for (const item of items.value) {
|
||||
if (item.selected){
|
||||
item.id - 1 == 0 ? changeSelectedTab(items.value.length) : changeSelectedTab(item.id - 1)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleRightArrow = () =>{
|
||||
let exit = false ;
|
||||
for (const item of items.value) {
|
||||
if (item.selected && !exit){
|
||||
item.id == items.value.length ? changeSelectedTab(1) : changeSelectedTab(item.id + 1)
|
||||
exit = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const changeSelectedTab = (id) => {
|
||||
for(const item of items.value){
|
||||
item.selected = item.id == id ? true : false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- faire un v-for sur le tableau pour avoir le nom des onglets -->
|
||||
<div class="content">
|
||||
<div class="title">
|
||||
<div class="logo"></div>
|
||||
<h3>projects</h3>
|
||||
</div>
|
||||
<div class="tabs-bar">
|
||||
<button class="left-arrow arrow" @click="handleLeftArrow()">
|
||||
<font-awesome-icon icon="fa-solid fa-less-than" />
|
||||
</button>
|
||||
<ul class="all-tabs">
|
||||
<li
|
||||
v-for="item in items"
|
||||
v-bind:key="item.id"
|
||||
class="tab"
|
||||
v-bind:class="{'active': item.selected}"
|
||||
:style="{opacity : item.selected ? 1 : 0}"
|
||||
:id = "'tab-' + item.id">
|
||||
{{ item.name }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button
|
||||
class="right-arrow arrow"
|
||||
@click="handleRightArrow()"
|
||||
>
|
||||
<font-awesome-icon icon="fa-solid fa-greater-than" />
|
||||
</button>
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<div class="project"
|
||||
v-if="items[0].selected">
|
||||
<p>Watch a presentation of this (awesome) project... But in the French language</p>
|
||||
<iframe class="video" src="https://www.youtube.com/embed/Q3WiRGLeXSQ?start=2329" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
<h4>The project</h4>
|
||||
<p class="project-summary">
|
||||
<a href="https://poilsopattes.raffiskender.com" target="blank">
|
||||
"Poils O'Pattes"</a> is a grooming salon management project undertaken with a team of 5 people over a duration of one month. I had the pleasure of contributing to it as a backend coder and scrum master...
|
||||
</p>
|
||||
<div class="image-container">
|
||||
<div class="image-description">
|
||||
<p>Here you can see the main page (Oh! there is a connection system!)</p>
|
||||
<img src="../assets/images/pop/Screenshot_pop1.webp" alt="print screen of Poils O pattes weeb site">
|
||||
</div>
|
||||
<div class="image-description">
|
||||
<p>Here you can see the page to fix an appointement to the salon</p>
|
||||
<img src="../assets/images/pop/Screenshot_pop2.webp" alt="print screen of Poils O pattes weeb site">
|
||||
</div>
|
||||
<div class="image-description">
|
||||
<p>Services page</p>
|
||||
<img src="../assets/images/pop/Screenshot_pop3.webp" alt="print screen of Poils O pattes weeb site">
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-explanation">
|
||||
<p>
|
||||
The front-end was created by an awesome crew of 3 girls: <a href="#">Laura Pécheux</a>, <a href="#">Xénia Onescu</a>, and <a href="#">Mélodie Yamashita</a>. They built it using React, and they gaves it a really girly, catchy and vibrant design I really do appreciate.
|
||||
</p>
|
||||
<p>
|
||||
But I didn't worked too much on the front, I worked hard on...
|
||||
</p>
|
||||
<h4>The back-end</h4>
|
||||
<p>I have been working with <a href="#">Hocine Rehab</a> to design and code the back-end. Being two wasn't too much! This back-end controls:</p>
|
||||
<ul>
|
||||
<li>Users (their animals, their appointments, their status as stakeholders, clients, or admins).</li>
|
||||
<li>Animals (their owners, breeds, and weights).</li>
|
||||
<li>Appointments (which user with which stakeholder at what time and for which animal).</li>
|
||||
<li>The services provided by the salon.</li>
|
||||
<li>The products available in the salon.</li>
|
||||
</ul>
|
||||
<p>And we had one month to achieve and make it operational, stable, and efficient.</p>
|
||||
<p>I won't describe every single detail (CPT, Taxonomies, Roles, Capabilities, ACL, or Custom Tables) because it would be too long. However, let me talk about the part I preferred: The schedule management.</p>
|
||||
<img src="../assets/images/pop/back.webp" alt="image of the back-office">
|
||||
<p>Please note the following:</p>
|
||||
<ol>
|
||||
<li>Past appointments are grayed out and cannot be modified.</li>
|
||||
<li>Only one appointment can be modified at a time. The others are grayed out when one of them is being modified (as in the current case).</li>
|
||||
<li>The dynamically generated dates are in French.</li>
|
||||
<li>Some appointments are called "orphans." This is because when making an appointment on the front-end, they are not assigned. By clicking "honor this appointment," the groomer assigns it to themselves. It is then visible only to them (and the client on the front-end).</li>
|
||||
<li>We have the ability to modify an appointment.</li>
|
||||
<li>As a result, unavailable time slots are grayed out and cannot be selected. In the example above, 2 slots are taken on September 30th. If the date is changed, the time slots for the selected day automatically appear, and the unavailable time slots are grayed out. This mechanism is implemented using a JS-written API request.</li>
|
||||
<li>The client select box is populated using a WordPress function, but...</li>
|
||||
<li>The dog select box is automatically filled by fetching the client's dogs via the API for the currently selected client.</li>
|
||||
</ol>
|
||||
<p>One more detail: Everything you see has been programmed in vanilla JavaScript, vanilla CSS, HTML, and PHP (with WordPress functions). I hope you like it, as it has been quite challenging for us.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project"
|
||||
v-else-if ="items[1].selected">
|
||||
<p>A presentation of this (finally useful) project can be watched in the video below... in the language of Shakespeare!</p>
|
||||
<!-- <p>A presentation of this Watch a presentation of this (finally useful) project... And in the English language!</p> -->
|
||||
<iframe class = "video" src="https://www.youtube.com/embed/3ZlYSN8dt5U" title="Presentation of (my) shopping list project" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> <h4>The project</h4>
|
||||
<p class="project-summary">
|
||||
The project <a href="https://liste-v2.raffiskender.com" target="_blank">"shopping list"</a> began when I was bored, thinking of what I could code. A teacher used to tell us "make little projects, like a list or a calculator...". So I thought, "Okay, let's create a shopping list for my wife that can also be used by my mom."
|
||||
</p>
|
||||
<p>
|
||||
Finally, I am the one who uses it... But not as a shopping list: as a to-do list, and even more, as multiple to-do lists / reminders.
|
||||
</p>
|
||||
|
||||
<div class="image-container">
|
||||
<div class="image-description">
|
||||
<p>You have to create an account, or you can use your own Google account.</p>
|
||||
<img src="../assets/images/LDC/LDC_screenshot_1.png" alt="screenshot of shopping list web application">
|
||||
</div>
|
||||
<div class="image-description">
|
||||
<p>Here are tabs you can name whatever you want, with lists inside.</p>
|
||||
<img src="../assets/images/LDC/LDC_screenshot_2.png" alt="screenshot of shopping list web application">
|
||||
</div>
|
||||
<div class="image-description">
|
||||
<p>Profile page.</p>
|
||||
<img src="../assets/images/LDC/LDC_screenshot_3.png" alt="screenshot of shopping list web application">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-explanation">
|
||||
<h4>The front-end</h4>
|
||||
<p>
|
||||
The front-end was created in Vue. It incorporates a store, services to communicate with the backend (which happens often), a router, and plugins to sanitize the text, among other things.
|
||||
</p>
|
||||
|
||||
<h4>The back-end</h4>
|
||||
<p>The back-end manages:</p>
|
||||
<ul>
|
||||
<li>User management (with or without the Google sign-in API)</li>
|
||||
<li>User's lists (encrypted json in a custom table)</li>
|
||||
<li>Password reinitialization with custom tokens</li>
|
||||
<li>Email sending for email verification</li>
|
||||
</ul>
|
||||
<p>In fact, this small application has all the features of a big one!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project"
|
||||
v-else-if ="items[2].selected">
|
||||
<p>
|
||||
That's a little project I made to keep my daughter occupied (but it worked only 2 weeks...). All pictures are fetched randomly from the Lorem Picsum free image bank (more details on my codepen for this part).
|
||||
</p>
|
||||
<p>Please note that this project will not work on mobile devices</p>
|
||||
<p><a href="https://memory.raffiskender.com" target="_blank">See this project</a></p>
|
||||
</div>
|
||||
<div class="project"
|
||||
v-else-if ="items[3].selected">
|
||||
<!-- <p>A presentation of this Watch a presentation of this (finally useful) project... And in the English language!</p> -->
|
||||
<p class="project-summary">
|
||||
|
||||
This website, created by my wife and me, showcases the remarkable work of a great artist. The purpose is to display his own creations, share news, introduce his students, and showcase their artistic endeavors.
|
||||
</p>
|
||||
<p class="project-summary">
|
||||
I created a brief video to showcase and explain the backend I developed for him.
|
||||
</p>
|
||||
|
||||
<iframe class= "video" src="https://www.youtube.com/embed/5oV5-I_yuYA" title="Wordpress backend for an artist" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../style/colors.scss';
|
||||
|
||||
.content{
|
||||
//position : relative;
|
||||
& > .title {
|
||||
& .logo{
|
||||
background-image: url('../assets/maison.svg');
|
||||
background-size: 70%;
|
||||
}
|
||||
}
|
||||
}
|
||||
h4{
|
||||
color: $title-normal;
|
||||
font-family: 'acme', Arial, Helvetica, sans-serif;
|
||||
font-size:1.5em;
|
||||
//margin-left: 2em;
|
||||
margin-top: 1.25em;
|
||||
text-align : center;
|
||||
}
|
||||
.project{
|
||||
//position : absolute;
|
||||
opacity : 1;
|
||||
margin-top:1em;
|
||||
transition : opacity 0.5s ease;
|
||||
& .video{
|
||||
display: block;
|
||||
margin: 1.5em auto 0 auto;
|
||||
width: 90%;
|
||||
max-width: 20em;
|
||||
aspect-ratio : 16/9;
|
||||
}
|
||||
& .unavailable{
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
& a{
|
||||
color: $hypertext-normal;
|
||||
text-decoration: none;
|
||||
transition : 0.25s;
|
||||
&:hover{
|
||||
text-decoration: underline;
|
||||
color: $hypertext-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
.show{
|
||||
opacity : 1;
|
||||
}
|
||||
.tabs-bar {
|
||||
height: 3em;
|
||||
display:grid;
|
||||
grid-template-columns: 2em calc(100% - 4em) 2em;
|
||||
|
||||
}
|
||||
.project-explanation {
|
||||
& > img{
|
||||
display: block;
|
||||
margin: 1em auto;
|
||||
width: 90%;
|
||||
aspect-ratio:1165/887
|
||||
}
|
||||
& ul{
|
||||
margin: 0 0.75em 0 1.75em;
|
||||
line-height: 1.5em;
|
||||
& >li{
|
||||
padding-left: 0.55em;
|
||||
|
||||
&::marker{
|
||||
content: "•";
|
||||
color: $title-normal;
|
||||
// margin-:
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& ol{
|
||||
margin: 1em 0.75em 0 2.5em;
|
||||
line-height: 1.6em;
|
||||
& >li{
|
||||
padding-left: 0.55em;
|
||||
list-style:decimal;
|
||||
&::marker{
|
||||
// content: "•";
|
||||
color: $title-normal;
|
||||
// margin-:
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
ul.all-tabs {
|
||||
//border:#ffffff 1px solid;
|
||||
//flex-grow property to 2, flex-shrink to 1 and flex-basis to auto.
|
||||
//display: flex;
|
||||
position : relative;
|
||||
//align-items: center;
|
||||
//OverFlow is auto to keep scrolling on touching devices.
|
||||
overflow-x: auto;
|
||||
//Managing scroll bar
|
||||
scroll-behavior: smooth;
|
||||
//FireFox
|
||||
scrollbar-width: none;
|
||||
//Edge
|
||||
-ms-overflow-style: none;
|
||||
//Chrome & Safari
|
||||
&::-webkit-scrollbar{
|
||||
display: none;
|
||||
}
|
||||
& li.tab{
|
||||
position : absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
height:100%;
|
||||
padding: 1.5em auto;
|
||||
min-width: 100%;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
font-family: 'acme', Arial, Helvetica, sans-serif;
|
||||
font-size: 1.75em;
|
||||
//border:#0f0 solid 2px;
|
||||
background-color:$page-bg;
|
||||
color:$title-normal;
|
||||
//color:rgb(0, 0, 0);
|
||||
transition : opacity 1s;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: 1.3em;
|
||||
background-color: #ffffff00;
|
||||
transition: 0.3s;
|
||||
border: none;
|
||||
&.arrow{
|
||||
margin: 0;
|
||||
color:$action-normal;
|
||||
transition : 0.25s;
|
||||
&:hover{
|
||||
color:$action-light;
|
||||
cursor: pointer;
|
||||
}
|
||||
//border:1px red solid
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
p{
|
||||
color : $main-normal;
|
||||
//opacity: 1;
|
||||
padding:1em 1.25em 0em 1em;
|
||||
line-height: 1.5em;
|
||||
animation: text 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
|
||||
}
|
||||
|
||||
.image-container{
|
||||
margin:auto;
|
||||
& p {
|
||||
min-height:100px;
|
||||
padding: 0 0.75em;
|
||||
text-indent:0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
//border : solid 1px lime;
|
||||
}
|
||||
& img{
|
||||
display: block;
|
||||
margin:1em auto;
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.15s ease-out;
|
||||
}
|
||||
.fade-enter-active{
|
||||
transition: opacity 0.35s ease-out;
|
||||
transition-delay: 0.15s;
|
||||
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
@keyframes text{
|
||||
0%{
|
||||
opacity : 0;
|
||||
}
|
||||
33%{
|
||||
opacity : 0;
|
||||
}
|
||||
100%{
|
||||
opacity:1;
|
||||
}
|
||||
}
|
||||
@media (width > 370px){
|
||||
.image-container{
|
||||
|
||||
display: flex;
|
||||
justify-content:space-around;
|
||||
flex-wrap: wrap;
|
||||
& .image-description{
|
||||
flex-basis: 300px;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
// aspect-ratio: ;
|
||||
// height: 400px;
|
||||
& > p{
|
||||
// min-height:7em;
|
||||
text-align: center;
|
||||
text-indent:0;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
130
src/views/Projects1.vue
Normal file
130
src/views/Projects1.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useBurgerStore } from '@/stores/burger'
|
||||
const burger = useBurgerStore();
|
||||
onMounted(() => {
|
||||
burger.check();
|
||||
})
|
||||
|
||||
const items = ref([
|
||||
{ id:1,
|
||||
selected : true,
|
||||
name : "Poils O pattes",
|
||||
bg_image : "url('https://picsum.photos/id/20/200/300')"
|
||||
},
|
||||
{ id:2,
|
||||
selected : false,
|
||||
name : "courses",
|
||||
bg_image : "url('https://picsum.photos/id/23/200/300')"
|
||||
}
|
||||
]);
|
||||
|
||||
const background = () => {
|
||||
//console.log(items)
|
||||
for (const item of items.value) {
|
||||
if (item.selected)
|
||||
return item.bg_image
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="title">
|
||||
<div class="logo">
|
||||
</div>
|
||||
<h3><span>Projects</span></h3>
|
||||
</div>
|
||||
<div class = "slider">
|
||||
<div class="projects-banner"
|
||||
:style="{backgroundImage : background()}"
|
||||
>
|
||||
<div class="arrow left">
|
||||
〈
|
||||
</div>
|
||||
<div class="tab">
|
||||
<h4 class="project-name">Poils O Pattes</h4>
|
||||
<h4 class="project-name toto">Poils O Pattes</h4>
|
||||
<!-- v-for="item in items"
|
||||
v-bind:key="items.id">
|
||||
<h4 class="project-name"
|
||||
:style="{opacity:item.selected ? 1 : 0, width : item.selected ? '100%' : 0, display:item.selected ? 'block' : 'none'}" >{{item.name}}</h4>
|
||||
-->
|
||||
</div>
|
||||
<!-- <h4 class="project-title poils" v-else-if="items[1].selected" >Pas POP</h4> -->
|
||||
<div class="arrow right">
|
||||
〉
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-content">
|
||||
<p class="project-description">
|
||||
A grooming salon management project undertaken with a team of 5 people over a duration of one month. I had the pleasure of contributing to it as a backend coder and scrum master...
|
||||
</p>
|
||||
<iframe class="video" src="https://www.youtube.com/embed/Q3WiRGLeXSQ?start=2329" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../style/colors.scss';
|
||||
.content{
|
||||
& > .title {
|
||||
& .logo{
|
||||
background-image: url('../assets/maison.svg');
|
||||
background-size: 70%;
|
||||
}
|
||||
}
|
||||
}
|
||||
p{
|
||||
margin: 0 0.5em;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
.video{
|
||||
display: block;
|
||||
width: 90%;
|
||||
aspect-ratio: 560/315;
|
||||
margin:auto;
|
||||
}
|
||||
.projects-banner{
|
||||
// position:relative;
|
||||
margin: 1em 0.5em;
|
||||
height:3em;
|
||||
width: 90%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
//background-image: url('https://picsum.photos/seed/picsum/200/300');
|
||||
background-size: 90%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
&.tab{
|
||||
}
|
||||
}
|
||||
|
||||
h4.project-name{
|
||||
width: 0%;
|
||||
//position:absolute;
|
||||
display: inline;
|
||||
border: 1px solid blueviolet;
|
||||
font-family: 'acme', Arial, Helvetica, sans-serif;
|
||||
font-size:1.7em;
|
||||
letter-spacing: 0.1em;
|
||||
color:$page-bg;
|
||||
text-align: center;
|
||||
}
|
||||
.arrow{
|
||||
color:white;
|
||||
font-weight: bold;
|
||||
border: 1px solid red;
|
||||
&.left{
|
||||
|
||||
}
|
||||
}
|
||||
.tab{
|
||||
overflow-x: hidden;
|
||||
& > .project-name{
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
166
src/views/Technologies.vue
Normal file
166
src/views/Technologies.vue
Normal file
@@ -0,0 +1,166 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useBurgerStore } from '@/stores/burger'
|
||||
const burger = useBurgerStore();
|
||||
onMounted(() => {
|
||||
burger.check();
|
||||
})
|
||||
|
||||
const showVueUnderList=ref(false)
|
||||
const showWordpressUnderList=ref(false)
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="title">
|
||||
<div class="logo">
|
||||
</div>
|
||||
<h3><span>techno</span></h3>
|
||||
</div>
|
||||
<p class="first">Technologies are just like Legos. I mean, they consist of a variety of bricks you can put together to build amazing things. Here are certain languages I feel comfortable with:</p>
|
||||
<ul>
|
||||
<li>html</li>
|
||||
<li>css / scss</li>
|
||||
<li>JavaScript</li>
|
||||
<li>SQL</li>
|
||||
<li>php</li>
|
||||
</ul>
|
||||
<p>And also some other stuff:</p>
|
||||
<ul>
|
||||
<li>Versioning with Git</li>
|
||||
<li>npm / yarn</li>
|
||||
<li @click="showVueUnderList = !showVueUnderList" v-bind:class="{ open : showVueUnderList }" class="under-listed">Vue.js</li>
|
||||
<li v-bind:class="{ hide : !showVueUnderList }" class="under-li">Vue2 / Vue3</li>
|
||||
<li v-bind:class="{ hide : !showVueUnderList }" class="under-li">Option api / Composition api</li>
|
||||
<li v-bind:class="{ hide : !showVueUnderList }" class="under-li">Nuxt</li>
|
||||
<li v-bind:class="{ hide : !showVueUnderList }" class="under-li last">Vuetify <span>💚</span></li>
|
||||
<li @click="showWordpressUnderList = !showWordpressUnderList" v-bind:class="{ open : showWordpressUnderList }" class="under-listed">Worpress</li>
|
||||
<li v-bind:class="{ hide : !showWordpressUnderList }" class="under-li">Custom plugins</li>
|
||||
<li v-bind:class="{ hide : !showWordpressUnderList }" class="under-li">Custom themes</li>
|
||||
<li v-bind:class="{ hide : !showWordpressUnderList }" class="under-li">Rest API backend</li>
|
||||
<li v-bind:class="{ hide : !showWordpressUnderList }" class="under-li last">User management</li>
|
||||
<li>Google API console</li>
|
||||
<li>Linux systems...</li>
|
||||
</ul>
|
||||
|
||||
<p>... And ready to learn more.</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
@import '../style/colors.scss';
|
||||
|
||||
.content{
|
||||
& > .title {
|
||||
& .logo{
|
||||
background-image: url('../assets/legos_vrac_solo2.png');
|
||||
background-size: 120%;
|
||||
}
|
||||
& > h3 > span::after{
|
||||
content:"s"
|
||||
}
|
||||
}
|
||||
|
||||
& > p, & li{
|
||||
//color : $main-normal;
|
||||
//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: 0em;
|
||||
margin-right: 0.5em;
|
||||
font-size: 1em;
|
||||
content: "•";
|
||||
word-spacing: 0.5em;
|
||||
color: $action-normal;
|
||||
}
|
||||
&.under-listed{
|
||||
font-weight: bold;
|
||||
transition: 0.25s;
|
||||
&::before{
|
||||
display:inline-block;
|
||||
//margin-left: 0px;
|
||||
//content:"\0023F5";
|
||||
|
||||
width: 7px;
|
||||
aspect-ratio: 1/2;
|
||||
background-image: url('../assets/arrow-list.svg');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
font-size: 0.85em;
|
||||
transform: rotate(0deg);
|
||||
transition: 0.25s;
|
||||
}
|
||||
&.open{
|
||||
&::before{
|
||||
//content:"⏵";
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
color: $renforced-light;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
&.under-li{
|
||||
margin-left: 1em;
|
||||
|
||||
&.last{
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
&::before{
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
font-size:small;
|
||||
content: "■";
|
||||
word-spacing: 0.5em;
|
||||
color: $action-normal;
|
||||
}
|
||||
&.hide{
|
||||
display: 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 > 450px){
|
||||
.content > .title > h3 > span::after{
|
||||
content:"logies"
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,4 +1,12 @@
|
||||
const { defineConfig } = require('@vue/cli-service')
|
||||
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