correcting some texts and syntaxes
This commit is contained in:
@@ -9,7 +9,7 @@
|
||||
<slot>
|
||||
</slot>
|
||||
<button @click="close" class="button">
|
||||
Fermer
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</transition>
|
||||
@@ -69,7 +69,7 @@
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@@ -112,7 +112,7 @@ h1{
|
||||
background-color: #e5e5e5;
|
||||
color: $red;
|
||||
font-size: 1.7em;
|
||||
transition: color 0.5s ease;
|
||||
transition: color 0.25s ease;
|
||||
&:hover{
|
||||
color: lighten($red, 15%);
|
||||
cursor:pointer;
|
||||
@@ -131,7 +131,7 @@ h1{
|
||||
border-radius: 0.5em;
|
||||
margin:0.5em auto;
|
||||
display: block;
|
||||
padding: 0.4em 0.75em;
|
||||
padding: 0.5em 1em;
|
||||
border:none;
|
||||
color:$red;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
@@ -141,5 +141,10 @@ h1{
|
||||
outline: $red;
|
||||
outline-style: solid;
|
||||
outline-offset: -5px;
|
||||
transition: 0.25s ease;
|
||||
&:hover{
|
||||
background-color: darken($green, 10%);
|
||||
cursor:pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
55
src/components/Spinner.vue
Normal file
55
src/components/Spinner.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name : 'SpinnerCpnt'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
div{
|
||||
display: inline-block;
|
||||
width: 1.0em;
|
||||
margin-right: 1ch;
|
||||
aspect-ratio: 1;
|
||||
border:3px solid #ff00c8;
|
||||
border-top:3px solid rgb(216, 226, 253);
|
||||
border-radius:50%;
|
||||
|
||||
-webkit-transition-property: -webkit-transform;
|
||||
-webkit-transition-duration: 1.2s;
|
||||
-webkit-animation-name: rotate;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-webkit-animation-timing-function: linear;
|
||||
|
||||
-moz-transition-property: -moz-transform;
|
||||
-moz-animation-name: rotate;
|
||||
-moz-animation-duration: 1.2s;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-moz-animation-timing-function: linear;
|
||||
|
||||
transition-property: transform;
|
||||
animation-name: rotate;
|
||||
animation-duration: 1.2s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;}
|
||||
|
||||
@-webkit-keyframes rotate {
|
||||
from {-webkit-transform: rotate(0deg);}
|
||||
to {-webkit-transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
@-moz-keyframes rotate {
|
||||
from {-moz-transform: rotate(0deg);}
|
||||
to {-moz-transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from {transform: rotate(0deg);}
|
||||
to {transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@@ -3,6 +3,8 @@ 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()
|
||||
@@ -133,7 +135,8 @@ const onSubmit = () => {
|
||||
Send !
|
||||
</div>
|
||||
<div v-else>
|
||||
Sending
|
||||
<Spinner/>
|
||||
Sending...
|
||||
</div>
|
||||
</button>
|
||||
<div class="error" v-if="errors.database">
|
||||
@@ -146,8 +149,8 @@ const onSubmit = () => {
|
||||
|
||||
<Modal @close="toggleModal" :modalActive="modalActive">
|
||||
<div class="modal-content">
|
||||
<h1 class="modal-title">Merci !</h1>
|
||||
<p class="modal-p">Votre message a bien été envoyé !</p>
|
||||
<h1 class="modal-title">Thank you !</h1>
|
||||
<p class="modal-p">Your message has been sent successfully!</p>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
@@ -224,11 +227,12 @@ const onSubmit = () => {
|
||||
}
|
||||
}
|
||||
& button{
|
||||
|
||||
margin: 0.5em;
|
||||
border: none;
|
||||
//border-radius: 10px;
|
||||
font-size:1.5rem;
|
||||
background-color: white;
|
||||
background-color: darken($green, 10%);
|
||||
outline : 3px;
|
||||
outline-style: solid;
|
||||
outline-offset: -5px;
|
||||
@@ -236,16 +240,22 @@ const onSubmit = () => {
|
||||
color:black;
|
||||
padding: 0.3em 0.9em;
|
||||
transition:0.3s;
|
||||
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
background-color: darken(white, 15%);
|
||||
background-color: $green
|
||||
}
|
||||
&:disabled{
|
||||
background-color: rgb(165, 165, 165);
|
||||
background-color: hsl(0, 0%, 55%);
|
||||
&:hover{
|
||||
cursor : default;
|
||||
}
|
||||
}
|
||||
& > div{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -255,8 +265,5 @@ const onSubmit = () => {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
.grecaptcha-badge{
|
||||
transition : 0.5s;
|
||||
opacity : 1;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -15,25 +15,30 @@ onMounted(() => {
|
||||
<h3>Networks</h3>
|
||||
</div>
|
||||
<div class="list github">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" width="2em">
|
||||
<path
|
||||
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/>
|
||||
</svg>
|
||||
<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 linkedin">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="2em">
|
||||
<path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>
|
||||
</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 profil: <a href="https://fr.linkedin.com/in/raffi-alexanian" target="_blank">fr.linkedin.com/in/raffi-alexanian</a> </p>
|
||||
</div>
|
||||
<div class="list cv">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="2em">
|
||||
<path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/>
|
||||
</svg>
|
||||
<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>
|
||||
<p>And that should be fine !</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -1,10 +1,14 @@
|
||||
<script setup>
|
||||
import { onMounted } from 'vue';
|
||||
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">
|
||||
@@ -13,25 +17,32 @@ onMounted(() => {
|
||||
</div>
|
||||
<h3><span>technos</span></h3>
|
||||
</div>
|
||||
<p class="first">Technologies are just like legos. I mean, it's a variety of bricks you can put together to build an all. Here are certains languages I feel confortable with:</p>
|
||||
<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</li>
|
||||
<li>css / scss</li>
|
||||
<li>js</li>
|
||||
<li>php (this old guy)</li>
|
||||
<li>php</li>
|
||||
</ul>
|
||||
<p>And also some other stuff:</p>
|
||||
<ul>
|
||||
<li>Vue.js</li>
|
||||
<li>Worpress</li>
|
||||
<li>Yarn</li>
|
||||
<li>npm</li>
|
||||
<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 class=red>💚</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>Figma</li>
|
||||
<li>Linux systems</li>
|
||||
<li>Linux systems...</li>
|
||||
</ul>
|
||||
|
||||
<p>As you may suppose I do not stop learning, and this list is not exhaustive.</p>
|
||||
<p>... And ready to learn more.</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
@@ -62,12 +73,56 @@ onMounted(() => {
|
||||
& ul{
|
||||
padding: 0.5em 1em 0 3em;
|
||||
}
|
||||
& li::before{
|
||||
li{
|
||||
&::before{
|
||||
margin-left: 1em;
|
||||
content: "• ";
|
||||
margin-right: 0.5em;
|
||||
content: "•";
|
||||
word-spacing: 0.5em;
|
||||
color: $green;
|
||||
}
|
||||
&.under-listed{
|
||||
font-weight: bold;
|
||||
transition: 0.25s;
|
||||
&::before{
|
||||
display:inline-block;
|
||||
content:"⏵";
|
||||
font-size: 0.85em;
|
||||
transform: rotate(0deg);
|
||||
transition: 0.25s;
|
||||
}
|
||||
&.open{
|
||||
&::before{
|
||||
content:"⏵";
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
color: $red;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
&.under-li{
|
||||
margin-left: 2em;
|
||||
|
||||
&.last{
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
&::before{
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
font-size:small;
|
||||
content: "■";
|
||||
word-spacing: 0.5em;
|
||||
color: $green;
|
||||
}
|
||||
&.hide{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}}
|
||||
span.red{
|
||||
color:$red;
|
||||
}
|
||||
|
||||
@keyframes text{
|
||||
|
||||
@@ -15,9 +15,10 @@ onMounted(() => {
|
||||
<div class="logo"></div>
|
||||
<h3>Who Am I ?</h3>
|
||||
</div>
|
||||
<p>As you guessed it, my name is Raffi. I've been working 20 years long in the beutyfull world of maintenance where I learnt a lot about logic. I've learnt several programmation languages during my life, for proffesionnal purposes... And also for fun. Here are some of them : Vidjeo Designer, Twido Soft, Zelio Soft, PL7... Also when Iwas young : Turbo Pascal, Qbasic, and more recently a little bit of C (during confinement).</p>
|
||||
<p>in 2022 I've followed a 5 months training courses to learn more about web programmation. So I learnt html, css, js, wordPress and Vue.js, php, sql, database management and so much more ! After that I worked on my own to go deeper in wordpress api-rest, to understand what can be done with Vue etc. Now I feel ready to go !</p>
|
||||
<p>As you guessed, my name is Raffi. I have been working in the beautiful world of maintenance for 20 years, where I have learned a lot about logic. Throughout my life, both for professional purposes and for fun, I have learned several programming languages. Here are some of them: Video Designer, Twido Soft, Zelio Soft, PL7. When I was younger, I also dabbled in Turbo Pascal, Qbasic, and more recently, during the confinement, I explored a bit of C.</p>
|
||||
|
||||
<p>In 2022, I took a five-month training course to further my knowledge of web programming. During this time, I learned HTML, CSS, JavaScript, WordPress, Vue.js, PHP, SQL, database management, and much more! After completing the training, I continued to work independently to delve deeper into WordPress API-REST and gain a better understanding of what can be achieved with Vue.js. Now, I feel prepared to move forward!</p>
|
||||
<p>I'm accustomed to working with deadlines, challenges, and all kinds of unforeseen circumstances. I thrive in situations that push me out of my comfort zone and require quick thinking. As a native French speaker, I'm also fluent in English and Turkish, allowing me to communicate effectively in multiple languages. I enjoy discovering new things and seizing opportunities to learn and grow. With my experience and language skills, I'm ready to take on new challenges and contribute to motivating projects.</p>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
@@ -35,8 +36,8 @@ onMounted(() => {
|
||||
|
||||
color : $white;
|
||||
opacity: 1;
|
||||
padding:2em;
|
||||
line-height: 1.25em;
|
||||
padding:1em 1.25em 0em 1em;
|
||||
line-height: 1.5em;
|
||||
animation: text 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user