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

- Added eslint and prettier

Browse Source 
* - add eslint and prettier

* - reformatted code

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

17
.eslintrc.cjs Normal file
View File

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

1
.prettierrc.json Normal file
View File

@ -0,0 +1 @@
{}

9
README.md
View File

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

14
index.html
View File

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

1687
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

13
package.json
View File

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

2
postcss.config.js
View File

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

29
src/App.vue
View File

@ -1,16 +1,30 @@
<script setup> <script setup>
import { computed } from 'vue'; import { computed } from "vue";
import { useRoute } from 'vue-router'; import { useRoute } from "vue-router";
const route = useRoute(); const route = useRoute();
const isErrorPage = computed(() => route.name === 'NotFound'); const isErrorPage = computed(() => route.name === "NotFound");
function print() { function print() {
window.print(); window.print();
} }
</script> </script>
<template>
<div v-if="!isErrorPage" class="print-section">
<button
class="px-4 py-2 w-full sm:w-80 font-semibold text-sm bg-orange-300 text-orange-700 rounded-full shadow-sm"
@click="print"
>
Drukuj CV
</button>
</div>
<main class="main bg-white">
<router-view />
</main>
</template>
<style lang="css"> <style lang="css">
.print-section { .print-section {
@apply text-center pt-5 pb-6; @apply text-center pt-5 pb-6;
@ -22,12 +36,3 @@ function print() {
} }
} }
</style> </style>
<template>
<div v-if="!isErrorPage" class="print-section">
<button class="px-4 py-2 w-full sm:w-80 font-semibold text-sm bg-orange-300 text-orange-700 rounded-full shadow-sm" @click="print">Drukuj CV</button>
</div>
<main class="main bg-white">
<router-view />
</main>
</template>

50
src/components/Body.vue
View File

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

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

@ -5,10 +5,15 @@
<header class="relative mb-2"> <header class="relative mb-2">
<h3 class="text-base font-bold">Magister</h3> <h3 class="text-base font-bold">Magister</h3>
<span class="absolute top-0 right-0 text-base">10.2021 - obecnie</span> <span class="absolute top-0 right-0 text-base">10.2021 - obecnie</span>
<span class="text-slate-500">Collegium Witelona Uczelnia Państwowa w Legnicy</span> <span class="text-slate-500"
>Collegium Witelona Uczelnia Państwowa w Legnicy</span
>
</header> </header>
<ul class="pl-5 list-disc"> <ul class="pl-5 list-disc">
<li><span class="font-bold">Kierunek:</span> Inżynieria produkcji i logistyki</li> <li>
<span class="font-bold">Kierunek:</span> Inżynieria produkcji i
logistyki
</li>
<li><span class="font-bold">Specjalizacja:</span> Przemysł 4.0</li> <li><span class="font-bold">Specjalizacja:</span> Przemysł 4.0</li>
</ul> </ul>
</div> </div>
@ -16,11 +21,16 @@
<header class="relative mb-2"> <header class="relative mb-2">
<h3 class="text-base font-bold">Inżynier</h3> <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="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> <span class="text-slate-500"
>Państwowa Wyższa Szkoła Zawodowa im. Witelona w Legnicy</span
>
</header> </header>
<ul class="pl-5 list-disc"> <ul class="pl-5 list-disc">
<li><span class="font-bold">Kierunek:</span> Informatyka</li> <li><span class="font-bold">Kierunek:</span> Informatyka</li>
<li><span class="font-bold">Specjalizacja:</span> Programowanie aplikacji mobilnych i internetowych</li> <li>
<span class="font-bold">Specjalizacja:</span> Programowanie aplikacji
mobilnych i internetowych
</li>
</ul> </ul>
</div> </div>
</div> </div>

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

@ -15,7 +15,9 @@
<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">07.2019 – 08.2019</span> <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> <span class="text-slate-500"
>Legnickie Przedsiębiorstwo Wodociągów i Kanalizacji S.A.</span
>
</header> </header>
<ul class="pl-5 list-disc"> <ul class="pl-5 list-disc">
<li>Podstawowy serwis komputerów i drukarek</li> <li>Podstawowy serwis komputerów i drukarek</li>

