modifs ordre slider, logo insta, hover header

components/Header.vue

@@ -62,6 +62,12 @@ export default {
                 width: auto;
                 position: relative;
                 margin-top: 1rem;
+                > .hover_el_active {
+                    top: -100% !important;
+                    left: -40% !important;
+                    width: 170% !important;
+                    height: 300% !important;
+                }
                 > a {
                     position: relative;
                     padding: 10px;
@@ -69,10 +75,6 @@ export default {
                     z-index: 1;
                 }
             }
-            h1 .hover_el_active {
-                left: -40% !important;
-                width: 170% !important;
-            }
             h1:hover .hover_el_active,
             h1.active .hover_el_active {
                 opacity: 1;
@@ -101,10 +103,10 @@ export default {
             }
             .hover_el_active {
                 position: absolute;
-                top: -70%;
+                top: -75%;
-                left: -15%;
+                left: -25%;
-                width: 130%;
+                width: 150%;
-                height: 240%;
+                height: 250%;
                 background-size: contain !important;
                 background-repeat: no-repeat !important;
                 background-position: center !important;
@@ -113,22 +115,20 @@ export default {
                 transition: opacity 0.3s ease;
             }
             #indexActive {
-                background-image: url('/assets/images/hover-index.png');
+                background-image: url('/assets/images/hover-index-2.png');
             }
             #galeryActive {
-                background-image: url('/assets/images/hover-index.png');
+                background-image: url('/assets/images/hover-galery-2.png');
-                left: -30%;
-                width: 160%;
             }
             #shopActive {
-                background-image: url('/assets/images/hover-index.png');
+                background-image: url('/assets/images/hover-shop-2.png');
             }
             #contactActive {
-                background-image: url('/assets/images/hover-index.png');
+                background-image: url('/assets/images/hover-contact-2.png');
             }
         }
         > div {
-            width: 3rem;
+            width: 2rem;
             z-index: 1;
             img {
                 padding-top: 10px;
@@ -149,6 +149,10 @@ export default {
                 flex-direction: row;
                 h1 {
                     margin-top: 0;
+                    > .hover_el_active {
+                        top: -130% !important;
+                        height: 350% !important;
+                    }
                 }
                 ul {
                     margin-top: 0;
@@ -157,8 +161,11 @@ export default {
                     }
                 }
             }
-            > div > a > img {
+            > div {
-                padding: 10px;
+                width: 3rem;
+                > a > img {
+                    padding: 10px;
+                }
             }
         }
     }

components/Projects.vue

@@ -25,7 +25,7 @@
             @slideChange="onSlideChange"
             @swiper="onSwiper"
         >
-            <swiper-slide v-for="content in contents" :key="content.id">
+            <swiper-slide v-for="content in contents.slice().reverse()" :key="content.id">
                 <div class="swiper-zoom-container">
                     <img
                         :src="`/imgs/large/${content.image ? content.image : content.shop_image}.webp`"