style: refine component layouts and styles across AppExperience, AppNavbar, and InfoCard for improved consistency and responsiveness

Author: boomNDS

components/AppExperience.vue

@@ -11,7 +11,7 @@
         Highlights from roles where I’ve shipped full-stack products, scaled
         platforms, and refined UX flows.
       </p>
-      <div class="flex flex-wrap items-center gap-2 pt-1">
+      <div class="flex flex-wrap items-baseline gap-2 pt-1">
         <p class="m-0 text-xs uppercase tracking-[0.18em] text-gray-500">
           Teams I’ve worked with
         </p>
@@ -106,7 +106,7 @@
           </div>
 
           <div
-            class="rounded-xl border-4 border-[var(--color-border)] bg-[var(--color-card)] shadow-[var(--shadow-mid)] p-5"
+            class="rounded-xl border-4 border-[var(--color-border)] bg-[var(--color-card)] shadow-[var(--shadow-mid)] p-4"
           >
             <div
               class="flex flex-col md:flex-row md:items-start md:justify-between gap-3"

components/AppNavbar.vue

@@ -6,7 +6,7 @@
   >
     <div
       ref="navRef"
-      class="w-full max-w-[1200px] mx-auto px-1.5 sm:px-2 md:px-3 lg:px-4 py-3"
+      class="w-full max-w-[1200px] mx-auto px-1.5 sm:px-2 md:px-3 lg:px-4 py-2"
     >
       <div
         class="flex items-center justify-between gap-0.5 sm:gap-1 md:gap-2 w-full min-w-0"
@@ -24,7 +24,7 @@
             loading="lazy"
             width="64"
             height="64"
-            class="block h-7 sm:h-9 md:h-10 w-auto transition-transform duration-200"
+            class="block h-7 sm:h-8 md:h-9 w-auto transition-transform duration-200"
           />
         </button>
 

components/commons/InfoCard.vue

@@ -98,13 +98,13 @@
       <p
         v-for="(tag, index) in visibleTags"
         :key="`tag-${index}`"
-        class="m-0 px-2 py-[2px] rounded-full bg-[var(--color-light)] border border-[var(--color-border)]/10"
+        class="m-0 px-1.5 py-[1px] rounded-full bg-[var(--color-light)] border border-[var(--color-border)]/10"
       >
         #{{ tag }}
       </p>
       <p
         v-if="hiddenTagCount > 0"
-        class="m-0 px-2 py-[2px] rounded-full bg-[var(--color-light)] border border-[var(--color-border)]/10"
+        class="m-0 px-1.5 py-[1px] rounded-full bg-[var(--color-light)] border border-[var(--color-border)]/10"
       >
         +{{ hiddenTagCount }}
       </p>
@@ -114,6 +114,7 @@
 
 <script setup lang="ts">
 import type { PropType } from "vue";
+import { useMediaQuery } from "@vueuse/core";
 
 export interface Link {
   type: string;
@@ -184,7 +185,12 @@ const isVideo = computed(() => {
   return /\.(mp4|webm|ogg)$/i.test(props.imageSrc);
 });
 
-const visibleTags = computed(() => props.tags.slice(0, 3));
+const isSmallScreen = import.meta.client
+  ? useMediaQuery("(max-width: 639px)")
+  : ref(false);
+const visibleTags = computed(() =>
+  props.tags.slice(0, isSmallScreen.value ? 2 : 3),
+);
 const hiddenTagCount = computed(() =>
   Math.max(0, props.tags.length - visibleTags.value.length),
 );
@@ -208,7 +214,7 @@ watch(
 <style scoped>
 .desc {
   display: -webkit-box;
-  -webkit-line-clamp: 3;
+  -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }

components/commons/StackCard.vue

@@ -1,12 +1,14 @@
 <template>
   <div
-    class="flex flex-col items-center justify-center text-center mb-2 rounded-xl border-2 border-[var(--color-border)] bg-[var(--color-card)] px-3 py-4 shadow-[var(--shadow-soft)] hover:-translate-y-[2px] hover:shadow-[var(--shadow-mid)] transition duration-150"
+    class="group flex flex-col items-center justify-center text-center mb-2 rounded-xl border-2 border-[var(--color-border)] bg-[var(--color-card)] px-3 py-4 shadow-[var(--shadow-soft)] hover:-translate-y-[2px] hover:shadow-[var(--shadow-mid)] transition duration-150"
   >
     <div
       :class="[iconSrc]"
-      class="text-4xl md:text-5xl grayscale hover:grayscale-0 ease-in-out duration-300 mb-2"
+      class="text-4xl md:text-5xl grayscale group-hover:grayscale-0 ease-in-out duration-300 mb-2"
     ></div>
-    <p class="m-0 font-semibold text-[var(--color-dark)] capitalize">
+    <p
+      class="m-0 font-semibold text-[var(--color-dark)] capitalize group-hover:text-[var(--color-primary)] transition-colors duration-200"
+    >
       {{ iconTitle }}
     </p>
     <p class="m-0 text-[12px] text-[var(--color-text)] opacity-80">

public/showcase.json

@@ -91,7 +91,7 @@
       }
     ],
     "img": "flutter.mp4",
