dynamic ages + minor fix to logo circle

Author: matteo

src/App.vue

@@ -1,35 +1,42 @@
 <template>
   <div id="app">
     <span id="logo" class="logo">MM</span>
-    <MainMenu/>
-    <HamburgerMenu/>
+    <MainMenu />
+    <HamburgerMenu />
     <full-page :options="options" id="fullpage" ref="fullpage">
       <div class="section" id="section1">
-        <HomePage/>
+        <HomePage />
       </div>
       <div class="section" id="section2">
         <div class="slide" data-anchor="/me">
-          <MainTitle msg="About me"/>
+          <MainTitle msg="About me" />
           <div>
-            <p>👦🏻 Front-end developer junior with a strong passion for everything related to the technological world</p>
-            <p>😳 I am curious guy and I never get tired to think of new things to create!</p>
-            <p>🎓 I graduated in Digital Communication at the University of Milan</p>
+            <p>
+              👦🏻 Front-end developer with a strong passion for everything
+              related to the technological world
+            </p>
+            <p>
+              😳 I am curious guy and I never get tired to think of new things
+              to create!
+            </p>
+            <p>
+              🎓 I graduated in Digital Communication at the University of Milan
+            </p>
             <p>📸 Photography is my biggest hobby</p>
           </div>
         </div>
         <div class="slide" data-anchor="skills" id="skills">
-          <SkillsSection/>
+          <SkillsSection />
         </div>
         <div class="slide" data-anchor="weather-app">
-          <!-- <h3>🚧 Under costruction! 😥</h3>-->
-          <WeatherApp/>
+          <WeatherApp />
         </div>
       </div>
       <div class="section" id="section3">
-        <Contacts/>
+        <Contacts />
       </div>
       <div class="section fp-auto-height" id="section4">
-        <Footer/>
+        <Footer />
       </div>
     </full-page>
   </div>
@@ -63,8 +70,8 @@ export default {
         slideSelector: ".slide",
         loopHorizontal: true,
         slidesNavigation: true,
-        controlArrows: false,
-        slidesNavPosition: "bottom"
+        controlArrows: true,
+        slidesNavPosition: "bottom",
         /* sectionsColor: [
           "#FFFFFF",
           "#FFFFFF",
@@ -76,20 +83,32 @@ export default {
           "#ba5be9",
           "#b4b8ab"
         ] */
-      }
+      },
     };
   },
   components: {
-    HelloWorld,
     HomePage,
     MainTitle,
     MainMenu,
     HamburgerMenu,
     SkillsSection,
     Footer,
     Contacts,
-    WeatherApp
-  }
+    WeatherApp,
+  },
+  mounted() {
+    this.addArrowIcon();
+  },
+  methods: {
+    addArrowIcon() {
+      const arrows = ["prev", "next"];
+      arrows.forEach((arrow) => {
+        /* const img = document.createElement("img");
+        img.src = "img/".concat(arrow).concat(".png");
+        document.querySelector(".fp-" + arrow).appendChild(img); */
+      });
+    },
+  },
 };
 </script>
 
@@ -136,8 +155,14 @@ export default {
   -webkit-font-smoothing: antialiased;
   -moz-font-smoothing: antialiased;
   text-decoration: none;
-  padding: 10px 9px;
   border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  display: flex;
+  place-items: center;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
 }
 
 .img__border--shadow {
@@ -181,4 +206,27 @@ export default {
 #section4 {
   background: var(--footer-bg);
 }
+
+.fp-controlArrow.fp-next img,
+.fp-controlArrow.fp-prev img {
+  height: 100%;
+  display: block;
+}
+
+.fp-controlArrow.fp-prev {
+  left: 0;
+  border: none;
+  width: 50px;
+  height: 101px;
+  /* background: url("./assets/prev.svg") no-repeat; */
+  cursor: pointer;
+}
+.fp-controlArrow.fp-next {
+  right: 0;
+  border: none;
+  width: 50px;
+  height: 101px;
+  /* background: url("./assets/next.png") no-repeat; */
+  cursor: pointer;
+}
 </style>

src/components/HomePage.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="row">
     <div class="col-sm-4">
-      <img :src="require('../assets/me.png')" alt class="myPictures img__rounded" />
+      <img
+        :src="require('../assets/me.png')"
+        alt
+        class="myPicture img__rounded"
+      />
     </div>
 
     <div class="col-sm-8 mt-5">
@@ -10,7 +14,7 @@
         I'm Matteo Mazziotti
         <br />I'm a creative Front-end Developer
       </p>
-      <b-badge class="p-2 m-1" variant="dark">27 years old</b-badge>
+      <b-badge class="p-2 m-1" variant="dark">{{ `${age} years old` }}</b-badge>
       <b-badge class="p-2 m-1" variant="warning">Milan</b-badge>
       <b-badge class="p-2 m-1" variant="danger">Front-end Dev</b-badge>
     </div>
@@ -19,16 +23,25 @@
 
 <script>
 import MainTitle from "./MainTitle.vue";
+import moment from "moment";
 
 export default {
+  data() {
+    return {
+      age: Math.floor(
+        moment().diff(moment("20011993", "DDMMYYYY")) /
+          (365 * 60 * 60 * 24 * 1000)
+      ),
+    };
+  },
   components: {
-    MainTitle
-  }
+    MainTitle,
+  },
 };
 </script>
 
 <style>
-.myPictures {
+.myPicture {
   width: 100%;
   margin-left: 5em;
 }
@@ -37,7 +50,7 @@ export default {
 }
 
 @media only screen and (max-width: 575px) {
-  .myPictures {
+  .myPicture {
     width: 50%;
     margin: 0;
   }