init project

2023-07-02 21:23:27 +02:00 · 2023-07-02 21:23:27 +02:00 · 03a8a0eef5
commit 03a8a0eef5
30 changed files with 2609 additions and 0 deletions
--- a/.env.example
+++ b/.env.example
@ -0,0 +1,2 @@
+VITE_APP_NAME="Kamil Niemczycki CV"
+VITE_API_URL="http://localhost"
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.env
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}
--- a/README.md
+++ b/README.md
@ -0,0 +1,7 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
--- a/index.html
+++ b/index.html
@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="pl">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <title>Kamil Niemczycki CV</title>
+  </head>
+  <body>
+    <div id="cv"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,28 @@
+{
+  "name": "cv",
+  "private": true,
+  "version": "v1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-brands-svg-icons": "^6.4.0",
+    "@fortawesome/free-regular-svg-icons": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/vue-fontawesome": "^3.0.3",
+    "qrcode.vue": "^3.4.0",
+    "vue": "^3.2.47",
+    "vue-router": "^4.2.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.1.0",
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.24",
+    "tailwindcss": "^3.3.2",
+    "vite": "^4.3.9"
+  }
+}
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/public/background/gradient.webp
+++ b/public/background/gradient.webp
--- a/public/background/grain.webp
+++ b/public/background/grain.webp
--- a/public/me.webp
+++ b/public/me.webp
--- a/public/vite.svg
+++ b/public/vite.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,26 @@
+<script setup>
+function print() {
+  window.print();
+}
+</script>
+
+<style lang="css">
+.print-section {
+  @apply text-center pt-5 pb-6;
+}
+
+@media print {
+  .print-section {
+    @apply hidden;
+  }
+}
+</style>
+
+<template>
+  <div class="print-section">
+    <button class="px-4 py-2 w-full sm:w-80 font-semibold text-sm bg-orange-300 text-orange-700 rounded-full shadow-sm" @click="print">Drukuj CV</button>
+  </div>
+  <main class="main bg-blob">
+    <router-view />
+  </main>
+</template>
--- a/src/assets/vue.svg
+++ b/src/assets/vue.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
--- a/src/components/Body.vue
+++ b/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>
--- a/src/components/Certificates.vue
+++ b/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>
--- a/src/components/ContactList.vue
+++ b/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>
--- a/src/components/Education.vue
+++ b/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>
--- a/src/components/Header.vue
+++ b/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>
--- a/src/components/Links.vue
+++ b/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>
--- a/src/components/MajorAchivments.vue
+++ b/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>
--- a/src/components/Mission.vue
+++ b/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>
--- a/src/components/Skills.vue
+++ b/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>
--- a/src/composables/Skills.js
+++ b/src/composables/Skills.js
@ -0,0 +1,68 @@
+const skills = [
+    {
+        class: 'php',
+        faIcon: ['fab', 'php'],
+        title: 'PHP Icon',
+        text: 'PHP 7/8',
+    },
+    {
+        class: 'laravel',
+        faIcon: ['fab', 'laravel'],
+        title: 'Laravel Icon',
+        text: 'Laravel',
+    },
+    {
+        class: 'js',
+        faIcon: ['fab', 'js'],
+        title: 'JavaScript Icon',
+        text: 'JavaScript',
+    },
+    {
+        class: 'vuejs',
+        faIcon: ['fab', 'vuejs'],
+        title: 'Vue.js Icon',
+        text: 'Vue.js',
+    },
+    {
+        class: 'html5',
+        faIcon: ['fab', 'html5'],
+        title: 'HTML 5 Icon',
+        text: 'HTML',
+    },
+    {
+        class: 'css3-alt',
+        faIcon: ['fab', 'css3-alt'],
+        title: 'CSS 3 Icon',
+        text: 'CSS',
+    },
+    {
+        class: 'git',
+        faIcon: ['fab', 'git'],
+        title: 'Git Icon',
+        text: 'Git',
+    },
+    {
+        class: 'linux',
+        faIcon: ['fab', 'linux'],
+        title: 'Linux Icon',
+        text: 'GNU/Linux',
+    },
+];
+
+const otherSkills = [
+    'Composer',
+    'GitHub',
+    'Node.js',
+    'NPM',
+    'Sqlite',
+    'MySQL',
+    'Docker',
+    'WSL',
+    'LXC/LXD',
+    'i więcej?',
+];
+
+export {
+    skills,
+    otherSkills,
+};
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,19 @@
+import { createApp } from 'vue';
+import './style.css';
+import App from './App.vue';
+import router from './router.js';
+
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+import { fab } from '@fortawesome/free-brands-svg-icons';
+import { far } from '@fortawesome/free-regular-svg-icons';
+import QrcodeVue from 'qrcode.vue';
+
+library.add(fas, fab, far);
+
+createApp(App)
+    .use(router)
+    .component('FontAwesomeIcon', FontAwesomeIcon)
+    .component('QRCode', QrcodeVue)
+    .mount('#cv');
--- a/src/router.js
+++ b/src/router.js
@ -0,0 +1,16 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import Home from './views/Home.vue';
+
+export default createRouter({
+    history: createWebHistory(),
+    routes: [
+        {
+            path: '/',
+            component: Home,
+        },
+        {
+            path: '/show/:token',
+            component: Home,
+        }
+    ],
+});
--- a/src/style.css
+++ b/src/style.css
@ -0,0 +1,66 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    body {
+        @apply text-sm text-slate-700;
+        font-family: 'Roboto', sans-serif;
+    }
+}
+
+.bg-blob {
+    background-image: var(--theme-bg-blob);
+    background-color: white;
+    background-repeat: no-repeat;
+    background-size: 170px;
+    background-position: -25px -22px;
+}
+
+main {
+    max-width: 21cm;
+    margin: 0 auto;
+    border: 1px solid #dddddd;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+}
+
+:root {
+    --theme-bg-blob: url('data:image/svg+xml;base64,PCEtLT94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/LS0+CjxzdmcgaWQ9InN3LWpzLWJsb2Itc3ZnIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiPgoJPGRlZnM+IAoJCTxsaW5lYXJHcmFkaWVudCBpZD0ic3ctZ3JhZGllbnQiIHgxPSIwIiB4Mj0iMSIgeTE9IjEiIHkyPSIwIj4KCQkJPHN0b3AgaWQ9InN0b3AxIiBzdG9wLWNvbG9yPSJyZ2JhKDIyOC44ODgsIDEyNS4zMzQsIDc2LjMyMywgMSkiIG9mZnNldD0iMCUiPjwvc3RvcD4KCQkJPHN0b3AgaWQ9InN0b3AyIiBzdG9wLWNvbG9yPSJyZ2JhKDIxNS4yMjcsIDE4Ny42OTMsIDE0Mi4yNDUsIDEpIiBvZmZzZXQ9IjEwMCUiPjwvc3RvcD4KCQk8L2xpbmVhckdyYWRpZW50PgoJPC9kZWZzPgoJPHBhdGggZmlsbD0idXJsKCNzdy1ncmFkaWVudCkiIGQ9Ik0xOC45LC0yMi42QzI1LjksLTE2LjYsMzQsLTEyLDM2LjgsLTUuMkMzOS41LDEuNywzNywxMC44LDMyLjcsMTkuN0MyOC41LDI4LjYsMjIuNiwzNy4zLDE0LjgsMzkuOEM2LjksNDIuMywtMi45LDM4LjUsLTExLjcsMzQuNEMtMjAuNiwzMC4yLC0yOC42LDI1LjcsLTMxLjksMTguOUMtMzUuMywxMi4yLC0zNCwzLjIsLTMyLC01LjJDLTMwLC0xMy43LC0yNy40LC0yMS42LC0yMS45LC0yNy43Qy0xNi41LC0zMy45LC04LjIsLTM4LjQsLTEuMSwtMzdDNS45LC0zNS42LDExLjksLTI4LjUsMTguOSwtMjIuNloiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUwIDUwKSIgc3Ryb2tlLXdpZHRoPSIwIiBzdHlsZT0idHJhbnNpdGlvbjogYWxsIDAuM3MgZWFzZSAwczsiPjwvcGF0aD4KPC9zdmc+');
+    --theme-bg-gradient: url('/background/gradient.webp');
+    --theme-bg-grain: url('/background/grain.webp');
+}
+
+a {
+    @apply underline;
+}
+
+@media screen {
+    body {
+        background-image: var(--theme-bg-grain), var(--theme-bg-gradient);
+        background-position: top, top;
+        background-size: 75px, 100% 100%;
+    }
+    #cv {
+        @apply px-3 py-2;
+    }
+}
+
+@page {
+    size: A4;
+    margin: 0;
+    appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+}
+
+@media print {
+    main {
+        @apply border-0 w-[21cm] h-[29.7cm];
+    }
+    a {
+        @apply no-underline;
+    }
+}
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@ -0,0 +1,72 @@
+<script setup>
+import { onMounted, ref, reactive } from 'vue';
+import { useRoute } from 'vue-router';
+import Header from '../components/Header.vue';
+import Body from '../components/Body.vue';
+
+const loading = ref(false);
+const token = ref(null);
+const email = ref('contact@kamilcraft.com');
+const tel = reactive({
+    hasPhoneNumber: false,
+    phoneNumber: '',
+    formattedPhoneNumber: '',
+});
+
+const locations = reactive([
+    'Wrocław',
+    'Legnica',
+    'Remote',
+]);
+
+onMounted(() => {
+    const router = useRoute();
+    token.value = router.params['token'] ?? null;
+
+    if (token.value) {
+        loading.value = true;
+        const apiUrl = import.meta.env.VITE_API_URL;
+        fetch(`${apiUrl}/v1/cv/${token.value}`, {
+            method: 'GET',
+            cache: "no-cache",
+            credentials: "same-origin",
+            headers: {
+                "Content-Type": "application/json",
+            }
+        }).then(response => (response.json().then(data => ({ status: response.status, data }))))
+            .then(response => {
+                setTimeout(() => showData(response), 1000);
+            })
+            .catch(() => {
+                loading.value = false;
+            });
+    }
+});
+
+function showData(response) {
+    if (response.status === 200) {
+        const data = response.data;
+        email.value = data.email;
+        tel.hasPhoneNumber = true;
+        tel.phoneNumber = data.phoneNumber;
+        tel.formattedPhoneNumber = data.formattedPhoneNumber;
+        while(locations.length > 0) {
+            locations.pop();
+        }
+        data.locations?.forEach(value => {
+            locations.push(value);
+        });
+        loading.value = false;
+    }
+}
+</script>
+
+<template>
+    <div class="grid grid-rows-[max-content_max-content_auto] h-full">
+        <Header :loading="loading"
+                :email="email"
+                :tel="tel"
+                :locations="locations" />
+        <Body :token="token" />
+    </div>
+</template>
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,13 @@
+import { defineConfig, splitVendorChunkPlugin } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [ vue(), splitVendorChunkPlugin() ],
+  resolve: {
+    vue: 'vue/dist/vue.esm-bundler.js',
+  },
+  build: {
+    chunkSizeWarningLimit: 2048,
+  },
+});
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>`