raffi/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: raffi:3be7a4adfd333458254378b96f420cecd897991f
Branches Tags
raffi:main raffi:new_email-sending raffi:SEO_enhancement raffi:read_projects_from_last raffi:project
..
compare: raffi:main
Branches Tags
raffi:main raffi:new_email-sending raffi:SEO_enhancement raffi:read_projects_from_last raffi:project

14 Commits
3be7a4adfd ... main

Author SHA1 Message Date
Raffi
994d1bb1e6 some cleaning 2026-03-25 20:01:35 +01:00
Raffi
8deab8fa68 STOP tracking Dockerfile 2026-03-25 19:55:48 +01:00
Raffi
310bec2d74 adding dockerfile in gittignore 2026-03-25 19:51:48 +01:00
Raffi
8ac13f6360 mise à jour des requêtes pour l'envoie du formaulaire. Le BO est désormais un worker Cloudflare. 2026-03-25 19:49:37 +01:00
raffiskender
780f5e86c6 changing selected property to true on item nb4 on project object 2023-12-05 09:18:31 +03:00
raffiskender
3325eaa118 Merge branch 'master' into read_projects_from_last 2023-12-05 09:14:37 +03:00
raffiskender
bd513b9fb4 changing selected property to true on item nb3 on project object 2023-12-05 09:14:21 +03:00
raffiskender
69b69d32e6 all kind of modifications 2023-12-05 09:09:37 +03:00
raffiskender
87821a5d7a Merge branch 'project' 2023-09-19 11:34:01 +02:00
raffiskender
d268f431d3 playing with footer 2023-09-19 11:05:29 +02:00
Raffiskender
17e5e3fcfe end of project 2023-06-20 09:16:28 +02:00
Raffiskender
e214326ad5 finishing and fine-tuning TODO NEXT : project page 2023-05-31 22:26:58 +02:00
Raffiskender
1d224c7396 correcting some texts and syntaxes 2023-05-29 22:58:19 +02:00
Raffiskender
ff3ea2cdcd project nearly finished. TODO Next : Project page and refine some text 2023-05-29 19:50:07 +02:00
69 changed files with 6572 additions and 1313 deletions
Expand all files Collapse all files

3
.gitignore vendored
View File

@@ -21,3 +21,6 @@ pnpm-debug.log*
*.njsproj *.njsproj
*.sln *.sln
*.sw? *.sw?
#dockerfile
Dockerfile

10
htaccess/.htaccess Normal file
View 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
View File

File diff suppressed because it is too large Load Diff

10
package.json
View File

@@ -7,8 +7,16 @@
"build": "vue-cli-service build" "build": "vue-cli-service build"
}, },
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.4.0",
"@fortawesome/free-regular-svg-icons": "^6.4.0",
"@fortawesome/free-solid-svg-icons": "^6.4.0",
"@fortawesome/vue-fontawesome": "^3.0.3",
"axios": "^1.4.0",
"core-js": "^3.8.3", "core-js": "^3.8.3",
"vue": "^3.2.13" "fontawesome": "^5.6.3",
"pinia": "^2.0.34",
"vue": "^3.2.13",
"vue-router": "^4.2.1"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-babel": "~5.0.0",

BIN
public/image.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

4
public/index.html
View File

@@ -4,7 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>image.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
<body> <body>
@@ -12,6 +12,6 @@
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <script id="grecaptcha" src="https://www.google.com/recaptcha/api.js?render=6LemkQ8mAAAAAL-l-wG8W9VV73xrL5VeUO1FiAeW" async="" defer=""></script><!-- built files will be auto injected -->
</body> </body>
</html> </html>

196
src/App.vue
View File

