Add: add only main tag in tab

app/pages/portfolio/index.vue

@@ -28,7 +28,7 @@ const tags: Array<{ label: string, icon: string } & Tag> = [
     color: 'black',
   },
   ...TAGS,
-].sort((a, b) => a.label.localeCompare(b.label))
+].filter(tag => tag.label === 'All' ? true : tag.sort).sort((a, b) => a.label.localeCompare(b.label))
 
 function updateTag(index: number) {
   const tag = tags[index]
@@ -50,8 +50,7 @@ function updateTag(index: number) {
       icon="i-ph-warning-duotone"
       variant="outline"
     />
-    <UTabs :items="tags" class="hidden md:block" @change="updateTag" />
-    <UTabs :items="tags" orientation="vertical" class="md:hidden" @change="updateTag" />
+    <UTabs :items="tags" @change="updateTag" />
     <ul class="grid grid-cols-1 md:grid-cols-2 gap-8">
       <NuxtLink
         v-for="(writing, id) in writings"

types.ts

@@ -52,6 +52,7 @@ export interface Tag {
   label: string
   icon: string
   color: BadgeColor
+  sort?: boolean
 }
 
 export const TAGS: Array<Tag> = [
@@ -59,11 +60,13 @@ export const TAGS: Array<Tag> = [
     label: 'Article',
     icon: 'i-ph-pencil-line-duotone',
     color: 'red',
+    sort: true,
   },
   {
     label: 'Project',
     icon: 'i-ph-briefcase-duotone',
     color: 'blue',
+    sort: true,
   },
   {
     label: 'R',