Update style
This commit is contained in:
parent
1d5cc99877
commit
cfed14b1c4
17
package-lock.json
generated
17
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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')
|
||||
|
||||
41
src/store/index.js
Normal file
41
src/store/index.js
Normal file
@ -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
|
||||
}
|
||||
})
|
||||
@ -1,11 +1,9 @@
|
||||
<template>
|
||||
<section id="about">
|
||||
<div class="container">
|
||||
<h2>{{ $route.meta.title }}</h2>
|
||||
<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>
|
||||
<p>Backend, frontend ❤</p>
|
||||
<h2>Studia</h2>
|
||||
<p>Nazywam się Kamil Niemczycki, jestem absolwentem Państwowej Wyższej Szkoły Zawodowej im. Witelona w Legnicy.</p>
|
||||
<p>Studiowałem na kierunku <i>Informatyka</i> o specjalności <i>Programowanie Aplikacji Mobilnych i Internetowych.</i></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>
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user