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

Update code

Browse Source 
Updated sourcecode and added meta tags
This commit is contained in:
Kamil Niemczycki
2021-09-09 16:38:40 +02:00
parent 90173e5092
commit 1e13e55029
8 changed files with 151 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,64 +8,19 @@
technologie, które wspomagają pisanie i rozwijanie oprogramowania.
</p>
<div class="skills">
<div class="skill-group">
<div v-for="(skill, key) in list" :key="key" class="skill-group">
<header class="skill-header">
<div class="tech-icons">
<font-awesome-icon class="icon-php" :icon="['fab', 'php']" title="Ikona PHP" />
<font-awesome-icon class="icon-laravel" :icon="['fab', 'laravel']" title="Ikona Laravel" />
<font-awesome-icon
v-for="(icon, keyIcon) in skill.icons"
:key="keyIcon" :class="icon.class"
:icon="['fab', icon.name]"
:title="icon.title" />
</div>
<h3>{{ php.header }}</h3>
<h3>{{ skill.header }}</h3>
</header>
<p v-if="php.showMore || php.description.length < 255">{{ php.description }}</p>
<p v-else>{{ php.description.substr(0, 255) }}... <a @click="() => { php.showMore = true }">Więcej</a></p>
</div>
<div class="skill-group">
<header class="skill-header">
<div class="tech-icons">
<font-awesome-icon class="icon-js" :icon="['fab', 'js-square']" />
</div>
<h3>{{ javascript.header }}</h3>
</header>
<p v-if="javascript.showMore || javascript.description.length < 255">{{ javascript.description }}</p>
<p v-else>{{ javascript.description.substr(0, 255) }}... <a @click="() => { javascript.showMore = true }">Więcej</a></p>
</div>
<div class="skill-group">
<header class="skill-header">
<div class="tech-icons">
<font-awesome-icon class="icon-vue" :icon="['fab', 'vuejs']" />
</div>
<h3>{{ vue.header }}</h3>
</header>
<p v-if="vue.showMore || vue.description.length < 255">{{ vue.description }}</p>
<p v-else>{{ vue.description.substr(0, 255) }}... <a @click="() => { vue.showMore = true }">Więcej</a></p>
</div>
<div class="skill-group">
<header class="skill-header">
<div class="tech-icons">
<font-awesome-icon class="icon-html5" :icon="['fab', 'html5']" />
<font-awesome-icon class="icon-css3" :icon="['fab', 'css3-alt']" />
</div>
<h3>HTML & CSS</h3>
</header>
<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 class="skill-group">
<header class="skill-header">
<div class="tech-icons">
<font-awesome-icon class="icon-node" :icon="['fab', 'node']" />
</div>
<h3>Node.js</h3>
</header>
<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 class="skill-group">
<header class="skill-header">
<div class="tech-icons">
<font-awesome-icon class="icon-sass" :icon="['fab', 'sass']" />
</div>
<h3>Sass</h3>
</header>
<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 v-if="skill.showMore || skill.description.length < 200">{{ skill.description }}</p>
<p v-else>{{ parseText(skill.description) }}... <a @click="changeMoreStatus(skill)">Więcej</a></p>
</div>
</div>
</div>
@@ -77,27 +32,117 @@ export default {
name: 'Experiences',
data () {
return {
php: {
list: []
}
},
mounted () {
this.list = [
{
icons: [
{
class: 'icon-php',
name: 'php',
title: 'Ikona PHP'
},
{
class: 'icon-laravel',
name: 'laravel',
title: 'Ikona Laravel'
}
],
header: 'PHP & Laravel',
showMore: false,
description: `PHP wraz z frameworkiem Laravel wykorzystuję do tworzenia nowych projektów. Laravel znacznie
przyspiesza pisanie części backendowej, odciążając programistę od pisania skomplikownych filtrów i monotonnych
walidacji przyjmowanych danych od użytkowników. Jednakże, choć dobrze pracuje mi się w środowisku Laravel w
miarę możliwości staram się pisać kod w samym PHP z wykorzystaniem bibliotek i paczek autorskich.`
walidacji przyjmowanych danych od użytkowników. Jednakże, choć dobrze pracuje mi się w środowisku Laravel
w miarę możliwości staram się pisać kod w samym PHP z wykorzystaniem bibliotek i paczek autorskich.`
},
javascript: {
{
icons: [
{
class: 'icon-js',
name: 'js-square',
title: 'Ikona JavaScript'
}
],
header: 'JavaScript Vanilla',
showMore: false,
description: `JavaScript wykorzystuję głównie do logiki frontendowej jak i pisania kodu wykonywalnego po stronie
przeglądarki internetowej. Wykorzystując możliwości reaktywnych frameworków mogę przyspieszyć pisanie UI.`
},
vue: {
{
icons: [
{
class: 'icon-vue',
name: 'vuejs',
title: 'Ikona Vue'
}
],
header: 'Vue',
showMore: false,
description: `Framework ten wspomaga mnie w pisaniu aplikacji frontendowej. Przyspiesza tworzenie warstwy
wizualnej, obsługę interakcji z użytkownikiem i bindowanie zdefiniowanych pól, które są odpowiednio renderowane
przez przeglądarkę. To wszystko, umożliwia łatwe łączenie CSS i HTML z logiką i otrzymanymi danymi z API.`
},
{
icons: [
{
class: 'icon-html5',
name: 'html5',
title: 'Ikona HTML5'
},
{
class: 'icon-css3',
name: 'css3-alt',
title: 'Ikona CSS3'
}
],
header: 'HTML & CSS',
showMore: false,
description: `Framework ten wspomaga mnie w pisaniu aplikacji frontendowej. Przyspiesza tworzenie warstwy
wizualnej, obsługę interakcji z użytkownikiem i bindowanie zdefiniowanych pól, które są odpowiednio renderowane
przez przeglądarkę. To wszystko, umożliwia łatwe łączenie CSS i HTML z logiką i otrzymanymi danymi z API.`
},
{
icons: [
{
class: 'icon-node',
name: 'node',
title: 'Ikona Node.js'
}
],
header: 'Node.js',
showMore: false,
description: `Framework ten wspomaga mnie w pisaniu aplikacji frontendowej. Przyspiesza tworzenie warstwy
wizualnej, obsługę interakcji z użytkownikiem i bindowanie zdefiniowanych pól, które są odpowiednio renderowane
przez przeglądarkę. To wszystko, umożliwia łatwe łączenie CSS i HTML z logiką i otrzymanymi danymi z API.`
},
{
icons: [
{
class: 'icon-sass',
name: 'sass',
title: 'Ikona Sass'
}
],
header: 'Sass',
showMore: false,
description: `Framework ten wspomaga mnie w pisaniu aplikacji frontendowej. Przyspiesza tworzenie warstwy
wizualnej, obsługę interakcji z użytkownikiem i bindowanie zdefiniowanych pól, które są odpowiednio renderowane
przez przeglądarkę. To wszystko, umożliwia łatwe łączenie CSS i HTML z logiką i otrzymanymi danymi z API.`
}
]
},
methods: {
parseText (text) {
let shortText = text.substr(0, 200)
if (shortText.slice(-1) === ' ') {
shortText = text.substr(0, 199)
}
return shortText
},
changeMoreStatus (skill) {
skill.showMore = !skill.showMore
}
}
}
@@ -125,7 +170,7 @@ export default {
font-size: 1.8em;
margin-bottom: 3px;
& > *[class|=icon] {
& > svg[class*='icon'] {
margin-right: 10px;
&:last-child {

1
src/main.js
View File

@@ -2,6 +2,7 @@ import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './vue-meta'
import '../scss/default.scss'
import { library } from '@fortawesome/fontawesome-svg-core'

10
src/views/About.vue
View File

@@ -2,8 +2,11 @@
<section id="about">
<div class="container">
<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>
<p>
Nazywam się Kamil Niemczycki, jestem absolwentem Państwowej Wyższej Szkoły Zawodowej im. Witelona w Legnicy.
Studiowałem na kierunku <em>Informatyka</em> o specjalności <em>Programowanie Aplikacji Mobilnych i
Internetowych.</em>
</p>
</div>
</section>
</template>
@@ -18,6 +21,9 @@ section#about {
<script>
export default {
name: 'About',
data () {
return {}
},
mounted () {
const header = {
title: this.$route.meta.title,

4
src/views/Home.vue
View File

@@ -6,10 +6,6 @@
</section>
</template>
<style lang="scss">
</style>
<script>
import About from '../components/sections/About'
import Experiences from '../components/sections/Experiences'

4
src/vue-meta/index.js Normal file
View File

@@ -0,0 +1,4 @@
import Vue from 'vue'
import VueMeta from 'vue-meta'
Vue.use(VueMeta)