- more api

src/components/Body.vue

@@ -10,7 +10,15 @@ const props = defineProps({
     token: {
         default: null,
         type: [String, null],
-    }
+    },
+    rodo: {
+        default: null,
+        type: [String, null],
+    },
+    loading: {
+        required: true,
+        type: Boolean,
+    },
 });
 
 const qrCodeLink = computed(() => {
@@ -27,14 +35,21 @@ const qrCodeLink = computed(() => {
             <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)
+                <template v-if="!loading">
+                    <template v-if="rodo">
+                        {{ rodo }}
+                    </template>
+                    <template v-else>
+                        Wyrażam zgodę na przetwarzanie moich danych osobowych dla potrzeb
+                        niezbędnych do realizacji procesu rekrutacji (zgodnie z ustawą z
+                        dnia 10 maja 2018 roku o ochronie danych osobowych (Dz. Ustaw z 2018,
+                        poz. 1000) oraz zgodnie z Rozporządzeniem Parlamentu
+                        Europejskiego i Rady (UE) 2016/679 z dnia 27 kwietnia 2016 r. w sprawie
+                        ochrony osób fizycznych w związku z przetwarzaniem danych
+                        osobowych i w sprawie swobodnego przepływu takich danych oraz
+                        uchylenia dyrektywy 95/46/WE (RODO).
+                    </template>
+                </template>
             </div>
         </div>
         <div class="relative print:w-1/3 print:flex-shrink-1 md:w-1/3 md:flex-shrink-1 bg-[#fff0e9]">

src/components/ContactList.vue

@@ -27,30 +27,6 @@ const location = computed(() => {
 });
 </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>

src/components/Header.vue

@@ -17,9 +17,39 @@ defineProps({
     locations: {
         type: Array,
     },
+    position: {
+        type: [String, null],
+    },
+    mission: {
+        type: Array,
+    },
 });
 </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>
     <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">
@@ -28,7 +58,7 @@ defineProps({
         <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>
+                <p>{{ position ?? 'Inżynier oprogramowania' }}</p>
             </div>
             <ContactList
                 :loading="loading"
@@ -44,5 +74,5 @@ defineProps({
         :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="mission" :loading="loading" />
 </template>

src/components/Mission.vue

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