Updated about me

src/components/BaseButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <button class="btn" :class="isReverse ? 'reverse' : ''">
+  <button class="btn" :class="{ reverse: isReverse }">
     <font-awesome-icon class="icon" if="hasIcon" :icon="icon"/>
     <span><slot></slot></span>
   </button>
@@ -17,26 +17,40 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$btn-color: black;
+$btn-blue-color: #436DA7;
+$btn-gray-color: #4f4f4f;
 $hover-btn-color: white;
 
 .btn {
   display: flex;
+  min-width: 270px;
   align-items: center;
+  justify-content: center;
   padding: 8px 10px;
-  border: 1px solid #{$btn-color};
+  border: 3px solid $btn-gray-color;
   background-color: transparent;
-  color: $btn-color;
+  color: $btn-gray-color;
-  border-radius: 0;
+  border-radius: 3px;
+  font-size: 1.05em;
 
   .icon {
-    margin-right: 5px;
+    margin-right: 10px;
-    font-size: 1.5em;
+    font-size: 1.3em;
   }
 
   &:hover {
-    background-color: $btn-color;
+    background-color: $btn-gray-color;
     color: $hover-btn-color;
   }
 }
+.reverse {
+  background-color: $btn-blue-color;
+  border-color: $btn-blue-color;
+  color: $hover-btn-color;
+
+  &:hover {
+    background-color: transparent;
+    color: $btn-blue-color;
+  }
+}
 </style>

src/components/sections/About.vue

@@ -7,12 +7,13 @@
           <div class="tagline">Web Developer</div>
           <p>I'm a software engineer specialised in frontend and backend development for complex scalable web apps. I write about software development on my blog. Want to know how I may help your project? Check out my project portfolio and online resume.</p>
           <div class="buttons">
-            <base-btn has-icon icon="portrait">Wyświetl portfolio</base-btn>
+            <base-btn has-icon icon="portrait" is-reverse>Wyświetl portfolio</base-btn>
+            <base-btn has-icon icon="user">Więcej o mnie</base-btn>
           </div>
         </div>
         <div id="grid-photo">
           <figure id="about-photo">
-            <img :src="`${publicPath}assets/me.png`" />
+            <img :src="`${publicPath}assets/me.jpg`" />
           </figure>
         </div>
       </div>
@@ -38,12 +39,58 @@ div.about {
      grid-template-areas:
        'text text photo';
      align-items: center;
+
      #grid-text {
        grid-area: text;
        text-align: left;
+
+       .buttons {
+         display: flex;
+         justify-content: flex-start;
+         padding: 10px 0;
+
+         .btn {
+           margin-right: 20px;
+           &:last-child {
+             margin-right: 0;
+           }
+         }
+       }
+
+       @media screen and (max-width: 900px) {
+         .buttons {
+           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: 400px) {
+         .buttons .btn {
+           min-width: unset;
+           width: 100%;
+         }
+       }
      }
      #grid-photo {
        grid-area: photo;
+
+       #about-photo img {
+         border-radius: 50%;
+       }
      }
      figure {
        text-align: center;