feat: add experiences

src/components/common/LeftSection.vue

@@ -26,11 +26,29 @@ defineProps<{
   font-weight: bolder;
   font-variant: small-caps;
   text-transform: capitalize;
-  background-color: lightblue;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
   padding-top: 8px;
   padding-bottom: 8px;
   padding-left: 8px;
   text-align: center;
+  width: auto;
+}
+.title::before,
+.title::after {
+  content: "";
+  border-top: 1px solid gray;
+  width: 100%;
+}
+
+.title::before {
+  margin-right: 12px;
+}
+
+.title::after {
+  margin-left: 12px;
 }
 .body {
   flex: 1;

src/components/experiences/MyExperiences.vue

@@ -4,19 +4,85 @@ import RightSection from "@/components/common/RightSection.vue";
 
 <template>
   <RightSection :title="$t('section.experiences')">
-    {{ message }}
+    <div class="experiences">
+      <div class="experience" v-for="experience in experiences">
+        <div class="header">{{ experience.company }}</div>
+        <div class="body-wrapper">
+          <div class="border">
+            <div class="end">{{ experience.endAt }}</div>
+            <div style="flex-grow: 1"> </div>
+            <div class="start">{{ experience.startAt }}</div>
+          </div>
+          <div class="body">
+            <div v-for="mission in experience.missions">
+              {{ mission.description }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </RightSection>
 </template>
 
 <script lang="ts">
-export default {
+import experiences from "@/data/experiences";
+import { defineComponent } from "vue";
+
+export default defineComponent({
   name: "MyExperiences",
-  data: () => {
+  data() {
     return {
-      message: "Here are my experiences",
+      experiences: experiences,
     };
   },
-};
+});
 </script>
 
-<style scoped></style>
+<style scoped>
+.experiences {
+  padding-top: 14px;
+  display: flex;
+  flex-direction: column;
+}
+.header {
+}
+.border {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  writing-mode: tb-rl;
+}
+.experiences > div:nth-child(even) .start {
+  transform: none;
+}
+.experiences > div:nth-child(odd) .start {
+  transform: rotate(180deg);
+}
+.experiences > div:nth-child(even) .end {
+  transform: none;
+}
+.experiences > div:nth-child(odd) .end {
+  transform: rotate(180deg);
+}
+.experiences > div:nth-child(even) .header {
+  text-align: right;
+  margin-right: 20px;
+}
+.experiences > div:nth-child(odd) .header {
+  text-align: left;
+  margin-left: 20px;
+}
+.experiences > div:nth-child(even) .border {
+  order: 2;
+}
+.experiences > div:nth-child(odd) .border {
+  order: 0;
+}
+.body-wrapper {
+  display: flex;
+  flex-direction: row;
+}
+.body {
+  margin: 16px;
+}
+</style>

vite.config.ts

@@ -7,6 +7,9 @@ import vueJsx from "@vitejs/plugin-vue-jsx";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue(), vueJsx()],
+  server: {
+    port: 8311,
+  },
   resolve: {
     alias: {
       "@": fileURLToPath(new URL("./src", import.meta.url)),