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

Compare commits

base: kamilniemczycki:01bac7e579b6c42a3279b565ae7ca0f7c65660e4
Branches Tags
kamilniemczycki:main
kamilniemczycki:vite
kamilniemczycki:test2
kamilniemczycki:github-footer
kamilniemczycki:up-depends
kamilniemczycki:tailwind
kamilniemczycki:vue-v3
kamilniemczycki:v1.0.0
..
compare: kamilniemczycki:a4fe5e4efcc1bc28f43a05ef769a30b49edfced5
Branches Tags
kamilniemczycki:vite
kamilniemczycki:test2
kamilniemczycki:main
kamilniemczycki:github-footer
kamilniemczycki:up-depends
kamilniemczycki:tailwind
kamilniemczycki:vue-v3
kamilniemczycki:v1.0.0

4 Commits
01bac7e579 ... a4fe5e4efc

Author SHA1 Message Date
Kamil Niemczycki
a4fe5e4efc
updated project view 2022-07-24 17:35:13 +02:00
Kamil Niemczycki
5712c890af
updated about view 2022-07-24 17:35:13 +02:00
Kamil Niemczycki
504fa251b7
updated footer style 2022-07-24 17:35:12 +02:00
Kamil Niemczycki
d0e35a6d40
updated projects view 2022-07-24 17:35:04 +02:00
2 changed files with 115 additions and 220 deletions
Show Stats Expand all files Collapse all files

105
src/views/AboutView.vue
View File

@ -1,39 +1,45 @@
<template> <template>
<section id="about"> <section class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
<div class="container"> <p class="font-bold">
<p> Nazywam się Kamil Niemczycki. Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.
<strong>Nazywam się Kamil Niemczycki. Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów. W projektach wykorzystuję techologie oparte o PHP i JavaScript, tworząc skomplikowane i skalowalne aplikacje internetowe.
W projektach wykorzystuję techologie oparte o PHP i JavaScript, tworząc skomplikowane i skalowalne aplikacje internetowe.</strong> </p>
</p> <h2 class="text-[2rem]">
<h2>Studia</h2> Studia
<p> </h2>
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>
</p> 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> </p>
Podczas studiów zdobyłem niezbędną wiedzę z zakresu projektowania, wdrażania i rozwoju aplikacji internetowych, mobilnych i desktopowych. <p>
Zdobyłem także umiejętności pracy w zespole, które owocują tworzeniem merytorycznej dyskusji na temat części lub całości projektu. Podczas studiów zdobyłem niezbędną wiedzę z zakresu projektowania, wdrażania i rozwoju aplikacji internetowych, mobilnych i desktopowych.
</p> Zdobyłem także umiejętności pracy w zespole, które owocują tworzeniem merytorycznej dyskusji na temat części lub całości projektu.
<h3>Kursy</h3> </p>
<p> <h3 class="text-[1.5rem]">
W ramach studiów uzyskałem zaświadczenie dotyczące ukończenia kursu: Kursy
<strong><a </h3>
:href="publicPath + 'download/certyfikat-laravel.pdf'" <p>
target="_blank" W ramach studiów uzyskałem zaświadczenie dotyczące ukończenia kursu:
rel="noopener nofollow noreferrer" <a
> :href="publicPath + 'download/certyfikat-laravel.pdf'"
Architektura aplikacji internetowych opartych o framework Laravel</a></strong>. class="text-gray-500 underline hover:text-kamilcraft-green hover:no-underline"
</p> target="_blank"
<p> rel="noopener nofollow noreferrer"
Umożliwiło mi to szersze spojrzenie na możliwości jakie daje nam Laravel i wzbogaconie poprzednio zdobytej >
wiedzy o nowe doświadczenia. Architektura aplikacji internetowych opartych o framework Laravel
</p> </a>.
<h2>Moje zainteresowania</h2> </p>
<p> <p>
W wolnym czasie przyjmuje małe zlecenia na strony lub serwisy internetowe. Uczę się nowych języków Umożliwiło mi to szersze spojrzenie na możliwości jakie daje nam Laravel i wzbogaconie poprzednio zdobytej
programowania lub frameworków w znanych mi już technologiach. Hobbistycznie, tworzę także rozwiązania do wiedzy o nowe doświadczenia.
problemów przy prywatnych projektach. </p>
</p> <h2 class="text-[2rem]">
</div> Moje zainteresowania
</h2>
<p>
W wolnym czasie przyjmuje małe zlecenia na strony lub serwisy internetowe. Uczę się nowych języków
programowania lub frameworków w znanych mi już technologiach. Hobbistycznie, tworzę także rozwiązania do
problemów przy prywatnych projektach.
</p>
</section> </section>
</template> </template>
@ -60,32 +66,3 @@ onUnmounted(() => {
store.commit('resetHeaderDescription') store.commit('resetHeaderDescription')
}) })
</script> </script>
<style lang="scss">
section#about {
padding: 45px 0;
background-color: #fafafa !important;
h2 {
margin-top: 25px;
&:first-of-type {
margin-top: 10px;
}
}
h3 {
font-size: 1.3em;
margin-top: 8px;
margin-bottom: 10px;
}
a {
color: #8D8D8D;
&:hover {
color: #A2CF00;
}
}
}
</style>

230
src/views/ProjectView.vue
View File