@@ -1,26 +1,184 @@
<template> <script setup>
<img alt="Vue logo" src="./assets/logo.png"> //import { onMounted, onUnmounted } from 'vue';
<HelloWorld msg="Welcome to Your Vue.js App"/> import Burger from '@/components/Burger.vue'
</template> import { useBurgerStore } from './stores/burger';
import Name from '@/components/Name.vue';
import Footer from './components/Footer.vue';
import Menu from '@/components/Menu.vue';
const burger = useBurgerStore();
//clé du site : 6LemkQ8mAAAAAL-l-wG8W9VV73xrL5VeUO1FiAeW
// clé secrete: 6LemkQ8mAAAAAGKikUbV_rKv7O4hCp_gx1f5pULu
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script> </script>
<template>
<div>
<Burger/>
<div v-bind:class="burger.checked ? 'page' : 'index'" >
<router-view v-slot="{ Component }">
<!-- <Transition name="fade"> -->
<!-- <div> -->
<Name v-if="burger.checked"/>
<Menu class="menu" v-if="burger.checked"/>
<Transition name="fade">
<component :is="Component" v-if="burger.checked"/>
</Transition>
<component :is="Component" v-if="!burger.checked"/>
<!-- </div> -->
<!-- </Transition> -->
</router-view>
<Footer/>
</div>
</div>
</template>
<style lang="scss"> <style lang="scss">
#app { @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap');
font-family: Avenir, Helvetica, Arial, sans-serif; @import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap');
-webkit-font-smoothing: antialiased; @import url('https://fonts.googleapis.com/css2?family=Acme&family=Courier+Prime&display=swap');
-moz-osx-font-smoothing: grayscale; @import "@/style/widths.scss";
text-align: center; @import "@/style/colors.scss";
color: #2c3e50; html {
margin-top: 60px; 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> </style>

105
src/assets/CV-favicon.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
src/assets/MaPhoto.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 120 KiB

72
src/assets/arrow up.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

60
src/assets/arrow-list.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

60
src/assets/bulle.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

87
src/assets/burger.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

194
src/assets/by.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
src/assets/images/LDC/LDC_screenshot_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
src/assets/images/LDC/LDC_screenshot_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
src/assets/images/LDC/LDC_screenshot_3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

BIN
src/assets/images/pop/Screenshot_pop1.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
src/assets/images/pop/Screenshot_pop2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
src/assets/images/pop/Screenshot_pop3.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
src/assets/images/pop/back.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

BIN
src/assets/lego_bridge.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 195 KiB

BIN
src/assets/legos_maison.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 277 KiB

BIN
src/assets/legos_maison2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

BIN
src/assets/legos_vrac.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 114 KiB

BIN
src/assets/legos_vrac.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 258 KiB

BIN
src/assets/legos_vrac_solo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
src/assets/legos_vrac_solo2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
src/assets/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.7 KiB

91
src/assets/mailbox.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

101
src/assets/maison.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
src/assets/meme.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 KiB

BIN
src/assets/meme1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 KiB

BIN
src/assets/memeWink.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 KiB

106
src/assets/mika-signe.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

97
src/assets/networks.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

98
src/assets/points.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

120
src/assets/portfolio-mini.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
src/assets/question.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
src/assets/question3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 843 KiB

BIN
src/assets/questionSolo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

62
src/assets/raffi.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
src/assets/vecteezy_set-of-hand-drawn-question-marks-doodle-questions-marks_6058847.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 420 KiB

142
src/components/Burger.vue Normal file
View 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
View File

290
src/components/Footer.vue Normal file
View 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
View 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>

57
src/components/HelloWorld.vue
View File

@@ -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
View 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
View 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
View 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
View 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
View File

@@ -0,0 +1 @@
file:///home/raffi/Images/Images/MaPhoto.jpg

19
src/main.js
View File

@@ -1,4 +1,21 @@
import { createApp } from 'vue' import { createApp } from 'vue'
import './reset.css'
import App from './App.vue' import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'
createApp(App).mount('#app') import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCircleXmark } from '@fortawesome/free-regular-svg-icons'
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
View 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
View 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

23
src/services/form.js Normal file
View File

@@ -0,0 +1,23 @@
import axios from "axios";
export const formService =
{
// Propriété qui stocke la BASE URL de notre API
base_url : "https://orange-firefly-f5a4.raffiskender.workers.dev/",
// Retrieve data from backend
async sendMessage(token, payload)
{
const response = await axios.post(
this.base_url,
{
token,
json: payload
},
).catch( function() {
return { data : null };
});
return response.data;
},
}

36
src/stores/burger.js Normal file
View 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
View 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
View 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
View File

@@ -0,0 +1,2 @@
$maxWidth: 1200px;
$imageWidth: 100%;

70
src/views/404.vue Normal file
View 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>

275
src/views/Contact.vue Normal file
View File

@@ -0,0 +1,275 @@
<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)
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>

299
src/views/Index.vue Normal file
View 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&nbsp!
</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
View 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&nbsp;😉): <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
View 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
View 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>

166
src/views/Technologies.vue Normal file
View 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>

10
vue.config.js
View File

@@ -1,4 +1,12 @@
const { defineConfig } = require('@vue/cli-service') const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({ module.exports = defineConfig({
transpileDependencies: true transpileDependencies: true,
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].title = "Raffi's Portfolio";
return args;
})
}
}) })