feat: display exp details on mobile and refactor company name

tmthyadms · Oct 22, 2023 · 00912a9 · 00912a9
1 parent c6b357c
commit 00912a9
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/components/card-exp.vue b/components/card-exp.vue
@@ -1,23 +1,22 @@
 <template>
   <AppCard class="group min-h-[24rem] app-border shadow-inner overflow-hidden">
-    <h2 class="m-auto font-black text-3xl lg:text-4xl text-base-content/[0.25]">
-      Benefit Solutions<br class="inline" /><span class="hidden lg:inline"
-        >&nbsp;</span
-      >Pte Ltd
-    </h2>
+    <h2
+      class="m-auto font-black text-3xl lg:text-4xl text-base-content/[0.25]"
+      v-html="exp.company"
+    ></h2>
     <div
-      class="space-y-2 translate-y-full group-hover:translate-y-0 transition duration-500 ease-out"
+      class="space-y-2 lg:translate-y-full lg:group-hover:translate-y-0 transition duration-500 ease-out"
     >
       <h3
-        class="card-title text-lg lg:text-xl -translate-y-full group-hover:translate-y-0 transition-transform duration-500 ease-out"
+        class="card-title text-lg lg:text-xl lg:-translate-y-full lg:group-hover:translate-y-0 transition-transform duration-500 ease-out"
       >
         {{ exp.role }}
         <IconArrowRight
-          class="group-hover:animate-none group-hover:translate-x-1 group-hover:opacity-0 transition duration-300"
+          class="hidden lg:block lg:group-hover:animate-none lg:group-hover:translate-x-1 lg:group-hover:opacity-0 transition duration-300"
         />
       </h3>
       <div
-        class="space-y-2 opacity-0 group-hover:opacity-100 transition-all duration-300 ease-out group-hover:ease-in"
+        class="space-y-2 lg:opacity-0 lg:group-hover:opacity-100 transition-all duration-300 ease-out lg:group-hover:ease-in"
       >
         <p class="text-xs text-start opacity-60">
           <span v-if="exp?.desc">{{ exp.desc }}</span>

diff --git a/components/hero-exp.vue b/components/hero-exp.vue
@@ -13,7 +13,8 @@ export default {
       exps: [
         {
           role: "Frontend Intern",
-          company: "Benefit Solutions Pte Ltd",
+          company:
+            'Benefit Solutions<br class="inline" /><span class="hidden lg:inline">&nbsp;</span>Pte Ltd',
           companyUrl: "https://www.benefitsolutions.com.sg",
           duration: "Aug 2023 - Jan 2024",
           desc: "",