finishing and fine-tuning TODO NEXT : project page

src/App.vue

@@ -42,6 +42,7 @@ const burger = useBurgerStore();
 <style lang="scss">
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Acme&family=Courier+Prime&display=swap');
 @import "@/style/shared.scss";
 html {
   font-size: 16px;
@@ -93,7 +94,7 @@ p{
     }
     & > h3 {
       //display: inline;
-      font-family: 'Montserrat', Arial, Helvetica, sans-serif;
+      font-family: 'acme', Arial, Helvetica, sans-serif;
       color: $green;
       opacity: 1;
       font-size: 3rem;

src/assets/arrow-list.svg

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

src/components/Menu.vue

@@ -164,6 +164,8 @@ const toggleMenu = () => {
       & .cross, & .middle {
       stroke-width:7;
       transition:1s ;
+      -moz-transition:1s ;
+      -webkit-transition:1s ;
       stroke:$white;
       }
       & .cross{
@@ -209,7 +211,8 @@ ul.nav-menu{
 }
 a{
   font-size:1em;
-  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
+  font-family: 'acme', Arial, Helvetica, sans-serif;
+  //font-style: italic;
   font-weight: 400;
   text-align: center;
   color : $white;
@@ -229,7 +232,7 @@ a{
     cursor: pointer;
   }
   &.router-link-exact-active{
-    filter: drop-shadow(0 0 4px $red-light);
+    filter: drop-shadow(0 0 3px $red-light);
     transition: filter 0.3s;
   }
   &:hover::after, &.router-link-exact-active::after{
@@ -243,18 +246,20 @@ a{
       //This transition fires on hover-out class
       transition:0.5s;
     }
-}
+  }
   
-li {
+  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;
       }
     }
-}
+  }
 
 
 
@@ -334,7 +339,7 @@ li {
   }
 
 @media (height < 650px) and (width < 750px) { 
-  div.menu-container .burger{
+  nav.menu-container .burger{
     position : fixed;
     top:0;
     right:0;  

src/components/Name.vue

@@ -47,7 +47,8 @@ const burger = useBurgerStore()
   margin:0 2.4rem;
   
   // border : #f0f solid 1px;
-    & h1{
+    & h1{font-family: 'acme', Arial, Helvetica, sans-serif;
+         letter-spacing: 0.2em;
     font-size: 2.7rem;
     display: flex;
     flex-wrap: wrap;
@@ -89,7 +90,9 @@ h2{
   text-align: right;
   color:$white;
   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;
 }
 
 
@@ -118,18 +121,21 @@ h2{
     }
 }
 
-@media (max-width: 320px){
+@media (width < 400px){
   .name{
   margin : 0;
   }
 }
+@media (width < 520px){
  
-@media (max-width: 520px){
   .name h1 .r-letter{
     margin-left:2ch;
   }
   .name h1 .i-letter{
     margin-right:2ch;
   }
+  .come-in h2{
+    margin-right: 0.5em;
+  }
 }
 </style>

src/components/Spinner.vue

@@ -10,7 +10,7 @@ name : 'SpinnerCpnt'
 
 <style lang="scss" scoped>
 div{
-  display: inline-block;
+//display: inline-block;
 width: 1.0em;
 margin-right: 1ch;
 aspect-ratio: 1;

src/views/Contact.vue

@@ -30,7 +30,6 @@ const toggleModal = () => {
   modalActive.value = ! modalActive.value
 }
 const onSubmit = () => {
-  //document.getElementById("demo-form").submit();
   // initializing forms erors :
   errors.value = {
   name : false,
@@ -93,34 +92,34 @@ const onSubmit = () => {
       <h3><span>contact</span></h3> 
     </div>
     <div class="form">
-      <p>Please full up the form to keep in touch&nbsp;!</p>
+      <p class="subtitle">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
+            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
+            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
+            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
+            Please write something !
           </div>
         </div>
         <p class="small">
@@ -173,6 +172,7 @@ const onSubmit = () => {
     margin: 1em;
   }
 }
+
 .content{
   & > .title {
     & .logo{
@@ -259,6 +259,9 @@ const onSubmit = () => {
     }
   }
 }
+p.subtitle{
+  margin: auto 0.5em;
+}
 .error{
   color: $red-light;
   text-align: center;

src/views/Index.vue

@@ -76,11 +76,26 @@ onMounted(()=>{
           & 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;
           }
         }
       }
@@ -91,6 +106,8 @@ onMounted(()=>{
             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);
           }
         }   
       }
@@ -113,7 +130,11 @@ h2{
   font-size:1.7rem;
   text-align: right;
   color:$white;
+  
+  
   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{
@@ -123,6 +144,9 @@ h2{
   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: $green;
   border-radius: 50%;
   margin:2em auto 0 auto;
@@ -153,6 +177,26 @@ h2{
       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);
@@ -162,7 +206,41 @@ h2{
     
   }
 }
+@-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;
@@ -180,6 +258,22 @@ h2{
     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{

src/views/Projects.vue

@@ -15,6 +15,7 @@ onMounted(() => {
       <h3><span>Projects</span></h3> 
     </div>
     <p>
+    
     here are some projects I made.</p>
     <p>And bla and bla and bla</p>
   </div>

src/views/Technologies.vue

@@ -15,13 +15,14 @@ const showWordpressUnderList=ref(false)
     <div class="title">
       <div class="logo">
       </div>
-      <h3><span>technos</span></h3> 
+      <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>js</li>
+      <li>JavaScript</li>
+      <li>SQL</li>
       <li>php</li>
     </ul>
     <p>And also some other stuff:</p>
@@ -55,6 +56,9 @@ const showWordpressUnderList=ref(false)
       background-image: url('../assets/legos_vrac_solo2.png');
       background-size: 120%;
     }
+    & > h3 > span::after{
+      content:"s"
+    }
   }
   
   & > p, & li{
@@ -75,8 +79,9 @@ const showWordpressUnderList=ref(false)
   }
   li{
     &::before{
-    margin-left: 1em;
+    //margin-left: 0em;
     margin-right: 0.5em;
+    font-size: 1em;
 	  content: "•";
 	  word-spacing: 0.5em;
 	  color: $green;    
@@ -86,24 +91,32 @@ const showWordpressUnderList=ref(false)
       transition: 0.25s;
       &::before{
         display:inline-block;
-        content:"⏵";
+        //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:"⏵";
+          //content:"⏵";
           transform: rotate(90deg);
         }
       }
       &:hover{
-        color: $red;
+        color: $red-light;
         cursor: pointer;
       }
     }
   &.under-li{
-    margin-left: 2em;
+    margin-left: 1em;
    
     &.last{
       margin-bottom: 0.5em;
@@ -147,5 +160,10 @@ span.red{
   left: 0;    
 }
 }
+@media (width > 450px){
+  .content > .title > h3 > span::after{
+      content:"logies"
+    }
+  }
 
 </style>