Updated styles

scss/default.scss

@@ -11,12 +11,27 @@ h2 {
 p {
   font-size: 1.1em;
   line-height: 1.4em;
-  padding-bottom: 10px;
+  &:not(&:last-of-type) {
+    padding-bottom: 10px;
+  }
 }
 .container {
   max-width: 1200px;
   margin: 0 auto;
 }
+.loading {
+  height: 300px;
+
+  .loading-animation {
+    margin: 20px auto;
+    width: 50px;
+    height: 50px;
+    border: 5px solid #f3f3f3;
+    border-top: 10px #A2CF00 solid;
+    border-radius: 50%;
+    animation: loading-animation 1s linear infinite;
+  }
+}
 @media screen and (max-width: 1200px) {
   .container {
     padding: 0 20px;

src/components/sections/About.vue

@@ -56,35 +56,33 @@
        .buttons {
          display: flex;
          justify-content: flex-start;
-         padding: 10px 0;
+         padding: 25px 0;
 
          .btn {
            margin-right: 20px;
-           &:last-of-type {
+
+           &:last-child {
              margin-right: 0;
            }
-         }
-       }
 
-       @media screen and (max-width: 900px) {
+           @media screen and (max-width: 600px) {
-         .buttons {
+             margin: 0 auto 15px;
-           justify-content: center;
-           margin-bottom: 25px;
-         }
-       }
 
-       @media screen and (max-width: 600px) {
-         .buttons {
-           display: block;
-           margin-bottom: 25px;
-
-           .btn {
-             margin: 0 auto 20px;
              &:last-child {
                margin: 0 auto;
              }
            }
          }
+
+         @media screen and (max-width: 900px) {
+           justify-content: center;
+           margin-bottom: 25px;
+         }
+
+         @media screen and (max-width: 600px) {
+           display: block;
+           margin-bottom: 25px;
+         }
        }
 
        @media screen and (max-width: 400px) {

src/views/Project.vue

@@ -32,6 +32,9 @@
       </div>
     </div>
   </section>
+  <div v-else class="loading">
+    <div class="loading-animation"></div>
+  </div>
 </template>
 
 <script>
@@ -78,6 +81,7 @@ export default {
 
 <style lang="scss" scoped>
 @import "scss/default";
+
 .project {
   .project-header {
     @extend .container;
@@ -129,21 +133,30 @@ export default {
     .project-photo {
       box-shadow: 5px 5px 10px rgba(0, 0, 0, .3);
     }
+
     .project-photo, .project-photo img {
       width: 100%;
     }
+
     .project-photo img {
       display: block;
       object-fit: cover;
       max-height: 500px;
     }
+
     .content {
-      margin: 25px 0;
+      margin: 35px 0;
-      font-weight: lighter;
+
-      font-size: .9em;
+      p {
-    }
+        text-align: justify;
-    p::first-line {
+        text-indent: 1.5em;
-      text-indent: 5px;
+        line-height: 1.8em;
+
+        @media screen and (max-width: 600px) {
+          font-size: 1em;
+          line-height: 1.5em;
+        }
+      }
     }
   }
 }

src/views/Projects.vue

@@ -26,6 +26,7 @@
     display: flex;
     justify-content: center;
     list-style: none;
+
     .category {
       position: relative;
       cursor: pointer;
@@ -37,9 +38,11 @@
           color: black;
         }
       }
+
       &:last-child {
         margin-right: 0;
       }
+
       &-active {
         &::after {
           content: '';
@@ -62,22 +65,12 @@
     }
   }
 }
+
 .projects {
   padding-top: 25px;
   padding-bottom: 25px;
 }
-.loading {
+
-  height: 300px;
-  .loading-animation {
-    margin: 20px auto;
-    width: 50px;
-    height: 50px;
-    border: 5px solid #f3f3f3;
-    border-top: 10px #A2CF00 solid;
-    border-radius: 50%;
-    animation: loading-animation 1s linear infinite;
-  }
-}
 @keyframes loading-animation {
   0% {
     transform: rotate(0);
@@ -86,6 +79,7 @@
     transform: rotate(360deg);
   }
 }
+
 @keyframes load-underline {
   from {
     width: 0;
@@ -115,22 +109,25 @@ export default {
       return this.$store.getters.getCategories
     }
   },
-  async mounted () {
+  mounted () {
-    await this.$store.dispatch('fetchCategories')
+    this.loadAllData()
-    await this.$store.dispatch('fetchProjects').then(projects => {
-      projects.sort((firstProduct, secondProduct) => {
-        return secondProduct.id - firstProduct.id
-      })
-      this.projects = projects
-    }).catch(error => {
-      console.log(error)
-    })
   },
   destroyed () {
     this.$store.commit('resetHeaderTitle')
     this.$store.commit('resetHeaderDescription')
   },
   methods: {
+    async loadAllData () {
+      await this.$store.dispatch('fetchCategories')
+      await this.$store.dispatch('fetchProjects').then(projects => {
+        projects.sort((firstProduct, secondProduct) => {
+          return secondProduct.id - firstProduct.id
+        })
+        this.projects = projects
+      }).catch(error => {
+        console.log(error)
+      })
+    },
     loadListWhereCategory (category) {
       this.projects = []
       setTimeout(() => {