Update code

Updated sourcecode and added meta tags

package-lock.json

@@ -18,6 +18,7 @@
         "jquery": "^3.6.0",
         "popper.js": "^1.16.1",
         "vue": "^2.6.14",
+        "vue-meta": "^2.4.0",
         "vue-router": "^3.5.2",
         "vuex": "^3.6.2"
       },
@@ -16641,6 +16642,22 @@
       "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
       "dev": true
     },
+    "node_modules/vue-meta": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/vue-meta/-/vue-meta-2.4.0.tgz",
+      "integrity": "sha512-XEeZUmlVeODclAjCNpWDnjgw+t3WA6gdzs6ENoIAgwO1J1d5p1tezDhtteLUFwcaQaTtayRrsx7GL6oXp/m2Jw==",
+      "dependencies": {
+        "deepmerge": "^4.2.2"
+      }
+    },
+    "node_modules/vue-meta/node_modules/deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.2.tgz",
@@ -31177,6 +31194,21 @@
         }
       }
     },
+    "vue-meta": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/vue-meta/-/vue-meta-2.4.0.tgz",
+      "integrity": "sha512-XEeZUmlVeODclAjCNpWDnjgw+t3WA6gdzs6ENoIAgwO1J1d5p1tezDhtteLUFwcaQaTtayRrsx7GL6oXp/m2Jw==",
+      "requires": {
+        "deepmerge": "^4.2.2"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "4.2.2",
+          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+          "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
+        }
+      }
+    },
     "vue-router": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.2.tgz",

package.json

@@ -18,6 +18,7 @@
     "jquery": "^3.6.0",
     "popper.js": "^1.16.1",
     "vue": "^2.6.14",
+    "vue-meta": "^2.4.0",
     "vue-router": "^3.5.2",
     "vuex": "^3.6.2"
   },

public/api/projects.json

@@ -1,48 +0,0 @@
-[
-  {
-    "id": 1,
-    "title": "Test 1",
-    "category": "prywatne",
-    "author": "Kamil Niemczycki",
-    "image": "assets/img/projects/kamilcraft.jpg",
-    "release_data": "30 sierpnia 2021",
-    "version": "v1.0.0",
-    "short_description": "abcdefghijklmnoprestuwxyz"
-  },
-  {
-    "id": 2,
-    "title": "Test 1",
-    "category": "wordpress",
-    "image": "assets/me.jpg",
-    "release_data": "30 sierpnia 2021",
-    "version": "v1.0.0",
-    "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit,\nsed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\nUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\nDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-  },
-  {
-    "id": 3,
-    "title": "Test 1",
-    "category": "prywatne",
-    "image": "assets/me.jpg",
-    "release_data": "30 sierpnia 2021",
-    "version": "v1.0.0",
-    "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit,\nsed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\nUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\nDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-  },
-  {
-    "id": 4,
-    "title": "Test 1",
-    "category": "zlecenia",
-    "image": "assets/me.jpg",
-    "release_data": "30 sierpnia 2021",
-    "version": "v1.0.0",
-    "short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit,\nsed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\nUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\nDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\nExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-  },
-  {
-    "id": 5,
-    "title": "Test 1",
-    "category": "zlecenia",
-    "image": "assets/me.jpg",
-    "release_data": "30 sierpnia 2021",
-    "version": "v1.0.0",
-    "short_description": "abcdefghijklmnoprestuwxyz"
-  }
-]

src/components/sections/Experiences.vue

@@ -8,64 +8,19 @@
         technologie, które wspomagają pisanie i rozwijanie oprogramowania.
       </p>
       <div class="skills">
-        <div class="skill-group">
+        <div v-for="(skill, key) in list" :key="key" class="skill-group">
           <header class="skill-header">
             <div class="tech-icons">
-              <font-awesome-icon class="icon-php" :icon="['fab', 'php']" title="Ikona PHP" />
+              <font-awesome-icon
-              <font-awesome-icon class="icon-laravel" :icon="['fab', 'laravel']" title="Ikona Laravel" />
+                v-for="(icon, keyIcon) in skill.icons"
+                :key="keyIcon" :class="icon.class"
+                :icon="['fab', icon.name]"
+                :title="icon.title" />
             </div>
-            <h3>{{ php.header }}</h3>
+            <h3>{{ skill.header }}</h3>
           </header>
-          <p v-if="php.showMore || php.description.length < 255">{{ php.description }}</p>
+          <p v-if="skill.showMore || skill.description.length < 200">{{ skill.description }}</p>
-          <p v-else>{{ php.description.substr(0, 255) }}... <a @click="() => { php.showMore = true }">Więcej</a></p>
+          <p v-else>{{ parseText(skill.description) }}... <a @click="changeMoreStatus(skill)">Więcej</a></p>
-        </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.header }}</h3>
-          </header>
-          <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.header }}</h3>
-          </header>
-          <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">
-            <div class="tech-icons">
-              <font-awesome-icon class="icon-html5" :icon="['fab', 'html5']" />
-              <font-awesome-icon class="icon-css3" :icon="['fab', 'css3-alt']" />
-            </div>
-            <h3>HTML & CSS</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>
-        </div>
-        <div class="skill-group">
-          <header class="skill-header">
-            <div class="tech-icons">
-              <font-awesome-icon class="icon-node" :icon="['fab', 'node']" />
-            </div>
-            <h3>Node.js</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>
-        </div>
-        <div class="skill-group">
-          <header class="skill-header">
-            <div class="tech-icons">
-              <font-awesome-icon class="icon-sass" :icon="['fab', 'sass']" />
-            </div>
-            <h3>Sass</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>
         </div>
       </div>
     </div>