@ -1,74 +1,78 @@
<template> <template>
<section <section
v-if="isLoaded" v-if="isLoaded"
class="project" class="max-w-screen-xl mx-auto px-6 xl:px-2 py-8"
> >
<header class="project_header"> <header class="text-neutral-800 font-roboto">
<h1>{{ project.title }}</h1> <h1 class="text-center text-4xl font-light pb-5">
<ul class="project_info"> {{ project.title }}
<li class="info_text"> </h1>
<font-awesome-icon <ul class="grid grid-cols-2 gap-3 md:flex md:gap-5 justify-center list-none">
class="icon" <li class="flex items-center gap-2">
<FontAwesomeIcon
class="w-4"
:icon="['far', 'clock']" :icon="['far', 'clock']"
/> />
<span>{{ project.release_date }}</span> <span>{{ project.release_date }}</span>
</li> </li>
<li class="info_text"> <li class="flex items-center gap-2">
<font-awesome-icon <FontAwesomeIcon
class="icon" class="w-4"
:icon="['far', 'user']" :icon="['far', 'user']"
/> />
<span>{{ project.author }}</span> <span>{{ project.author }}</span>
</li> </li>
<li class="info_text"> <li class="flex items-center gap-2">
<font-awesome-icon <FontAwesomeIcon
class="icon" class="w-4"
:icon="['far', 'folder']" :icon="['far', 'folder']"
/> />
<span>{{ getCategoryName(project.categories) }}</span> <span>{{ getCategoryName(project.categories) }}</span>
</li> </li>
<li class="info_text"> <li class="flex items-center gap-2">
<font-awesome-icon <FontAwesomeIcon
class="icon" class="w-4"
:icon="['fas', 'code-branch']" :icon="['fas', 'code-branch']"
/> />
<span>{{ project.project_version }}</span> <span>{{ project.project_version }}</span>
</li> </li>
<li <li
v-if="project.project_url" v-if="project.project_url"
class="info_text" class="flex items-center gap-2"
> >
<font-awesome-icon <FontAwesomeIcon
class="icon" class="w-4"
:icon="['fas', 'link']" :icon="['fas', 'link']"
/> />
<span><a <span>
:href="project.project_url" <a
target="_blank" :href="project.project_url"
rel="noopener nofollow noreferrer" target="_blank"
>Link</a></span> rel="noopener nofollow noreferrer"
>
Link
</a>
</span>
</li> </li>
</ul> </ul>
</header> </header>
<div class="container"> <div class="pt-5">
<component <figure class="w-full shadow-xl">
:is="`figure`"
class="project-photo"
>
<img <img
:src="`${project.images.large}`" class="block max-h-[31.25rem] object-cover"
:src="project.images.large"
:alt="project.title" :alt="project.title"
> >
</component> </figure>
<div <div
class="content" class="markdown mt-9"
v-html="markdownToHtml" v-html="markdownToHtml"
/> />
</div> </div>
</section> </section>
<div <div
v-else v-else
class="loading" class="flex items-center"
> >
<div class="loading_animation" /> <div class="loading_animation" />
</div> </div>
@ -127,143 +131,57 @@ function loadProject(id) {
<style lang="scss"> <style lang="scss">
@import "scss/default"; @import "scss/default";
.loading { a {
display: flex; @apply text-neutral-800 hover:text-kamilcraft-green;
align-items: center;
} }
.project { .markdown {
.project_header { h1 {
@extend .container; @apply text-4xl;
text-align: center; }
margin-bottom: 25px;
h1 { h2 {
font-size: 2.2em; @apply text-[2rem];
font-weight: lighter; }
line-height: 2.4em;
}
.project_info { h3 {
display: flex; @apply text-[1.5rem];
list-style: none; }
justify-content: center;
.info_text { p, ol li, ul li {
display: flex; @apply text-lg;
align-items: center; }
.icon { p + ol, p + ul, p + blockquote {
width: 2em; @apply -mb-2.5;
} }
span { ol {
font-weight: lighter; @apply list-decimal;
white-space: nowrap; }
}
&:not(&:last-child) { ul {
margin-right: 15px; @apply list-disc;
} }
}
@include media-tablet {
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 15px;
.info-text { ol, ul {
&:not(&:last-child) { @apply mb-2.5;
margin-right: 0; padding-inline-start: 1.75rem;
}
} li img {
} @apply block w-full pr-1 pb-1 mt-3.5;
} }
} }
.container { p {
.project-photo { @apply mb-2.5 text-justify;
box-shadow: 5px 5px 10px rgba(0, 0, 0, .3); }
}
.project-photo, .project-photo img { blockquote {
width: 100%; @apply pl-6 ml-5 border-neutral-400;
}
.project-photo img { p {
display: block; text-indent: unset;
object-fit: cover;
max-height: 500px;
}
.content {
margin: 35px 0;
a {
color: #8D8D8D;
&:hover {
color: #A2CF00;
}
}
h2, h3 {
margin-top: 15px;
margin-bottom: 5px;
}
h2:first-of-type {
margin-top: 0;
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 1.4em;
}
p, ol li, ul li {
line-height: 1.8em;
font-size: 1.1em;
@include media-tablet {
font-size: 1.2em;
line-height: 1.5em;
}
}
p + ol, p + ul, p + blockquote {
margin-top: -10px;
}
ol, ul {
margin-bottom: 10px;
padding-inline-start: 2.1em;
li img {
display: block;
width: 100%;
padding: 0 5px 5px;
margin-top: .9em;
}
}
p {
margin-bottom: 10px;
text-align: justify;
/* text-indent: 1.5em; */
}
blockquote {
padding-left: 25px;
margin-left: 1.3em;
border-left: 1px solid rgb(116, 116, 116);
p {
text-indent: unset;
}
}
} }
} }
} }