Updated content and style

src/components/sections/About.vue

@@ -10,7 +10,7 @@
             <base-btn has-icon
                       icon="portrait"
                       is-reverse
-                      @click.native="$router.push('projects')">Wybrane projekty</base-btn>
+                      @click.native="scrollTo('.selected-projects')">Wybrane projekty</base-btn>
             <base-btn has-icon
                       icon="user"
                       @click.native="$router.push('about')">Więcej o mnie</base-btn>
@@ -128,6 +128,13 @@ export default {
       publicPath: process.env.BASE_URL
     }
   },
+  methods: {
+    scrollTo (id) {
+      document.querySelector(id).scrollIntoView({
+        behavior: 'smooth'
+      })
+    }
+  },
   components: {
     'base-btn': BaseButton
   }

src/components/sections/Experiences.vue

@@ -2,7 +2,11 @@
   <div class="experiences">
     <div class="container">
       <h2>Wykorzystywane technologie</h2>
-      <p>I have more than 10 years' experience building software for clients all over the world. Below is a quick overview of my main technical skill sets and technologies I use. Want to find out more about my experience? Check out my online resume and project portfolio.</p>
+      <p>
+        Programowaniem stron internetowych zajmuję się najmłodszych lat, czyli od 2011 roku. Pierwsze projekty były
+        proste i najczęściej na użytek własny. Jednakże, doświadczenie zebrane przez lata pomogło mi wyselekcjonować
+        technologie, które wspomagają pisanie i rozwijanie oprogramowania.
+      </p>
       <div class="skills">
         <div class="skill-group">
           <header class="skill-header">
@@ -10,30 +14,30 @@
               <font-awesome-icon class="icon-php" :icon="['fab', 'php']" title="Ikona PHP" />
               <font-awesome-icon class="icon-laravel" :icon="['fab', 'laravel']" title="Ikona Laravel" />
             </div>
-            <h3>PHP & Laravel</h3>
+            <h3>{{ php.header }}</h3>
           </header>
-          <ul class="skill-list">
+          <p v-if="php.showMore || php.description.length < 255">{{ php.description }}</p>
-            <li>One</li>
+          <p v-else>{{ php.description.substr(0, 255) }}... <a @click="() => { php.showMore = true }">Więcej</a></p>
-            <li>Two</li>
-          </ul>
         </div>
         <div class="skill-group">
           <header class="skill-header">
             <div class="tech-icons">
               <font-awesome-icon class="icon-js" :icon="['fab', 'js-square']" />
             </div>
-            <h3>JavaScript Vanilla</h3>
+            <h3>{{ javascript.header }}</h3>
           </header>
-          <p>I have more than 10 years' experience building software for clients all over the world. Below is a quick overview of my main technical skill sets and technologies I use. Want to find out more about my experience? Check out my online resume and project portfolio.</p>
+          <p v-if="javascript.showMore || javascript.description.length < 255">{{ javascript.description }}</p>
+          <p v-else>{{ javascript.description.substr(0, 255) }}... <a @click="() => { javascript.showMore = true }">Więcej</a></p>
         </div>
         <div class="skill-group">
           <header class="skill-header">
             <div class="tech-icons">
               <font-awesome-icon class="icon-vue" :icon="['fab', 'vuejs']" />
             </div>
-            <h3>Vue</h3>
+            <h3>{{ vue.header }}</h3>
           </header>
-          <p>I have more than 10 years' experience building software for clients all over the world. Below is a quick overview of my main technical skill sets and technologies I use. Want to find out more about my experience? Check out my online resume and project portfolio.</p>
+          <p v-if="vue.showMore || vue.description.length < 255">{{ vue.description }}</p>
+          <p v-else>{{ vue.description.substr(0, 255) }}... <a @click="() => { vue.showMore = true }">Więcej</a></p>
         </div>
         <div class="skill-group">
           <header class="skill-header">
@@ -70,7 +74,32 @@
 
 <script>
 export default {
-  name: 'Experiences'
+  name: 'Experiences',
+  data () {
+    return {
+      php: {
+        header: 'PHP & Laravel',
+        showMore: false,
+        description: `PHP wraz z frameworkiem Laravel wykorzystuję do tworzenia nowych projektów. Laravel znacznie
+        przyspiesza pisanie części backendowej, odciążając programistę od pisania skomplikownych filtrów i monotonnych
+        walidacji przyjmowanych danych od użytkowników. Jednakże, choć dobrze pracuje mi się w środowisku Laravel w
+        miarę możliwości staram się pisać kod w samym PHP z wykorzystaniem bibliotek i paczek autorskich.`
+      },
+      javascript: {
+        header: 'JavaScript Vanilla',
+        showMore: false,
+        description: `JavaScript wykorzystuję głównie do logiki frontendowej jak i pisania kodu wykonywalnego po stronie
+        przeglądarki internetowej. Wykorzystując możliwości reaktywnych frameworków mogę przyspieszyć pisanie UI.`
+      },
+      vue: {
+        header: 'Vue',
+        showMore: false,
+        description: `Framework ten wspomaga mnie w pisaniu aplikacji frontendowej. Przyspiesza tworzenie warstwy
+        wizualnej, obsługę interakcji z użytkownikiem i bindowanie zdefiniowanych pól, które są odpowiednio renderowane
+        przez przeglądarkę. To wszystko, umożliwia łatwe łączenie CSS i HTML z logiką i otrzymanymi danymi z API.`
+      }
+    }
+  }
 }
 </script>
 
@@ -117,6 +146,11 @@ export default {
         }
         p {
           font-size: .9em;
+
+          a {
+            color: #8D8D8D;
+            cursor: pointer;
+          }
         }
         &:hover {
           background-color: rgba(0, 0, 0, .03);