initial commit

app/components/landing/Education.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type { IndexCollectionItem } from '@nuxt/content'
+
+defineProps<{
+  page: IndexCollectionItem
+}>()
+</script>
+
+<template>
+  <UPageSection
+    :title="page.education.title"
+    :ui="{
+      container: '!p-0 gap-4 sm:gap-4',
+      title: 'text-left text-xl sm:text-xl lg:text-2xl font-medium',
+      description: 'mt-2'
+    }"
+  >
+    <template #description>
+      <div class="flex flex-col gap-2">
+        <Motion
+          v-for="(education, index) in page.education.items"
+          :key="index"
+          :initial="{ opacity: 0, transform: 'translateY(20px)' }"
+          :while-in-view="{ opacity: 1, transform: 'translateY(0)' }"
+          :transition="{ delay: 0.4 + 0.2 * index }"
+          :in-view-options="{ once: true }"
+          class="text-muted flex items-center text-nowrap gap-2"
+        >
+          <p class="text-sm">
+            {{ education.date }}
+          </p>
+          <USeparator />
+          <ULink
+            class="flex items-center gap-1"
+            :to="education.institution.url"
+            target="_blank"
+          >
+            <span class="text-sm">
+              {{ education.degree }}
+            </span>
+            <div
+              class="inline-flex items-center gap-1"
+              :style="{ color: education.institution.color }"
+            >
+              <span class="font-medium">{{ education.institution.name }}</span>
+              <img
+                :src="education.institution.logo" 
+                :alt="education.institution.name"
+                :width=32
+              />
+            </div>
+          </ULink>
+        </Motion>
+      </div>
+    </template>
+  </UPageSection>
+</template>
+
+<style scoped>
+
+</style>