Update style
* Add new default style to project * Add new BaseButton component * Remove link to stylesheet in index.html * Add import for default style * Update styles and structure for project components
This commit is contained in:
parent
9c6fdb46e2
commit
b481a3fcea
2193
package-lock.json
generated
2193
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -5,7 +5,6 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<link rel="stylesheet" href="<%= BASE_URL %>assets/css/default.css">
|
||||
<title>KamilCraft.com</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
5
scss/_all.scss
Normal file
5
scss/_all.scss
Normal file
@ -0,0 +1,5 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
3
scss/_btn.scss
Normal file
3
scss/_btn.scss
Normal file
@ -0,0 +1,3 @@
|
||||
@mixin btn($revese: false) {
|
||||
|
||||
}
|
||||
7
scss/_colors.scss
Normal file
7
scss/_colors.scss
Normal file
@ -0,0 +1,7 @@
|
||||
// default colors
|
||||
$gray: #fafafa;
|
||||
$dark-gray: #4f4f4f;
|
||||
|
||||
// default colors for style
|
||||
$text-color: #2c3e50;
|
||||
$bg-color: white;
|
||||
9
scss/_root.scss
Normal file
9
scss/_root.scss
Normal file
@ -0,0 +1,9 @@
|
||||
@import "colors";
|
||||
|
||||
: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";
|
||||
--dark-gray-color: #{$dark-gray};
|
||||
--gray-color: #{$gray};
|
||||
--text-color: #{$text-color};
|
||||
--bg-color: #{$bg-color};
|
||||
}
|
||||
20
scss/default.scss
Normal file
20
scss/default.scss
Normal file
@ -0,0 +1,20 @@
|
||||
@import "root";
|
||||
@import "all";
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.8em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
p {
|
||||
font-size: 1.1em;
|
||||
line-height: 1.4em;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 15px;
|
||||
}
|
||||
21
src/App.vue
21
src/App.vue
@ -12,29 +12,12 @@
|
||||
font-family: var(--font-family);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
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;
|
||||
color: var(--text-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import SiteHeader from '@/components/SiteHeader.vue'
|
||||
import SiteHeader from './components/SiteHeader'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
|
||||
34
src/components/BaseButton.vue
Normal file
34
src/components/BaseButton.vue
Normal file
@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<button class="btn" :class="isReverse ? 'reverse' : ''">
|
||||
<i v-if="hasIcon" :class="classIcon"></i>
|
||||
<slot></slot>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BaseButton',
|
||||
props: {
|
||||
hasIcon: Boolean,
|
||||
classIcon: String,
|
||||
isReverse: Boolean
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$btn-color: black;
|
||||
$hover-btn-color: white;
|
||||
|
||||
.btn {
|
||||
padding: 10px 15px;
|
||||
border: 1px solid #{$btn-color};
|
||||
background-color: transparent;
|
||||
color: $btn-color;
|
||||
border-radius: 0;
|
||||
&:hover {
|
||||
background-color: $btn-color;
|
||||
color: $hover-btn-color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<header id="header">
|
||||
<router-link to="/">
|
||||
<img id="nav-logo" alt="KamilCraft.com logo" :src="`${publicPath}assets/logo.png`">
|
||||
<!-- <img id="nav-logo" alt="KamilCraft.com logo" :src="`${publicPath}assets/logo.png`"> -->
|
||||
<h1 id="nav-text">KamilCraft</h1>
|
||||
</router-link>
|
||||
<nav id="navigation">
|
||||
<ul id="menu">
|
||||
@ -18,10 +19,15 @@
|
||||
#header {
|
||||
width: 250px;
|
||||
height: 100vh;
|
||||
background-color: #4f4f4f !important;
|
||||
background-color: #1893D7!important;
|
||||
background-image: linear-gradient(to top,#005C93 25%,#2C395C);
|
||||
#nav-text {
|
||||
color: white;
|
||||
}
|
||||
#nav-logo {
|
||||
display: block;
|
||||
width: 250px;
|
||||
height: 67px;
|
||||
padding: 8px 0;
|
||||
background-color: #fafafa !important;
|
||||
}
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
<template>
|
||||
<section id="about">
|
||||
<div class="about">
|
||||
<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>
|
||||
<base-btn class-icon="my-class" has-icon>Wyświetl portfolio</base-btn>
|
||||
</div>
|
||||
<div id="grid-photo">
|
||||
<figure id="about-photo">
|
||||
@ -14,13 +15,18 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
section#about {
|
||||
.btn {
|
||||
i.my-class:before {
|
||||
content: 'XD ';
|
||||
}
|
||||
}
|
||||
div.about {
|
||||
padding: 20px 0;
|
||||
background-color: #fafafa !important;
|
||||
background-color: var(--gray-color) !important;
|
||||
h2.name {
|
||||
font-size: 2.1em;
|
||||
margin-bottom: 5px;
|
||||
@ -62,11 +68,16 @@ section#about {
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import BaseButton from '../BaseButton'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
publicPath: process.env.BASE_URL
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'base-btn': BaseButton
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<section id="experiences">
|
||||
<div 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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -14,7 +14,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
section#experiences {
|
||||
|
||||
div#experiences {
|
||||
padding: 20px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,6 +3,7 @@ import App from './App.vue'
|
||||
import router from './router'
|
||||
/* import 'bootstrap' */
|
||||
/* import 'bootstrap/scss/bootstrap.scss' */
|
||||
import '../scss/default.scss'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
|
||||
@ -16,3 +16,9 @@ section#about {
|
||||
background-color: #fafafa !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'About'
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<section class="home">
|
||||
<About />
|
||||
<Experiences />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import About from '@/components/sections/About.vue'
|
||||
import Experiences from '@/components/sections/Experiences.vue'
|
||||
import About from '../components/sections/About'
|
||||
import Experiences from '../components/sections/Experiences'
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user