Add AOS library and use it on text elements
This commit is contained in:
Paul Nicoué
parent
1d185e9ff4
commit
606b4801c7
8 changed files with 86 additions and 28 deletions
|
|
@ -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 ? 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 ? 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;
|
||||
|
|
|
|||
|
|
@ -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}`">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
],
|
||||
|
|
|
|||
27
package-lock.json
generated
27
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
5
plugins/aos.js
Normal file
5
plugins/aos.js
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import AOS from 'aos';
|
||||
|
||||
export default defineNuxtPlugin((nuxtApp) => {
|
||||
nuxtApp.provide('AOS', AOS);
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue