- Added eslint and prettier
* - add eslint and prettier * - reformatted code * - update readme
This commit is contained in:
parent
20e6008b3d
commit
7a5412368f
GPG Key ID:
04D4E2012F969213
17
.eslintrc.cjs
Normal file
17
.eslintrc.cjs
Normal 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
1
.prettierrc.json
Normal file
@ -0,0 +1 @@
|
||||
{}
|
||||
15
README.md
15
README.md
@ -15,6 +15,7 @@ npm install --legacy-peer-deps
|
||||
```
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Application should be available under `127.0.0.1:5173` or `localhost:5173`.
|
||||
|
||||
### Compilation
|
||||
@ -27,6 +28,14 @@ The executable files should be in the `dist` folder.
|
||||
|
||||
### Code formatting
|
||||
|
||||
```
|
||||
npm run lint
|
||||
```
|
||||
1. Use the command to reformat all files in the project.
|
||||
|
||||
```bash
|
||||
npm run format
|
||||
```
|
||||
|
||||
2. Use the command to display syntax errors.
|
||||
|
||||
```
|
||||
npm run lint
|
||||
```
|
||||
|
||||
14
index.html
14
index.html
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<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" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<title>Kamil Niemczycki CV</title>
|
||||
@ -10,8 +10,14 @@
|
||||
<meta property="og:title" content="Kamil Niemczycki CV" />
|
||||
<meta property="og:type" content="website" />
|
||||
<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 name="description" content="Ambitny i nastawiony na cel, gotowy do podjęcia wyzwań absolwent informatyki, który szuka pierwszej pracy jako inżynier oprogramowania." />
|
||||
<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
|
||||
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>
|
||||
<body class="min-h-screen">
|
||||
<div id="cv"></div>
|
||||
|
||||
1687
package-lock.json
generated
1687
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
13
package.json
13
package.json
@ -6,7 +6,9 @@
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
|
||||
"format": "prettier . --write"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^6.4.0",
|
||||
@ -21,8 +23,15 @@
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.1.0",
|
||||
"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",
|
||||
"prettier": "3.0.1",
|
||||
"tailwindcss": "^3.3.2",
|
||||
"vite": "^4.3.9"
|
||||
"vite": "^4.3.9",
|
||||
"vite-plugin-eslint": "^1.8.1"
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,4 +3,4 @@ export default {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
29
src/App.vue
29
src/App.vue
@ -1,16 +1,30 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { computed } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
const isErrorPage = computed(() => route.name === 'NotFound');
|
||||
const isErrorPage = computed(() => route.name === "NotFound");
|
||||
|
||||
function print() {
|
||||
window.print();
|
||||
}
|
||||
</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">
|
||||
.print-section {
|
||||
@apply text-center pt-5 pb-6;
|
||||
@ -22,12 +36,3 @@ function print() {
|
||||
}
|
||||
}
|
||||
</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>
|
||||
|
||||
@ -1,79 +1,95 @@
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import Education from './Body/Education.vue';
|
||||
import MajorAchivments from './Body/MajorAchivments.vue';
|
||||
import Skills from './Side/Skills.vue';
|
||||
import Certificates from './Side/Certificates.vue';
|
||||
import Links from './Side/Links.vue';
|
||||
import { computed } from "vue";
|
||||
import Education from "./Body/Education.vue";
|
||||
import MajorAchivments from "./Body/MajorAchivments.vue";
|
||||
import Skills from "./Side/Skills.vue";
|
||||
import Certificates from "./Side/Certificates.vue";
|
||||
import Links from "./Side/Links.vue";
|
||||
|
||||
const props = defineProps({
|
||||
token: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
rodo: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
token: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
rodo: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const sourceCode = import.meta.env.VITE_SOURCE_CODE;
|
||||
|
||||
const qrCodeLink = computed(() => {
|
||||
const url = import.meta.env.VITE_CV_URL;
|
||||
if(props.token) {
|
||||
return `${url}/show/${props.token}`;
|
||||
}
|
||||
return url;
|
||||
const url = import.meta.env.VITE_CV_URL;
|
||||
if (props.token) {
|
||||
return `${url}/show/${props.token}`;
|
||||
}
|
||||
return url;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col-reverse print:flex-row print:gap-1 md:flex-row md:gap-1">
|
||||
<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]">
|
||||
<template v-if="!loading">
|
||||
<template v-if="rodo">
|
||||
{{ rodo }}
|
||||
</template>
|
||||
<template v-else>
|
||||
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).
|
||||
</template>
|
||||
</template>
|
||||
</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
|
||||
class="flex flex-col-reverse print:flex-row print:gap-1 md:flex-row md:gap-1"
|
||||
>
|
||||
<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]"
|
||||
>
|
||||
<template v-if="!loading">
|
||||
<template v-if="rodo">
|
||||
{{ rodo }}
|
||||
</template>
|
||||
<template v-else>
|
||||
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).
|
||||
</template>
|
||||
</template>
|
||||
</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>
|
||||
|
||||
@ -1,27 +1,37 @@
|
||||
<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 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>
|
||||
|
||||
@ -1,38 +1,40 @@
|
||||
<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 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>
|
||||
|
||||
@ -1,44 +1,78 @@
|
||||
<script setup>
|
||||
import { useRoute } from 'vue-router';
|
||||
import Mission from './Header/Mission.vue';
|
||||
import ContactList from './Header/ContactList.vue';
|
||||
import Mission from "./Header/Mission.vue";
|
||||
import ContactList from "./Header/ContactList.vue";
|
||||
|
||||
defineProps({
|
||||
loading: {
|
||||
tyle: Boolean,
|
||||
default: false,
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
email: {
|
||||
type: String,
|
||||
default: "contact@kamilcraft.com",
|
||||
},
|
||||
tel: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
hasPhoneNumber: false,
|
||||
phoneNumber: "",
|
||||
formattedPhoneNumber: "",
|
||||
};
|
||||
},
|
||||
email: {
|
||||
type: String,
|
||||
default: 'contact@kamilcraft.com',
|
||||
},
|
||||
locations: {
|
||||
type: Array,
|
||||
default() {
|
||||
return ["Wrocław", "Legnica", "Remote"];
|
||||
},
|
||||
tel: {
|
||||
type: Object,
|
||||
default: {
|
||||
hasPhoneNumber: false,
|
||||
phoneNumber: '',
|
||||
formattedPhoneNumber: '',
|
||||
},
|
||||
},
|
||||
locations: {
|
||||
type: Array,
|
||||
default: [
|
||||
'Wrocław',
|
||||
'Legnica',
|
||||
'Remote',
|
||||
],
|
||||
},
|
||||
position: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
mission: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
position: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
mission: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
});
|
||||
</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">
|
||||
.animated-bg {
|
||||
animation-duration: 10s;
|
||||
@ -55,37 +89,10 @@ defineProps({
|
||||
|
||||
@keyframes placeHolderShimmer {
|
||||
0% {
|
||||
background-position: -800px 0
|
||||
background-position: -800px 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 800px 0
|
||||
background-position: 800px 0;
|
||||
}
|
||||
}
|
||||
</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>
|
||||
|
||||
@ -1,41 +1,57 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { computed } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
loading: {
|
||||
default: false,
|
||||
type: Boolean,
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
email: {
|
||||
type: String,
|
||||
default: "conact@kamilcraft.com",
|
||||
},
|
||||
tel: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
hasPhoneNumber: false,
|
||||
};
|
||||
},
|
||||
email: {
|
||||
default: 'conact@kamilcraft.com',
|
||||
type: String,
|
||||
},
|
||||
locations: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
tel: {
|
||||
default: {
|
||||
hasPhoneNumber: false,
|
||||
},
|
||||
type: Object,
|
||||
},
|
||||
locations: {
|
||||
default: [],
|
||||
type: Array,
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const location = computed(() => {
|
||||
return props.locations.join(' / ');
|
||||
return props.locations.join(" / ");
|
||||
});
|
||||
</script>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
@ -1,23 +1,43 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
loading: {
|
||||
type: Boolean,
|
||||
},
|
||||
mission: {
|
||||
type: Array,
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
mission: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
|
||||
@ -1,32 +1,37 @@
|
||||
<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',
|
||||
},
|
||||
{
|
||||
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>
|
||||
<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>
|
||||
|
||||
@ -1,15 +1,16 @@
|
||||
<script setup>
|
||||
import links from '../../composables/Links';
|
||||
import links from "../../composables/Links";
|
||||
</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>
|
||||
<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>
|
||||
|
||||
@ -1,56 +1,70 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { skills as importSkills, otherSkills as importOtherSkills } from '../../composables/Skills.js';
|
||||
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="grid grid-cols-4 justify-between align-baseline gap-2 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-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>
|
||||
<div class="px-4 py-3">
|
||||
<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">
|
||||
<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-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>
|
||||
|
||||
<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>
|
||||
|
||||
@ -1,32 +1,32 @@
|
||||
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: 'gitea',
|
||||
faIcon: ['fas', 'arrow-up-right-from-square'],
|
||||
url: 'https://git.kamilcraft.com/kamilniemczycki',
|
||||
title: 'Prywatny serwer git',
|
||||
text: 'git.kamilcraft.com',
|
||||
},
|
||||
{
|
||||
slug: 'github',
|
||||
faIcon: ['fab', 'github'],
|
||||
url: 'https://github.com/kamilniemczycki',
|
||||
title: 'Mój GitHub',
|
||||
text: '/kamilniemczycki',
|
||||
},
|
||||
{
|
||||
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: "gitea",
|
||||
faIcon: ["fas", "arrow-up-right-from-square"],
|
||||
url: "https://git.kamilcraft.com/kamilniemczycki",
|
||||
title: "Prywatny serwer git",
|
||||
text: "git.kamilcraft.com",
|
||||
},
|
||||
{
|
||||
slug: "github",
|
||||
faIcon: ["fab", "github"],
|
||||
url: "https://github.com/kamilniemczycki",
|
||||
title: "Mój GitHub",
|
||||
text: "/kamilniemczycki",
|
||||
},
|
||||
];
|
||||
|
||||
export default links;
|
||||
|
||||
@ -1,73 +1,70 @@
|
||||
const skills = [
|
||||
{
|
||||
class: 'linux',
|
||||
faIcon: ['fab', 'linux'],
|
||||
title: 'Ikona Linux',
|
||||
text: 'GNU/Linux',
|
||||
},
|
||||
{
|
||||
class: 'git',
|
||||
faIcon: ['fab', 'git'],
|
||||
title: 'Ikona Git',
|
||||
text: 'Git',
|
||||
},
|
||||
{
|
||||
class: 'php',
|
||||
faIcon: ['fab', 'php'],
|
||||
title: 'Ikona PHP',
|
||||
text: 'PHP 7/8',
|
||||
},
|
||||
{
|
||||
class: 'laravel',
|
||||
faIcon: ['fab', 'laravel'],
|
||||
title: 'Ikona Laravel',
|
||||
text: 'Laravel',
|
||||
},
|
||||
{
|
||||
class: 'js',
|
||||
faIcon: ['fab', 'js'],
|
||||
title: 'Ikona JavaScript',
|
||||
text: 'JavaScript',
|
||||
},
|
||||
{
|
||||
class: 'vuejs',
|
||||
faIcon: ['fab', 'vuejs'],
|
||||
title: 'Ikona Vue.js',
|
||||
text: 'Vue.js',
|
||||
},
|
||||
{
|
||||
class: 'html5',
|
||||
faIcon: ['fab', 'html5'],
|
||||
title: 'Ikona HTML 5',
|
||||
text: 'HTML',
|
||||
},
|
||||
{
|
||||
class: 'css3-alt',
|
||||
faIcon: ['fab', 'css3-alt'],
|
||||
title: 'Ikona CSS 3',
|
||||
text: 'CSS',
|
||||
},
|
||||
{
|
||||
class: "linux",
|
||||
faIcon: ["fab", "linux"],
|
||||
title: "Ikona Linux",
|
||||
text: "GNU/Linux",
|
||||
},
|
||||
{
|
||||
class: "git",
|
||||
faIcon: ["fab", "git"],
|
||||
title: "Ikona Git",
|
||||
text: "Git",
|
||||
},
|
||||
{
|
||||
class: "php",
|
||||
faIcon: ["fab", "php"],
|
||||
title: "Ikona PHP",
|
||||
text: "PHP 7/8",
|
||||
},
|
||||
{
|
||||
class: "laravel",
|
||||
faIcon: ["fab", "laravel"],
|
||||
title: "Ikona Laravel",
|
||||
text: "Laravel",
|
||||
},
|
||||
{
|
||||
class: "js",
|
||||
faIcon: ["fab", "js"],
|
||||
title: "Ikona JavaScript",
|
||||
text: "JavaScript",
|
||||
},
|
||||
{
|
||||
class: "vuejs",
|
||||
faIcon: ["fab", "vuejs"],
|
||||
title: "Ikona Vue.js",
|
||||
text: "Vue.js",
|
||||
},
|
||||
{
|
||||
class: "html5",
|
||||
faIcon: ["fab", "html5"],
|
||||
title: "Ikona HTML 5",
|
||||
text: "HTML",
|
||||
},
|
||||
{
|
||||
class: "css3-alt",
|
||||
faIcon: ["fab", "css3-alt"],
|
||||
title: "Ikona CSS 3",
|
||||
text: "CSS",
|
||||
},
|
||||
];
|
||||
|
||||
const otherSkills = [
|
||||
'Composer',
|
||||
'GitHub',
|
||||
'VSC',
|
||||
'PhpStorm',
|
||||
'WebStorm',
|
||||
'Node.js',
|
||||
'NPM',
|
||||
'Sqlite',
|
||||
'MySQL',
|
||||
'Docker',
|
||||
'WSL',
|
||||
'LXC/LXD',
|
||||
'REST',
|
||||
'RWD',
|
||||
'i więcej...',
|
||||
"Composer",
|
||||
"GitHub",
|
||||
"VSC",
|
||||
"PhpStorm",
|
||||
"WebStorm",
|
||||
"Node.js",
|
||||
"NPM",
|
||||
"Sqlite",
|
||||
"MySQL",
|
||||
"Docker",
|
||||
"WSL",
|
||||
"LXC/LXD",
|
||||
"REST",
|
||||
"RWD",
|
||||
"i więcej...",
|
||||
];
|
||||
|
||||
export {
|
||||
skills,
|
||||
otherSkills,
|
||||
};
|
||||
export { skills, otherSkills };
|
||||
|
||||
28
src/main.js
28
src/main.js
@ -1,19 +1,19 @@
|
||||
import { createApp } from 'vue';
|
||||
import './style.css';
|
||||
import App from './App.vue';
|
||||
import router from './router.js';
|
||||
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';
|
||||
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');
|
||||
.use(router)
|
||||
.component("FontAwesomeIcon", FontAwesomeIcon)
|
||||
.component("QRCode", QrcodeVue)
|
||||
.mount("#cv");
|
||||
|
||||
@ -1,26 +1,26 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
import { createRouter, createWebHistory } from "vue-router";
|
||||
|
||||
const Home = () => import('./views/Home.vue');
|
||||
const Show = () => import('./views/Show.vue');
|
||||
const NotFound = () => import('./views/NotFound.vue');
|
||||
const Home = () => import("./views/Home.vue");
|
||||
const Show = () => import("./views/Show.vue");
|
||||
const NotFound = () => import("./views/NotFound.vue");
|
||||
|
||||
export default createRouter({
|
||||
history: createWebHistory(),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Home',
|
||||
component: Home,
|
||||
},
|
||||
{
|
||||
path: '/show/:token',
|
||||
name: 'Show',
|
||||
component: Show,
|
||||
},
|
||||
{
|
||||
path: '/:pathMatch(.*)*',
|
||||
name: 'NotFound',
|
||||
component: NotFound
|
||||
},
|
||||
],
|
||||
history: createWebHistory(),
|
||||
routes: [
|
||||
{
|
||||
path: "/",
|
||||
name: "Home",
|
||||
component: Home,
|
||||
},
|
||||
{
|
||||
path: "/show/:token",
|
||||
name: "Show",
|
||||
component: Show,
|
||||
},
|
||||
{
|
||||
path: "/:pathMatch(.*)*",
|
||||
name: "NotFound",
|
||||
component: NotFound,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
@ -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 components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
body {
|
||||
@apply text-sm text-slate-700;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
body {
|
||||
@apply text-sm text-slate-700;
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-blob {
|
||||
background-image: var(--theme-bg-blob);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 170px;
|
||||
background-position: -25px -22px;
|
||||
background-image: var(--theme-bg-blob);
|
||||
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;
|
||||
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');
|
||||
--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;
|
||||
@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;
|
||||
}
|
||||
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;
|
||||
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;
|
||||
}
|
||||
main {
|
||||
@apply border-0 w-[21cm] h-[29.7cm];
|
||||
}
|
||||
a {
|
||||
@apply no-underline;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
<script setup>
|
||||
import { useRoute } from 'vue-router';
|
||||
import Header from '../components/Header.vue';
|
||||
import Body from '../components/Body.vue';
|
||||
import Header from "../components/Header.vue";
|
||||
import Body from "../components/Body.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid grid-rows-[max-content_max-content_auto] h-full">
|
||||
<Header />
|
||||
<Body />
|
||||
</div>
|
||||
</template>
|
||||
<div class="grid grid-rows-[max-content_max-content_auto] h-full">
|
||||
<Header />
|
||||
<Body />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -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>
|
||||
<div class="grid grid-rows-[max-content_max-content_auto] h-full px-5 py-4">
|
||||
<header>
|
||||
<h1 class="text-3xl mb-4">Błąd 404</h1>
|
||||
</header>
|
||||
<p>Strona nie została znaleziona.</p>
|
||||
</div>
|
||||
</template>
|
||||
<div class="grid grid-rows-[max-content_max-content_auto] h-full px-5 py-4">
|
||||
<header>
|
||||
<h1 class="text-3xl mb-4">Błąd 404</h1>
|
||||
</header>
|
||||
<p>Strona nie została znaleziona.</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,87 +1,88 @@
|
||||
<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';
|
||||
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 email = ref("contact@kamilcraft.com");
|
||||
const tel = reactive({
|
||||
hasPhoneNumber: false,
|
||||
phoneNumber: '',
|
||||
formattedPhoneNumber: '',
|
||||
hasPhoneNumber: false,
|
||||
phoneNumber: "",
|
||||
formattedPhoneNumber: "",
|
||||
});
|
||||
|
||||
const locations = reactive([
|
||||
'Wrocław',
|
||||
'Legnica',
|
||||
'Remote',
|
||||
]);
|
||||
const locations = reactive(["Wrocław", "Legnica", "Remote"]);
|
||||
|
||||
const position = ref(null);
|
||||
const mission = reactive([]);
|
||||
const rodo = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
const router = useRoute();
|
||||
token.value = router.params['token'] ?? null;
|
||||
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;
|
||||
});
|
||||
}
|
||||
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.phone.number;
|
||||
tel.formattedPhoneNumber = data.phone.formattedNumber;
|
||||
while(locations.length > 0) {
|
||||
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 (response.status === 200) {
|
||||
const data = response.data;
|
||||
email.value = data.email;
|
||||
tel.hasPhoneNumber = true;
|
||||
tel.phoneNumber = data.phone.number;
|
||||
tel.formattedPhoneNumber = data.phone.formattedNumber;
|
||||
while (locations.length > 0) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid grid-rows-[max-content_max-content_auto] h-full">
|
||||
<Header :loading="loading"
|
||||
:email="email"
|
||||
:tel="tel"
|
||||
:locations="locations"
|
||||
:position="position"
|
||||
:mission="mission" />
|
||||
<Body :token="token" :rodo="rodo" :loading="loading" />
|
||||
</div>
|
||||
</template>
|
||||
<div class="grid grid-rows-[max-content_max-content_auto] h-full">
|
||||
<Header
|
||||
:loading="loading"
|
||||
:email="email"
|
||||
:tel="tel"
|
||||
:locations="locations"
|
||||
:position="position"
|
||||
:mission="mission"
|
||||
/>
|
||||
<Body :token="token" :rodo="rodo" :loading="loading" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{vue,js,ts,jsx,tsx}",
|
||||
],
|
||||
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { defineConfig, loadEnv, splitVendorChunkPlugin } from 'vite';
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
import { defineConfig, loadEnv, splitVendorChunkPlugin } from "vite";
|
||||
import vue from "@vitejs/plugin-vue";
|
||||
|
||||
export default defineConfig((mode) => {
|
||||
const env = loadEnv(mode, process.cwd(), "");
|
||||
@ -7,9 +7,9 @@ export default defineConfig((mode) => {
|
||||
server: {
|
||||
port: parseInt(env.VITE_PORT ?? 5173),
|
||||
},
|
||||
plugins: [ vue(), splitVendorChunkPlugin() ],
|
||||
plugins: [vue(), splitVendorChunkPlugin()],
|
||||
resolve: {
|
||||
vue: 'vue/dist/vue.esm-bundler.js',
|
||||
vue: "vue/dist/vue.esm-bundler.js",
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user