fullPage scroll feature for HomePage

Author: aryaman-titan

frontend/package-lock.json

@@ -12,6 +12,7 @@
     "masonry-layout": "^4.2.2",
     "vue": "^2.5.17",
     "vue-carousel": "^0.18.0",
+    "vue-fullpage.js": "^0.1.5",
     "vue-masonry": "^0.11.8",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"

frontend/package.json

@@ -98,7 +98,7 @@ export default {
                     image: competitions,
                     title: "Competitions",
                     description:
-                        "Online competetions on ML, data science, programming, and CTFs are a great way for enthusiasts to show off some skills or learn something new in a competetive environment."
+                        "Online competitions on ML, data science, programming, and CTFs are a great way for enthusiasts to show off some skills or learn something new in a competitive environment."
                 }
             ],
             queue: 1,

frontend/src/components/Gallery.vue

@@ -13,7 +13,7 @@
             Sister groups are different smaller groups within the umbrella of
             Software Development Section, along with SDSLabs. The members of
             these groups focus on specific areas of technological innovation
-            like data science, competetive programming, and information
+            like data science, competitive programming, and information
             security.
         </div>
         <div

frontend/src/components/SisterGroups.vue

@@ -63,7 +63,7 @@ export default {
                     image: competitions,
                     title: "Competitions",
                     description:
-                        "Online competetions on ML, data science, programming, and CTFs are a great way for enthusiasts to show off some skills or learn something new in a competetive environment."
+                        "Online competitions on ML, data science, programming, and CTFs are a great way for enthusiasts to show off some skills or learn something new in a competitive environment."
                 }
             ]
         };

frontend/src/components/about/GalleryMobile.vue

@@ -51,7 +51,7 @@ export default {
                     image: pag,
                     title: "PROGRAMMING & ALGORITHMS GROUP",
                     description:
-                        "A bunch of competetive programming enthusiasts, PAG, frequently organizes coding lectures and contests for IITR people."
+                        "A bunch of competitive programming enthusiasts, PAG, frequently organizes coding lectures and contests for IITR people."
                 },
                 {
                     image: infosec,

frontend/src/components/about/SisterGallery.vue

@@ -2,10 +2,34 @@ import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
+import VueFullPage from "vue-fullpage.js";
 
 import "@/assets/css/tailwind.css";
 
 Vue.config.productionTip = false;
+Vue.use(VueFullPage);
+
+new Vue({
+    el: "#fullpage-home",
+    name: "app",
+    data: function(){
+        return {
+            options: {
+                afterLoad: this.afterLoad,
+                navigation: true,
+                scrollBar: false,
+                controlArrows: true,
+                anchors: ['page1', 'page2', 'page3'],
+            },
+        }
+    },
+    methods: {
+        afterLoad: function(origin, destination, direction){
+            console.log("After load....");
+            console.log(destination);
+        }
+    }
+});
 
 new Vue({
     router,

frontend/src/main.js

@@ -11,17 +11,19 @@
             class="px-16 sm:px-88 pb-28 sm:pb-0 flex flex-col justify-center items-center"
             id="projects"
         >
-            <Project
-                class="fullpage section"
-                v-for="(project, permalink, index) in projects"
-                v-bind:key="index"
-                v-bind:title="project.title"
-                v-bind:desc="project.description"
-                v-bind:url="project.url"
-                v-bind:image_url="project.image"
-                v-bind:permalink="project.permalink"
-                v-bind:color="project.color"
-            />
+            <full-page ref="fullpage" :options="options" id="fullpage-home">
+                <Project
+                    class="fullpage section"
+                    v-for="(project, permalink, index) in projects"
+                    v-bind:key="index"
+                    v-bind:title="project.title"
+                    v-bind:desc="project.description"
+                    v-bind:url="project.url"
+                    v-bind:image_url="project.image"
+                    v-bind:permalink="project.permalink"
+                    v-bind:color="project.color"
+                />
+            </full-page>
         </div>
     </div>
 </template>