From 606b4801c702ef1d0df96f6db776e63cc6d3eb24 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20Nicou=C3=A9?= <contact@paulnicoue.com>
Date: Thu, 23 Mar 2023 12:25:18 +0100
Subject: [PATCH] Add AOS library and use it on text elements

---
 components/ContactHeader.vue   | 57 ++++++++++++++++++++--------------
 components/ProjectData.vue     |  2 +-
 components/ServicesSection.vue |  4 +--
 nuxt.config.ts                 |  3 +-
 package-lock.json              | 27 ++++++++++++++++
 package.json                   |  1 +
 pages/index.vue                | 15 +++++++++
 plugins/aos.js                 |  5 +++
 8 files changed, 86 insertions(+), 28 deletions(-)
 create mode 100644 plugins/aos.js

diff --git a/components/ContactHeader.vue b/components/ContactHeader.vue
index ac30f97..b87315c 100644
--- a/components/ContactHeader.vue
+++ b/components/ContactHeader.vue
@@ -2,30 +2,32 @@
 
     <div class="contact-header">
         <h2 class="contact-header__title">Contact</h2>
-        <p class="contact-header__text">Vous avez un projet web à réaliser&nbsp;? Contactez-moi à l'adresse e-mail <a href="mailto:contact@paulnicoue.com" target="_blank">contact@paulnicoue.com</a> ou via le formulaire ci-après. Vous pouvez également me retrouver sur les plateformes <a href="https://www.malt.fr/profile/paulnicoue" target="_blank">Malt</a> (mise en relation des entreprises et travailleurs indépendants) et <a href="https://gitlab.com/paulnicoue" target="_blank">GitLab</a> (hébergement et gestion de code source).</p>
-        <div class="contact-header__links" aria-hidden="true">
-            <a tabindex="-1" href="https://www.malt.fr/profile/paulnicoue" target="_blank" title="Consulter le profil Malt de Paul Nicoué">
-                <svg viewBox="0 0 24 24" fill="url(#malt-icon-gradient)" xmlns="http://www.w3.org/2000/svg">
-                    <defs>
-                        <linearGradient id="malt-icon-gradient" gradientUnits="userSpaceOnUse" x1="12" y1="0" x2="12" y2="24" gradientTransform="matrix(0.707651, 0.706562, -1, 1, 15.508194, -8.478749)">
-                            <stop offset="0" style="stop-color: rgb(163, 243, 176);"/>
-                            <stop offset="1" style="stop-color: rgb(114, 192, 128);"/>
-                        </linearGradient>
-                    </defs>
-                    <path d="M 20.542 3.464 C 18.726 1.654 16.793 2.827 15.581 4.034 L 4.14 15.475 C 2.927 16.687 1.659 18.531 3.57 20.436 C 5.475 22.341 7.313 21.073 8.525 19.86 L 19.967 8.419 C 21.179 7.212 22.352 5.274 20.542 3.464 Z M 9.609 2.994 L 12.034 5.419 L 14.497 2.95 C 14.665 2.782 14.832 2.626 15.006 2.48 C 14.749 1.179 14.006 0 12.028 0 C 10.05 0 9.307 1.184 9.056 2.486 C 9.24 2.648 9.425 2.81 9.609 2.994 Z M 14.497 20.989 L 12.034 18.525 L 9.609 20.944 C 9.425 21.128 9.246 21.302 9.061 21.458 C 9.341 22.788 10.123 24 12.028 24 C 13.939 24 14.726 22.777 15 21.447 C 14.832 21.302 14.665 21.156 14.497 20.989 Z M 8.581 8.866 L 3.911 8.866 C 2.196 8.866 0 9.408 0 11.966 C 0 13.883 1.223 14.665 2.559 14.939 C 2.715 14.76 8.581 8.866 8.581 8.866 Z M 21.514 8.994 C 21.369 9.162 15.486 15.073 15.486 15.073 L 20.089 15.073 C 21.804 15.073 24 14.665 24 11.966 C 24 9.994 22.821 9.251 21.514 8.994 Z M 10.112 7.335 L 10.944 6.503 L 8.525 4.078 C 7.313 2.866 5.475 1.598 3.564 3.508 C 2.168 4.905 2.48 6.268 3.218 7.369 C 3.447 7.352 10.112 7.335 10.112 7.335 Z M 13.95 16.603 L 13.112 17.441 L 15.581 19.905 C 16.793 21.117 18.726 22.291 20.536 20.48 C 21.888 19.128 21.581 17.704 20.832 16.57 C 20.592 16.587 13.95 16.603 13.95 16.603 Z"/>
-                </svg>
-            </a>
-            <a tabindex="-1" href="https://gitlab.com/paulnicoue" target="_blank" title="Consulter le profil GitLab de Paul Nicoué">
-                <svg viewBox="0 0 24 24" fill="url(#gitlab-icon-gradient)" xmlns="http://www.w3.org/2000/svg">
-                    <defs>
-                        <linearGradient id="gitlab-icon-gradient" gradientUnits="userSpaceOnUse" x1="12" y1="0" x2="12" y2="24" gradientTransform="matrix(0.705192, 0.709016, -1, 1, 15.5377, -8.508194)">
-                            <stop offset="0" style="stop-color: rgb(163, 243, 176);"/>
-                            <stop offset="1" style="stop-color: rgb(114, 192, 128);"/>
-                        </linearGradient>
-                    </defs>
-                    <path d="M 23.601 9.5 L 23.568 9.411 L 20.301 0.558 C 20.235 0.385 20.117 0.237 19.965 0.137 C 19.653 -0.063 19.254 -0.041 18.965 0.193 C 18.826 0.311 18.724 0.471 18.675 0.65 L 16.47 7.658 L 7.539 7.658 L 5.333 0.65 C 5.285 0.47 5.183 0.309 5.043 0.192 C 4.754 -0.042 4.355 -0.064 4.043 0.136 C 3.891 0.237 3.774 0.384 3.707 0.557 L 0.434 9.406 L 0.402 9.495 C -0.564 12.116 0.256 15.085 2.414 16.775 L 2.425 16.784 L 2.455 16.806 L 7.431 20.676 L 9.893 22.611 L 11.392 23.787 C 11.753 24.071 12.252 24.071 12.612 23.787 L 14.112 22.611 L 16.573 20.676 L 21.58 16.783 L 21.592 16.773 C 23.745 15.082 24.563 12.119 23.601 9.5 Z"/>
-                </svg>
-            </a>
+        <div class="contact-header__content" data-aos="fade-up">
+            <p class="contact-header__text">Vous avez un projet web à réaliser&nbsp;? Contactez-moi à l'adresse e-mail <a href="mailto:contact@paulnicoue.com" target="_blank">contact@paulnicoue.com</a> ou via le formulaire ci-après. Vous pouvez également me retrouver sur les plateformes <a href="https://www.malt.fr/profile/paulnicoue" target="_blank">Malt</a> (mise en relation des entreprises et travailleurs indépendants) et <a href="https://gitlab.com/paulnicoue" target="_blank">GitLab</a> (hébergement et gestion de code source).</p>
+            <div class="contact-header__links" aria-hidden="true">
+                <a tabindex="-1" href="https://www.malt.fr/profile/paulnicoue" target="_blank" title="Consulter le profil Malt de Paul Nicoué">
+                    <svg viewBox="0 0 24 24" fill="url(#malt-icon-gradient)" xmlns="http://www.w3.org/2000/svg">
+                        <defs>
+                            <linearGradient id="malt-icon-gradient" gradientUnits="userSpaceOnUse" x1="12" y1="0" x2="12" y2="24" gradientTransform="matrix(0.707651, 0.706562, -1, 1, 15.508194, -8.478749)">
+                                <stop offset="0" style="stop-color: rgb(163, 243, 176);"/>
+                                <stop offset="1" style="stop-color: rgb(114, 192, 128);"/>
+                            </linearGradient>
+                        </defs>
+                        <path d="M 20.542 3.464 C 18.726 1.654 16.793 2.827 15.581 4.034 L 4.14 15.475 C 2.927 16.687 1.659 18.531 3.57 20.436 C 5.475 22.341 7.313 21.073 8.525 19.86 L 19.967 8.419 C 21.179 7.212 22.352 5.274 20.542 3.464 Z M 9.609 2.994 L 12.034 5.419 L 14.497 2.95 C 14.665 2.782 14.832 2.626 15.006 2.48 C 14.749 1.179 14.006 0 12.028 0 C 10.05 0 9.307 1.184 9.056 2.486 C 9.24 2.648 9.425 2.81 9.609 2.994 Z M 14.497 20.989 L 12.034 18.525 L 9.609 20.944 C 9.425 21.128 9.246 21.302 9.061 21.458 C 9.341 22.788 10.123 24 12.028 24 C 13.939 24 14.726 22.777 15 21.447 C 14.832 21.302 14.665 21.156 14.497 20.989 Z M 8.581 8.866 L 3.911 8.866 C 2.196 8.866 0 9.408 0 11.966 C 0 13.883 1.223 14.665 2.559 14.939 C 2.715 14.76 8.581 8.866 8.581 8.866 Z M 21.514 8.994 C 21.369 9.162 15.486 15.073 15.486 15.073 L 20.089 15.073 C 21.804 15.073 24 14.665 24 11.966 C 24 9.994 22.821 9.251 21.514 8.994 Z M 10.112 7.335 L 10.944 6.503 L 8.525 4.078 C 7.313 2.866 5.475 1.598 3.564 3.508 C 2.168 4.905 2.48 6.268 3.218 7.369 C 3.447 7.352 10.112 7.335 10.112 7.335 Z M 13.95 16.603 L 13.112 17.441 L 15.581 19.905 C 16.793 21.117 18.726 22.291 20.536 20.48 C 21.888 19.128 21.581 17.704 20.832 16.57 C 20.592 16.587 13.95 16.603 13.95 16.603 Z"/>
+                    </svg>
+                </a>
+                <a tabindex="-1" href="https://gitlab.com/paulnicoue" target="_blank" title="Consulter le profil GitLab de Paul Nicoué">
+                    <svg viewBox="0 0 24 24" fill="url(#gitlab-icon-gradient)" xmlns="http://www.w3.org/2000/svg">
+                        <defs>
+                            <linearGradient id="gitlab-icon-gradient" gradientUnits="userSpaceOnUse" x1="12" y1="0" x2="12" y2="24" gradientTransform="matrix(0.705192, 0.709016, -1, 1, 15.5377, -8.508194)">
+                                <stop offset="0" style="stop-color: rgb(163, 243, 176);"/>
+                                <stop offset="1" style="stop-color: rgb(114, 192, 128);"/>
+                            </linearGradient>
+                        </defs>
+                        <path d="M 23.601 9.5 L 23.568 9.411 L 20.301 0.558 C 20.235 0.385 20.117 0.237 19.965 0.137 C 19.653 -0.063 19.254 -0.041 18.965 0.193 C 18.826 0.311 18.724 0.471 18.675 0.65 L 16.47 7.658 L 7.539 7.658 L 5.333 0.65 C 5.285 0.47 5.183 0.309 5.043 0.192 C 4.754 -0.042 4.355 -0.064 4.043 0.136 C 3.891 0.237 3.774 0.384 3.707 0.557 L 0.434 9.406 L 0.402 9.495 C -0.564 12.116 0.256 15.085 2.414 16.775 L 2.425 16.784 L 2.455 16.806 L 7.431 20.676 L 9.893 22.611 L 11.392 23.787 C 11.753 24.071 12.252 24.071 12.612 23.787 L 14.112 22.611 L 16.573 20.676 L 21.58 16.783 L 21.592 16.773 C 23.745 15.082 24.563 12.119 23.601 9.5 Z"/>
+                    </svg>
+                </a>
+            </div>
         </div>
     </div>
 
@@ -46,6 +48,13 @@
         place-items: start;
         gap: 2rem;
 
+        &__content {
+            display: grid;
+            place-content: start;
+            place-items: start;
+            gap: 2rem;
+        }
+
         &__links {
             display: flex;
             justify-content: center;
diff --git a/components/ProjectData.vue b/components/ProjectData.vue
index 815200a..1130373 100644
--- a/components/ProjectData.vue
+++ b/components/ProjectData.vue
@@ -1,6 +1,6 @@
 <template>
 
-    <div class="project-data">
+    <div class="project-data" data-aos="fade-up">
         <div class="project-data__header">
             <h3>{{ title }}</h3>
             <a :href="url" target="_blank" :title="`Accéder au site web de ${title}`">
diff --git a/components/ServicesSection.vue b/components/ServicesSection.vue
index 285ac23..7a4dca9 100644
--- a/components/ServicesSection.vue
+++ b/components/ServicesSection.vue
@@ -55,11 +55,11 @@
             </div>
             <h2 class="services__title">Prestations</h2>
             <ul class="services__list">
-                <li>
+                <li data-aos="fade-up">
                     <h3>Intégration web et développement front-end</h3>
                     <p>Intégration de maquettes dans le respect des standards W3C et de la charte graphique définie par votre agence de communication digitale.</p>
                 </li>
-                <li>
+                <li data-aos="fade-up">
                     <h3>Création de site internet sur mesure</h3>
                     <p>Accompagnement de votre entreprise ou association dans la création ou la refonte de son site vitrine, portfolio ou e-commerce.</p>
                 </li>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 650d0fa..1ee7506 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,6 +1,7 @@
 export default defineNuxtConfig({
     css: [
-        'minireset.css',
+        'minireset.css/minireset.min.css',
+        'aos/dist/aos.css',
         '~/assets/styles/_fonts.scss',
         '~/assets/styles/_animations.scss'
     ],
diff --git a/package-lock.json b/package-lock.json
index 98f6afb..2751538 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
             "hasInstallScript": true,
             "devDependencies": {
                 "@funken-studio/sitemap-nuxt-3": "^4.0.4",
+                "aos": "^2.3.4",
                 "click-outside-vue3": "^4.0.1",
                 "minireset.css": "^0.0.7",
                 "node-mailjet": "^6.0.2",
@@ -15,6 +16,9 @@
                 "sass-loader": "^13.2.0",
                 "vee-validate": "^4.7.3",
                 "yup": "^0.32.11"
+            },
+            "engines": {
+                "node": "16.19.0"
             }
         },
         "node_modules/@ampproject/remapping": {
@@ -2292,6 +2296,17 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/aos": {
+            "version": "2.3.4",
+            "resolved": "https://registry.npmjs.org/aos/-/aos-2.3.4.tgz",
+            "integrity": "sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==",
+            "dev": true,
+            "dependencies": {
+                "classlist-polyfill": "^1.0.3",
+                "lodash.debounce": "^4.0.6",
+                "lodash.throttle": "^4.0.1"
+            }
+        },
         "node_modules/aproba": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
@@ -2830,6 +2845,12 @@
                 "node": ">=8"
             }
         },
