project nearly finished. TODO Next : Project page and refine some text

src/views/Contact.vue

@@ -0,0 +1,262 @@
+<script setup>
+import { useBurgerStore } from '@/stores/burger'
+import Modal from '@/components/Modal.vue';
+import { ref, onMounted } from 'vue';
+import { formService } from '@/services/form';
+//import { badge } from 'fontawesome';
+onMounted(() => {
+  burger.check()
+  
+})
+const burger = useBurgerStore();
+
+const name = ref('');
+const coordinates = ref('');
+const company = ref('');
+const content = ref('');
+const awaiting = ref(false);
+const errors = ref({
+  name : false,
+  coordinates : false,
+  company: false,
+  content : false,
+  database : false
+});
+
+const modalActive = ref(false)
+const toggleModal = () => {
+  modalActive.value = ! modalActive.value
+}
+const onSubmit = () => {
+  //document.getElementById("demo-form").submit();
+  // initializing forms erors :
+  errors.value = {
+  name : false,
+  coordinates : false,
+  company: false,
+  content : false
+  };
+  
+  // initializing spinner
+  awaiting.value = true;
+  
+  // checking errors
+  errors.value.name = (name.value === '')
+  errors.value.coordinates = (coordinates.value === '')
+  errors.value.company = (company.value === '')
+  errors.value.content = (content.value === '')
+  
+  // send the form...
+  if (!errors.value.name && !errors.value.coordinates && !errors.value.company && !errors.value.content){
+    const payload = {
+      'name'        : name.value,
+      'coordinates' : coordinates.value,
+      'company'     : company.value,
+      'content'     : content.value
+    }
+    grecaptcha.execute('6LemkQ8mAAAAAL-l-wG8W9VV73xrL5VeUO1FiAeW',
+    {action: 'submit'})
+    .then( async (token) => {
+      const response = await formService.sendMessage(token, payload)
+      //console.log(response)
+      if (response === true){
+        awaiting.value = false;
+        name.value = '';
+        coordinates.value = '';
+        company.value = '';
+        content.value = '';
+        toggleModal();
+      }
+      else{
+        errors.value.database = response;
+        awaiting.value = false;
+        
+      }
+    });
+  }
+  //... or not
+  else{
+    awaiting.value = false;
+  }
+}
+
+</script>
+
+<template>
+   
+  <div class="content">
+    <div class="title">
+      <div class="logo">
+      </div>
+      <h3><span>contact</span></h3> 
+    </div>
+    <div class="form">
+      <p>Please full up the form to keep in touch&nbsp;!</p>
+      <form @submit.prevent="onSubmit()">
+        <div class="form-item">
+          <label class="first" for="name">Your name</label>
+          <input v-model="name" id="name" type="text" placeholder="Name">
+          <div class="error" v-if="errors.name">
+            Please enter your name
+          </div>
+        </div>
+        <div class="form-item">
+          <label for="coordinates">Your coordinates</label>
+          <input v-model="coordinates" id="coordinates" type="text" placeholder="A phone or a mail (or both)">
+          <div class="error"  v-if="errors.coordinates">
+            Please enter some coordinates
+          </div>
+        </div>
+        <div class="form-item">
+          <label for="company">Your company</label>
+          <input v-model="company" id="company" type="text" placeholder="Company ">
+          <div class="error"  v-if="errors.company">
+            Please enter your company
+          </div>
+        </div>
+        <div class="form-item">
+          <label for="message-content">Your message</label>
+          <textarea v-model="content" id="message-content" rows="5" cols="22" placeholder="Message"></textarea>
+          <div class="error"  v-if="errors.content">
+            Please write something
+          </div>
+        </div>
+        <p class="small">
+          This site is protected by reCAPTCHA. The Google <a href="https://policies.google.com/privacy" target="_blank">Privacy Policy</a> and <a href="https://policies.google.com/privacy" target="_blank">Terms of Service</a> apply.
+        </p>
+        <button
+        class="g-recaptcha"
+        data-sitekey="6LemkQ8mAAAAAL-l-wG8W9VV73xrL5VeUO1FiAeW"
+        :disabled="awaiting || name === '' || coordinates === '' || company === '' || content === ''"
+        >
+        <div v-if="!awaiting">
+          Send !
+        </div>
+        <div v-else>
+          Sending
+        </div>
+      </button>
+      <div class="error" v-if="errors.database">
+        There were a problem with backend. Message :
+        {{ errors.database }}
+      </div>
+      
+    </form>
+  </div>
+    
+  <Modal @close="toggleModal" :modalActive="modalActive">
+    <div class="modal-content">
+      <h1 class="modal-title">Merci !</h1>
+      <p class="modal-p">Votre message a bien été envoyé !</p>
+    </div>
+  </Modal>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import '../style/shared.scss';
+.modal-content{
+  & > .modal-title{
+    text-align: center;
+    font-size : 1.5em;
+    font-weight: bold;
+  }
+  
+  & > .modal-p{
+    text-indent: 0;
+    color:black;
+    font-size : 1.25rem;
+    text-align: center;
+    margin: 1em;
+  }
+}
+.content{
+  & > .title {
+    & .logo{
+      background-image: url('../assets/mailbox.svg');
+      background-size: 85%;
+    }
+  }
+  & form{
+    border: solid 2px white;
+    margin: auto;
+    padding: 1em;
+    width: clamp(15em, 95%, 20em);
+    //width : 50%;
+    //border: solid 2px white;
+    margin-top: 1.25em;
+    display:flex;
+    flex-direction: column;
+    align-items: center;
+    & .form-item{
+      display:flex;
+      flex-direction: column;
+      & label{
+        margin-top: 1em;
+        margin-left: 1em;
+        margin-bottom: 0.25em;
+      }
+      & label.first{
+        margin-top: 0;
+      }
+      & input, textarea{
+        font-size: 1.25em;
+        padding: 0.25em 0.25em;
+        width: clamp(10em, 100%, 20em);
+        margin:auto;
+      }
+      & textarea{
+        font-family: Arial, Helvetica, sans-serif;
+      }
+    }
+    & p.small{
+      text-indent: 0;
+      font-size : 0.75em;
+      padding: 1em 0.5em;
+      & > a{
+        color: rgb(169, 162, 255);
+        text-decoration: none;
+        transition : 0.25s;
+        &:hover{
+          text-decoration: underline;
+          color: lighten(rgb(169, 162, 255), 5%);
+        }
+      }
+    }
+    & button{
+      margin: 0.5em;
+      border: none;
+      //border-radius: 10px;
+      font-size:1.5rem;
+      background-color: white;
+      outline : 3px;
+      outline-style: solid;
+      outline-offset: -5px;
+      outline-color: black;
+      color:black;
+      padding: 0.3em 0.9em;
+      transition:0.3s;
+      &:hover{
+        cursor: pointer; 
+        background-color: darken(white, 15%);
+      }
+      &:disabled{
+        background-color: rgb(165, 165, 165);
+        &:hover{
+          cursor : default;
+        }
+      }
+    }
+  }
+}
+.error{
+  color: $red-light;
+  text-align: center;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 1.25em;
+}
+.grecaptcha-badge{
+  transition : 0.5s;
+  opacity : 1;
+}
+</style>

