init project

src/components/Body.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { defineProps, computed, ref } from 'vue';
+import Education from '../components/Education.vue';
+import MajorAchivments from '../components/MajorAchivments.vue';
+import Skills from '../components/Skills.vue';
+import Certificates from '../components/Certificates.vue';
+import Links from '../components/Links.vue';
+
+const props = defineProps({
+    token: {
+        default: null,
+        type: [String, null],
+    }
+});
+
+const qrCodeLink = computed(() => {
+    if(props.token) {
+        return `https://cv.kamilcraft.com/show/${props.token}`;
+    }
+    return 'https://cv.kamilcraft.com';
+});
+</script>
+
+<template>
+    <div class="flex flex-col-reverse print:flex-row print:gap-2 md:flex-row md:gap-2">
+        <div class="relative print:w-2/3 print:flex-shrink-0 md:w-2/3 pb-3 md:flex-shrink-0 pt-1 px-4">
+            <MajorAchivments />
+            <Education />
+            <div class="print:absolute bottom-5 left-0 w-full pt-3 print:pt-0 px-2 print:px-6 text-[.5rem] leading-3 l text-justify text-[#E57D4C]">
+                Wyrażam zgodę na przetwarzanie moich danych osobowych dla potrzeb
+                niezbędnych do realizacji procesu rekrutacji (zgodnie z ustawą z
+                dnia 10 maja 2018 roku o ochronie danych osobowych (Dz. Ustaw z 2018,
+                poz. 1000) oraz zgodnie z Rozporządzeniem Parlamentu
+                Europejskiego i Rady (UE) 2016/679 z dnia 27 kwietnia 2016 r. w sprawie
+                ochrony osób fizycznych w związku z przetwarzaniem danych
+                osobowych i w sprawie swobodnego przepływu takich danych oraz
+                uchylenia dyrektywy 95/46/WE (RODO)
+            </div>
+        </div>
+        <div class="relative print:w-1/3 print:flex-shrink-1 md:w-1/3 md:flex-shrink-1 bg-[#fff0e9]">
+            <Skills />
+            <Certificates />
+            <Links />
+            <div class="hidden print:block print:absolute bottom-5 right-0 w-full">
+                <a :href="qrCodeLink" title="Link do CV w wersji przeglądarkowej" target="_blink">
+                    <QRCode
+                        render-as="svg"
+                        class="mx-auto mb-2"
+                        :value="qrCodeLink"
+                        :size="100"
+                        level="L"
+                        background="transparent" />
+                </a>
+                <div class="text-center">Wersja online</div>
+            </div>
+        </div>
+    </div>
+</template>

src/components/Certificates.vue

@@ -0,0 +1,32 @@
+<script setup>
+const certificates = [
+    {
+        faIcon: ['fas', 'star'],
+        link: null,
+        title: 'Konkurs „Mój pierwszy biznes”',
+    },
+    {
+        faIcon: ['fas', 'certificate'],
+        link: 'https://kamilcraft.com/download/certyfikat-laravel.pdf',
+        title: 'Architektura aplikacji internetowych opartych o framework Laravel',
+    },
+];
+</script>
+
+<template>
+    <div class="px-4 py-3">
+        <h2 class="text-xl text-[#E57D4C] pb-2">Konkursy i Certyfikaty</h2>
+        <ul class="flex flex-col gap-1">
+            <li v-for="(certificate, key) in certificates"
+                :key="key"
+                class="flex gap-1 align-baseline">
+                <FontAwesomeIcon class="text-[#ffd43b]" :icon="certificate.faIcon" />
+                <span v-if="! certificate.link">{{ certificate.title }}</span>
+                <a v-else
+                    :href="certificate.link"
+                    :title="certificate.title"
+                    target="_blank">{{ certificate.title }}</a>
+            </li>
+        </ul>
+    </div>
+</template>

src/components/ContactList.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { defineProps, computed } from 'vue';
+
+const props = defineProps({
+    loading: {
+        default: false,
+        type: Boolean,
+    },
+    email: {
+        default: 'conact@kamilcraft.com',
+        type: String,
+    },
+    tel: {
+        default: {
+            hasPhoneNumber: false,
+        },
+        type: Object,
+    },
+    locations: {
+        default: [],
+        type: Array,
+    }
+});
+
+const location = computed(() => {
+    return props.locations.join(' / ');
+});
+</script>
+
+<style lang="css">
+.animated-bg {
+  animation-duration: 10s;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-name: placeHolderShimmer;
+  animation-timing-function: linear;
+  background-color: #f6f7f8;
+  background: linear-gradient(to right, #eeeeee 8%, #bbbbbb 18%, #eeeeee 33%);
+  position: relative;
+  width: 150px;
+  height: 20px;
+}
+
+@keyframes placeHolderShimmer {
+  0% {
+    background-position: -800px 0
+  }
+  100% {
+    background-position: 800px 0
+  }
+}
+</style>
+
+<template>
+    <ul v-if="loading">
+        <li class="animated-bg"></li>
+        <li class="animated-bg"></li>
+        <li class="animated-bg"></li>
+    </ul>
+    <ul v-else>
+        <li><FontAwesomeIcon class="w-5" :icon="['fas', 'envelope']" /> <a :href="`mailto:${email}`">{{ email }}</a></li>
+        <li v-if="tel.hasPhoneNumber"><FontAwesomeIcon class="w-5" :icon="['fas', 'mobile-screen-button']" /><a :href="`tel:${tel.phoneNumber}`">{{ tel.formattedPhoneNumber }}</a></li>
+        <li><FontAwesomeIcon class="w-5" :icon="['fas', 'location-dot']" />{{ location }}</li>
+    </ul>
+</template>

src/components/Education.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="px-1 py-2">
+        <h2 class="text-xl text-[#E57D4C] pb-2">Wykształcenie</h2>
+        <div class="pb-4 mb-4 border-b last:pb-0 last:mb-0 last:border-b-0">
+            <header class="relative mb-2">
+                <h3 class="text-base font-bold">Magister</h3>
+                <span class="absolute top-0 right-0 text-base">10.2021 - obecnie</span>
+                <span class="text-slate-500">Collegium Witelona Uczelnia Państwowa w Legnicy</span>
+            </header>
+            <ul class="pl-5 list-disc">
+                <li><span class="font-bold">Kierunek:</span> Inżynieria produkcji i logistyki</li>
+                <li><span class="font-bold">Specjalizacja:</span> Przemysł 4.0</li>
+            </ul>
+        </div>
+        <div class="pb-4 mb-4 border-b last:pb-0 last:mb-0 last:border-b-0">
+            <header class="relative mb-2">
+                <h3 class="text-base font-bold">Inżynier</h3>
+                <span class="absolute top-0 right-0 text-base">10.2017 – 06.2021</span>
+                <span class="text-slate-500">Państwowa Wyższa Szkoła Zawodowa im. Witelona w Legnicy</span>
+            </header>
+            <ul class="pl-5 list-disc">
+                <li><span class="font-bold">Kierunek:</span> Informatyka</li>
+                <li><span class="font-bold">Specjalizacja:</span> Programowanie aplikacji mobilnych i internetowych</li>
+            </ul>
+        </div>
+    </div>
+</template>

src/components/Header.vue

@@ -0,0 +1,48 @@
+<script setup>
+import { defineProps } from 'vue';
+import { useRoute } from 'vue-router';
+import Mission from '../components/Mission.vue';
+import ContactList from './ContactList.vue';
+
+defineProps({
+    loading: {
+        tyle: Boolean,
+    },
+    email: {
+        type: String,
+    },
+    tel: {
+        type: Object,
+    },
+    locations: {
+        type: Array,
+    },
+});
+</script>
+
+<template>
+    <div class="flex justify-between mx-1 mt-1 print:border-b-2 md:border-b-2">
+        <div class="flex-shrink-0 w-32 h-32">
+            <img class="w-full h-full" alt="Profilowe" src="/me.webp" />
+        </div>
+        <div class="flex flex-col flex-shrink-1 justify-center gap-3 w-full px-4 py-3">
+            <div>
+                <h1 class="text-2xl pb-0.5">Kamil Niemczycki</h1>
+                <p>Inżynier oprogramowania</p>
+            </div>
+            <ContactList
+                :loading="loading"
+                :email="email"
+                :tel="tel"
+                :locations="locations"
+                class="hidden md:flex gap-1 sm:gap-2 md:gap-5 print:flex print:gap-5 flex-wrap flex-1 text-sm" />
+        </div>
+    </div>
+    <ContactList
+        :loading="loading"
+        :email="email"
+        :tel="tel"
+        :locations="locations"
+        class="md:hidden print:hidden flex flex-col gap-2 px-5 py-3 border-b text-sm" />
+    <Mission />
+</template>

src/components/Links.vue

@@ -0,0 +1,37 @@
+<script setup>
+const links = [
+    {
+        slug: 'kamilcraft',
+        faIcon: ['fas', 'link'],
+        url: 'https://kamilcraft.com',
+        title: 'Moja strona',
+        text: 'kamilcraft.com',
+    },
+    {
+        slug: 'linkedin',
+        faIcon: ['fab', 'linkedin'],
+        url: 'https://www.linkedin.com/in/kamilniemczycki/',
+        title: 'Mój LinkedIn',
+        text: '/in/kamilniemczycki',
+    },
+    {
+        slug: 'github',
+        faIcon: ['fab', 'github'],
+        url: 'https://github.com/kamilniemczycki',
+        title: 'Mój GitHub',
+        text: '/kamilniemczycki',
+    },
+];
+</script>
+
+<template>
+    <div class="px-4 py-3">
+        <h2 class="text-xl text-[#E57D4C] pb-2">Znajdziesz mnie</h2>
+        <ul class="flex flex-col gap-1">
+            <li v-for="link in links" :key="link.slug"><a :href="link.url"
+                    :title="link.title"
+                    target="_blink"
+                ><FontAwesomeIcon class="w-6" :icon="link.faIcon" />{{ link.text }}</a></li>
+        </ul>
+    </div>
+</template>

src/components/MajorAchivments.vue

@@ -0,0 +1,38 @@
+<template>
+    <div class="px-1 py-2">
+        <h2 class="text-xl text-[#E57D4C] pb-2">Doświadczenie</h2>
+        <div class="pb-4 mb-4 border-b last:pb-0 last:mb-0 last:border-b-0">
+            <header class="relative mb-2">
+                <h3 class="text-base font-bold">Praktykant</h3>
+                <span class="absolute top-0 right-0 text-base">06.2022 – 07.2022</span>
+                <span class="text-slate-500">Blumilk sp. z o.o.</span>
+            </header>
+            <ul class="pl-5 list-disc">
+                <li>Tworzenie oprogramowania HR dla celów wewnętrznych firmy</li>
+            </ul>
+        </div>
+        <div class="pb-4 mb-4 border-b last:pb-0 last:mb-0 last:border-b-0">
+            <header class="relative mb-2">
+                <h3 class="text-base font-bold">Praktykant</h3>
+                <span class="absolute top-0 right-0 text-base">07.2019 – 08.2019</span>
+                <span class="text-slate-500">Legnickie Przedsiębiorstwo Wodociągów i Kanalizacji S.A.</span>
+            </header>
+            <ul class="pl-5 list-disc">
+                <li>Podstawowy serwis komputerów i drukarek</li>
+                <li>Tworzenie pluginu do obsługi tabel dla oprogramowania DokuWiki</li>
+            </ul>
+        </div>
+        <div class="pb-4 mb-4 border-b last:pb-0 last:mb-0 last:border-b-0">
+            <header class="relative mb-2">
+                <h3 class="text-base font-bold">Praktykant</h3>
+                <span class="absolute top-0 right-0 text-base">07.2018 – 08.2018</span>
+                <span class="text-slate-500">Big Bit Komputer S.J.</span>
+            </header>
+            <ul class="pl-5 list-disc">
+                <li>Podstawowy serwis komputerów i drukarek</li>
+                <li>Aktualizacja, reinstalacja, naprawa systemu Windows</li>
+                <li>Instalacja oprogramowania dla organizacji</li>
+            </ul>
+        </div>
+    </div>
+</template>

src/components/Mission.vue

@@ -0,0 +1,6 @@
+<template>
+    <div class="px-5 py-3 border-b text-justify text-slate-600">
+        <p>Ambitny i nastawiony na cel, gotowy do podjęcia wyzwań absolwent informatyki, który szuka pierwszej pracy jako inżynier oprogramowania.</p>
+        <p>Wyróżnia mnie pracowitość i umiejętność pracy w zespole. Szybko zdobywam potrzebną mi wiedzę i potrafię ją dobrze wykorzystać. Przyjemność sprawia mi tworzenie web aplikacji. Jestem gotowy by rozwijać swoją wiedzę jak i karierę zawodową w tym kierunku.</p>
+    </div>
+</template>

src/components/Skills.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { ref } from 'vue';
+import { skills as importSkills, otherSkills as importOtherSkills } from '../composables/Skills.js';
+
+const skills = ref(importSkills);
+const otherSkills = ref(importOtherSkills);
+</script>
+
+<style lang="css">
+    .php {
+        @apply text-[#777BB3];
+    }
+    .laravel {
+        @apply text-[#F05340];
+    }
+    .js {
+        @apply text-[#F0DB4F];
+    }
+    .vuejs {
+        @apply text-[#41B883];
+    }
+    .html5 {
+        @apply text-[#e34c26];
+    }
+    .css3-alt {
+        @apply text-[#2965f1];
+    }
+    .git {
+        @apply text-[#f1502f];
+    }
+    .linux {
+        @apply text-black;
+    }
+</style>
+
+<template>
+    <div class="px-4 py-3">
+        <h2 class="text-xl text-[#E57D4C] pb-2">Główne umiejętności</h2>
+        <ul class="flex flex-row flex-wrap justify-center align-baseline gap-4 text-xl">
+            <li
+                v-for="(skill, key) in skills"
+                :key="key"
+                class="flex flex-col items-center gap-1"
+            >
+                <FontAwesomeIcon :class="skill.class" :title="skill.title" size="xl" :icon="skill.faIcon"/>
+                <span class="text-xs">{{ skill.text }}</span>
+            </li>
+        </ul>
+        <div class="mt-3">
+            <h3 class="text-lg text-[#E57D4C] pb-1">Dodatkowo</h3>
+            <ul class="flex flex-row flex-wrap align-baseline gap-1">
+                <li v-for="(skill, key) in otherSkills" :key="key" class="border border-slate-200 rounded-md px-1.5 py-0.5 bg-white">{{ skill }}</li>
+            </ul>
+        </div>
+    </div>    
+</template>