+        "node_modules/classlist-polyfill": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
+            "integrity": "sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ==",
+            "dev": true
+        },
         "node_modules/cli-cursor": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-4.0.0.tgz",
@@ -5151,6 +5172,12 @@
                 "lodash._reinterpolate": "^3.0.0"
             }
         },
+        "node_modules/lodash.throttle": {
+            "version": "4.1.1",
+            "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+            "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==",
+            "dev": true
+        },
         "node_modules/lodash.union": {
             "version": "4.6.0",
             "resolved": "https://registry.npmjs.org/lodash.union/-/lodash.union-4.6.0.tgz",
diff --git a/package.json b/package.json
index db9b98a..c5cc26a 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     ],
     "devDependencies": {
         "@funken-studio/sitemap-nuxt-3": "^4.0.4",
+        "aos": "^2.3.4",
         "click-outside-vue3": "^4.0.1",
         "minireset.css": "^0.0.7",
         "node-mailjet": "^6.0.2",
diff --git a/pages/index.vue b/pages/index.vue
index 0cf8945..93eaeac 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -19,6 +19,21 @@
         pageTitleChunk: null
     })
 
+    // --------------------------------------------------
+    // PROGRAM
+    // --------------------------------------------------
+
+    onMounted(() => {
+        const AOS = useNuxtApp().$AOS;
+        AOS.init({
+            offset: 100,
+            duration: 600,
+            easing: 'ease-in-out',
+            delay: 0,
+            once: false
+        });
+    })
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/plugins/aos.js b/plugins/aos.js
new file mode 100644
index 0000000..5c39f16
--- /dev/null
+++ b/plugins/aos.js
@@ -0,0 +1,5 @@
+import AOS from 'aos';
+
+export default defineNuxtPlugin((nuxtApp) => {
+    nuxtApp.provide('AOS', AOS);
+});