src/views/Index.vue

@@ -0,0 +1,205 @@
+<script setup>
+import { useBurgerStore } from '@/stores/burger'
+const burger = useBurgerStore();
+
+import { onMounted } from 'vue';
+onMounted(()=>{
+  burger.unCheck()
+
+})
+</script>
+
+<template>
+  <div v-if="!burger.checked">
+    <div class = "name">
+      <h1 class = "spans">
+        <div class="first-name">
+          <div><span class="r-letter">R</span></div>
+          <div><span>a</span></div>
+          <div><span>f</span></div>
+          <div><span>f</span></div>
+          <div><span class="i-letter">i</span></div>
+        </div>
+        <div class="last-name">
+          <span>A</span>
+          <span>l</span>
+          <span>e</span>
+          <span>x</span>
+          <span>a</span>
+          <span>n</span>
+          <span>i</span>
+          <span>a</span>
+          <span>n</span>
+        </div>
+      </h1>
+    </div>
+    <div class="come-in">
+      <h2>
+        Come in to watch my portfolio&nbsp!
+      </h2>
+    </div>
+  <div class="face"
+  @click="burger.toggle()">
+  </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "@/style/shared.scss";
+
+.name{
+  display:flex;
+  align-items: flex-end;
+  justify-content: center;
+  margin:0 2.4rem;
+  // border : #f0f solid 1px;
+  & h1{
+    opacity: 1;
+    font-size: 2.7rem;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    position :relative;
+    color: $red-light;
+    font-weight: bold;
+    margin-top: 1.6em;
+    padding: 0.1em ;
+    // border : #f0f solid 1px;
+    
+    & > div {
+      display:flex;
+      margin:0;
+      // border : #f0f solid 1px;
+      &.last-name{
+        opacity: 1;
+        @for $i from 1 to 10 {
+          & span:nth-child(#{$i}){
+            position : relative;
+            transform:rotateY(90deg);
+            animation-duration: 1000ms;
+            animation-name: title-last-name;
+            animation-timing-function: cubic-bezier(0.2, 0.9, 0.44, 1);
+            animation-delay: $i*50 + 300ms;
+            animation-fill-mode: forwards;
+          }
+        }
+      }
+      &.first-name{
+        & > div{
+          overflow: hidden;
+          & > span{
+            position : relative;
+            right:0ch;
+            animation: title-name 1000ms cubic-bezier(0.2, 0.9, 0.44, 1);
+          }
+        }   
+      }
+    }
+  }
+}
+.i-letter{
+  margin-right: 1ch ;
+}
+.r-letter{
+  margin:0;
+}
+.come-in, .name{
+  overflow:hidden;
+}
+h2{
+  margin: 0.5em 3em 0.5em 1em;
+  position: relative;
+  top:150px;
+  font-size:1.7rem;
+  text-align: right;
+  color:$white;
+  animation: 1200ms subtitle 500ms cubic-bezier(0.2, 0.9, 0.44, 1) forwards;
+  
+}
+.face{
+  text-align: center;
+  aspect-ratio: 1/1;
+  width : 80%;
+  max-width:450px;
+  opacity : 0;
+  animation: 1400ms image_appear 1200ms ease forwards;
+  background-color: $green;
+  border-radius: 50%;
+  margin:2em auto 0 auto;
+  border: 5px white solid;
+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-image: url('../assets/meme.png');
+  &:hover{
+    background-image: url('../assets/memeWink.png');
+    cursor: pointer;
+  }
+  &::after{
+    content: "";
+    background-image: url('../assets/memeWink.png');
+    opacity: 0; 
+    width: 0;
+    height: 0;
+  }
+}
+
+@keyframes title-name{
+    0% {
+        right:1ch;
+        //opacity: 0;
+      }
+    100% {
+      right : 0px;
+    }
+}
+@keyframes title-last-name{
+  0%{
+    transform : rotateX(270deg);
+  }
+  100%{
+    transform : rotateX(0deg);
+    
+  }
+}
+
+@keyframes subtitle{
+    0% {
+        top:150px;
+    }
+    100% {
+        top:0;
+    }
+}
+
+@keyframes image_appear{
+  0%{
+    opacity : 0;
+  }
+  100%{
+    opacity: 1;
+  }
+}
+
+@media (max-width: 320px){
+  .name{
+  margin : 0;
+  }
+  .image{
+    //width:250px;
+  }
+}
+@media (min-width: 321px) and (max-width: 520px){
+  .name h1 .r-letter{
+    margin-left:2ch;
+    //color:blue;
+  }
+  .name h1 .i-letter{
+    margin-right:2ch;
+    //color:blue;
+  }
+  .image{
+    //width: 350px;
+  }
+}
+</style>