93
src/components/Header.vue
View File

@ -1,32 +1,31 @@
<script setup> <script setup>
import { useRoute } from 'vue-router'; import Mission from "./Header/Mission.vue";
import Mission from './Header/Mission.vue'; import ContactList from "./Header/ContactList.vue";
import ContactList from './Header/ContactList.vue';
defineProps({ defineProps({
loading: { loading: {
tyle: Boolean, type: Boolean,
default: false, default: false,
}, },
email: { email: {
type: String, type: String,
default: 'contact@kamilcraft.com', default: "contact@kamilcraft.com",
}, },
tel: { tel: {
type: Object, type: Object,
default: { default() {
return {
hasPhoneNumber: false, hasPhoneNumber: false,
phoneNumber: '', phoneNumber: "",
formattedPhoneNumber: '', formattedPhoneNumber: "",
};
}, },
}, },
locations: { locations: {
type: Array, type: Array,
default: [ default() {
'Wrocław', return ["Wrocław", "Legnica", "Remote"];
'Legnica', },
'Remote',
],
}, },
position: { position: {
type: String, type: String,
@ -34,11 +33,46 @@ defineProps({
}, },
mission: { mission: {
type: Array, type: Array,
default: [], default() {
return [];
},
}, },
}); });
</script> </script>
<template>
<div
class="bg-blob flex justify-between mx-1 mt-1 print:border-b-2 md:border-b-2"
>
<div class="flex-shrink-0 w-32 h-32">
<img class="w-full h-full" alt="Profilowe" src="/me.webp" />
</div>
<div
class="flex flex-col flex-shrink-1 justify-center gap-3 w-full px-4 py-3"
>
<div>
<h1 class="text-2xl pb-0.5">Kamil Niemczycki</h1>
<p>{{ position ?? "Inżynier oprogramowania" }}</p>
</div>
<ContactList
:loading="loading"
:email="email"
:tel="tel"
:locations="locations"
class="hidden md:flex gap-1 sm:gap-2 md:gap-5 print:flex print:gap-5 flex-wrap flex-1 text-sm"
/>
</div>
</div>
<ContactList
:loading="loading"
:email="email"
:tel="tel"
:locations="locations"
class="md:hidden print:hidden flex flex-col gap-2 px-5 py-3 border-b text-sm"
/>
<Mission :mission="mission" :loading="loading" />
</template>
<style lang="css"> <style lang="css">
.animated-bg { .animated-bg {
animation-duration: 10s; animation-duration: 10s;
@ -55,37 +89,10 @@ defineProps({
@keyframes placeHolderShimmer { @keyframes placeHolderShimmer {
0% { 0% {
background-position: -800px 0 background-position: -800px 0;
} }
100% { 100% {
background-position: 800px 0 background-position: 800px 0;
} }
} }
</style> </style>
<template>
<div class="bg-blob flex justify-between mx-1 mt-1 print:border-b-2 md:border-b-2">
<div class="flex-shrink-0 w-32 h-32">
<img class="w-full h-full" alt="Profilowe" src="/me.webp" />
</div>
<div class="flex flex-col flex-shrink-1 justify-center gap-3 w-full px-4 py-3">
<div>
<h1 class="text-2xl pb-0.5">Kamil Niemczycki</h1>
<p>{{ position ?? 'Inżynier oprogramowania' }}</p>
</div>
<ContactList
:loading="loading"
:email="email"
:tel="tel"
:locations="locations"
class="hidden md:flex gap-1 sm:gap-2 md:gap-5 print:flex print:gap-5 flex-wrap flex-1 text-sm" />
</div>
</div>
<ContactList
:loading="loading"
:email="email"
:tel="tel"
:locations="locations"
class="md:hidden print:hidden flex flex-col gap-2 px-5 py-3 border-b text-sm" />
<Mission :mission="mission" :loading="loading" />
</template>

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

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

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

@ -2,20 +2,40 @@
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 v-for="key in [1, 2, 3]" :key="key" style="width:100%" class="mb-3 last-of-type:mb-0 animated-bg"></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>
</div> </div>
<div v-else-if="mission.length === 0" class="px-5 py-3 border-b text-justify text-slate-600"> <div
<p>Ambitny i nastawiony na cel, gotowy do podjęcia wyzwań absolwent informatyki, który szuka pierwszej pracy jako inżynier oprogramowania.</p> v-else-if="mission.length === 0"
<p>Wyróżnia mnie pracowitość i umiejętność pracy w zespole. Szybko zdobywam potrzebną mi wiedzę i potrafię ją dobrze wykorzystać. Przyjemność sprawia mi tworzenie web aplikacji. Jestem gotowy by rozwijać swoją wiedzę jak i karierę zawodową w tym kierunku.</p> class="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>
<div v-else class="px-5 py-3 border-b text-justify text-slate-600"> <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> <p v-for="(line, key) in mission" :key="key">{{ line }}</p>

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

@ -1,14 +1,14 @@
<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>
@ -17,15 +17,20 @@ const certificates = [
<div class="px-4 py-3"> <div class="px-4 py-3">
<h2 class="text-xl text-[#E57D4C] pb-2">Konkursy i Certyfikaty</h2> <h2 class="text-xl text-[#E57D4C] pb-2">Konkursy i Certyfikaty</h2>
<ul class="flex flex-col gap-1"> <ul class="flex flex-col gap-1">
<li v-for="(certificate, key) in certificates" <li
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" /> <FontAwesomeIcon class="text-[#ffd43b]" :icon="certificate.faIcon" />
<span v-if="!certificate.link">{{ certificate.title }}</span> <span v-if="!certificate.link">{{ certificate.title }}</span>
<a v-else <a
v-else
:href="certificate.link" :href="certificate.link"
:title="certificate.title" :title="certificate.title"
target="_blank">{{ certificate.title }}</a> target="_blank"
>{{ certificate.title }}</a
>
</li> </li>
</ul> </ul>
</div> </div>

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

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

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

@ -1,11 +1,47 @@
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from "vue";
import { skills as importSkills, otherSkills as importOtherSkills } from '../../composables/Skills.js'; import {
skills as importSkills,
otherSkills as importOtherSkills,
} from "../../composables/Skills.js";
const skills = ref(importSkills); const skills = ref(importSkills);
const otherSkills = ref(importOtherSkills); const otherSkills = ref(importOtherSkills);
</script> </script>
<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];
@ -32,25 +68,3 @@ const otherSkills = ref(importOtherSkills);
@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="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>

40
src/composables/Links.js
View File

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

99
src/composables/Skills.js
View File

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

26
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");

22
src/router.js
View File

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

14
src/style.css
View File

@ -1,4 +1,4 @@
@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;
@ -7,7 +7,7 @@
@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;
} }
} }
@ -27,9 +27,9 @@ main {
} }
: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 {
@ -40,7 +40,9 @@ a {
body { body {
background-image: var(--theme-bg-grain), var(--theme-bg-gradient); background-image: var(--theme-bg-grain), var(--theme-bg-gradient);
background-position: top, top; background-position: top, top;
background-size: 75px, 100% 100%; background-size:
75px,
100% 100%;
} }
#cv { #cv {
@apply px-3 py-2; @apply px-3 py-2;

5
src/views/Home.vue
View File

@ -1,7 +1,6 @@
<script setup> <script setup>
import { useRoute } from 'vue-router'; import Header from "../components/Header.vue";
import Header from '../components/Header.vue'; import Body from "../components/Body.vue";
import Body from '../components/Body.vue';
</script> </script>
<template> <template>

6
src/views/NotFound.vue
View File

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

43
src/views/Show.vue
View File

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

8
tailwind.config.js
View File

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

6
vite.config.js
View File

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