use h3 instead of trpc

src/components/Announcement.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-const { $trpc } = useNuxtApp()
-const announce = await $trpc.announcement.get.query()
+const { data: announce } = await useFetch('/api/announcement')
 
 const appConfig = useAppConfig()
 function getColor() {

src/components/header/Header.vue

@@ -1,24 +1,15 @@
-<script setup lang="ts">
-defineProps({
-  navigation: {
-    type: Boolean,
-    default: true,
-  },
-})
-</script>
-
 <template>
   <header class="z-30 sticky top-0 left-0 flex justify-center w-full">
-    <div class="w-full px-4 sm:px-6 lg:px-8 sm:mx-8 max-w-7xl py-4 flex justify-between bg-white dark:bg-zinc-900 border-b border-zinc-100 dark:border-zinc-300/10">
+    <div class="w-full px-4 sm:px-6 lg:px-8 sm:mx-8 max-w-7xl py-4 flex justify-between items-center bg-white dark:bg-zinc-900 border-b border-zinc-100 dark:border-zinc-300/10">
       <ClientOnly>
         <Logo />
-        <NavBar v-if="navigation" />
-        <div class="flex gap-2">
+        <NavBar />
+        <div class="flex gap-2 items-center">
           <div class="flex items-center rounded-md p-1 gap-1 relative bg-black/5 text-sm font-medium text-zinc-700 dark:bg-zinc-800/90 dark:text-zinc-300">
             <ColorPicker />
             <ColorModeButton />
           </div>
-          <MobileNavBar v-if="navigation" />
+          <MobileNavBar />
         </div>
       </ClientOnly>
     </div>

src/components/header/MobileNavBar.vue

@@ -54,7 +54,7 @@ function isRoute(path: string) {
 </script>
 
 <template>
-  <div class="md:hidden">
+  <div class="lg:hidden">
     <div class="p-1 rounded-md bg-black/5 text-sm font-medium text-zinc-700 dark:bg-zinc-800/90 dark:text-zinc-300">
       <UButton
         variant="ghost"
@@ -69,7 +69,7 @@ function isRoute(path: string) {
       <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
         <template #header>
           <div class="flex justify-between items-center">
-            <div>Logo</div>
+            <Logo />
             <UButton
               size="md"
               icon="i-ic-round-close"

src/components/header/NavBar.vue

@@ -6,15 +6,15 @@ const items = [
     to: '/talents',
     icon: 'i-ph-users-bold',
   }, {
-    label: 'Bookmarks',
-    to: '/bookmarks',
-    icon: 'i-ph-bookmark-simple-bold',
+    label: 'Guestbook',
+    to: '/guestbook',
+    icon: 'i-material-symbols-book-2-outline',
   }],
 ]
 </script>
 
 <template>
-  <nav class="hidden md:block z-50">
+  <nav class="hidden lg:block z-50">
     <div class="flex items-center h-10 rounded-md p-1 gap-1 relative bg-black/5 text-sm font-medium text-zinc-700 dark:bg-zinc-800/90 dark:text-zinc-300">
       <UButton to="/" size="sm" variant="ghost" color="white" :class="{ 'link-active': route.path === '/' }">
         Home

src/components/resume/Skill.vue

@@ -15,8 +15,8 @@ const isLight = computed(() => $colorMode.value === 'light')
     class="flex items-center gap-2 rounded-md px-2 py-3 duration-300 md:hover:bg-gray-100 md:dark:hover:bg-neutral-800"
   >
     <div class="flex items-center">
-      <Icon v-if="isLight" :name="skill.icon.light ? skill.icon.light : skill.icon" size="20" />
-      <Icon v-else :name="skill.icon.dark ? skill.icon.dark : skill.icon" size="20" />
+      <UIcon v-if="isLight" :name="skill.icon.light ? skill.icon.light : skill.icon" size="20" dynamic />
+      <UIcon v-else :name="skill.icon.dark ? skill.icon.dark : skill.icon" size="20" dynamic />
     </div>
     <span class="text-sm text-subtitle">{{ skill.name }}</span>
   </li>