Update style & structure

src/components/HomePageElement.vue

@@ -6,8 +6,8 @@
 </template>
 
 <style scoped lang="scss">
-  h3 {
+  h1 {
-    margin: 40px 0 0;
+    margin: 30px 0 20px;
   }
   ul {
     list-style-type: none;

src/components/Navigation.vue

@@ -12,6 +12,8 @@
 <style lang="scss">
 #nav {
   display: flex;
+  max-width: 1000px;
+  margin: 0 auto;
   justify-content: space-between;
   align-items: center;
   padding: 5px 30px;
@@ -24,23 +26,35 @@
   #menu {
     display: flex;
     list-style: none;
+
     .menu-element {
       display: block;
       padding: 0 10px;
+
       &:hover {
         background: rgba(0, 0 , 0, .1);
       }
     }
-  }
+
     a {
       font-weight: bold;
       color: #2c3e50;
-    line-height: 50px;
 
       &.router-link-exact-active {
         color: #42b983;
       }
     }
+
+  }
+}
+@media (max-width: 600px) {
+  #nav {
+    justify-content: center;
+
+    #menu {
+      display: none;
+    }
+  }
 }
 </style>
 <script>

src/components/sections/About.vue

@@ -3,11 +3,11 @@
     <h1>O mnie:</h1>
     <div id="grid">
       <div id="grid-text">
-        <p>Siemandero tutaj Kamil Niemczycki</p>
+        <p>Nazywam się <strong>Kamil Niemczycki</strong>, jestem studentem kierunku <strong>Informatyka</strong> o specjalności Programowanie Aplikacji Mobilnych i Internetowych.</p>
-        <p>Lubię programować itp.</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>
       </div>
       <div id="grid-photo">
-        <figure>
+        <figure id="about-photo">
           <img :src="`${publicPath}assets/me.png`" />
         </figure>
       </div>
@@ -15,18 +15,29 @@
   </section>
 </template>
 <style lang="scss">
+h1 {
+  font-size: 1.6em;
+  margin: 30px 0 20px;
+}
 #about {
   max-width: 1000px;
   margin: 0 auto;
 }
 #grid {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr .8fr;
   grid-template-areas:
     'text text photo';
   align-items: center;
   #grid-text {
     grid-area: text;
+    text-align: left;
+
+    p {
+      font-size: 1.1em;
+      line-height: 1.4em;
+      padding-bottom: 10px;
+    }
   }
   #grid-photo {
     grid-area: photo;
@@ -39,6 +50,15 @@
     }
   }
 }
+
+@media (max-width: 900px) {
+  #grid {
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas:
+    'text text'
+    'photo photo';
+  }
+}
 </style>
 <script>
 export default {

src/views/Home.vue

@@ -1,18 +1,15 @@
 <template>
   <div class="home">
-    <HelloWorld/>
     <About/>
   </div>
 </template>
 
 <script>
-import HelloWorld from '@/components/HomePageElement.vue'
 import About from '@/components/sections/About.vue'
 
 export default {
   name: 'Home',
   components: {
-    HelloWorld,
     About
   }
 }