-    "tags": ["flutter", "firebase"],
+    "tags": ["Flutter", "Firebase"],
     "category": ["app"]
   },
   {
@@ -109,7 +109,7 @@
       }
     ],
     "img": "run.webp",
-    "tags": ["django", "vue.js", "design"],
+    "tags": ["Django", "Vue", "design"],
     "category": ["frontend"]
   },
   {
@@ -127,7 +127,7 @@
       }
     ],
     "img": "vuetheater.webp",
-    "tags": ["vue.js"],
+    "tags": ["Vue"],
     "category": ["frontend"]
   },
   {
@@ -164,7 +164,7 @@
       }
     ],
     "img": "url-shortener.webp",
-    "tags": ["node", "vite", "vue.js"],
+    "tags": ["Node", "vite", "Vue"],
     "category": ["frontend", "backend"]
   },
   {
@@ -173,7 +173,7 @@
     "meta": "Product · 2020",
     "links": [],
     "img": "dev_disrupt.webp",
-    "tags": ["design", "vue.js", "concept"],
+    "tags": ["design", "Vue", "concept"],
     "category": ["design"]
   },
   {
@@ -182,7 +182,7 @@
     "meta": "Full stack · 2022",
     "links": [],
     "img": "coop-ekarko.webp",
-    "tags": ["django", "react"],
+    "tags": ["Django", "React"],
     "category": ["frontend", "backend"]
   },
   {
@@ -191,7 +191,7 @@
     "meta": "Frontend · 2022",
     "links": [],
     "img": "nutmor.webp",
-    "tags": ["tailwind", "nuxt.js"],
+    "tags": ["Tailwind", "Nuxt"],
     "category": ["frontend"]
   },
   {
@@ -210,7 +210,7 @@
     "meta": "Automation · 2022",
     "links": [],
     "img": "discord.webp",
-    "tags": ["node", "discord", "wos"],
+    "tags": ["Node", "discord", "wos"],
     "category": ["backend"]
   },
   {
@@ -241,7 +241,12 @@
     "detail": "Sales landing page for courses; created the project setup and initial flow as a monorepo.",
     "meta": "Frontend + Backend · 2023",
     "result": "Revenue lift",
-    "links": [{ "type": "link", "url": "https://lp.globish.co.th" }],
+    "links": [
+      {
+        "type": "link",
+        "url": "https://lp.globish.co.th"
+      }
+    ],
     "img": "globish-sale-page.webp",
     "tags": ["globish"],
     "category": ["frontend", "backend"]
@@ -253,7 +258,7 @@
     "result": "Ops speed",
     "links": [],
     "img": "wh-globish.webp",
-    "tags": ["globish", "nuxt.js", "nest.js"],
+    "tags": ["globish", "Nuxt", "Nest"],
     "category": ["frontend", "backend"]
   },
   {
@@ -262,7 +267,7 @@
     "meta": "Full stack · 2023",
     "links": [],
     "img": "globish-coach.webp",
-    "tags": ["globish", "nuxt.js", "nest.js"],
+    "tags": ["globish", "Nuxt", "Nest"],
     "category": ["frontend", "backend"]
   },
   {
@@ -271,7 +276,7 @@
     "meta": "Full stack · 2023",
     "links": [],
     "img": "globish.webp",
-    "tags": ["globish", "nuxt.js", "nest.js"],
+    "tags": ["globish", "Nuxt", "Nest"],
     "category": ["frontend", "backend"]
   },
   {
@@ -280,7 +285,7 @@
     "meta": "Full stack · 2023",
     "links": [],
     "img": "app-globish.webp",
-    "tags": ["globish", "nuxt.js", "nest.js"],
+    "tags": ["globish", "Nuxt", "Nest"],
     "category": ["frontend", "backend"]
   }
 ]