keyboard swiper nav

components/Brush.vue

@@ -0,0 +1,132 @@
+<template>
+  <div ref="canvasContainer" id="canvasContainer"></div>
+</template>
+
+<script>
+  import p5 from 'p5';
+
+  export default {
+    mounted() {
+      if (process.client) {
+        this.p5Instance = new p5(this.sketch, this.$refs.canvasContainer);
+      }
+    },
+    beforeDestroy() {
+      if (this.p5Instance) {
+        this.p5Instance.remove();
+      }
+    },
+    methods: {
+      sketch(p) {
+        let brushStrokes = [];
+        const fadingTime = 2000;
+        const brushDensity = 30;
+        const textureDensity = 2;
+        const brushSize = 4;
+
+        p.setup = () => {
+          p.createCanvas(p.windowWidth, p.windowHeight);
+          p.clear();
+          p.colorMode(p.HSL);
+          p.noStroke();
+        };
+
+        p.draw = () => {
+          p.clear();
+          for (let i = brushStrokes.length - 1; i >= 0; i--) {
+            let brushStroke = brushStrokes[i];
+            let elapsedTime = p.millis() - brushStroke.startTime;
+            if (elapsedTime > fadingTime) {
+              brushStrokes.splice(i, 1);
+              continue;
+            }
+
+            let isSwiperOpen;
+            let swipers = document.querySelectorAll('.swiper');
+            for (let swiper of swipers) {
+              if (swiper.style.opacity == 1) isSwiperOpen = true;
+            }
+
+
+
+            if (!isSwiperOpen) {
+              let alpha = p.map(elapsedTime, 0, fadingTime, 1, 0);
+              
+              
+              for (let j = 0; j < brushStroke.dots.length; j++) {
+                p.fill(
+                  brushStroke.dots[j].color.h,
+                  brushStroke.dots[j].color.s,
+                  brushStroke.dots[j].color.l,
+                  alpha);
+  
+                p.ellipse(
+                  brushStroke.dots[j].x,
+                  brushStroke.dots[j].y,
+                  brushStroke.dots[j].size,
+                  brushStroke.dots[j].size
+                );
+              }
+            }
+            }
+            
+        };
+
+        p.mouseMoved = () => {
+          let dots = [];
+          for (let j = 0; j < brushDensity; j++) {
+            let angle = p.random(p.TWO_PI);
+            let r = p.sqrt(p.pow(p.random(1), 2)) * gaussian(brushSize, 3);
+            let x = p.mouseX + r * p.cos(angle);
+            let y = p.mouseY + r * p.sin(angle);
+            dots.push({ 
+              x: x,
+              y: y,
+              size: p.random(1) * textureDensity,
+              color: {
+                h: 178,
+                s: 20,
+                l: constrainedGaussian(22, 10, 10, 100)
+              }
+            });
+          }
+          brushStrokes.push({
+            x: p.mouseX,
+            y: p.mouseY,
+            startTime: p.millis(),
+            dots: dots
+          });
+        }
+
+        function gaussian(mean, sd) {
+          let u1 = p.random();
+          let u2 = p.random();
+          let z0 = p.sqrt(-2.0 * p.log(u1)) * p.cos(p.TWO_PI * u2);
+          return z0 * sd + mean;
+        }
+
+        function constrainedGaussian(mean, sd, min, max) {
+          let value;
+          do {
+            value = gaussian(mean, sd);
+          } while (value < min || value > max);
+          return value;
+        }
+      }
+
+    },
+
+  }  
+</script>
+
+<style scoped>
+    #canvasContainer {
+        pointer-events: none;
+        top: 0;
+        left: 0;
+        z-index: 2;
+        position: fixed;
+        width: 100vw;
+        height: 100vh;
+    }
+</style>

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%;
-                left: -15%;
-                width: 130%;
-                height: 240%;
+                top: -75%;
+                left: -25%;
+                width: 150%;
+                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');
-                left: -30%;
-                width: 160%;
+                background-image: url('/assets/images/hover-galery-2.png');
             }
             #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: -110% !important;
+                        height: 300% !important;
+                    }
                 }
                 ul {
                     margin-top: 0;
@@ -157,8 +161,11 @@ export default {
                     }
                 }
             }
-            > div > a > img {
-                padding: 10px;
+            > div {
+                width: 3rem;
+                > a > img {
+                    padding: 10px;
+                }
             }
         }
     }

components/Projects.vue

