kamilniemczycki/kamilcraft.com
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

Update style

Browse Source 
* 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:
Kamil Niemczycki
2021-08-20 15:28:51 +02:00
parent 9c6fdb46e2
commit b481a3fcea
15 changed files with 2311 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2193
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
public/index.html
View File

@@ -5,7 +5,6 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="<%= BASE_URL %>assets/css/default.css">
<title>KamilCraft.com</title> <title>KamilCraft.com</title>
</head> </head>
<body> <body>

5
scss/_all.scss Normal file
View File

@@ -0,0 +1,5 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

3
scss/_btn.scss Normal file
View File

@@ -0,0 +1,3 @@
@mixin btn($revese: false) {
}

7
scss/_colors.scss Normal file
View 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
View 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
View 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
View File

@@ -12,29 +12,12 @@
font-family: var(--font-family); font-family: var(--font-family);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
color: #2c3e50; color: var(--text-color);
}
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> </style>
<script> <script>
import SiteHeader from '@/components/SiteHeader.vue' import SiteHeader from './components/SiteHeader'
export default { export default {
name: 'App', name: 'App',

34
src/components/BaseButton.vue Normal file
View 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>

10
src/components/SiteHeader.vue
View File

@@ -1,7 +1,8 @@
<template> <template>
<header id="header"> <header id="header">
<router-link to="/"> <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> </router-link>
<nav id="navigation"> <nav id="navigation">
<ul id="menu"> <ul id="menu">
@@ -18,10 +19,15 @@
#header { #header {
width: 250px; width: 250px;
height: 100vh; 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 { #nav-logo {
display: block; display: block;
width: 250px; width: 250px;
height: 67px;
padding: 8px 0; padding: 8px 0;
background-color: #fafafa !important; background-color: #fafafa !important;
} }

19
src/components/sections/About.vue
View File

@@ -1,11 +1,12 @@
<template> <template>
<section id="about"> <div class="about">
<div class="container"> <div class="container">
<div id="grid"> <div id="grid">
<div id="grid-text"> <div id="grid-text">
<h2 class="name">Kamil Niemczycki</h2> <h2 class="name">Kamil Niemczycki</h2>
<div class="tagline">Web Developer</div> <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> <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>
<div id="grid-photo"> <div id="grid-photo">
<figure id="about-photo"> <figure id="about-photo">
@@ -14,13 +15,18 @@
</div> </div>
</div> </div>
</div> </div>
</section> </div>
</template> </template>
<style lang="scss"> <style lang="scss">
section#about { .btn {
i.my-class:before {
content: 'XD ';
}
}
div.about {
padding: 20px 0; padding: 20px 0;
background-color: #fafafa !important; background-color: var(--gray-color) !important;
h2.name { h2.name {
font-size: 2.1em; font-size: 2.1em;
margin-bottom: 5px; margin-bottom: 5px;
@@ -62,11 +68,16 @@ section#about {
} }
</style> </style>
<script> <script>
import BaseButton from '../BaseButton'
export default { export default {
data () { data () {
return { return {
publicPath: process.env.BASE_URL publicPath: process.env.BASE_URL
} }
},
components: {
'base-btn': BaseButton
} }
} }
</script> </script>

8
src/components/sections/Experiences.vue
View File

@@ -1,10 +1,10 @@
<template> <template>
<section id="experiences"> <div id="experiences">
<div class="container"> <div class="container">
<h2>Moje doświadczenie</h2> <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> <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> </div>
</section> </div>
</template> </template>
<script> <script>
@@ -14,7 +14,7 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
section#experiences { div#experiences {
padding: 20px 0;
} }
</style> </style>

1
src/main.js
View File

@@ -3,6 +3,7 @@ import App from './App.vue'
import router from './router' import router from './router'
/* import 'bootstrap' */ /* import 'bootstrap' */
/* import 'bootstrap/scss/bootstrap.scss' */ /* import 'bootstrap/scss/bootstrap.scss' */
import '../scss/default.scss'
Vue.config.productionTip = false Vue.config.productionTip = false

6
src/views/About.vue
View File

@@ -16,3 +16,9 @@ section#about {
background-color: #fafafa !important; background-color: #fafafa !important;
} }
</style> </style>
<script>
export default {
name: 'About'
}
</script>

8
src/views/Home.vue
View File

@@ -1,13 +1,13 @@
<template> <template>
<div class="home"> <section class="home">
<About /> <About />
<Experiences /> <Experiences />
</div> </section>
</template> </template>
<script> <script>
import About from '@/components/sections/About.vue' import About from '../components/sections/About'
import Experiences from '@/components/sections/Experiences.vue' import Experiences from '../components/sections/Experiences'
export default { export default {
name: 'Home', name: 'Home',