Import drizzle replacing prisma

Signed-off-by: Arthur DANJOU <arthurdanjou@outlook.fr>

components/resume/DateTag.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+defineProps({
+  startDate: String,
+  endDate: {
+    type: String,
+    required: true
+  }
+})
+
+function formatTodayDate(date: string) {
+  const split = date.split(' ')
+  return date === 'Today' ? 'Today' : `${split[0]} ${split[1]}`
+}
+</script>
+
+<template>
+  <UBadge
+    v-if="startDate !== endDate"
+    size="xs"
+    variant="soft"
+  >
+    {{ formatTodayDate(startDate!.toString()) }} — {{ formatTodayDate(endDate) }}
+  </UBadge>
+  <UBadge
+    v-else
+    size="xs"
+    variant="soft"
+  >
+    {{ formatTodayDate(endDate) }}
+  </UBadge>
+</template>

components/resume/Education.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { Education } from '~~/types'
+
+defineProps({
+  education: Object as PropType<Education>
+})
+</script>
+
+<template>
+  <div
+    v-if="education"
+    class="group relative flex flex-col items-start"
+  >
+    <div class="flex flex-col">
+      <div>
+        <DateTag
+          :end-date="education.endDate"
+          :start-date="education.startDate"
+        />
+      </div>
+      <h1 class="my-1 text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">
+        {{ education.title }}
+      </h1>
+    </div>
+    <p class="text-justify leading-5 text-sm text-zinc-600 dark:text-zinc-400">
+      {{ education.location }} — {{ education.description }}
+    </p>
+  </div>
+</template>

components/resume/Experience.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { WorkExperience } from '~~/types'
+
+defineProps({
+  experience: Object as PropType<WorkExperience>
+})
+</script>
+
+<template>
+  <div
+    v-if="experience"
+    class="group relative flex flex-col items-start"
+  >
+    <div>
+      <div class="flex flex-col">
+        <div>
+          <DateTag
+            :end-date="experience.endDate"
+            :start-date="experience.startDate"
+          />
+        </div>
+        <div class="flex items-center my-1">
+          <UButton
+            v-if="experience.companyLink"
+            :to="experience.companyLink"
+            variant="link"
+            :padded="false"
+            color="white"
+            size="xl"
+            target="_blank"
+            :label="experience.company"
+            class="mr-3 text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100"
+          >
+            <template #leading>
+              <UIcon
+                color="gray"
+                name="i-akar-icons-link-chain"
+              />
+            </template>
+          </UButton>
+          <h1
+            v-else
+            class="mr-3 my-1 text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100"
+          >
+            {{ experience.company }}
+          </h1>
+          <div class="text-subtitle text-xs">
+            {{ experience.location }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <p class="text-justify leading-5 text-sm text-zinc-600 dark:text-zinc-400">
+      {{ experience.title }} — {{ experience.description }}
+    </p>
+  </div>
+</template>

components/resume/Skill.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { Skill } from '~~/types'
+
+defineProps({
+  skill: Object as PropType<Skill>
+})
+
+const { $colorMode } = useNuxtApp()
+const isLight = computed(() => $colorMode.value === 'light')
+</script>
+
+<template>
+  <li
+    v-if="skill"
+    class="flex items-center gap-2 rounded-md px-2 py-3 duration-300 md:hover:bg-gray-100 md:dark:hover:bg-neutral-800"
+  >
+    <div class="flex items-center">
+      <UIcon
+        v-if="isLight"
+        :name="skill.icon.light ? skill.icon.light : skill.icon"
+        dynamic
+        size="20"
+      />
+      <UIcon
+        v-else
+        :name="skill.icon.dark ? skill.icon.dark : skill.icon"
+        dynamic
+        size="20"
+      />
+    </div>
+    <span class="text-sm text-subtitle">{{ skill.name }}</span>
+  </li>
+</template>