@@ -77,27 +32,117 @@ export default {
   name: 'Experiences',
   data () {
     return {
-      php: {
+      list: []
+    }
+  },
+  mounted () {
+    this.list = [
+      {
+        icons: [
+          {
+            class: 'icon-php',
+            name: 'php',
+            title: 'Ikona PHP'
+          },
+          {
+            class: 'icon-laravel',
+            name: 'laravel',
+            title: 'Ikona Laravel'
+          }
+        ],
         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
+        walidacji przyjmowanych danych od użytkowników. Jednakże, choć dobrze pracuje mi się w środowisku Laravel
-        miarę możliwości staram się pisać kod w samym PHP z wykorzystaniem bibliotek i paczek autorskich.`
+        w miarę możliwości staram się pisać kod w samym PHP z wykorzystaniem bibliotek i paczek autorskich.`
       },
-      javascript: {
+      {
+        icons: [
+          {
+            class: 'icon-js',
+            name: 'js-square',
+            title: 'Ikona 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: {
+      {
+        icons: [
+          {
+            class: 'icon-vue',
+            name: 'vuejs',
+            title: 'Ikona 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.`
+      },
+      {
+        icons: [
+          {
+            class: 'icon-html5',
+            name: 'html5',
+            title: 'Ikona HTML5'
+          },
+          {
+            class: 'icon-css3',
+            name: 'css3-alt',
+            title: 'Ikona CSS3'
+          }
+        ],
+        header: 'HTML & CSS',
+        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.`
+      },
+      {
+        icons: [
+          {
+            class: 'icon-node',
+            name: 'node',
+            title: 'Ikona Node.js'
+          }
+        ],
+        header: 'Node.js',
+        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.`
+      },
+      {
+        icons: [
+          {
+            class: 'icon-sass',
+            name: 'sass',
+            title: 'Ikona Sass'
+          }
+        ],
+        header: 'Sass',
+        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.`
       }
+    ]
+  },
+  methods: {
+    parseText (text) {
+      let shortText = text.substr(0, 200)
+      if (shortText.slice(-1) === ' ') {
+        shortText = text.substr(0, 199)
+      }
+      return shortText
+    },
+    changeMoreStatus (skill) {
+      skill.showMore = !skill.showMore
     }
   }
 }
@@ -125,7 +170,7 @@ export default {
           font-size: 1.8em;
           margin-bottom: 3px;
 
-          & > *[class|=icon] {
+          & > svg[class*='icon'] {
             margin-right: 10px;
 
             &:last-child {

src/main.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import './vue-meta'
 
 import '../scss/default.scss'
 import { library } from '@fortawesome/fontawesome-svg-core'

src/views/About.vue

@@ -2,8 +2,11 @@
   <section id="about">
     <div class="container">
       <h2>Studia</h2>
-      <p>Nazywam się Kamil Niemczycki, jestem absolwentem Państwowej Wyższej Szkoły Zawodowej im. Witelona w Legnicy.</p>
+      <p>
-      <p>Studiowałem na kierunku <i>Informatyka</i> o specjalności <i>Programowanie Aplikacji Mobilnych i Internetowych.</i></p>
+        Nazywam się Kamil Niemczycki, jestem absolwentem Państwowej Wyższej Szkoły Zawodowej im. Witelona w Legnicy.
+        Studiowałem na kierunku <em>Informatyka</em> o specjalności <em>Programowanie Aplikacji Mobilnych i
+        Internetowych.</em>
+      </p>
     </div>
   </section>
 </template>
@@ -18,6 +21,9 @@ section#about {
 <script>
 export default {
   name: 'About',
+  data () {
+    return {}
+  },
   mounted () {
     const header = {
       title: this.$route.meta.title,

src/views/Home.vue

@@ -6,10 +6,6 @@
   </section>
 </template>
 
-<style lang="scss">
-
-</style>
-
 <script>
 import About from '../components/sections/About'
 import Experiences from '../components/sections/Experiences'

src/vue-meta/index.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import VueMeta from 'vue-meta'
+
+Vue.use(VueMeta)