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

@@ -10,13 +10,15 @@ Vue.config.productionTip = false;
 Vue.use(VueFullPage);
 
 new Vue({
-    el: "#app",
+    el: "#fullpage-home",
     name: "app",
     data: function(){
         return {
             options: {
                 afterLoad: this.afterLoad,
                 navigation: true,
+                scrollBar: false,
+                controlArrows: true,
                 anchors: ['page1', 'page2', 'page3'],
             },
         }
@@ -26,7 +28,10 @@ new Vue({
             console.log("After load....");
             console.log(destination);
         }
-    },
+    }
+});
+
+new Vue({
     router,
     store,
     render: h => h(App)

frontend/src/main.js

@@ -11,7 +11,7 @@
             class="px-16 sm:px-88 pb-28 sm:pb-0 flex flex-col justify-center items-center"
             id="projects"
         >
-            <full-page :options="options" id="fullpage" ref="fullpage">
+            <full-page ref="fullpage" :options="options" id="fullpage-home">
                 <Project
                     class="fullpage section"
                     v-for="(project, permalink, index) in projects"

frontend/src/views/Home.vue

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