From fb13c57c511ece238032395c8448fae4ff13f1a8 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <kamilniemczycki@gmail.com>
Date: Wed, 7 Apr 2021 18:35:46 +0200
Subject: [PATCH] Update web designing

---
 public/index.html                  |  2 +-
 src/App.vue                        | 13 ------------
 src/components/HomePageElement.vue | 34 +++++++++++++-----------------
 src/components/Navigation.vue      | 19 ++++++++++++++++-
 src/router/index.js                | 24 ++++++++++++++++++---
 src/views/About.vue                |  2 +-
 src/views/Home.vue                 |  2 +-
 src/views/Projects.vue             |  6 ++++++
 vue.config.js                      |  5 +++++
 9 files changed, 68 insertions(+), 39 deletions(-)
 create mode 100644 src/views/Projects.vue
 create mode 100644 vue.config.js
diff --git a/public/index.html b/public/index.html
index 3e5a139..9f0719a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>KamilCraft.com</title>
   </head>
   <body>
     <noscript>
diff --git a/src/App.vue b/src/App.vue
index 967ea70..93dec8d 100644
--- a/src/App.vue
+++ b/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'
diff --git a/src/components/HomePageElement.vue b/src/components/HomePageElement.vue
index 87f9dd7..c2b7726 100644
--- a/src/components/HomePageElement.vue
+++ b/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>
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index 50bd848..9d3c109 100644
--- a/src/components/Navigation.vue
+++ b/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>
diff --git a/src/router/index.js b/src/router/index.js
index 45796dc..b7f4378 100644
--- a/src/router/index.js
+++ b/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
diff --git a/src/views/About.vue b/src/views/About.vue
index e70eb46..3a66ce5 100644
--- a/src/views/About.vue
+++ b/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>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index db5a082..a71569d 100644
--- a/src/views/Home.vue
+++ b/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>
 
diff --git a/src/views/Projects.vue b/src/views/Projects.vue
new file mode 100644
index 0000000..36920b7
--- /dev/null
+++ b/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>
diff --git a/vue.config.js b/vue.config.js
new file mode 100644
index 0000000..37254e0
--- /dev/null
+++ b/vue.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  publicPath: process.env.NODE_ENV === 'production'
+    ? '/vue/'
+    : '/'
+}
