Update styles
This commit is contained in:
parent
f941172b10
commit
9c6fdb46e2
@ -1 +1,9 @@
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
:root {
|
||||
--font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<!doctype html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
|
||||
33
src/App.vue
33
src/App.vue
@ -1,22 +1,45 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<navigation/>
|
||||
<site-header />
|
||||
<router-view/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
/* font-family: Avenir, Helvetica, Arial, sans-serif; */
|
||||
display: flex;
|
||||
font-family: var(--font-family);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.8em;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
p {
|
||||
font-size: 1.1em;
|
||||
line-height: 1.4em;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import Navigation from '@/components/Navigation.vue'
|
||||
import SiteHeader from '@/components/SiteHeader.vue'
|
||||
|
||||
export default {
|
||||
components: { Navigation }
|
||||
name: 'App',
|
||||
components: {
|
||||
SiteHeader
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,78 +0,0 @@
|
||||
<template>
|
||||
<div id="nav">
|
||||
<router-link to="/">
|
||||
<img id="nav-logo" alt="KamilCraft.com logo" :src="`${publicPath}assets/logo.png`">
|
||||
</router-link>
|
||||
<ul id="menu">
|
||||
<li class="menu-element"><router-link to="/">Strona główna</router-link></li>
|
||||
<li class="menu-element"><router-link to="/projects">Projekty</router-link></li>
|
||||
<li class="menu-element"><router-link to="/about">O mnie</router-link></li>
|
||||
<li class="menu-element"><router-link to="/contact">Kontakt</router-link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
#nav {
|
||||
display: flex;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 5px 30px;
|
||||
|
||||
#nav-logo {
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
#menu {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
|
||||
.menu-element {
|
||||
display: block;
|
||||
padding: 0 10px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0 , 0, .1);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
line-height: 50px;
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
|
||||
&.router-link-exact-active {
|
||||
color: #42b983;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
#nav {
|
||||
justify-content: center;
|
||||
|
||||
#menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
publicPath: process.env.BASE_URL
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
66
src/components/SiteHeader.vue
Normal file
66
src/components/SiteHeader.vue
Normal file
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<header id="header">
|
||||
<router-link to="/">
|
||||
<img id="nav-logo" alt="KamilCraft.com logo" :src="`${publicPath}assets/logo.png`">
|
||||
</router-link>
|
||||
<nav id="navigation">
|
||||
<ul id="menu">
|
||||
<li class="menu-element"><router-link to="/">Strona główna</router-link></li>
|
||||
<li class="menu-element"><router-link to="/projects">Projekty</router-link></li>
|
||||
<li class="menu-element"><router-link to="/about">O mnie</router-link></li>
|
||||
<li class="menu-element"><router-link to="/contact">Kontakt</router-link></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
#header {
|
||||
width: 250px;
|
||||
height: 100vh;
|
||||
background-color: #4f4f4f !important;
|
||||
#nav-logo {
|
||||
display: block;
|
||||
width: 250px;
|
||||
padding: 8px 0;
|
||||
background-color: #fafafa !important;
|
||||
}
|
||||
#navigation {
|
||||
#menu {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
.menu-element {
|
||||
display: block;
|
||||
padding: 0 10px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0 , 0, .1);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
line-height: 50px;
|
||||
font-weight: bold;
|
||||
color: #dcdcdc;
|
||||
|
||||
&.router-link-exact-active {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SiteHeader',
|
||||
data () {
|
||||
return {
|
||||
publicPath: process.env.BASE_URL
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,62 +1,63 @@
|
||||
<template>
|
||||
<section id="about">
|
||||
<h1>O mnie:</h1>
|
||||
<div id="grid">
|
||||
<div id="grid-text">
|
||||
<p>Nazywam się <strong>Kamil Niemczycki</strong>, jestem studentem kierunku <strong>Informatyka</strong> 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>
|
||||
</div>
|
||||
<div id="grid-photo">
|
||||
<figure id="about-photo">
|
||||
<img :src="`${publicPath}assets/me.png`" />
|
||||
</figure>
|
||||
<div class="container">
|
||||
<div id="grid">
|
||||
<div id="grid-text">
|
||||
<h2 class="name">Kamil Niemczycki</h2>
|
||||
<div class="tagline">Web Developer</div>
|
||||
<p>I'm a software engineer specialised in frontend and backend development for complex scalable web apps. I write about software development on my blog. Want to know how I may help your project? Check out my project portfolio and online resume.</p>
|
||||
</div>
|
||||
<div id="grid-photo">
|
||||
<figure id="about-photo">
|
||||
<img :src="`${publicPath}assets/me.png`" />
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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 .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;
|
||||
}
|
||||
section#about {
|
||||
padding: 20px 0;
|
||||
background-color: #fafafa !important;
|
||||
h2.name {
|
||||
font-size: 2.1em;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
#grid-photo {
|
||||
grid-area: photo;
|
||||
div.tagline {
|
||||
font-size: 1.6em;
|
||||
margin-bottom: .7em;
|
||||
}
|
||||
figure {
|
||||
img {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
#grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-areas:
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr .8fr;
|
||||
grid-template-areas:
|
||||
'text text photo';
|
||||
align-items: center;
|
||||
#grid-text {
|
||||
grid-area: text;
|
||||
text-align: left;
|
||||
}
|
||||
#grid-photo {
|
||||
grid-area: photo;
|
||||
}
|
||||
figure {
|
||||
text-align: center;
|
||||
img {
|
||||
object-fit: cover;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
#grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-areas:
|
||||
'text text'
|
||||
'photo photo';
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
20
src/components/sections/Experiences.vue
Normal file
20
src/components/sections/Experiences.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<section id="experiences">
|
||||
<div class="container">
|
||||
<h2>Moje doświadczenie</h2>
|
||||
<p>I have more than 10 years' experience building software for clients all over the world. Below is a quick overview of my main technical skill sets and technologies I use. Want to find out more about my experience? Check out my online resume and project portfolio.</p>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Experiences'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
section#experiences {
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -1,8 +1,8 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import 'bootstrap'
|
||||
import 'bootstrap/scss/bootstrap.scss'
|
||||
/* import 'bootstrap' */
|
||||
/* import 'bootstrap/scss/bootstrap.scss' */
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
|
||||
@ -1,9 +1,18 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<h1>{{ $route.meta.title }}</h1>
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
section#about {
|
||||
padding: 20px 0;
|
||||
background-color: #fafafa !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -11,6 +11,6 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,16 +1,19 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<About/>
|
||||
<About />
|
||||
<Experiences />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import About from '@/components/sections/About.vue'
|
||||
import Experiences from '@/components/sections/Experiences.vue'
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
components: {
|
||||
About
|
||||
About,
|
||||
Experiences
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user