Updated image position

README.md

@@ -54,6 +54,7 @@ layout: about-me
 helloMsg: Hello!
 name: <name>
 imageSrc: <image url>
+position: <left or right>
 job: <job title>
 line1: 
 line2: 

changelog.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [0.0.22] - 2024-11-08
+
+- Added support for the `about-me` slide to position the image
+
 ## [0.0.21] - 2024-09-28
 
 - Update dependencies and example

example.md

@@ -50,7 +50,8 @@ layout: about-me
 
 helloMsg: Hello!
 name: Elio Struyf
-imageSrc: https://elio.dev/eliostruyf_2023.jpg
+imageSrc: https://elio.dev/eliostruyf_2024.webp
+position: left
 job: Struyf Consulting 
 line1: "#Stickerpreneur @ pyod.shop"
 line2: "#Maintainer @ Front Matter CMS"

layouts/about-me.vue

@@ -13,20 +13,24 @@
     social1?: string
     social2?: string
     social3?: string
+    position?: string
   }>()
 
   const style = computed(() => handleBackground(props.imageSrc, false))
+  const flexRow = computed(() => props.position === 'left' ? 'flex-row-reverse' : 'flex-row')
+  const textItems = computed(() => props.position === 'left' ? 'items-start' : 'items-end')
+  const textAlign = computed(() => props.position === 'left' ? 'text-left' : 'text-right')
 </script>
 
 <template>
   <div class="slidev-layout about-me p-0">
-    <div class="flex h-full">
+    <div class="flex h-full" :class="flexRow">
       <div class="w-1/2 h-full flex flex-col justify-end" :style="style">
       </div>
-      <div class="w-1/2 flex flex-col justify-between items-end px-8 py-16">
+      <div class="w-1/2 flex flex-col justify-between px-8 py-16" :class="textItems">
         <h1 v-if="helloMsg" class="flex">{{ helloMsg }}</h1>
 
-        <div class="flex flex-col justify-end items-end text-right py-16">
+        <div class="flex flex-col flex flex-col justify-end py-16" :class="[textItems, textAlign]">
           <h2 class="font-extrabold">{{ name }}</h2>
 
           <div class="text-2xl space-y-2 mt-4">