src/views/Networks.vue

@@ -0,0 +1,109 @@
+<script setup>
+import { onMounted } from 'vue';
+import { useBurgerStore } from '@/stores/burger'
+const burger = useBurgerStore();
+onMounted(() => {
+  burger.check();
+})
+
+</script>
+
+<template>
+  <div class="content">
+    <div class="title">
+      <div class="logo"></div>
+      <h3>Networks</h3> 
+    </div>
+    <div class="list github">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" width="2em">
+        <path 
+        d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/>
+      </svg>
+      <p>Github page and projects: <a href="https://www.github.com/Raffiskender" target="_blank">github.com/Raffiskender</a> </p>
+      </div>
+      <div class="list linkedin">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"  width="2em">
+          <path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>
+        <p>A Linkedin profil: <a href="https://fr.linkedin.com/in/raffi-alexanian" target="_blank">fr.linkedin.com/in/raffi-alexanian</a> </p>
+      </div>
+      <div class="list cv">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"   width="2em">
+          <path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/>
+        </svg>
+        <p>And also a CV (in french) <a href="https://cv.raffiskender.com" target="_blank">https://cv.raffiskender.com</a> </p>
+      </div>
+    <p>And that should be fine !</p>
+    
+  </div>
+</template>
+<style lang="scss" scoped>
+@import '../style/shared.scss';
+.content{
+  & > .title {
+    & .logo{
+      background-image: url('../assets/networks.svg');
+      background-size: 80%;
+    
+    }
+  }
+  & .list{
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    padding-left: 1.25em;
+    padding-bottom: 1em;
+    &.github{
+      padding-top: 2em;
+    }
+    & svg{
+      fill: $page-title;
+    }
+    
+    & > p{
+      color : $white;
+      opacity: 1;
+      animation: text 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
+      padding-left:1em;
+      text-indent:0;
+      width: 80%;
+      word-wrap: break-word;
+      //border: white 2px solid;
+      & a{
+        color:inherit;
+        cursor: pointer;
+        text-decoration: none;
+      }
+    }
+  }
+  
+}
+
+
+@keyframes text{
+  0%{
+    opacity : 0;
+  }
+  33%{
+    opacity : 0;
+  }
+  100%{
+    opacity:1;
+  }
+}
+
+@keyframes image_show{
+  0%{
+    opacity: 0;
+    left: 0;
+  }
+  33%{
+    opacity: 0;
+    left: 0;    
+  }
+}
+@media (width > 600px){
+  .content .list{
+    padding-left: 3em;
+  }
+}
+</style>

