kamilniemczycki/kamilcraft-cv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

- Added eslint and prettier

Browse Source 
* - add eslint and prettier

* - reformatted code

* - update readme
This commit is contained in:
Kamil Niemczycki 2023-08-07 11:20:58 +02:00
parent 20e6008b3d
commit 7a5412368f
Signed by: kamilniemczycki
GPG Key ID: 04D4E2012F969213
27 changed files with 2407 additions and 601 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
.eslintrc.cjs Normal file
View File

@ -0,0 +1,17 @@
module.exports = {
env: {
node: true,
},
extends: [
"eslint:recommended",
"plugin:vue/vue3-recommended",
"plugin:prettier/recommended",
],
plugins: ["vue", "html", "prettier"],
rules: {
"prettier/prettier": "error",
"vue/multi-word-component-names": 0,
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
},
};

1
.prettierrc.json Normal file
View File

@ -0,0 +1 @@
{}

15
README.md
View File

@ -15,6 +15,7 @@ npm install --legacy-peer-deps
``` ```
npm run dev npm run dev
``` ```
Application should be available under `127.0.0.1:5173` or `localhost:5173`. Application should be available under `127.0.0.1:5173` or `localhost:5173`.
### Compilation ### Compilation
@ -27,6 +28,14 @@ The executable files should be in the `dist` folder.
### Code formatting ### Code formatting
``` 1. Use the command to reformat all files in the project.
npm run lint
``` ```bash
npm run format
```
2. Use the command to display syntax errors.
```
npm run lint
```

14
index.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!doctype html>
<html lang="pl"> <html lang="pl">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<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" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<title>Kamil Niemczycki CV</title> <title>Kamil Niemczycki CV</title>
@ -10,8 +10,14 @@
<meta property="og:title" content="Kamil Niemczycki CV" /> <meta property="og:title" content="Kamil Niemczycki CV" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:image" content="https://cv.kamilcraft.com/me.webp" /> <meta property="og:image" content="https://cv.kamilcraft.com/me.webp" />
<meta property="og:description" content="Ambitny i nastawiony na cel, gotowy do podjęcia wyzwań absolwent informatyki, który szuka pierwszej pracy jako inżynier oprogramowania." /> <meta
<meta name="description" content="Ambitny i nastawiony na cel, gotowy do podjęcia wyzwań absolwent informatyki, który szuka pierwszej pracy jako inżynier oprogramowania." /> property="og:description"
content="Ambitny i nastawiony na cel, gotowy do podjęcia wyzwań absolwent informatyki, który szuka pierwszej pracy jako inżynier oprogramowania."
/>
<meta
name="description"
content="Ambitny i nastawiony na cel, gotowy do podjęcia wyzwań absolwent informatyki, który szuka pierwszej pracy jako inżynier oprogramowania."
/>
</head> </head>
<body class="min-h-screen"> <body class="min-h-screen">
<div id="cv"></div> <div id="cv"></div>

1687
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

13
package.json
View File

@ -6,7 +6,9 @@
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "vite build", "build": "vite build",
"preview": "vite preview" "preview": "vite preview",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
"format": "prettier . --write"
}, },
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.4.0", "@fortawesome/fontawesome-svg-core": "^6.4.0",
@ -21,8 +23,15 @@
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "^4.1.0", "@vitejs/plugin-vue": "^4.1.0",
"autoprefixer": "^10.4.14", "autoprefixer": "^10.4.14",
"eslint": "^8.46.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-html": "^7.1.0",
"eslint-plugin-prettier": "^5.0.0",
"eslint-plugin-vue": "^9.16.1",
"postcss": "^8.4.24", "postcss": "^8.4.24",
"prettier": "3.0.1",
"tailwindcss": "^3.3.2", "tailwindcss": "^3.3.2",
"vite": "^4.3.9" "vite": "^4.3.9",
"vite-plugin-eslint": "^1.8.1"
} }
} }

2
postcss.config.js
View File

@ -3,4 +3,4 @@ export default {
tailwindcss: {}, tailwindcss: {},
autoprefixer: {}, autoprefixer: {},
}, },
} };

29
src/App.vue
View File

@ -1,16 +1,30 @@
<script setup> <script setup>
import { computed } from 'vue'; import { computed } from "vue";
import { useRoute } from 'vue-router'; import { useRoute } from "vue-router";
const route = useRoute(); const route = useRoute();
const isErrorPage = computed(() => route.name === 'NotFound'); const isErrorPage = computed(() => route.name === "NotFound");
function print() { function print() {
window.print(); window.print();
} }
</script> </script>
<template>
<div v-if="!isErrorPage" 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-white">
<router-view />
</main>
</template>
<style lang="css"> <style lang="css">
.print-section { .print-section {
@apply text-center pt-5 pb-6; @apply text-center pt-5 pb-6;
@ -22,12 +36,3 @@ function print() {
} }
} }
</style> </style>
<template>
<div v-if="!isErrorPage" 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-white">
<router-view />
</main>
</template>