@@ -3,9 +3,9 @@
         <article v-for="content in contents.slice().reverse()" :key="content.id">
             <div>
                 <img
-                    :src="`/imgs/small/${content.image ? content.image : content.shop_image}.webp`"
+                    :src="`/imgs/small/${content.image}.webp`"
                     :alt="content.titre"
-                    @click="displaySlider(content.id)"
+                    @click="displaySlider(contents.length - content.id)"
                 />
             </div>
             <div>
@@ -22,13 +22,14 @@
             :loop="true"
             :modules="modules"
             :navigation="true"
+            :keyboard="{ enabled: true }"
             @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`"
+                        :src="`/imgs/large/${content.image}.webp`"
                         :alt="content.titre"
                     />
                 </div>
@@ -39,7 +40,7 @@
 </template>
 
 <script>
-import { A11y, Navigation, Zoom } from "swiper/modules";
+import { Keyboard, A11y, Navigation, Zoom } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import "swiper/css";
 import 'swiper/css/zoom';
@@ -56,7 +57,7 @@ export default {
             const body = document.querySelector('body');
             body.style.overflowY = 'hidden';
             const swiper = swiperInstance.value;
-            swiper.slideToLoop(index - 1);
+            swiper.slideToLoop(index);
             const swiperEl = swiper.el;
             swiperEl.style.display = "block";
             setTimeout(() => {
@@ -66,7 +67,13 @@ export default {
 
         const closeSlider = () => {
             const body = document.querySelector('body');
-            const swiperEl = document.querySelector('.swiper');
+            const swiperElements = document.querySelectorAll('.swiper');
+            let swiperEl;
+            for (let swiperElement of swiperElements) {
+                if (swiperElement.style.opacity == 1) {
+                    swiperEl = swiperElement;
+                }
+            }
             swiperEl.style.opacity = 0;
             setTimeout(() => {
                 swiperEl.style.display = "none";
@@ -77,7 +84,7 @@ export default {
         return {
             onSwiper,
             onSlideChange,
-            modules: [Navigation, A11y, Zoom],
+            modules: [Keyboard, Navigation, A11y, Zoom],
             displaySlider,
             closeSlider,
         };
@@ -125,6 +132,7 @@ export default {
             display: none;
             opacity: 0;
             transition: opacity 0.3s ease-out;
+            z-index: 3;
             .swiper-wrapper {
                 .swiper-slide {
                     width: 100%;

nuxt.config.ts

@@ -2,8 +2,6 @@
 // https://github.com/codepie-io/nuxt3-dynamic-routes/blob/main/nuxt.config.ts
 // + ssg homemade caching to not retrieve all the files each generation
 
-// import { createDirectus, staticToken, rest, readFiles } from '@directus/sdk';
-
 import { crawlImages } from './ssg_hooks/crawlImages.js'
 import { cacheImages } from './ssg_hooks/cacheImages.js'
 

package-lock.json

@@ -8,6 +8,7 @@
       "hasInstallScript": true,
       "dependencies": {
         "@directus/sdk": "^15.1.0",
+        "p5": "^1.9.4",
         "sharp": "^0.33.3",
         "swiper": "^11.0.6",
         "vue": "^3.4.15",
@@ -10871,6 +10872,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/p5": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/p5/-/p5-1.9.4.tgz",
+      "integrity": "sha512-dhiZ9mvXx5pm8eRwml34xbeUwce4uS9Q2za0YOHg2p97N9iNAb5hTIHAt77CHKHXAh6A16u/oalz5egRfTyFWw==",
+      "license": "LGPL-2.1"
+    },
     "node_modules/pacote": {
       "version": "17.0.7",
       "resolved": "https://registry.npmjs.org/pacote/-/pacote-17.0.7.tgz",

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@directus/sdk": "^15.1.0",
+    "p5": "^1.9.4",
     "sharp": "^0.33.3",
     "swiper": "^11.0.6",
     "vue": "^3.4.15",

pages/contact.vue

@@ -1,28 +1,39 @@
 <template>
-    <main id="contact">
-        <div>
-            <img 
-                :src="`/imgs/small/${globalData.contact_image}.webp`"
-                :alt="globalData.contact_image_titre"
-            />
-        </div>
-        <div>
-            <p>{{ globalData.contact_text }}</p>
-            <a :href="'mailto:' + globalData.email">{{ globalData.email }}</a>
-        </div>
+    <main>
+        <Brush />
+        <main id="contact">
+            <div>
+                <img 
+                    :src="`/imgs/small/${globalData.contact_image}.webp`"
+                    :alt="globalData.contact_image_titre"
+                />
+            </div>
+            <div>
+                <p v-html="globalData.contact_text"></p>
+                <a :href="'mailto:' + globalData.email">{{ globalData.email }}</a>
+            </div>
+        </main>
     </main>
 </template>
 
 <script>
+import Brush from '@/components/Brush.vue';
+
 export default {
     async setup() {
 
         let globalData = await useFetchGlobalData();
         globalData = globalData.globalData._object.$sglobalData;
+        if (globalData.contact_text.includes('\n')) {
+            globalData.contact_text = JSON.stringify(globalData.contact_text).replace(/\\n/g, '<br>').slice(1, -1);
+        }
 
         return {
             globalData
         }
+    },
+    components: {
+        Brush
     }
 }
 </script>
@@ -43,6 +54,24 @@ export default {
                 line-height: 1.2;
                 margin-bottom: 1.5rem;
             }
+            > a {
+                display: inline-block;
+            }
+            > a::after {
+                width: 100%;
+                height: 1rem;
+                display: block;
+                background-image: url('/assets/images/soulignage.png');
+                background-size: contain;
+                background-repeat: no-repeat;
+                background-position: center;
+                content: "";
+                margin-top: 0px;
+                transition: margin-top 0.2s ease-out;
+            }
+            > a:hover::after {
+                margin-top: 3px;
+            }
         }
     }
 
@@ -53,6 +82,7 @@ export default {
                 width: 30vw;
             }
             > div:last-of-type {
+                margin-top: 0;
                 width: 40vw;
                 margin-left: 2rem;
                 align-self: flex-end;

pages/galerie.vue

@@ -1,9 +1,13 @@
 <template>
-    <Projects :contents="galerie" />
+    <main>
+        <Brush />
+        <Projects :contents="galerie" />
+    </main>
 </template>
 
 <script>
 import Projects from '@/components/Projects.vue';
+import Brush from '@/components/Brush.vue';
 
 export default {
     setup() {
@@ -22,7 +26,8 @@ export default {
         };
     },
     components: {
-        Projects
+        Projects,
+        Brush
     }
 };
 </script>

pages/index.vue

@@ -25,13 +25,10 @@ export default {
             }
         });
 
-        
-
         return {
             itemsAccueil,
         };
 
-
         function startSlider() {
             const imgs = document.querySelectorAll('.indexImg img');
             

pages/magasin.vue

@@ -1,22 +1,38 @@
 <template>
     <main>
+        <Brush />
         <p>{{ globalData.magasin_explication }}</p>
-        <Projects :contents="magasin" />
+        <div class="category">
+            <div>
+                <h3>Toiles</h3>
+                <Projects :contents="toiles" />
+            </div>
+            <div>
+                <h3>Impressions</h3>
+                <Projects :contents="prints" />
+            </div>
+        </div>
     </main>
 </template>
 
 <script>
 import Projects from '@/components/Projects.vue';
+import Brush from '@/components/Brush.vue';
 
 export default {
     async setup() {
-        const magasin = ref([]);
+        const toiles = ref([]);
+        const prints = ref([]);
 
-        const { data: itemsData } = useFetch('/api/items/magasin', { server: true });
-
-        onBeforeMount(async () => {
-            if (itemsData.value) {
-                magasin.value = itemsData.value.data;
+        const { data: toilesData } = useFetch('/api/items/toiles', { server: true });
+        const { data: printsData } = useFetch('/api/items/prints', { server: true });
+        
+        onMounted(async () => {
+            if (toilesData.value) {
+                toiles.value = toilesData.value.data;
+            }
+            if (printsData.value) {
+                prints.value = printsData.value.data;
             }
         });
 
@@ -25,11 +41,37 @@ export default {
 
         return {
             globalData,
-            magasin
+            toiles,
+            prints
         };
     },
     components: {
-        Projects
+        Projects,
+        Brush
     }
 };
-</script>
+</script>
+
+<style scoped lang="scss">
+    h3:first-of-type {
+        margin-top: 3rem;
+    }
+    h3 {
+        text-transform: uppercase;
+    }
+    div > h3 + main {
+        margin-top: 3vh;
+    }
+
+    @media screen and (min-width: 800px) {
+        div > h3 + main {
+            margin-top: 4vh;
+        }
+        .category {
+            display: flex;
+            > div {
+                width: 50%;
+            }
+        }
+    }
+</style>