src/views/Projects.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { onMounted } from 'vue';
+import { useBurgerStore } from '@/stores/burger'
+const burger = useBurgerStore();
+onMounted(() => {
+  burger.check();
+})
+</script>
+
+<template>
+ <div class="content">
+    <div class="title">
+      <div class="logo">
+      </div>
+      <h3><span>Projects</span></h3> 
+    </div>
+    <p>
+    here are some projects I made.</p>
+    <p>And bla and bla and bla</p>
+  </div>
+  
+</template>
+
+<style lang="scss" scoped>
+.content{
+  & > .title {
+    & .logo{
+      background-image: url('../assets/maison.svg');
+      background-size: 70%;
+    }
+  }
+}
+</style>

src/views/Technologies.vue

@@ -0,0 +1,96 @@
+<script setup>
+import { onMounted } from 'vue';
+import { useBurgerStore } from '@/stores/burger'
+const burger = useBurgerStore();
+onMounted(() => {
+  burger.check();
+})
+</script>
+<template>
+  <div class="content">
+    <div class="title">
+      <div class="logo">
+      </div>
+      <h3><span>technos</span></h3> 
+    </div>
+    <p class="first">Technologies are just like legos. I mean, it's a variety of bricks you can put together to build an all. Here are certains languages I feel confortable with:</p>
+    <ul>
+      <li>html</li>
+      <li>css</li>
+      <li>js</li>
+      <li>php (this old guy)</li>
+    </ul>
+    <p>And also some other stuff:</p>
+    <ul>
+      <li>Vue.js</li>
+      <li>Worpress</li>
+      <li>Yarn</li>
+      <li>npm</li>
+      <li>Google API console</li>
+      <li>Figma</li>
+      <li>Linux systems</li>
+    </ul>
+    
+    <p>As you may suppose I do not stop learning, and this list is not exhaustive.</p>
+    
+  </div>
+</template>
+<style lang="scss" scoped>
+@import '../style/shared.scss';
+
+.content{
+  & > .title {
+    & .logo{
+      background-image: url('../assets/legos_vrac_solo2.png');
+      background-size: 120%;
+    }
+  }
+  
+  & > p, & li{
+    //color : $white;
+    //opacity : 0;
+    line-height: 1.25em;
+   // animation: text 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards;
+    z-index: 2;
+  }
+  & > p{
+    padding: 1em 1em 0 1em;
+    &.first{
+      padding-top: 2em;
+    }
+  }
+  & ul{
+    padding: 0.5em 1em 0 3em;
+  }
+  & li::before{
+    margin-left: 1em;
+	  content: "• ";
+	  word-spacing: 0.5em;
+	  color: $green;    
+  }
+}
+
+@keyframes text{
+0%{
+  opacity : 0;
+}
+33%{
+  opacity : 0;
+}
+100%{
+  opacity:1;
+}
+}
+
+@keyframes image_show{
+0%{
+  opacity: 0;
+  left: 0;
+}
+33%{
+  opacity: 0;
+  left: 0;    
+}
+}
+
+</style>

