Create resume page (#39)

* create empty resume page

* fix page width issue

* add experience section in my resume markdown

* add remaining resume data

app.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="relative flex min-h-screen flex-col">
     <Header />
-    <div class="mt-16 grow pb-16 pt-0 lg:px-64 lg:pt-16">
+    <div class="mx-auto mt-16 grow pb-16 pt-0 lg:w-3/6 lg:pt-16">
       <NuxtPage />
     </div>
     <Footer />

components/Header.vue

@@ -28,6 +28,7 @@ const toggleColorMode = (e: Event) => {
         >
           <li><nuxt-link to="/about">About</nuxt-link></li>
           <li><nuxt-link to="/blog">Blog</nuxt-link></li>
+          <li><nuxt-link to="/resume">Resume</nuxt-link></li>
           <li><nuxt-link to="/projects">Projects</nuxt-link></li>
         </ul>
       </div>
@@ -41,6 +42,7 @@ const toggleColorMode = (e: Event) => {
       <ul class="menu menu-horizontal gap-1 px-1">
         <li><nuxt-link to="/about">About</nuxt-link></li>
         <li><nuxt-link to="/blog">Blog</nuxt-link></li>
+        <li><nuxt-link to="/resume">Resume</nuxt-link></li>
         <li><nuxt-link to="/projects">Projects</nuxt-link></li>
       </ul>
     </div>

content/resume.md

@@ -0,0 +1,32 @@
+# Resume
+
+---
+
+## Experience
+
+Jan 2023 - Sep 2023: **Software Engineer** @Simplero \
+Jul 2018 - Jan 2023: **Full-stack Developer** @Arba Minch University \
+Dec 2017 - Jul 2018: **Website Administrator** @Arba Minch University \
+Mar 2015 - Dec 2017: **Junio System Administrator** @Arba Minch University \
+Jun 2018 - Feb 2019: **Code Reviewer** @Microverse
+
+## Education
+
+Feb 2018 - Aug 2018: **Full-stack Web Development** @Microverse \
+Jan 2010 - Dec 2014: **BSc In Computer Science** @Addis Ababa Univerity
+
+## I love working with
+
+Vue (+Nuxt) \
+Ruby on Rails \
+Tailwindcss
+
+## Contact
+
+```js
+const me = {
+  email: "[email protected]",
+  github: "github.com/wuletawwonte",
+  linkedin: "linkedin.com/in/wuletawwonte",
+};
+```

pages/blog/[...slug].vue

@@ -1,5 +1,5 @@
 <template>
   <main>
-    <ContentDoc class="prose px-4 lg:prose-xl lg:px-8" />
+    <ContentDoc class="prose px-4 lg:prose-xl" />
   </main>
 </template>

pages/resume/index.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const resume = ref(null);
+</script>
+
+<template>
+  <div
+    class="prose flex max-w-none flex-col font-ubuntu prose-hr:border-2 prose-hr:border-dashed"
+  >
+    <ContentDoc path="resume">
+      <template #empty>
+        <div class="flex h-96 items-center justify-center">
+          <div class="flex flex-col items-center">
+            <p>No resume document found</p>
+          </div>
+        </div>
+      </template>
+    </ContentDoc>
+  </div>
+</template>