About page

src/components/content/GridSection.vue

@@ -14,7 +14,10 @@ const getColor = computed(() => `text-${appConfig.ui.primary}-500`)
 <template>
   <section class="md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40 mb-24">
     <div class="grid max-w-3xl grid-cols-1 items-baseline gap-y-8 md:grid-cols-4">
-      <h2 class="text-sm font-semibold" :class="getColor">
+      <h2 class="relative text-sm font-semibold pl-3.5" :class="getColor">
+        <span class="md:hidden absolute inset-y-0 left-0 flex items-center">
+          <span class="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500" />
+        </span>
         {{ title }}
       </h2>
       <div class="md:col-span-3">

src/components/resume/DateTag.vue

@@ -0,0 +1,29 @@
+<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>
+  <div
+    v-if="startDate !== endDate"
+    class="mb-1 translate-y-px inline-block flex-none rounded bg-zinc-200 p-1 text-xs font-medium leading-none text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400"
+  >
+    {{ formatTodayDate(startDate!.toString()) }} — {{ formatTodayDate(endDate) }}
+  </div>
+  <div
+    v-else
+    class="mb-1 translate-y-px inline-block flex-none rounded bg-zinc-200 p-1 text-xs font-medium leading-none text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400"
+  >
+    {{ formatTodayDate(endDate) }}
+  </div>
+</template>

src/components/resume/Education.vue

@@ -0,0 +1,23 @@
+<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 :start-date="education.startDate" :end-date="education.endDate" />
+      </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>

src/components/resume/Experience.vue

@@ -0,0 +1,39 @@
+<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 :start-date="experience.startDate" :end-date="experience.endDate" />
+        </div>
+        <UButton
+          v-if="experience.companyLink"
+          :to="experience.companyLink"
+          variant="link"
+          :padded="false"
+          color="white"
+          size="xl"
+          :label="experience.company"
+          class="my-1 text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100"
+        >
+          <template #trailing>
+            <UIcon name="i-ph-arrow-up-right-bold" color="gray"/>
+          </template>
+        </UButton>
+        <h1 v-else class="my-1 text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">
+          {{ experience.company }}
+        </h1>
+      </div>
+    </div>
+    <p class="text-justify leading-5 text-sm text-zinc-600 dark:text-zinc-400">
+      {{ experience.title }} — {{ experience.description }}
+    </p>
+  </div>
+</template>

src/components/resume/Skill.vue

@@ -0,0 +1,23 @@
+<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 hover:bg-gray-100 dark:hover:bg-gray-800"
+  >
+    <div class="flex items-center">
+      <Icon v-if="isLight" :name="skill.icon.light ? skill.icon.light : skill.icon" size="20" />
+      <Icon v-else :name="skill.icon.dark ? skill.icon.dark : skill.icon" size="20" />
+    </div>
+    <span class="text-sm text-subtitle">{{ skill.name }}</span>
+  </li>
+</template>