src/views/WhoAmI.vue

@@ -0,0 +1,71 @@
+<script setup>
+import { onMounted } from 'vue';
+import { useBurgerStore } from '@/stores/burger'
+const burger = useBurgerStore();
+onMounted(() => {
+  burger.check()
+    //console.log("Mounted")
+})
+
+</script>
+
+<template>
+  <div class="content">
+    <div class="title">
+      <div class="logo"></div>
+      <h3>Who Am I&nbsp;?</h3> 
+    </div>
+    <p>As you guessed it, my name is Raffi. I've been working 20 years long in the beutyfull world of maintenance where I learnt a lot about logic. I've learnt several programmation languages during my life, for proffesionnal purposes... And also for fun. Here are some of them : Vidjeo Designer, Twido Soft, Zelio Soft, PL7... Also when Iwas young : Turbo Pascal, Qbasic, and more recently a little bit of C (during confinement).</p>
+    <p>in 2022 I've followed a 5 months training courses to learn more about web programmation. So I learnt html, css, js, wordPress and Vue.js, php, sql, database management and so much more ! After that I worked on my own to go deeper in wordpress api-rest, to understand what can be done with Vue etc. Now I feel ready to go !</p>
+
+  </div>
+</template>
+<style lang="scss" scoped>
+@import '../style/shared.scss';
+
+
+.content{  
+  & .title{
+    & > .logo{
+      background-image: url('../assets/questionSolo.png');
+      background-size: 80%;
+    }
+  }
+  & > p{
+  
+    color : $white;
+    opacity: 1;
+    padding:2em;
+    line-height: 1.25em;
+    animation: text 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
+  }
+}
+
+@keyframes text{
+  0%{
+    opacity : 0;
+  }
+  33%{
+    opacity : 0;
+  }
+  100%{
+    opacity:1;
+  }
+}
+
+@keyframes image_show{
+  0%{
+    opacity: 0;
+    left: 0;
+  }
+  33%{
+    opacity: 0;
+    left: 0;    
+  }
+}
+@media (width < 600px){
+  .content{
+    width: 95%;
+  }
+}
+</style>