Update web designing

src/App.vue

@@ -13,19 +13,6 @@
   text-align: center;
   color: #2c3e50;
 }
-
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
-}
 </style>
 <script>
 import Navigation from '@/components/Navigation.vue'

src/components/HomePageElement.vue

@@ -1,27 +1,23 @@
 <template>
   <div class="hello">
-    <h1>{{ msg }}</h1>
+    <h1>{{ $route.meta.title }}</h1>
     <p>Witam na mojej stronie głównej. Wszystkich zainteresowanych oczywiście 😁</p>
   </div>
 </template>
 
-<script>
-
-</script>
-
 <style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
+  h3 {
+    margin: 40px 0 0;
+  }
+  ul {
+    list-style-type: none;
+    padding: 0;
+  }
+  li {
+    display: inline-block;
+    margin: 0 10px;
+  }
+  a {
+    color: #42b983;
+  }
 </style>

src/components/Navigation.vue

@@ -1,6 +1,23 @@
 <template>
   <div id="nav">
-    <router-link to="/">Strona główna</router-link> |
+    <router-link to="/">Strona główna</router-link>
+    <router-link to="/projects">Projekty</router-link>
     <router-link to="/about">O mnie</router-link>
   </div>
 </template>
+
+<style lang="scss">
+#nav {
+  padding: 30px;
+
+  a {
+    padding: 0 5px;
+    font-weight: bold;
+    color: #2c3e50;
+
+    &.router-link-exact-active {
+       color: #42b983;
+    }
+  }
+}
+</style>

src/router/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../views/Home.vue'
 import About from '../views/About.vue'
+import Projects from '../views/Projects.vue'
 import NotFound from '../views/NotFound'
 
 Vue.use(VueRouter)
@@ -10,14 +11,25 @@ const routes = [
   {
     path: '/',
     name: 'Home',
+    meta: {
+      title: 'Witam serdecznie 😊'
+    },
     component: Home
   },
+  {
+    path: '/projects',
+    name: 'Projects',
+    meta: {
+      title: 'Moje projekty'
+    },
+    component: Projects
+  },
   {
     path: '/about',
     name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
+    meta: {
+      title: 'O mnie'
+    },
     component: About
   },
   {
@@ -33,4 +45,10 @@ const router = new VueRouter({
   routes
 })
 
+const title = 'KamilCraft.com'
+router.beforeEach((to, form, next) => {
+  document.title = to.meta.title || title
+  next()
+})
+
 export default router

src/views/About.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="about">
-    <h1>O mnie</h1>
+    <h1>{{ $route.meta.title }}</h1>
     <p>Nazywam się Kamil Niemczycki, jestem studentem kierunku Informatyka o specjalności Programowanie Aplikacji Mobilnych i Internetowych.</p>
     <p>Swoją przygodę w internecie rozpocząłem od nagrywania poradników, które umieszczałem na moim starym kanale youtube Moje Poradniki (wcześniej Niemczycki12). Z czasem zacząłem odczuwać potrzebę wypowiedzenia się, co spowodowało, że utworzyłem drugi kanał NiKCamii (wcześniej KamilNiemczycki), który był miejscem gdzie dodawałem Vlogi.</p>
     <p>Aktualnie zajmuję się projektowaniem i programowaniem aplikacji web w postaci stron www, wykorzystując od strony backend'u język skryptowy PHP. Znam także język znaczników - HTML 5, jego kompana - CSS, jak i podstawy JavaScript(), które są wykorzystwyane w frontend'dzie.</p>

src/views/Home.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="home">
     <img alt="KamilCraft.com logo" src="https://kamilcraft.com/assets/img/logo.png">
-    <HelloWorld msg="Witam serdecznie 🤗"/>
+    <HelloWorld/>
   </div>
 </template>
 

src/views/Projects.vue

@@ -0,0 +1,6 @@
+<template>
+  <div class="projects">
+    <h1>{{ $route.meta.title }}</h1>
+    <p>Ta podstrona jak zwykle nie ma listy projektów 😅</p>
+  </div>
+</template>