Updated project

Added animations

src/components/BaseButton.vue

@@ -1,6 +1,6 @@
 <template>
   <button class="btn" :class="{ reverse: isReverse }">
-    <font-awesome-icon class="icon" if="hasIcon" :icon="icon"/>
+    <font-awesome-icon class="icon" v-if="hasIcon" :icon="icon"/>
     <span><slot></slot></span>
   </button>
 </template>

src/components/GhostButton.vue

@@ -0,0 +1,60 @@
+<template>
+  <button class="btn">
+    <font-awesome-icon class="icon" v-if="hasIcon" :icon="icon"/>
+    <span><slot></slot></span>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'GhostButton',
+  props: {
+    hasIcon: {
+      type: Boolean,
+      default: false
+    },
+    icon: String
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$btn-gray-color: #4f4f4f;
+
+.btn {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 10px;
+  background-color: transparent;
+  color: $btn-gray-color;
+  font-size: 1.2em;
+  border: unset;
+
+  .icon {
+    margin-right: 10px;
+    font-size: 1.3em;
+  }
+
+  &:hover {
+    &::after {
+      width: 98%;
+    }
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: 0 auto;
+    width: 30%;
+    height: 2px;
+    background-color: $btn-gray-color;
+    transform: translateY(2px);
+    transition: width .3s linear;
+  }
+}
+</style>

src/components/SelectedProjects.vue

@@ -43,6 +43,7 @@
       background-color: #fafafa;
       border: 1px solid rgba(0, 0, 0, .025);
       border-radius: 5px;
+      animation: load-project 2s forwards;
 
       .project-image {
         grid-area: image;
@@ -86,7 +87,7 @@
       }
     }
 
-    @media screen and (min-width: 901px) {
+    @media screen and (min-width: 900px) {
       .project {
         .more-button {
           display: flex;
@@ -151,7 +152,18 @@
   }
 }
 
-@media screen and (max-width: 500px) {
+@keyframes load-project {
+  from {
+    transform: translateY(20px);
+    opacity: .1;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@media screen and (max-width: 600px) {
   .projects .container {
     grid-template-columns: 1fr;
     padding: 25px;

src/components/sections/FavoriteProjects.vue

@@ -6,11 +6,17 @@
         <p>Poniżej przedstawiam Państwu, wybraną przeze mnie, listę projektów.</p>
       </div>
     </projects>
+    <div class="more-button">
+      <GhostButton @click.native="$router.push('projects')">
+        RESZTA PROJEKTÓW
+      </GhostButton>
+    </div>
   </section>
 </template>
 
 <script>
 import Projects from '../SelectedProjects'
+import GhostButton from '../GhostButton'
 
 export default {
   name: 'FavoriteProjects',
@@ -73,16 +79,33 @@ export default {
     ]
   },
   components: {
+    GhostButton,
     Projects
   }
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import "scss/default";
 
 .selected-projects {
   background-color: #fdfdfd !important;
+
+  .more-button {
+    margin-bottom: 45px;
+
+    .btn {
+      margin: 0 auto;
+
+      @media screen and (max-width: 600px) {
+        width: 100%;
+      }
+    }
+
+    @media screen and (max-width: 600px) {
+      padding: 0 25px;
+    }
+  }
 }
 .header-container {
   @extend .container;