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>