146
src/components/Body.vue
View File

@ -1,79 +1,95 @@
<script setup> <script setup>
import { computed, ref } from 'vue'; import { computed } from "vue";
import Education from './Body/Education.vue'; import Education from "./Body/Education.vue";
import MajorAchivments from './Body/MajorAchivments.vue'; import MajorAchivments from "./Body/MajorAchivments.vue";
import Skills from './Side/Skills.vue'; import Skills from "./Side/Skills.vue";
import Certificates from './Side/Certificates.vue'; import Certificates from "./Side/Certificates.vue";
import Links from './Side/Links.vue'; import Links from "./Side/Links.vue";
const props = defineProps({ const props = defineProps({
token: { token: {
type: String, type: String,
default: null, default: null,
}, },
rodo: { rodo: {
type: String, type: String,
default: null, default: null,
}, },
loading: { loading: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
}); });
const sourceCode = import.meta.env.VITE_SOURCE_CODE; const sourceCode = import.meta.env.VITE_SOURCE_CODE;
const qrCodeLink = computed(() => { const qrCodeLink = computed(() => {
const url = import.meta.env.VITE_CV_URL; const url = import.meta.env.VITE_CV_URL;
if(props.token) { if (props.token) {
return `${url}/show/${props.token}`; return `${url}/show/${props.token}`;
} }
return url; return url;
}); });
</script> </script>
<template> <template>
<div class="flex flex-col-reverse print:flex-row print:gap-1 md:flex-row md:gap-1"> <div
<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"> class="flex flex-col-reverse print:flex-row print:gap-1 md:flex-row md:gap-1"
<MajorAchivments /> >
<Education /> <div
<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]"> class="relative print:w-2/3 print:flex-shrink-0 md:w-2/3 pb-3 md:flex-shrink-0 pt-1 px-4"
<template v-if="!loading"> >
<template v-if="rodo"> <MajorAchivments />
{{ rodo }} <Education />
</template> <div
<template v-else> 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 <template v-if="!loading">
dnia 10 maja 2018 roku o ochronie danych osobowych (Dz. Ustaw z 2018, <template v-if="rodo">
poz. 1000) oraz zgodnie z Rozporządzeniem Parlamentu {{ rodo }}
Europejskiego i Rady (UE) 2016/679 z dnia 27 kwietnia 2016 r. w sprawie </template>
ochrony osób fizycznych w związku z przetwarzaniem danych <template v-else>
osobowych i w sprawie swobodnego przepływu takich danych oraz Wyrażam zgodę na przetwarzanie moich danych osobowych dla potrzeb
uchylenia dyrektywy 95/46/WE (RODO). niezbędnych do realizacji procesu rekrutacji (zgodnie z ustawą z
</template> dnia 10 maja 2018 roku o ochronie danych osobowych (Dz. Ustaw z
</template> 2018, poz. 1000) oraz zgodnie z Rozporządzeniem Parlamentu
</div> Europejskiego i Rady (UE) 2016/679 z dnia 27 kwietnia 2016 r. w
</div> sprawie ochrony osób fizycznych w związku z przetwarzaniem danych
<div class="relative print:w-1/3 print:flex-shrink-1 md:w-1/3 md:flex-shrink-1 bg-[#fff0e9]"> osobowych i w sprawie swobodnego przepływu takich danych oraz
<Skills /> uchylenia dyrektywy 95/46/WE (RODO).
<Certificates /> </template>
<Links class="pb-8 md:pb-0" /> </template>
<div class="hidden print:block print:absolute bottom-9 right-0 w-full"> </div>
<a :href="qrCodeLink" title="Link do CV w wersji przeglądarkowej" target="_blink">
<QRCode
render-as="svg"
class="mx-auto mb-1"
:value="qrCodeLink"
:size="100"
level="L"
background="transparent" />
</a>
<div class="text-center">CV w wersji online</div>
</div>
<div class="absolute bottom-1.5 right-0 w-full px-5 text-center text-xs">
<a :href="sourceCode" target="_blank"><FontAwesomeIcon class="mr-1" :icon="['fab', 'github']"/>Kod źródłowy CV</a>
</div>
</div>
</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 class="pb-8 md:pb-0" />
<div class="hidden print:block print:absolute bottom-9 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-1"
:value="qrCodeLink"
:size="100"
level="L"
background="transparent"
/>
</a>
<div class="text-center">CV w wersji online</div>
</div>
<div class="absolute bottom-1.5 right-0 w-full px-5 text-center text-xs">
<a :href="sourceCode" target="_blank"
><FontAwesomeIcon class="mr-1" :icon="['fab', 'github']" />Kod
źródłowy CV</a
>
</div>
</div>
</div>
</template> </template>

58
src/components/Body/Education.vue
View File

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

72
src/components/Body/MajorAchivments.vue
View File

@ -1,38 +1,40 @@
<template> <template>
<div class="px-1 py-2"> <div class="px-1 py-2">
<h2 class="text-xl text-[#E57D4C] pb-2">Doświadczenie</h2> <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"> <div class="pb-4 mb-4 border-b last:pb-0 last:mb-0 last:border-b-0">
<header class="relative mb-2"> <header class="relative mb-2">
<h3 class="text-base font-bold">Praktykant</h3> <h3 class="text-base font-bold">Praktykant</h3>
<span class="absolute top-0 right-0 text-base">06.2022 – 07.2022</span> <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> <span class="text-slate-500">Blumilk sp. z o.o.</span>
</header> </header>
<ul class="pl-5 list-disc"> <ul class="pl-5 list-disc">
<li>Tworzenie oprogramowania HR dla celów wewnętrznych firmy</li> <li>Tworzenie oprogramowania HR dla celów wewnętrznych firmy</li>
</ul> </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> </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> </template>

129
src/components/Header.vue
View File

@ -1,44 +1,78 @@
<script setup> <script setup>
import { useRoute } from 'vue-router'; import Mission from "./Header/Mission.vue";
import Mission from './Header/Mission.vue'; import ContactList from "./Header/ContactList.vue";
import ContactList from './Header/ContactList.vue';
defineProps({ defineProps({
loading: { loading: {
tyle: Boolean, type: Boolean,
default: false, default: false,
},
email: {
type: String,
default: "contact@kamilcraft.com",
},
tel: {
type: Object,
default() {
return {
hasPhoneNumber: false,
phoneNumber: "",
formattedPhoneNumber: "",
};
}, },
email: { },
type: String, locations: {
default: 'contact@kamilcraft.com', type: Array,
default() {
return ["Wrocław", "Legnica", "Remote"];
}, },
tel: { },
type: Object, position: {
default: { type: String,
hasPhoneNumber: false, default: null,
phoneNumber: '', },
formattedPhoneNumber: '', mission: {
}, type: Array,
}, default() {
locations: { return [];
type: Array,
default: [
'Wrocław',
'Legnica',
'Remote',
],
},
position: {
type: String,
default: null,
},
mission: {
type: Array,
default: [],
}, },
},
}); });
</script> </script>
<template>
<div
class="bg-blob 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>{{ position ?? "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 :mission="mission" :loading="loading" />
</template>
<style lang="css"> <style lang="css">
.animated-bg { .animated-bg {
animation-duration: 10s; animation-duration: 10s;
@ -55,37 +89,10 @@ defineProps({
@keyframes placeHolderShimmer { @keyframes placeHolderShimmer {
0% { 0% {
background-position: -800px 0 background-position: -800px 0;
} }
100% { 100% {
background-position: 800px 0 background-position: 800px 0;
} }
} }
</style> </style>
<template>
<div class="bg-blob 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>{{ position ?? '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 :mission="mission" :loading="loading" />
</template>

72
src/components/Header/ContactList.vue
View File

@ -1,41 +1,57 @@
<script setup> <script setup>
import { computed } from 'vue'; import { computed } from "vue";
const props = defineProps({ const props = defineProps({
loading: { loading: {
default: false, type: Boolean,
type: Boolean, default: false,
},
email: {
type: String,
default: "conact@kamilcraft.com",
},
tel: {
type: Object,
default() {
return {
hasPhoneNumber: false,
};
}, },
email: { },
default: 'conact@kamilcraft.com', locations: {
type: String, type: Array,
default() {
return [];
}, },
tel: { },
default: {
hasPhoneNumber: false,
},
type: Object,
},
locations: {
default: [],
type: Array,
}
}); });
const location = computed(() => { const location = computed(() => {
return props.locations.join(' / '); return props.locations.join(" / ");
}); });
</script> </script>
<template> <template>
<ul v-if="loading"> <ul v-if="loading">
<li class="animated-bg"></li> <li class="animated-bg"></li>
<li class="animated-bg"></li> <li class="animated-bg"></li>
<li class="animated-bg"></li> <li class="animated-bg"></li>
</ul> </ul>
<ul v-else> <ul v-else>
<li><FontAwesomeIcon class="w-5" :icon="['fas', 'envelope']" /> <a :href="`mailto:${email}`">{{ email }}</a></li> <li>
<li v-if="tel.hasPhoneNumber"><FontAwesomeIcon class="w-5" :icon="['fas', 'mobile-screen-button']" /><a :href="`tel:${tel.phoneNumber}`">{{ tel.formattedPhoneNumber }}</a></li> <FontAwesomeIcon class="w-5" :icon="['fas', 'envelope']" />
<li><FontAwesomeIcon class="w-5" :icon="['fas', 'location-dot']" />{{ location }}</li> <a :href="`mailto:${email}`">{{ email }}</a>
</ul> </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> </template>

50
src/components/Header/Mission.vue
View File

@ -1,23 +1,43 @@
<script setup> <script setup>
defineProps({ defineProps({
loading: { loading: {
type: Boolean, type: Boolean,
}, default: false,
mission: { },
type: Array, mission: {
type: Array,
default() {
return [];
}, },
},
}); });
</script> </script>
<template> <template>
<div v-if="loading" class="px-5 py-3 border-b"> <div v-if="loading" class="px-5 py-3 border-b">
<p v-for="key in [1, 2, 3]" :key="key" style="width:100%" class="mb-3 last-of-type:mb-0 animated-bg"></p> <p
</div> v-for="key in [1, 2, 3]"
<div v-else-if="mission.length === 0" class="px-5 py-3 border-b text-justify text-slate-600"> :key="key"
<p>Ambitny i nastawiony na cel, gotowy do podjęcia wyzwań absolwent informatyki, który szuka pierwszej pracy jako inżynier oprogramowania.</p> style="width: 100%"
<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> class="mb-3 last-of-type:mb-0 animated-bg"
</div> ></p>
<div v-else class="px-5 py-3 border-b text-justify text-slate-600"> </div>
<p v-for="(line, key) in mission" :key="key">{{ line }}</p> <div
</div> v-else-if="mission.length === 0"
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>
<div v-else class="px-5 py-3 border-b text-justify text-slate-600">
<p v-for="(line, key) in mission" :key="key">{{ line }}</p>
</div>
</template> </template>

55
src/components/Side/Certificates.vue
View File

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

21
src/components/Side/Links.vue
View File

@ -1,15 +1,16 @@
<script setup> <script setup>
import links from '../../composables/Links'; import links from "../../composables/Links";
</script> </script>
<template> <template>
<div class="px-4 py-3"> <div class="px-4 py-3">
<h2 class="text-xl text-[#E57D4C] pb-2">Znajdziesz mnie</h2> <h2 class="text-xl text-[#E57D4C] pb-2">Znajdziesz mnie</h2>
<ul class="flex flex-col gap-1"> <ul class="flex flex-col gap-1">
<li v-for="link in links" :key="link.slug"><a :href="link.url" <li v-for="link in links" :key="link.slug">
:title="link.title" <a :href="link.url" :title="link.title" target="_blink"
target="_blink" ><FontAwesomeIcon class="w-6" :icon="link.faIcon" />{{ link.text }}</a
><FontAwesomeIcon class="w-6" :icon="link.faIcon" />{{ link.text }}</a></li> >
</ul> </li>
</div> </ul>
</div>
</template> </template>

110
src/components/Side/Skills.vue
View File

@ -1,56 +1,70 @@
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from "vue";
import { skills as importSkills, otherSkills as importOtherSkills } from '../../composables/Skills.js'; import {
skills as importSkills,
otherSkills as importOtherSkills,
} from "../../composables/Skills.js";
const skills = ref(importSkills); const skills = ref(importSkills);
const otherSkills = ref(importOtherSkills); const otherSkills = ref(importOtherSkills);
</script> </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> <template>
<div class="px-4 py-3"> <div class="px-4 py-3">
<h2 class="text-xl text-[#E57D4C] pb-2">Główne umiejętności</h2> <h2 class="text-xl text-[#E57D4C] pb-2">Główne umiejętności</h2>
<ul class="grid grid-cols-4 justify-between align-baseline gap-2 text-xl"> <ul class="grid grid-cols-4 justify-between align-baseline gap-2 text-xl">
<li <li
v-for="(skill, key) in skills" v-for="(skill, key) in skills"
:key="key" :key="key"
class="flex flex-col items-center gap-1" class="flex flex-col items-center gap-1"
> >
<FontAwesomeIcon :class="skill.class" :title="skill.title" size="xl" :icon="skill.faIcon"/> <FontAwesomeIcon
<span class="text-xs">{{ skill.text }}</span> :class="skill.class"
</li> :title="skill.title"
</ul> size="xl"
<div class="mt-3"> :icon="skill.faIcon"
<h3 class="text-lg text-[#E57D4C] pb-1">Dodatkowo</h3> />
<ul class="flex flex-row flex-wrap align-baseline gap-0.5"> <span class="text-xs">{{ skill.text }}</span>
<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> </li>
</ul> </ul>
</div> <div class="mt-3">
</div> <h3 class="text-lg text-[#E57D4C] pb-1">Dodatkowo</h3>
<ul class="flex flex-row flex-wrap align-baseline gap-0.5">
<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> </template>
<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>

56
src/composables/Links.js
View File

@ -1,32 +1,32 @@
const links = [ const links = [
{ {
slug: 'kamilcraft', slug: "kamilcraft",
faIcon: ['fas', 'link'], faIcon: ["fas", "link"],
url: 'https://kamilcraft.com', url: "https://kamilcraft.com",
title: 'Moja strona', title: "Moja strona",
text: 'kamilcraft.com', text: "kamilcraft.com",
}, },
{ {
slug: 'linkedin', slug: "linkedin",
faIcon: ['fab', 'linkedin'], faIcon: ["fab", "linkedin"],
url: 'https://www.linkedin.com/in/kamilniemczycki/', url: "https://www.linkedin.com/in/kamilniemczycki/",
title: 'Mój LinkedIn', title: "Mój LinkedIn",
text: '/in/kamilniemczycki', text: "/in/kamilniemczycki",
}, },
{ {
slug: 'gitea', slug: "gitea",
faIcon: ['fas', 'arrow-up-right-from-square'], faIcon: ["fas", "arrow-up-right-from-square"],
url: 'https://git.kamilcraft.com/kamilniemczycki', url: "https://git.kamilcraft.com/kamilniemczycki",
title: 'Prywatny serwer git', title: "Prywatny serwer git",
text: 'git.kamilcraft.com', text: "git.kamilcraft.com",
}, },
{ {
slug: 'github', slug: "github",
faIcon: ['fab', 'github'], faIcon: ["fab", "github"],
url: 'https://github.com/kamilniemczycki', url: "https://github.com/kamilniemczycki",
title: 'Mój GitHub', title: "Mój GitHub",
text: '/kamilniemczycki', text: "/kamilniemczycki",
}, },
]; ];
export default links; export default links;

131
src/composables/Skills.js
View File

@ -1,73 +1,70 @@
const skills = [ const skills = [
{ {
class: 'linux', class: "linux",
faIcon: ['fab', 'linux'], faIcon: ["fab", "linux"],
title: 'Ikona Linux', title: "Ikona Linux",
text: 'GNU/Linux', text: "GNU/Linux",
}, },
{ {
class: 'git', class: "git",
faIcon: ['fab', 'git'], faIcon: ["fab", "git"],
title: 'Ikona Git', title: "Ikona Git",
text: 'Git', text: "Git",
}, },
{ {
class: 'php', class: "php",
faIcon: ['fab', 'php'], faIcon: ["fab", "php"],
title: 'Ikona PHP', title: "Ikona PHP",
text: 'PHP 7/8', text: "PHP 7/8",
}, },
{ {
class: 'laravel', class: "laravel",
faIcon: ['fab', 'laravel'], faIcon: ["fab", "laravel"],
title: 'Ikona Laravel', title: "Ikona Laravel",
text: 'Laravel', text: "Laravel",
}, },
{ {
class: 'js', class: "js",
faIcon: ['fab', 'js'], faIcon: ["fab", "js"],
title: 'Ikona JavaScript', title: "Ikona JavaScript",
text: 'JavaScript', text: "JavaScript",
}, },
{ {
class: 'vuejs', class: "vuejs",
faIcon: ['fab', 'vuejs'], faIcon: ["fab", "vuejs"],
title: 'Ikona Vue.js', title: "Ikona Vue.js",
text: 'Vue.js', text: "Vue.js",
}, },
{ {
class: 'html5', class: "html5",
faIcon: ['fab', 'html5'], faIcon: ["fab", "html5"],
title: 'Ikona HTML 5', title: "Ikona HTML 5",
text: 'HTML', text: "HTML",
}, },
{ {
class: 'css3-alt', class: "css3-alt",
faIcon: ['fab', 'css3-alt'], faIcon: ["fab", "css3-alt"],
title: 'Ikona CSS 3', title: "Ikona CSS 3",
text: 'CSS', text: "CSS",
}, },
]; ];
const otherSkills = [ const otherSkills = [
'Composer', "Composer",
'GitHub', "GitHub",
'VSC', "VSC",
'PhpStorm', "PhpStorm",
'WebStorm', "WebStorm",
'Node.js', "Node.js",
'NPM', "NPM",
'Sqlite', "Sqlite",
'MySQL', "MySQL",
'Docker', "Docker",
'WSL', "WSL",
'LXC/LXD', "LXC/LXD",
'REST', "REST",
'RWD', "RWD",
'i więcej...', "i więcej...",
]; ];
export { export { skills, otherSkills };
skills,
otherSkills,
};

28
src/main.js
View File

@ -1,19 +1,19 @@
import { createApp } from 'vue'; import { createApp } from "vue";
import './style.css'; import "./style.css";
import App from './App.vue'; import App from "./App.vue";
import router from './router.js'; import router from "./router.js";
import { library } from '@fortawesome/fontawesome-svg-core'; import { library } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { fas } from '@fortawesome/free-solid-svg-icons'; import { fas } from "@fortawesome/free-solid-svg-icons";
import { fab } from '@fortawesome/free-brands-svg-icons'; import { fab } from "@fortawesome/free-brands-svg-icons";
import { far } from '@fortawesome/free-regular-svg-icons'; import { far } from "@fortawesome/free-regular-svg-icons";
import QrcodeVue from 'qrcode.vue'; import QrcodeVue from "qrcode.vue";
library.add(fas, fab, far); library.add(fas, fab, far);
createApp(App) createApp(App)
.use(router) .use(router)
.component('FontAwesomeIcon', FontAwesomeIcon) .component("FontAwesomeIcon", FontAwesomeIcon)
.component('QRCode', QrcodeVue) .component("QRCode", QrcodeVue)
.mount('#cv'); .mount("#cv");

44
src/router.js
View File

@ -1,26 +1,26 @@
import { createRouter, createWebHistory } from 'vue-router'; import { createRouter, createWebHistory } from "vue-router";
const Home = () => import('./views/Home.vue'); const Home = () => import("./views/Home.vue");
const Show = () => import('./views/Show.vue'); const Show = () => import("./views/Show.vue");
const NotFound = () => import('./views/NotFound.vue'); const NotFound = () => import("./views/NotFound.vue");
export default createRouter({ export default createRouter({
history: createWebHistory(), history: createWebHistory(),
routes: [ routes: [
{ {
path: '/', path: "/",
name: 'Home', name: "Home",
component: Home, component: Home,
}, },
{ {
path: '/show/:token', path: "/show/:token",
name: 'Show', name: "Show",
component: Show, component: Show,
}, },
{ {
path: '/:pathMatch(.*)*', path: "/:pathMatch(.*)*",
name: 'NotFound', name: "NotFound",
component: NotFound component: NotFound,
}, },
], ],
}); });

76
src/style.css
View File

@ -1,65 +1,67 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap'); @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap");
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@layer base { @layer base {
body { body {
@apply text-sm text-slate-700; @apply text-sm text-slate-700;
font-family: 'Roboto', sans-serif; font-family: "Roboto", sans-serif;
} }
} }
.bg-blob { .bg-blob {
background-image: var(--theme-bg-blob); background-image: var(--theme-bg-blob);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 170px; background-size: 170px;
background-position: -25px -22px; background-position: -25px -22px;
} }
main { main {
max-width: 21cm; max-width: 21cm;
margin: 0 auto; margin: 0 auto;
border: 1px solid #dddddd; border: 1px solid #dddddd;
-webkit-print-color-adjust: exact; -webkit-print-color-adjust: exact;
print-color-adjust: exact; print-color-adjust: exact;
} }
:root { :root {
--theme-bg-blob: url('data:image/svg+xml;base64,PCEtLT94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/LS0+CjxzdmcgaWQ9InN3LWpzLWJsb2Itc3ZnIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiPgoJPGRlZnM+IAoJCTxsaW5lYXJHcmFkaWVudCBpZD0ic3ctZ3JhZGllbnQiIHgxPSIwIiB4Mj0iMSIgeTE9IjEiIHkyPSIwIj4KCQkJPHN0b3AgaWQ9InN0b3AxIiBzdG9wLWNvbG9yPSJyZ2JhKDIyOC44ODgsIDEyNS4zMzQsIDc2LjMyMywgMSkiIG9mZnNldD0iMCUiPjwvc3RvcD4KCQkJPHN0b3AgaWQ9InN0b3AyIiBzdG9wLWNvbG9yPSJyZ2JhKDIxNS4yMjcsIDE4Ny42OTMsIDE0Mi4yNDUsIDEpIiBvZmZzZXQ9IjEwMCUiPjwvc3RvcD4KCQk8L2xpbmVhckdyYWRpZW50PgoJPC9kZWZzPgoJPHBhdGggZmlsbD0idXJsKCNzdy1ncmFkaWVudCkiIGQ9Ik0xOC45LC0yMi42QzI1LjksLTE2LjYsMzQsLTEyLDM2LjgsLTUuMkMzOS41LDEuNywzNywxMC44LDMyLjcsMTkuN0MyOC41LDI4LjYsMjIuNiwzNy4zLDE0LjgsMzkuOEM2LjksNDIuMywtMi45LDM4LjUsLTExLjcsMzQuNEMtMjAuNiwzMC4yLC0yOC42LDI1LjcsLTMxLjksMTguOUMtMzUuMywxMi4yLC0zNCwzLjIsLTMyLC01LjJDLTMwLC0xMy43LC0yNy40LC0yMS42LC0yMS45LC0yNy43Qy0xNi41LC0zMy45LC04LjIsLTM4LjQsLTEuMSwtMzdDNS45LC0zNS42LDExLjksLTI4LjUsMTguOSwtMjIuNloiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUwIDUwKSIgc3Ryb2tlLXdpZHRoPSIwIiBzdHlsZT0idHJhbnNpdGlvbjogYWxsIDAuM3MgZWFzZSAwczsiPjwvcGF0aD4KPC9zdmc+'); --theme-bg-blob: url("data:image/svg+xml;base64,PCEtLT94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/LS0+CjxzdmcgaWQ9InN3LWpzLWJsb2Itc3ZnIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiPgoJPGRlZnM+IAoJCTxsaW5lYXJHcmFkaWVudCBpZD0ic3ctZ3JhZGllbnQiIHgxPSIwIiB4Mj0iMSIgeTE9IjEiIHkyPSIwIj4KCQkJPHN0b3AgaWQ9InN0b3AxIiBzdG9wLWNvbG9yPSJyZ2JhKDIyOC44ODgsIDEyNS4zMzQsIDc2LjMyMywgMSkiIG9mZnNldD0iMCUiPjwvc3RvcD4KCQkJPHN0b3AgaWQ9InN0b3AyIiBzdG9wLWNvbG9yPSJyZ2JhKDIxNS4yMjcsIDE4Ny42OTMsIDE0Mi4yNDUsIDEpIiBvZmZzZXQ9IjEwMCUiPjwvc3RvcD4KCQk8L2xpbmVhckdyYWRpZW50PgoJPC9kZWZzPgoJPHBhdGggZmlsbD0idXJsKCNzdy1ncmFkaWVudCkiIGQ9Ik0xOC45LC0yMi42QzI1LjksLTE2LjYsMzQsLTEyLDM2LjgsLTUuMkMzOS41LDEuNywzNywxMC44LDMyLjcsMTkuN0MyOC41LDI4LjYsMjIuNiwzNy4zLDE0LjgsMzkuOEM2LjksNDIuMywtMi45LDM4LjUsLTExLjcsMzQuNEMtMjAuNiwzMC4yLC0yOC42LDI1LjcsLTMxLjksMTguOUMtMzUuMywxMi4yLC0zNCwzLjIsLTMyLC01LjJDLTMwLC0xMy43LC0yNy40LC0yMS42LC0yMS45LC0yNy43Qy0xNi41LC0zMy45LC04LjIsLTM4LjQsLTEuMSwtMzdDNS45LC0zNS42LDExLjksLTI4LjUsMTguOSwtMjIuNloiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUwIDUwKSIgc3Ryb2tlLXdpZHRoPSIwIiBzdHlsZT0idHJhbnNpdGlvbjogYWxsIDAuM3MgZWFzZSAwczsiPjwvcGF0aD4KPC9zdmc+");
--theme-bg-gradient: url('/background/gradient.webp'); --theme-bg-gradient: url("/background/gradient.webp");
--theme-bg-grain: url('/background/grain.webp'); --theme-bg-grain: url("/background/grain.webp");
} }
a { a {
@apply underline; @apply underline;
} }
@media screen { @media screen {
body { body {
background-image: var(--theme-bg-grain), var(--theme-bg-gradient); background-image: var(--theme-bg-grain), var(--theme-bg-gradient);
background-position: top, top; background-position: top, top;
background-size: 75px, 100% 100%; background-size:
} 75px,
#cv { 100% 100%;
@apply px-3 py-2; }
} #cv {
@apply px-3 py-2;
}
} }
@page { @page {
size: A4; size: A4;
margin: 0; margin: 0;
appearance: none; appearance: none;
-moz-appearance: none; -moz-appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
} }
@media print { @media print {
main { main {
@apply border-0 w-[21cm] h-[29.7cm]; @apply border-0 w-[21cm] h-[29.7cm];
} }
a { a {
@apply no-underline; @apply no-underline;
} }
} }

15
src/views/Home.vue
View File

@ -1,12 +1,11 @@
<script setup> <script setup>
import { useRoute } from 'vue-router'; import Header from "../components/Header.vue";
import Header from '../components/Header.vue'; import Body from "../components/Body.vue";
import Body from '../components/Body.vue';
</script> </script>
<template> <template>
<div class="grid grid-rows-[max-content_max-content_auto] h-full"> <div class="grid grid-rows-[max-content_max-content_auto] h-full">
<Header /> <Header />
<Body /> <Body />
</div> </div>
</template> </template>

20
src/views/NotFound.vue
View File

@ -1,14 +1,8 @@
<script setup>
import { useRoute } from 'vue-router';
import Header from '../components/Header.vue';
import Body from '../components/Body.vue';
</script>
<template> <template>
<div class="grid grid-rows-[max-content_max-content_auto] h-full px-5 py-4"> <div class="grid grid-rows-[max-content_max-content_auto] h-full px-5 py-4">
<header> <header>
<h1 class="text-3xl mb-4">Błąd 404</h1> <h1 class="text-3xl mb-4">Błąd 404</h1>
</header> </header>
<p>Strona nie została znaleziona.</p> <p>Strona nie została znaleziona.</p>
</div> </div>
</template> </template>

131
src/views/Show.vue
View File

@ -1,87 +1,88 @@
<script setup> <script setup>
import { onMounted, ref, reactive } from 'vue'; import { onMounted, ref, reactive } from "vue";
import { useRoute } from 'vue-router'; import { useRoute } from "vue-router";
import Header from '../components/Header.vue'; import Header from "../components/Header.vue";
import Body from '../components/Body.vue'; import Body from "../components/Body.vue";
const loading = ref(false); const loading = ref(false);
const token = ref(null); const token = ref(null);
const email = ref('contact@kamilcraft.com'); const email = ref("contact@kamilcraft.com");
const tel = reactive({ const tel = reactive({
hasPhoneNumber: false, hasPhoneNumber: false,
phoneNumber: '', phoneNumber: "",
formattedPhoneNumber: '', formattedPhoneNumber: "",
}); });
const locations = reactive([ const locations = reactive(["Wrocław", "Legnica", "Remote"]);
'Wrocław',
'Legnica',
'Remote',
]);
const position = ref(null); const position = ref(null);
const mission = reactive([]); const mission = reactive([]);
const rodo = ref(null); const rodo = ref(null);
onMounted(() => { onMounted(() => {
const router = useRoute(); const router = useRoute();
token.value = router.params['token'] ?? null; token.value = router.params["token"] ?? null;
if (token.value) { if (token.value) {
loading.value = true; loading.value = true;
const apiUrl = import.meta.env.VITE_API_URL; const apiUrl = import.meta.env.VITE_API_URL;
fetch(`${apiUrl}/v1/cv/${token.value}`, { fetch(`${apiUrl}/v1/cv/${token.value}`, {
method: 'GET', method: "GET",
cache: "no-cache", cache: "no-cache",
credentials: "same-origin", credentials: "same-origin",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
} },
}).then(response => (response.json().then(data => ({ status: response.status, data })))) })
.then(response => { .then((response) =>
setTimeout(() => showData(response), 1000); response.json().then((data) => ({ status: response.status, data })),
}) )
.catch(() => { .then((response) => {
loading.value = false; setTimeout(() => showData(response), 1000);
}); })
} .catch(() => {
loading.value = false;
});
}
}); });
function showData(response) { function showData(response) {
if (response.status === 200) { if (response.status === 200) {
const data = response.data; const data = response.data;
email.value = data.email; email.value = data.email;
tel.hasPhoneNumber = true; tel.hasPhoneNumber = true;
tel.phoneNumber = data.phone.number; tel.phoneNumber = data.phone.number;
tel.formattedPhoneNumber = data.phone.formattedNumber; tel.formattedPhoneNumber = data.phone.formattedNumber;
while(locations.length > 0) { while (locations.length > 0) {
locations.pop(); locations.pop();
}
if (data.position) {
position.value = data.position;
}
data.locations?.forEach(value => {
locations.push(value);
});
data.mission?.forEach(value => {
mission.push(value);
});
if (data.rodo) {
rodo.value = data.rodo;
}
loading.value = false;
} }
if (data.position) {
position.value = data.position;
}
data.locations?.forEach((value) => {
locations.push(value);
});
data.mission?.forEach((value) => {
mission.push(value);
});
if (data.rodo) {
rodo.value = data.rodo;
}
loading.value = false;
}
} }
</script> </script>
<template> <template>
<div class="grid grid-rows-[max-content_max-content_auto] h-full"> <div class="grid grid-rows-[max-content_max-content_auto] h-full">
<Header :loading="loading" <Header
:email="email" :loading="loading"
:tel="tel" :email="email"
:locations="locations" :tel="tel"
:position="position" :locations="locations"
:mission="mission" /> :position="position"
<Body :token="token" :rodo="rodo" :loading="loading" /> :mission="mission"
</div> />
</template> <Body :token="token" :rodo="rodo" :loading="loading" />
</div>
</template>

8
tailwind.config.js
View File

@ -1,12 +1,8 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
export default { export default {
content: [ content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: { theme: {
extend: {}, extend: {},
}, },
plugins: [], plugins: [],
} };

8
vite.config.js
View File

@ -1,5 +1,5 @@
import { defineConfig, loadEnv, splitVendorChunkPlugin } from 'vite'; import { defineConfig, loadEnv, splitVendorChunkPlugin } from "vite";
import vue from '@vitejs/plugin-vue'; import vue from "@vitejs/plugin-vue";
export default defineConfig((mode) => { export default defineConfig((mode) => {
const env = loadEnv(mode, process.cwd(), ""); const env = loadEnv(mode, process.cwd(), "");
@ -7,9 +7,9 @@ export default defineConfig((mode) => {
server: { server: {
port: parseInt(env.VITE_PORT ?? 5173), port: parseInt(env.VITE_PORT ?? 5173),
}, },
plugins: [ vue(), splitVendorChunkPlugin() ], plugins: [vue(), splitVendorChunkPlugin()],
resolve: { resolve: {
vue: 'vue/dist/vue.esm-bundler.js', vue: "vue/dist/vue.esm-bundler.js",
}, },
}; };
}); });