Update style

package-lock.json

@@ -16,7 +16,8 @@
         "jquery": "^3.6.0",
         "popper.js": "^1.16.1",
         "vue": "^2.6.14",
-        "vue-router": "^3.5.2"
+        "vue-router": "^3.5.2",
+        "vuex": "^3.6.2"
       },
       "devDependencies": {
         "@vue/cli-plugin-babel": "~4.5.0",
@@ -16651,6 +16652,14 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "node_modules/vuex": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
+      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
+      "peerDependencies": {
+        "vue": "^2.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
@@ -31165,6 +31174,12 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuex": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
+      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
+      "requires": {}
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",

package.json

@@ -16,7 +16,8 @@
     "jquery": "^3.6.0",
     "popper.js": "^1.16.1",
     "vue": "^2.6.14",
-    "vue-router": "^3.5.2"
+    "vue-router": "^3.5.2",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <SiteHeader />
-    <router-view/>
+    <router-view />
   </div>
 </template>
 

src/components/Navigation.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container" :class="{'container-menu-active': clicked}">
+  <div class="container" :class="{'container-menu-active': clickedStatus}">
     <router-link to="/">
       <div class="logo" @click="linkClicked">Kamil<span class="logo-element">Craft</span></div>
     </router-link>
@@ -18,8 +18,13 @@
 </template>
 
 <style lang="scss" scoped>
+.sub-page > .container .nav-btn,
+.sub-page > .container .nav .site-menu .menu-element a:not([class|=router-link-exact]) {
+  color: #8D8D8D;
+}
 .container {
   display: flex;
+  height: 80px;
   align-items: center;
   justify-content: flex-start;
   padding: 0;
@@ -37,12 +42,10 @@
   }
 
   &-menu-active {
-    /* background-color: #EFEFEF; */
     color: #8D8D8D;
     animation: container-active-menu 500ms forwards ease-in-out;
 
     div.logo {
-      /* background-color: #F6F6F6; */
       animation: logo-active-menu 500ms forwards ease-in-out;
     }
     .nav {
@@ -57,6 +60,7 @@
 }
 .nav {
   margin-left: 20px;
+  z-index: 10;
   .nav-btn {
     display: none;
     margin: 10px 25px;
@@ -165,6 +169,11 @@ export default {
       publicPath: process.env.BASE_URL
     }
   },
+  computed: {
+    clickedStatus () {
+      return this.clicked
+    }
+  },
   methods: {
     changeClickedStatus () {
       this.clicked = !this.clicked

src/components/SiteHeader.vue

@@ -1,6 +1,12 @@
 <template>
-  <header class="page-header">
+  <header :class="thisClass">
     <navigation/>
+    <div v-if="isTitle" class="header-info" :class="{ 'header-info-home': isHome }">
+      <h1>{{ getTitle }}</h1>
+      <p v-if="isDescription && descriptionType === 'string'">{{ getDescription }}</p>
+      <p v-else-if="isDescription && descriptionType === 'array'"
+         v-for="(desc, key) in getDescription" :key="key">{{ desc }}</p>
+    </div>
   </header>
 </template>
 
@@ -9,6 +15,30 @@ import Navigation from '@/components/Navigation'
 
 export default {
   name: 'SiteHeader',
+  computed: {
+    isHome () {
+      return this.$route.path === '/'
+    },
+    thisClass () {
+      return [this.isHome ? 'home-page' : 'sub-page']
+    },
+    getTitle () {
+      return this.$store.getters.getHeader.title
+    },
+    isTitle () {
+      return this.getTitle !== null
+    },
+    getDescription () {
+      return this.$store.getters.getHeader.description
+    },
+    descriptionType () {
+      const isArray = this.getDescription instanceof Array
+      return isArray ? 'array' : typeof this.getDescription
+    },
+    isDescription () {
+      return this.getDescription !== null
+    }
+  },
   components: {
     navigation: Navigation
   }
@@ -16,7 +46,40 @@ export default {
 </script>
 
 <style lang="scss">
-.page-header {
+.home-page {
   background: linear-gradient(237.74deg, #1199A5 0%, #436DA7 83%);
 }
+.sub-page {
+  background-color: #EFEFEF;
+}
+.header-info {
+  text-align: center;
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 40px 10px;
+  h1 {
+    position: relative;
+    font-weight: lighter;
+    font-size: 2.5em;
+    line-height: 1.5em;
+    margin-bottom: 25px;
+
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      width: 100px;
+      height: 2px;
+      background-color: #A2CF00;
+      left: 50%;
+      margin-left: -50px;
+    }
+  }
+  &-home {
+    color: white;
+  }
+}
+.welcome {
+  min-height: 40vh;
+}
 </style>

src/main.js

@@ -1,6 +1,8 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
+import store from './store'
+
 import '../scss/default.scss'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { fas } from '@fortawesome/free-solid-svg-icons'
@@ -12,6 +14,7 @@ Vue.component('font-awesome-icon', FontAwesomeIcon)
 Vue.config.productionTip = false
 
 new Vue({
+  store,
   router,
   render: h => h(App)
 }).$mount('#app')

src/store/index.js

@@ -0,0 +1,41 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+const moduleSettings = {
+  state: {
+    header: {
+      title: null,
+      description: null
+    }
+  },
+  getters: {
+    getHeader (state) {
+      return state.header
+    }
+  },
+  mutations: {
+    setHeader: (state, payload) => {
+      state.header = {
+        title: payload.title ?? null,
+        description: payload.description ?? null
+      }
+    },
+    resetHeaderTitle (state) {
+      state.header.title = null
+    },
+    setHeaderDescription: (state, payload) => {
+      state.header.description = payload.title
+    },
+    resetHeaderDescription (state) {
+      state.header.description = null
+    }
+  }
+}
+
+export default new Vuex.Store({
+  modules: {
+    settings: moduleSettings
+  }
+})

src/views/About.vue

@@ -1,11 +1,9 @@
 <template>
   <section id="about">
     <div class="container">
-      <h2>{{ $route.meta.title }}</h2>
+      <h2>Studia</h2>
-      <p>Nazywam się Kamil Niemczycki, jestem studentem kierunku Informatyka o specjalności Programowanie Aplikacji Mobilnych i Internetowych.</p>
+      <p>Nazywam się Kamil Niemczycki, jestem absolwentem Państwowej Wyższej Szkoły Zawodowej im. Witelona w Legnicy.</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>Studiowałem na kierunku <i>Informatyka</i> o specjalności <i>Programowanie Aplikacji Mobilnych i Internetowych.</i></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>
-      <p>Backend, frontend ❤</p>
     </div>
   </section>
 </template>
@@ -19,6 +17,17 @@ section#about {
 
 <script>
 export default {
-  name: 'About'
+  name: 'About',
+  mounted () {
+    const header = {
+      title: this.$route.meta.title,
+      description: 'I\'m a software engineer specialised in frontend and backend development for complex scalable web apps. I write about software development on my blog.'
+    }
+    this.$store.commit('setHeader', header)
+  },
+  destroyed () {
+    this.$store.commit('resetHeaderTitle')
+    this.$store.commit('resetHeaderDescription')
+  }
 }
 </script>

src/views/Home.vue

@@ -5,12 +5,30 @@
   </section>
 </template>
 
+<style lang="scss">
+
+</style>
+
 <script>
 import About from '../components/sections/About'
 import Experiences from '../components/sections/Experiences'
 
 export default {
   name: 'Home',
+  mounted () {
+    const header = {
+      title: this.$route.meta.title,
+      description: [
+        'Chciałbym Państwa powitać na mojej stronie!',
+        'Przedstawiam tutaj część swojego życia związaną z programowaniem i projektowaniem aplikacji internetowych.'
+      ]
+    }
+    this.$store.commit('setHeader', header)
+  },
+  destroyed () {
+    this.$store.commit('resetHeaderTitle')
+    this.$store.commit('resetHeaderDescription')
+  },
   components: {
     About,
     Experiences