Refactor: Update favicon and enhance user profile display

- Replaced the favicon with a new webp format for better performance.
- Updated the user avatar component in the Quote.vue file to use the new favicon and adjusted its size and styling.
- Added a new section in the projects and writings pages to introduce the author, including links to LinkedIn and GitHub profiles with a personalized message.
- Improved the layout and styling of the author introduction for better visual appeal.

app/components/home/Quote.vue

@@ -9,12 +9,12 @@ const { t } = useI18n({
     <div class="flex items-center">
       <ClientOnly>
         <UTooltip text="It's me 👋">
-          <div class="flex items-center w-12 h-12">
+          <div class="flex items-center6">
             <UAvatar
               alt="Avatar"
-              class="hover:rotate-[360deg] duration-500 transform-gpu"
-              size="md"
-              src="/favicon.png"
+              class="hover:rotate-[360deg] duration-500 transform-gpu rounded-full"
+              size="xl"
+              src="/favicon.webp"
             />
           </div>
         </UTooltip>