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

Compare commits

base: kamilniemczycki:main
Branches Tags
kamilniemczycki:main
..
compare: kamilniemczycki:6f5d18801773fe8c0ff7250381900f662df764fc
Branches Tags
kamilniemczycki:main

2 Commits
main ... 6f5d188017

Author SHA1 Message Date
Kamil Niemczycki
6f5d188017 - fix style for source code 2023-08-07 10:23:31 +02:00
Kamil Niemczycki
b05378ea2e - update port for developmnet mode 2023-08-07 10:23:30 +02:00
30 changed files with 578 additions and 2472 deletions
Expand all files Collapse all files

0
.env.production → .env.deployment
View File

4
.env.development
View File

@@ -1,4 +0,0 @@
VITE_APP_NAME="Kamil Niemczycki CV"
VITE_CV_URL="http://localhost:5173"
VITE_API_URL="http://localhost"
VITE_SOURCE_CODE="https://github.com/kamilniemczycki/kamilcraft-cv"

17
.eslintrc.cjs
View File

@@ -1,17 +0,0 @@
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
View File

@@ -1 +0,0 @@
{}

42
README.md
View File

@@ -1,41 +1,7 @@
# cv.kamilcraft.com # Vue 3 + Vite
The project concerns the CV website at [https://cv.kamilcraft.com](https://cv.kamilcraft.com). The website is created with RWD design techniques. The website is adapted for mobile devices, desktop browsers with A4 printability. This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
I used Vue.js in the project. Some of the content is static. The information about the projects is retrieved from the [API](https://github.com/kamilniemczycki/kamilcraft-api). ## Recommended IDE Setup
## Dependency installation - [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
```
npm install --legacy-peer-deps
```
### Development
```
npm run dev
```
Application should be available under `127.0.0.1:5173` or `localhost:5173`.
### Compilation
```
npm run build
```
The executable files should be in the `dist` folder.
### Code formatting
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
```

18
index.html
View File

@@ -1,25 +1,13 @@
<!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>
<meta property="og:site_name" content="cv.kamilcraft.com" />
<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."
/>
</head> </head>
<body class="min-h-screen"> <body>
<div id="cv"></div> <div id="cv"></div>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
</body> </body>

1687
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

13
package.json
View File

@@ -6,9 +6,7 @@
"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",
@@ -23,15 +21,8 @@
"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: {},
}, },
}; }

2
public/robots.txt
View File

@@ -1,2 +0,0 @@
User-agent: *
Allow: /

30
src/App.vue
View File

@@ -1,30 +1,9 @@
<script setup> <script setup>
import { computed } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
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;
@@ -36,3 +15,12 @@ function print() {
} }
} }
</style> </style>
<template>
<div class="print-section">
<button class="px-4 py-2 w-full sm:w-80 font-semibold text-sm bg-orange-300 text-orange-700 rounded-full shadow-sm" @click="print">Drukuj CV</button>
</div>
<main class="main bg-blob">
<router-view />
</main>
</template>

146
src/components/Body.vue
View File

@@ -1,95 +1,79 @@
<script setup> <script setup>
import { computed } from "vue"; import { defineProps, computed, ref } 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, default: null,
default: null, type: [String, null],
}, },
rodo: { rodo: {
type: String, default: null,
default: null, type: [String, null],
}, },
loading: { loading: {
type: Boolean, required: true,
default: false, type: Boolean,
}, },
}); });
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 <div class="flex flex-col-reverse print:flex-row print:gap-2 md:flex-row md:gap-2">
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 />
<div <Education />
class="relative print:w-2/3 print:flex-shrink-0 md:w-2/3 pb-3 md:flex-shrink-0 pt-1 px-4" <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">
<MajorAchivments /> <template v-if="rodo">
<Education /> {{ rodo }}
<div </template>
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-else>
> Wyrażam zgodę na przetwarzanie moich danych osobowych dla potrzeb
<template v-if="!loading"> niezbędnych do realizacji procesu rekrutacji (zgodnie z ustawą z
<template v-if="rodo"> dnia 10 maja 2018 roku o ochronie danych osobowych (Dz. Ustaw z 2018,
{{ rodo }} poz. 1000) oraz zgodnie z Rozporządzeniem Parlamentu
</template> Europejskiego i Rady (UE) 2016/679 z dnia 27 kwietnia 2016 r. w sprawie
<template v-else> ochrony osób fizycznych w związku z przetwarzaniem danych
Wyrażam zgodę na przetwarzanie moich danych osobowych dla potrzeb osobowych i w sprawie swobodnego przepływu takich danych oraz
niezbędnych do realizacji procesu rekrutacji (zgodnie z ustawą z uchylenia dyrektywy 95/46/WE (RODO).
dnia 10 maja 2018 roku o ochronie danych osobowych (Dz. Ustaw z </template>
2018, poz. 1000) oraz zgodnie z Rozporządzeniem Parlamentu </template>
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>
osobowych i w sprawie swobodnego przepływu takich danych oraz <div class="relative print:w-1/3 print:flex-shrink-1 md:w-1/3 md:flex-shrink-1 bg-[#fff0e9]">
uchylenia dyrektywy 95/46/WE (RODO). <Skills />
</template> <Certificates />
</template> <Links class="pb-8 md:pb-0" />
</div> <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> </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,37 +1,27 @@
<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" <span class="text-slate-500">Collegium Witelona Uczelnia Państwowa w Legnicy</span>
>Collegium Witelona Uczelnia Państwowa w Legnicy</span </header>
> <ul class="pl-5 list-disc">
</header> <li><span class="font-bold">Kierunek:</span> Inżynieria produkcji i logistyki</li>
<ul class="pl-5 list-disc"> <li><span class="font-bold">Specjalizacja:</span> Przemysł 4.0</li>
<li> </ul>
<span class="font-bold">Kierunek:</span> Inżynieria produkcji i </div>
logistyki <div class="pb-4 mb-4 border-b last:pb-0 last:mb-0 last:border-b-0">
</li> <header class="relative mb-2">
<li><span class="font-bold">Specjalizacja:</span> Przemysł 4.0</li> <h3 class="text-base font-bold">Inżynier</h3>
</ul> <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> </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,40 +1,38 @@
<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>

116
src/components/Header.vue
View File

@@ -1,78 +1,31 @@
<script setup> <script setup>
import Mission from "./Header/Mission.vue"; import { defineProps } from 'vue';
import ContactList from "./Header/ContactList.vue"; import { useRoute } from 'vue-router';
import Mission from './Header/Mission.vue';
import ContactList from './Header/ContactList.vue';
defineProps({ defineProps({
loading: { loading: {
type: Boolean, tyle: Boolean,
default: false,
},
email: {
type: String,
default: "contact@kamilcraft.com",
},
tel: {
type: Object,
default() {
return {
hasPhoneNumber: false,
phoneNumber: "",
formattedPhoneNumber: "",
};
}, },
}, email: {
locations: { type: String,
type: Array,
default() {
return ["Wrocław", "Legnica", "Remote"];
}, },
}, tel: {
position: { type: Object,
type: String, },
default: null, locations: {
}, type: Array,
mission: { },
type: Array, position: {
default() { type: [String, null],
return []; },
mission: {
type: Array,
}, },
},
}); });
</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;
@@ -89,10 +42,37 @@ 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="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,57 +1,41 @@
<script setup> <script setup>
import { computed } from "vue"; import { defineProps, computed } from 'vue';
const props = defineProps({ const props = defineProps({
loading: { loading: {
type: Boolean, default: false,
default: false, type: Boolean,
},
email: {
type: String,
default: "conact@kamilcraft.com",
},
tel: {
type: Object,
default() {
return {
hasPhoneNumber: false,
};
}, },
}, email: {
locations: { default: 'conact@kamilcraft.com',
type: Array, type: String,
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> <li><FontAwesomeIcon class="w-5" :icon="['fas', 'envelope']" /> <a :href="`mailto:${email}`">{{ email }}</a></li>
<FontAwesomeIcon class="w-5" :icon="['fas', 'envelope']" /> <li v-if="tel.hasPhoneNumber"><FontAwesomeIcon class="w-5" :icon="['fas', 'mobile-screen-button']" /><a :href="`tel:${tel.phoneNumber}`">{{ tel.formattedPhoneNumber }}</a></li>
<a :href="`mailto:${email}`">{{ email }}</a> <li><FontAwesomeIcon class="w-5" :icon="['fas', 'location-dot']" />{{ location }}</li>
</li> </ul>
<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>

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

@@ -1,43 +1,25 @@
<script setup> <script setup>
import { defineProps } from 'vue';
defineProps({ defineProps({
loading: { loading: {
type: Boolean, type: Boolean,
default: false, },
}, mission: {
mission: { type: Array,
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 <p v-for="key in [1, 2, 3]" :key="key" style="width:100%" class="mb-3 last-of-type:mb-0 animated-bg"></p>
v-for="key in [1, 2, 3]" </div>
:key="key" <div v-else-if="mission.length === 0" class="px-5 py-3 border-b text-justify text-slate-600">
style="width: 100%" <p>Ambitny i nastawiony na cel, gotowy do podjęcia wyzwań absolwent informatyki, który szuka pierwszej pracy jako inżynier oprogramowania.</p>
class="mb-3 last-of-type:mb-0 animated-bg" <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>
></p> </div>
</div> <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>
v-else-if="mission.length === 0" </div>
class="px-5 py-3 border-b text-justify text-slate-600"
>
<p>
Ambitny i nastawiony na cel, gotowy do podjęcia wyzwań absolwent
informatyki, który szuka pierwszej pracy jako inżynier oprogramowania.
</p>
<p>
Wyróżnia mnie pracowitość i umiejętność pracy w zespole. Szybko zdobywam
potrzebną mi wiedzę i potrafię ją dobrze wykorzystać. Przyjemność sprawia
mi tworzenie web aplikacji. Jestem gotowy by rozwijać swoją wiedzę jak i
karierę zawodową w tym kierunku.
</p>
</div>
<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,37 +1,32 @@
<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 <li v-for="(certificate, key) in certificates"
v-for="(certificate, key) in certificates" :key="key"
:key="key" class="flex gap-1 align-baseline">
class="flex gap-1 align-baseline" <FontAwesomeIcon class="text-[#ffd43b]" :icon="certificate.faIcon" />
> <span v-if="! certificate.link">{{ certificate.title }}</span>
<FontAwesomeIcon class="text-[#ffd43b]" :icon="certificate.faIcon" /> <a v-else
<span v-if="!certificate.link">{{ certificate.title }}</span> :href="certificate.link"
<a :title="certificate.title"
v-else target="_blank">{{ certificate.title }}</a>
:href="certificate.link" </li>
:title="certificate.title" </ul>
target="_blank" </div>
>{{ certificate.title }}</a
>
</li>
</ul>
</div>
</template> </template>

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

@@ -1,16 +1,15 @@
<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"> <li v-for="link in links" :key="link.slug"><a :href="link.url"
<a :href="link.url" :title="link.title" target="_blink" :title="link.title"
><FontAwesomeIcon class="w-6" :icon="link.faIcon" />{{ link.text }}</a target="_blink"
> ><FontAwesomeIcon class="w-6" :icon="link.faIcon" />{{ link.text }}</a></li>
</li> </ul>
</ul> </div>
</div>
</template> </template>

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

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

49
src/composables/Links.js
View File

@@ -1,32 +1,25 @@
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: 'github',
faIcon: ["fas", "arrow-up-right-from-square"], faIcon: ['fab', 'github'],
url: "https://git.kamilcraft.com/kamilniemczycki", url: 'https://github.com/kamilniemczycki',
title: "Prywatny serwer git", title: 'Mój GitHub',
text: "git.kamilcraft.com", text: '/kamilniemczycki',
}, },
{
slug: "github",
faIcon: ["fab", "github"],
url: "https://github.com/kamilniemczycki",
title: "Mój GitHub",
text: "/kamilniemczycki",
},
]; ];
export default links; export default links;

130
src/composables/Skills.js
View File

@@ -1,70 +1,72 @@
const skills = [ const skills = [
{ {
class: "linux", class: 'php',
faIcon: ["fab", "linux"], faIcon: ['fab', 'php'],
title: "Ikona Linux", title: 'PHP Icon',
text: "GNU/Linux", text: 'PHP 7/8',
}, },
{ {
class: "git", class: 'laravel',
faIcon: ["fab", "git"], faIcon: ['fab', 'laravel'],
title: "Ikona Git", title: 'Laravel Icon',
text: "Git", text: 'Laravel',
}, },
{ {
class: "php", class: 'js',
faIcon: ["fab", "php"], faIcon: ['fab', 'js'],
title: "Ikona PHP", title: 'JavaScript Icon',
text: "PHP 7/8", text: 'JavaScript',
}, },
{ {
class: "laravel", class: 'vuejs',
faIcon: ["fab", "laravel"], faIcon: ['fab', 'vuejs'],
title: "Ikona Laravel", title: 'Vue.js Icon',
text: "Laravel", text: 'Vue.js',
}, },
{ {
class: "js", class: 'html5',
faIcon: ["fab", "js"], faIcon: ['fab', 'html5'],
title: "Ikona JavaScript", title: 'HTML 5 Icon',
text: "JavaScript", text: 'HTML',
}, },
{ {
class: "vuejs", class: 'css3-alt',
faIcon: ["fab", "vuejs"], faIcon: ['fab', 'css3-alt'],
title: "Ikona Vue.js", title: 'CSS 3 Icon',
text: "Vue.js", text: 'CSS',
}, },
{ {
class: "html5", class: 'git',
faIcon: ["fab", "html5"], faIcon: ['fab', 'git'],
title: "Ikona HTML 5", title: 'Git Icon',
text: "HTML", text: 'Git',
}, },
{ {
class: "css3-alt", class: 'linux',
faIcon: ["fab", "css3-alt"], faIcon: ['fab', 'linux'],
title: "Ikona CSS 3", title: 'Linux Icon',
text: "CSS", text: 'GNU/Linux',
}, },
]; ];
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", 'i więcej...',
"i więcej...",
]; ];
export { skills, otherSkills }; export {
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');

36
src/router.js
View File

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

77
src/style.css
View File

@@ -1,67 +1,66 @@
@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-color: white;
background-size: 170px; background-repeat: no-repeat;
background-position: -25px -22px; background-size: 170px;
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: background-size: 75px, 100% 100%;
75px, }
100% 100%; #cv {
} @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;
} }
} }

88
src/views/Home.vue
View File

@@ -1,11 +1,87 @@
<script setup> <script setup>
import Header from "../components/Header.vue"; import { onMounted, ref, reactive } from 'vue';
import Body from "../components/Body.vue"; import { useRoute } from 'vue-router';
import Header from '../components/Header.vue';
import Body from '../components/Body.vue';
const loading = ref(false);
const token = ref(null);
const email = ref('contact@kamilcraft.com');
const tel = reactive({
hasPhoneNumber: false,
phoneNumber: '',
formattedPhoneNumber: '',
});
const locations = reactive([
'Wrocław',
'Legnica',
'Remote',
]);
const position = ref(null);
const mission = reactive([]);
const rodo = ref(null);
onMounted(() => {
const router = useRoute();
token.value = router.params['token'] ?? null;
if (token.value) {
loading.value = true;
const apiUrl = import.meta.env.VITE_API_URL;
fetch(`${apiUrl}/v1/cv/${token.value}`, {
method: 'GET',
cache: "no-cache",
credentials: "same-origin",
headers: {
"Content-Type": "application/json",
}
}).then(response => (response.json().then(data => ({ status: response.status, data }))))
.then(response => {
setTimeout(() => showData(response), 1000);
})
.catch(() => {
loading.value = false;
});
}
});
function showData(response) {
if (response.status === 200) {
const data = response.data;
email.value = data.email;
tel.hasPhoneNumber = true;
tel.phoneNumber = data.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> </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 :loading="loading"
<Body /> :email="email"
</div> :tel="tel"
:locations="locations"
:position="position"
:mission="mission" />
<Body :token="token" :rodo="rodo" :loading="loading" />
</div>
</template> </template>

8
src/views/NotFound.vue
View File

@@ -1,8 +0,0 @@
<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>

88
src/views/Show.vue
View File

@@ -1,88 +0,0 @@
<script setup>
import { onMounted, ref, reactive } from "vue";
import { useRoute } from "vue-router";
import Header from "../components/Header.vue";
import Body from "../components/Body.vue";
const loading = ref(false);
const token = ref(null);
const email = ref("contact@kamilcraft.com");
const tel = reactive({
hasPhoneNumber: false,
phoneNumber: "",
formattedPhoneNumber: "",
});
const locations = reactive(["Wrocław", "Legnica", "Remote"]);
const position = ref(null);
const mission = reactive([]);
const rodo = ref(null);
onMounted(() => {
const router = useRoute();
token.value = router.params["token"] ?? null;
if (token.value) {
loading.value = true;
const apiUrl = import.meta.env.VITE_API_URL;
fetch(`${apiUrl}/v1/cv/${token.value}`, {
method: "GET",
cache: "no-cache",
credentials: "same-origin",
headers: {
"Content-Type": "application/json",
},
})
.then((response) =>
response.json().then((data) => ({ status: response.status, data })),
)
.then((response) => {
setTimeout(() => showData(response), 1000);
})
.catch(() => {
loading.value = false;
});
}
});
function showData(response) {
if (response.status === 200) {
const data = response.data;
email.value = data.email;
tel.hasPhoneNumber = true;
tel.phoneNumber = data.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>

8
tailwind.config.js
View File

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

18
vite.config.js
View File

@@ -1,15 +1,25 @@
import { defineConfig, loadEnv, splitVendorChunkPlugin } from "vite"; import { defineConfig, loadEnv, splitVendorChunkPlugin } from 'vite';
import vue from "@vitejs/plugin-vue"; import vue from '@vitejs/plugin-vue';
import { networkInterfaces } from 'os';
// https://vitejs.dev/config/
export default defineConfig((mode) => { export default defineConfig((mode) => {
const env = loadEnv(mode, process.cwd(), ""); const env = loadEnv(mode, process.cwd(), "");
return { return {
server: { server: {
//host: Object.values(networkInterfaces()).flat().find(i => i.family === 'IPv4' && !i.internal).address,
host: 'localhost',
port: parseInt(env.VITE_PORT ?? 5173), port: parseInt(env.VITE_PORT ?? 5173),
hmr: {
host: 'localhost',
},
}, },
plugins: [vue(), splitVendorChunkPlugin()], plugins: [ vue(), splitVendorChunkPlugin() ],
resolve: { resolve: {
vue: "vue/dist/vue.esm-bundler.js", vue: 'vue/dist/vue.esm-bundler.js',
},
build: {
chunkSizeWarningLimit: 2048,
}, },
}; };
}); });