init project

src/App.vue

@@ -0,0 +1,26 @@
+<script setup>
+function print() {
+  window.print();
+}
+</script>
+
+<style lang="css">
+.print-section {
+  @apply text-center pt-5 pb-6;
+}
+
+@media print {
+  .print-section {
+    @apply hidden;
+  }
+}
+</style>
+
+<template>
+  <div class="print-section">
+    <button class="px-4 py-2 w-full sm:w-80 font-semibold text-sm bg-orange-300 text-orange-700 rounded-full shadow-sm" @click="print">Drukuj CV</button>
+  </div>
+  <main class="main bg-blob">
+    <router-view />
+  </main>
+</template>

src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

src/components/Body.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { defineProps, computed, ref } from 'vue';
+import Education from '../components/Education.vue';
+import MajorAchivments from '../components/MajorAchivments.vue';
+import Skills from '../components/Skills.vue';
+import Certificates from '../components/Certificates.vue';
+import Links from '../components/Links.vue';
+
+const props = defineProps({
+    token: {
+        default: null,
+        type: [String, null],
+    }
+});
+
+const qrCodeLink = computed(() => {
+    if(props.token) {
+        return `https://cv.kamilcraft.com/show/${props.token}`;
+    }
+    return 'https://cv.kamilcraft.com';
+});
+</script>
+
+<template>
+    <div class="flex flex-col-reverse print:flex-row print:gap-2 md:flex-row md:gap-2">
+        <div class="relative print:w-2/3 print:flex-shrink-0 md:w-2/3 pb-3 md:flex-shrink-0 pt-1 px-4">
+            <MajorAchivments />
+            <Education />
+            <div class="print:absolute bottom-5 left-0 w-full pt-3 print:pt-0 px-2 print:px-6 text-[.5rem] leading-3 l text-justify text-[#E57D4C]">
+                Wyrażam zgodę na przetwarzanie moich danych osobowych dla potrzeb
+                niezbędnych do realizacji procesu rekrutacji (zgodnie z ustawą z
+                dnia 10 maja 2018 roku o ochronie danych osobowych (Dz. Ustaw z 2018,
+                poz. 1000) oraz zgodnie z Rozporządzeniem Parlamentu
+                Europejskiego i Rady (UE) 2016/679 z dnia 27 kwietnia 2016 r. w sprawie
+                ochrony osób fizycznych w związku z przetwarzaniem danych
+                osobowych i w sprawie swobodnego przepływu takich danych oraz
+                uchylenia dyrektywy 95/46/WE (RODO)
+            </div>
+        </div>
+        <div class="relative print:w-1/3 print:flex-shrink-1 md:w-1/3 md:flex-shrink-1 bg-[#fff0e9]">
+            <Skills />
+            <Certificates />
+            <Links />
+            <div class="hidden print:block print:absolute bottom-5 right-0 w-full">
+                <a :href="qrCodeLink" title="Link do CV w wersji przeglądarkowej" target="_blink">
+                    <QRCode
+                        render-as="svg"
+                        class="mx-auto mb-2"
+                        :value="qrCodeLink"
+                        :size="100"
+                        level="L"
+                        background="transparent" />
+                </a>
+                <div class="text-center">Wersja online</div>
+            </div>
+        </div>
+    </div>
+</template>

src/components/Certificates.vue

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

src/components/ContactList.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { defineProps, computed } from 'vue';
+
+const props = defineProps({
+    loading: {
+        default: false,
+        type: Boolean,
+    },
+    email: {
+        default: 'conact@kamilcraft.com',
+        type: String,
+    },
+    tel: {
+        default: {
+            hasPhoneNumber: false,
+        },
+        type: Object,
+    },
+    locations: {
+        default: [],
+        type: Array,
+    }
+});
+
+const location = computed(() => {
+    return props.locations.join(' / ');
+});
+</script>
+
+<style lang="css">
+.animated-bg {
+  animation-duration: 10s;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-name: placeHolderShimmer;
+  animation-timing-function: linear;
+  background-color: #f6f7f8;
+  background: linear-gradient(to right, #eeeeee 8%, #bbbbbb 18%, #eeeeee 33%);
+  position: relative;
+  width: 150px;
+  height: 20px;
+}
+
+@keyframes placeHolderShimmer {
+  0% {
+    background-position: -800px 0
+  }
+  100% {
+    background-position: 800px 0
+  }
+}
+</style>
+
+<template>
+    <ul v-if="loading">
+        <li class="animated-bg"></li>
+        <li class="animated-bg"></li>
+        <li class="animated-bg"></li>
+    </ul>
+    <ul v-else>
+        <li><FontAwesomeIcon class="w-5" :icon="['fas', 'envelope']" /> <a :href="`mailto:${email}`">{{ email }}</a></li>
+        <li v-if="tel.hasPhoneNumber"><FontAwesomeIcon class="w-5" :icon="['fas', 'mobile-screen-button']" /><a :href="`tel:${tel.phoneNumber}`">{{ tel.formattedPhoneNumber }}</a></li>
+        <li><FontAwesomeIcon class="w-5" :icon="['fas', 'location-dot']" />{{ location }}</li>
+    </ul>
+</template>

src/components/Education.vue

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

src/components/Header.vue

@@ -0,0 +1,48 @@
+<script setup>
+import { defineProps } from 'vue';
+import { useRoute } from 'vue-router';
+import Mission from '../components/Mission.vue';
+import ContactList from './ContactList.vue';
+
+defineProps({
+    loading: {
+        tyle: Boolean,
+    },
+    email: {
+        type: String,
+    },
+    tel: {
+        type: Object,
+    },
+    locations: {
+        type: Array,
+    },
+});
+</script>
+
+<template>
+    <div class="flex justify-between mx-1 mt-1 print:border-b-2 md:border-b-2">
+        <div class="flex-shrink-0 w-32 h-32">
+            <img class="w-full h-full" alt="Profilowe" src="/me.webp" />
+        </div>
+        <div class="flex flex-col flex-shrink-1 justify-center gap-3 w-full px-4 py-3">
+            <div>
+                <h1 class="text-2xl pb-0.5">Kamil Niemczycki</h1>
+                <p>Inżynier oprogramowania</p>
+            </div>
+            <ContactList
+                :loading="loading"
+                :email="email"
+                :tel="tel"
+                :locations="locations"
+                class="hidden md:flex gap-1 sm:gap-2 md:gap-5 print:flex print:gap-5 flex-wrap flex-1 text-sm" />
+        </div>
+    </div>
+    <ContactList
+        :loading="loading"
+        :email="email"
+        :tel="tel"
+        :locations="locations"
+        class="md:hidden print:hidden flex flex-col gap-2 px-5 py-3 border-b text-sm" />
+    <Mission />
+</template>

src/components/Links.vue

@@ -0,0 +1,37 @@
+<script setup>
+const links = [
+    {
+        slug: 'kamilcraft',
+        faIcon: ['fas', 'link'],
+        url: 'https://kamilcraft.com',
+        title: 'Moja strona',
+        text: 'kamilcraft.com',
+    },
+    {
+        slug: 'linkedin',
+        faIcon: ['fab', 'linkedin'],
+        url: 'https://www.linkedin.com/in/kamilniemczycki/',
+        title: 'Mój LinkedIn',
+        text: '/in/kamilniemczycki',
+    },
+    {
+        slug: 'github',
+        faIcon: ['fab', 'github'],
+        url: 'https://github.com/kamilniemczycki',
+        title: 'Mój GitHub',
+        text: '/kamilniemczycki',
+    },
+];
+</script>
+
+<template>
+    <div class="px-4 py-3">
+        <h2 class="text-xl text-[#E57D4C] pb-2">Znajdziesz mnie</h2>
+        <ul class="flex flex-col gap-1">
+            <li v-for="link in links" :key="link.slug"><a :href="link.url"
+                    :title="link.title"
+                    target="_blink"
+                ><FontAwesomeIcon class="w-6" :icon="link.faIcon" />{{ link.text }}</a></li>
+        </ul>
+    </div>
+</template>

src/components/MajorAchivments.vue

@@ -0,0 +1,38 @@
+<template>
+    <div class="px-1 py-2">
+        <h2 class="text-xl text-[#E57D4C] pb-2">Doświadczenie</h2>
+        <div class="pb-4 mb-4 border-b last:pb-0 last:mb-0 last:border-b-0">
+            <header class="relative mb-2">
+                <h3 class="text-base font-bold">Praktykant</h3>
+                <span class="absolute top-0 right-0 text-base">06.2022 – 07.2022</span>
+                <span class="text-slate-500">Blumilk sp. z o.o.</span>
+            </header>
+            <ul class="pl-5 list-disc">
+                <li>Tworzenie oprogramowania HR dla celów wewnętrznych firmy</li>
+            </ul>
+        </div>
+        <div class="pb-4 mb-4 border-b last:pb-0 last:mb-0 last:border-b-0">
+            <header class="relative mb-2">
+                <h3 class="text-base font-bold">Praktykant</h3>
+                <span class="absolute top-0 right-0 text-base">07.2019 – 08.2019</span>
+                <span class="text-slate-500">Legnickie Przedsiębiorstwo Wodociągów i Kanalizacji S.A.</span>
+            </header>
+            <ul class="pl-5 list-disc">
+                <li>Podstawowy serwis komputerów i drukarek</li>
+                <li>Tworzenie pluginu do obsługi tabel dla oprogramowania DokuWiki</li>
+            </ul>
+        </div>
+        <div class="pb-4 mb-4 border-b last:pb-0 last:mb-0 last:border-b-0">
+            <header class="relative mb-2">
+                <h3 class="text-base font-bold">Praktykant</h3>
+                <span class="absolute top-0 right-0 text-base">07.2018 – 08.2018</span>
+                <span class="text-slate-500">Big Bit Komputer S.J.</span>
+            </header>
+            <ul class="pl-5 list-disc">
+                <li>Podstawowy serwis komputerów i drukarek</li>
+                <li>Aktualizacja, reinstalacja, naprawa systemu Windows</li>
+                <li>Instalacja oprogramowania dla organizacji</li>
+            </ul>
+        </div>
+    </div>
+</template>

src/components/Mission.vue

@@ -0,0 +1,6 @@
+<template>
+    <div class="px-5 py-3 border-b text-justify text-slate-600">
+        <p>Ambitny i nastawiony na cel, gotowy do podjęcia wyzwań absolwent informatyki, który szuka pierwszej pracy jako inżynier oprogramowania.</p>
+        <p>Wyróżnia mnie pracowitość i umiejętność pracy w zespole. Szybko zdobywam potrzebną mi wiedzę i potrafię ją dobrze wykorzystać. Przyjemność sprawia mi tworzenie web aplikacji. Jestem gotowy by rozwijać swoją wiedzę jak i karierę zawodową w tym kierunku.</p>
+    </div>
+</template>

src/components/Skills.vue

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

src/composables/Skills.js

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

src/main.js

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

src/router.js

@@ -0,0 +1,16 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import Home from './views/Home.vue';
+
+export default createRouter({
+    history: createWebHistory(),
+    routes: [
+        {
+            path: '/',
+            component: Home,
+        },
+        {
+            path: '/show/:token',
+            component: Home,
+        }
+    ],
+});

src/style.css

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

src/views/Home.vue

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