fullPage scroll feature for HomePafe

Author: aryaman-titan

frontend/src/components/Gallery.vue

@@ -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/SisterGroups.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/about/GalleryMobile.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/SisterGallery.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/main.js

@@ -2,12 +2,31 @@ 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: "#app",
+    name: "app",
+    data: function(){
+        return {
+            options: {
+                afterLoad: this.afterLoad,
+                navigation: true,
+                anchors: ['page1', 'page2', 'page3'],
+            },
+        }
+    },
+    methods: {
+        afterLoad: function(origin, destination, direction){
+            console.log("After load....");
+            console.log(destination);
+        }
+    },
     router,
     store,
     render: h => h(App)

frontend/src/views/Home.vue

@@ -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 :options="options" id="fullpage" ref="fullpage">
+                <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>

settings/dev/settings.py

@@ -11,7 +11,7 @@
         'NAME': 'portfolio',
         'USER': 'portfolio',
         'PASSWORD': 'portfolio',
-        'HOST': 'db',
+        'HOST': 'localhost',
         'PORT': '5432',
     }
 }