all kind of modifications

src/components/Burger.vue

@@ -2,6 +2,7 @@
 import { useBurgerStore } from '@/stores/burger'
 
 const burger = useBurgerStore();
+
 </script>
 
 <template>

src/components/Footer.vue

@@ -1,28 +1,29 @@
 <script setup>
 import { ref } from 'vue';
 
-const show = ref(true)
+const show = ref(false)
 
 </script>
 <template>
+<button class="arrow" @click="show = !show">
   <svg
-  viewBox="0 0 20 20"
+  viewBox="0 0 10 7.4"
   class="arrow"
-  v-bind:class="show ? 'down' : ''"
+  :class="{'down': show}"
-  @click="show = !show"
   >
-    <circle
+  <!--
-    style="stroke:#000000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+  This circle is now make the button...
-    id="path833"
+   <circle
-    cx="10"
+  style="stroke:#000000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-    cy="10"
+  id="path833"
-    r="8" />
+  cx="10"
-    <path
+  cy="10"
-      style="fill:none;stroke:#000000;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+  r="8" /> -->
-      d="M 5.5,11 10,7 14.5,11"
+  <path
-      id="path841"
+  style="fill:none;stroke:#000000;stroke-width:1.0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-      sodipodi:nodetypes="ccc" />
+  d="M 1,5 5,1 9,5"/>
   </svg>
+</button>
     
   <div class="footer"
     v-bind:class="show ? '' : 'hide'">
@@ -133,9 +134,8 @@ const show = ref(true)
         </g>
       </g>
     </svg>
-    <div class="raffi">
+    
-     COUCOU
+      <svg id = "raffi" viewBox="75 -50 300 150">
-      <!-- <svg id = "raffi" viewBox="75 -50 300 150"> -->
         <path id="raffi_path"
         style="fill:none;
         stroke-width:6;
@@ -153,8 +153,7 @@ M 268.00837,42.908163 c -26.42894,-1.402892 -17.3056,39.667651 -1.54342,31.36458
 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>
-</div>
 <svg
     viewBox="465 -39 150 175"
     style="height : 1.8em"
@@ -220,7 +219,7 @@ M 311.63779,10 312.2454,10"/>
     justify-content: center;
     flex-wrap: wrap;
     background-color: hsla(0, 0%, 0%, 0.904);
-    min-height:3.5em;
+    min-height:2.5em;
     width: 100%;
     max-width: $maxWidth;
     z-index: 9;
@@ -229,61 +228,56 @@ M 311.63779,10 312.2454,10"/>
       transform:translateY(100%)
     }
   }
-  svg{
+svg{
-    height: 2.5em;
+  height: 2em;
-    & > circle{
-      fill:$action-normal;
-      transition : 0.25s;
-    }
-  }
-  h1{
-    font-size: 2em;
-    margin-right: 0.5em;
-    color:white;
   }
 
-    .raffi{
+  button.arrow{
-      background: linear-gradient(90deg, #0f0, #f0f, #00f, #FF0, #0ff);
+    position:fixed;
-
-      color:transparent;
-
-    }
-    .stop1{
-      stop-color:#f0f;
-    }
-    .stop2{
-      offset-gradient: 20%;
-      stop-color:#f00;
-    }
-    .stop3{
-      stop-color:#0f0;
-    }
-    .stop4{
-      stop-color:#00f;
-    }
-    .stop5{
-      stop-color:#f0f;
-    }
-  
-  .arrow{
-    margin-left: 0.4em;
-    position : fixed;
     bottom:0.5em;
-    transition: 0.35s;
     z-index: 99;
-    &.up{
+    aspect-ratio: 1;
-      transform: rotate(0deg);
+    width:2.1em;
-    }
+    text-align: center;
-    &.down{
+    border: none;
-      transform: rotate(180deg);
+    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);

src/components/Footer_1.vue

@@ -136,7 +136,7 @@ const show = ref(false)
     <svg
       viewBox="75 -50 300 150"
       style="fill:none;
-      stroke:white;
+      stroke:rgb(189, 25, 25);
       stroke-width:5;
       stroke-linecap:round;"
     >
@@ -249,7 +249,8 @@ const show = ref(false)
 </template>
 
 <style lang="scss" scoped>
-@import "@/style/shared.scss";
+@import "../style/colors.scss";
+@import "../style/widths.scss";
 
   div.footer{
     position : fixed;

src/views/Projects.vue

@@ -28,6 +28,12 @@ const items = ref([
     bg_image : "url('https://picsum.photos/id/23/200/300')"
   },
  
+  { id:4,
+    selected : false,
+    name : "A backend for an artist",
+    bg_image : "url('https://picsum.photos/id/23/200/300')"
+  },
+ 
     ]);
 
 const handleLeftArrow = () =>{
@@ -146,10 +152,9 @@ const changeSelectedTab = (id) => {
 
       <div class="project"
         v-else-if ="items[1].selected">
-        <p>A presentation of this (finally useful) project... is to be watched soon</p>
+        <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 unavailable" src="https://www.youtube.com/embed" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+        <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>
-        <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>
@@ -197,6 +202,19 @@ const changeSelectedTab = (id) => {
         <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>