Add AOS library and use it on text elements

components/ContactHeader.vue

@@ -2,6 +2,7 @@
 
     <div class="contact-header">
         <h2 class="contact-header__title">Contact</h2>
+        <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é">
@@ -28,6 +29,7 @@
                 </a>
             </div>
         </div>
+    </div>
 
 </template>
 
@@ -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;

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}`">

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>

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'
     ],

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",

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",

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>

plugins/aos.js

@@ -0,0 +1,5 @@
+import AOS from 'aos';
+
+export default defineNuxtPlugin((nuxtApp) => {
+    nuxtApp.provide('AOS', AOS);
+});