feat: ui education

src/components/education/EducationItem.vue

@@ -5,9 +5,15 @@ defineProps<{
 }>();
 </script>
 <template>
-  <div>
+  <div class="wrapper">
-    {{ data.degree }} - {{ data.title }}<br />
+    <div class="header">
-    {{ data.year }} {{ data.location }}
+      <div class="year">{{ data.year }}</div>
+      <div class="degree">{{ data.degree }}</div>
+    </div>
+    <div class="body">
+      <div class="title">{{ data.title }}</div>
+      <div class="location">{{ data.school }} - {{ data.location }}</div>
+    </div>
   </div>
 </template>
 
@@ -17,4 +23,22 @@ export default {
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.wrapper {
+  margin-bottom: 16px;
+}
+.year,
+.degree {
+  font-size: 18px;
+}
+.header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.body {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+</style>