refactor(aos.js, vue-smooth-scroll.js, IndexPage.vue): Enhance AOS initialization and adjust delays

Enhance AOS (Animate On Scroll) initialization with client-side checks,
streamline smooth scroll integration, and adjust AOS delays for better
animation timing.

Changes:
- Add client-side checks in aos.js boot file for SSR compatibility
- Add AOS configuration with proper settings
- Streamline vue-smooth-scroll.js integration and add documentation
- Simplify onScrollToTop in MainLayout.vue to use scroll position 0
- Adjust AOS delays in IndexPage.vue for staggered animations

This improves animation timing and ensures AOS works correctly in SSR
environments.

Author: guyromellemagayano

src/boot/aos.js

@@ -1,7 +1,19 @@
 import { boot } from 'quasar/wrappers';
 import AOS from 'aos';
-import 'aos/dist/aos.css'; // You can also use <link> for styles
-// ..
-export default boot(({ app }) => {
-  AOS.init();
+import 'aos/dist/aos.css';
+
+export default boot(() => {
+  // Only initialize AOS on client-side
+  if (typeof window !== 'undefined') {
+    // Initialize AOS with proper configuration
+    AOS.init({
+      duration: 800,
+      easing: 'ease-in-out',
+      once: false, // Allow animations to trigger again when scrolling back up
+      mirror: false, // Don't animate elements when scrolling past them
+      offset: 100, // Offset (in px) from the original trigger point
+      delay: 0, // Delay (in ms) before animation starts
+      anchorPlacement: 'top-bottom', // Defines which position of the element should trigger animation
+    });
+  }
 });

src/boot/vue-smooth-scroll.js

@@ -1,4 +1,14 @@
+import { boot } from 'quasar/wrappers';
 import VueSmoothScroll from 'vue3-smooth-scroll';
-export default ({ app }) => {
+
+export default boot(({ app }) => {
+  // Install the vue3-smooth-scroll plugin
+  // This provides:
+  // 1. $smoothScroll on app.config.globalProperties (for Options API: this.$smoothScroll)
+  // 2. v-smooth-scroll directive for template usage
+  // 3. 'smoothScroll' via app.provide() (accessible via inject('smoothScroll') in Composition API)
   app.use(VueSmoothScroll);
-};
+
+  // The plugin already provides 'smoothScroll' via inject(), so we don't need to provide it ourselves
+  // Components can use: const smoothScroll = inject('smoothScroll')
+});

src/layouts/MainLayout.vue

@@ -178,10 +178,16 @@ export default {
     }
 
     function onScrollToTop () {
-      smoothScroll({
-        scrollTo: document.getElementById('top'),
-        updateHistory: false,
-      });
+      if (smoothScroll) {
+        // Use smoothScroll to scroll to top (position 0)
+        smoothScroll({
+          scrollTo: 0,
+          updateHistory: false,
+        });
+      } else {
+        // Fallback to native smooth scroll
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+      }
     }
 
     function onGoToPanel (card) {

src/pages/IndexPage.vue

@@ -47,7 +47,7 @@ generic-panel(
               div.row.items-center.justify-center
                 div.col-xs-12.text-center
                   div.row.justify-center.items-center
-                    div(data-aos="fade-up").col-xs-12.col-md-3.q-pa-sm
+                    div(data-aos="fade-up" data-aos-delay="0").col-xs-12.col-md-3.q-pa-sm
                       a(href="https://stripe.com?ref=https://ossph.org" target="_blank")
                         q-img(
                           src="../assets/images/stripe-logo.png"
@@ -56,7 +56,7 @@ generic-panel(
                           alt="Stripe Logo"
                         )
                         q-tooltip Stripe
-                    div(data-aos="fade-up").col-xs-12.col-md-3.q-pa-sm
+                    div(data-aos="fade-up" data-aos-delay="100").col-xs-12.col-md-3.q-pa-sm
                       a(href="https://www.microsoft.com/en-us?ref=https://ossph.org" target="_blank")
                         q-img(
                           src="../assets/images/microsoft-logo.png"
@@ -65,7 +65,7 @@ generic-panel(
                           alt="Microsoft Logo"
                         )
                         q-tooltip Microsoft
-                    div(data-aos="fade-up").col-xs-12.col-md-3.q-pa-sm
+                    div(data-aos="fade-up" data-aos-delay="200").col-xs-12.col-md-3.q-pa-sm
                       a(href="https://www.edukasyon.ph?ref=https://ossph.org" target="_blank")
                         q-img(
                           src="../assets/images/edukasyon.jpg"
@@ -74,7 +74,7 @@ generic-panel(
                           alt="Edukasyon.ph Logo"
                         )
                         q-tooltip Edukasyon.ph
-                    div(data-aos="fade-up").col-xs-12.col-md-3.q-pa-sm
+                    div(data-aos="fade-up" data-aos-delay="300").col-xs-12.col-md-3.q-pa-sm
                       a(href="https://www.facebook.com/AWS.SiklabPH/?ref=https://ossph.org" target="_blank")
                         q-img(
                           src="../assets/images/aws-siklab-logo.png"
@@ -83,7 +83,7 @@ generic-panel(
                           alt="AWS Siklab Logo"
                         )
                         q-tooltip AWS Siklab
-                    div(data-aos="fade-up").col-xs-12.col-md-3.q-pa-sm
+                    div(data-aos="fade-up" data-aos-delay="400").col-xs-12.col-md-3.q-pa-sm
                       a(href="https://web3philippines.org/?ref=https://ossph.org" target="_blank")
                         q-img(
                           src="../assets/images/web3phl-logo.png"