Style design

src/components/Navigation.vue

@@ -1,17 +1,28 @@
 <template>
   <div id="nav">
-    <router-link to="/">Strona główna</router-link>
-    <router-link to="/projects">Projekty</router-link>
-    <router-link to="/about">O mnie</router-link>
+    <img alt="KamilCraft.com logo" :src="`${publicPath}assets/logo.png`">
+    <ul>
+      <li><router-link to="/">Strona główna</router-link></li>
+      <li><router-link to="/projects">Projekty</router-link></li>
+      <li><router-link to="/about">O mnie</router-link></li>
+    </ul>
   </div>
 </template>
 
 <style lang="scss">
 #nav {
-  padding: 30px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 
+  ul {
+    display: flex;
+    list-style: none;
+    li {
+      display: block;
+    }
+  }
   a {
-    padding: 0 5px;
     font-weight: bold;
     color: #2c3e50;
 
@@ -21,3 +32,12 @@
   }
 }
 </style>
+<script>
+export default {
+  data () {
+    return {
+      publicPath: process.env.BASE_URL
+    }
+  }
+}
+</script>

src/components/sections/About.vue

@@ -0,0 +1,51 @@
+<template>
+  <section id="about">
+    <h1>O mnie:</h1>
+    <div id="grid">
+      <div id="grid-text">
+        <p>Siemandero tutaj Kamil Niemczycki</p>
+        <p>Lubię programować itp.</p>
+      </div>
+      <div id="grid-photo">
+        <figure>
+          <img :src="`${publicPath}assets/me.png`" />
+        </figure>
+      </div>
+    </div>
+  </section>
+</template>
+<style lang="scss">
+#about {
+  max-width: 1000px;
+  margin: 0 auto;
+}
+#grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-areas:
+    'text text photo';
+  align-items: center;
+  #grid-text {
+    grid-area: text;
+  }
+  #grid-photo {
+    grid-area: photo;
+  }
+  figure {
+    img {
+      object-fit: cover;
+      width: 100%;
+      height: auto;
+    }
+  }
+}
+</style>
+<script>
+export default {
+  data () {
+    return {
+      publicPath: process.env.BASE_URL
+    }
+  }
+}
+</script>

src/router/index.js

@@ -7,12 +7,14 @@ import NotFound from '../views/NotFound'
 
 Vue.use(VueRouter)
 
+const mainTitle = ' :: kamilcraft.com'
+
 const routes = [
   {
     path: '/',
     name: 'Home',
     meta: {
-      title: 'Witam serdecznie 😊'
+      title: 'Witam serdecznie 😊' + mainTitle
     },
     component: Home
   },
@@ -20,7 +22,7 @@ const routes = [
     path: '/projects',
     name: 'Projects',
     meta: {
-      title: 'Moje projekty'
+      title: 'Moje projekty' + mainTitle
     },
     component: Projects
   },
@@ -28,7 +30,7 @@ const routes = [
     path: '/about',
     name: 'About',
     meta: {
-      title: 'O mnie'
+      title: 'O mnie' + mainTitle
     },
     component: About
   },

src/views/Home.vue

@@ -1,22 +1,19 @@
 <template>
   <div class="home">
-    <img alt="KamilCraft.com logo" :src="`${publicPath}assets/logo.png`">
     <HelloWorld/>
+    <About/>
   </div>
 </template>
 
 <script>
 import HelloWorld from '@/components/HomePageElement.vue'
+import About from '@/components/sections/About.vue'
 
 export default {
   name: 'Home',
-  data () {
-    return {
-      publicPath: process.env.BASE_URL
-    }
-  },
   components: {
-    HelloWorld
+    HelloWorld,
+    About
   }
 }
 </script>