From f438ea4252ec3773038648747a085d0dfac89a25 Mon Sep 17 00:00:00 2001
From: saicaca <zephyird@gmail.com>
Date: Sun, 30 Jun 2024 01:30:03 +0800
Subject: [PATCH] feat: style improvements (mainly animations)

---
 package.json                        |  1 +
 pnpm-lock.yaml                      | 68 +++++++++++++++++++----------
 src/components/GlobalStyles.astro   | 16 ++++---
 src/components/PostCard.astro       | 12 ++---
 src/components/widget/Profile.astro | 32 +++++++-------
 5 files changed, 78 insertions(+), 51 deletions(-)

diff --git a/package.json b/package.json
index 725aa8d..e4d57c4 100644
--- a/package.json
+++ b/package.json
@@ -59,6 +59,7 @@
     "@types/mdast": "^4.0.4",
     "@types/sanitize-html": "^2.11.0",
     "remark-github-admonitions-to-directives": "^1.0.5",
+    "sass": "^1.77.6",
     "stylus": "^0.63.0"
   },
   "pnpm": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6528b76..0477f60 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,10 +23,10 @@ importers:
         version: 3.1.6
       '@astrojs/svelte':
         specifier: ^5.6.0
-        version: 5.6.0(astro@4.11.0(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2))(svelte@4.2.18)(typescript@5.5.2)(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1))
+        version: 5.6.0(astro@4.11.0(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2))(svelte@4.2.18)(typescript@5.5.2)(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1))
       '@astrojs/tailwind':
         specifier: ^5.1.0
-        version: 5.1.0(astro@4.11.0(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2))(tailwindcss@3.4.4)
+        version: 5.1.0(astro@4.11.0(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2))(tailwindcss@3.4.4)
       '@fontsource-variable/jetbrains-mono':
         specifier: ^5.0.21
         version: 5.0.21
@@ -38,10 +38,10 @@ importers:
         version: 1.4.1(@types/babel__core@7.20.5)
       astro:
         specifier: ^4.11.0
-        version: 4.11.0(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2)
+        version: 4.11.0(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2)
       astro-compress:
         specifier: ^2.2.28
-        version: 2.2.28(@types/node@20.14.7)(stylus@0.63.0)(typescript@5.5.2)
+        version: 2.2.28(@types/node@20.14.7)(sass@1.77.6)(stylus@0.63.0)(typescript@5.5.2)
       astro-icon:
         specifier: 1.1.0
         version: 1.1.0
@@ -145,6 +145,9 @@ importers:
       remark-github-admonitions-to-directives:
         specifier: ^1.0.5
         version: 1.0.5
+      sass:
+        specifier: ^1.77.6
+        version: 1.77.6
       stylus:
         specifier: ^0.63.0
         version: 0.63.0
@@ -2650,6 +2653,9 @@ packages:
     peerDependencies:
       postcss: ^8.1.0
 
+  immutable@4.3.6:
+    resolution: {integrity: sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==}
+
   import-cwd@3.0.0:
     resolution: {integrity: sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg==}
     engines: {node: '>=8'}
@@ -4047,6 +4053,11 @@ packages:
   sanitize-html@2.13.0:
     resolution: {integrity: sha512-Xff91Z+4Mz5QiNSLdLWwjgBDm5b1RU6xBT0+12rapjiaR7SwfRdjw8f+6Rir2MXKLrDicRFHdb51hGOAxmsUIA==}
 
+  sass@1.77.6:
+    resolution: {integrity: sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
   sax@1.3.0:
     resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==}
 
@@ -4811,10 +4822,10 @@ snapshots:
       stream-replace-string: 2.0.0
       zod: 3.23.8
 
-  '@astrojs/svelte@5.6.0(astro@4.11.0(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2))(svelte@4.2.18)(typescript@5.5.2)(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1))':
+  '@astrojs/svelte@5.6.0(astro@4.11.0(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2))(svelte@4.2.18)(typescript@5.5.2)(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.1.1(svelte@4.2.18)(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1))
-      astro: 4.11.0(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2)
+      '@sveltejs/vite-plugin-svelte': 3.1.1(svelte@4.2.18)(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1))
+      astro: 4.11.0(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2)
       svelte: 4.2.18
       svelte2tsx: 0.7.10(svelte@4.2.18)(typescript@5.5.2)
       typescript: 5.5.2
@@ -4822,9 +4833,9 @@ snapshots:
       - supports-color
       - vite
 
-  '@astrojs/tailwind@5.1.0(astro@4.11.0(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2))(tailwindcss@3.4.4)':
+  '@astrojs/tailwind@5.1.0(astro@4.11.0(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2))(tailwindcss@3.4.4)':
     dependencies:
-      astro: 4.11.0(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2)
+      astro: 4.11.0(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2)
       autoprefixer: 10.4.19(postcss@8.4.38)
       postcss: 8.4.38
       postcss-load-config: 4.0.2(postcss@8.4.38)
@@ -6155,26 +6166,26 @@ snapshots:
       magic-string: 0.25.9
       string.prototype.matchall: 4.0.11
 
-  '@sveltejs/vite-plugin-svelte-inspector@2.1.0(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1)))(svelte@4.2.18)(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1))':
+  '@sveltejs/vite-plugin-svelte-inspector@2.1.0(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1)))(svelte@4.2.18)(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.1.1(svelte@4.2.18)(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1))
+      '@sveltejs/vite-plugin-svelte': 3.1.1(svelte@4.2.18)(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1))
       debug: 4.3.5
       svelte: 4.2.18
-      vite: 5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1)
+      vite: 5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1))':
+  '@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 2.1.0(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1)))(svelte@4.2.18)(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1))
+      '@sveltejs/vite-plugin-svelte-inspector': 2.1.0(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1)))(svelte@4.2.18)(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1))
       debug: 4.3.5
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.10
       svelte: 4.2.18
       svelte-hmr: 0.16.0(svelte@4.2.18)
-      vite: 5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1)
-      vitefu: 0.2.5(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1))
+      vite: 5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1)
+      vitefu: 0.2.5(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1))
     transitivePeerDependencies:
       - supports-color
 
@@ -6568,12 +6579,12 @@ snapshots:
       is-array-buffer: 3.0.4
       is-shared-array-buffer: 1.0.3
 
-  astro-compress@2.2.28(@types/node@20.14.7)(stylus@0.63.0)(typescript@5.5.2):
+  astro-compress@2.2.28(@types/node@20.14.7)(sass@1.77.6)(stylus@0.63.0)(typescript@5.5.2):
     dependencies:
       '@playform/pipe': 0.0.6
       '@types/csso': 5.0.4
       '@types/html-minifier-terser': 7.0.2
-      astro: 4.11.0(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2)
+      astro: 4.11.0(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2)
       csso: 5.0.5
       html-minifier-terser: 7.2.0
       kleur: 4.1.5
@@ -6598,7 +6609,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  astro@4.11.0(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2):
+  astro@4.11.0(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1)(typescript@5.5.2):
     dependencies:
       '@astrojs/compiler': 2.8.0
       '@astrojs/internal-helpers': 0.4.0
@@ -6657,8 +6668,8 @@ snapshots:
       tsconfck: 3.1.0(typescript@5.5.2)
       unist-util-visit: 5.0.0
       vfile: 6.0.1
-      vite: 5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1)
-      vitefu: 0.2.5(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1))
+      vite: 5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1)
+      vitefu: 0.2.5(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1))
       which-pm: 2.2.0
       yargs-parser: 21.1.1
       zod: 3.23.8
@@ -7763,6 +7774,8 @@ snapshots:
     dependencies:
       postcss: 8.4.38
 
+  immutable@4.3.6: {}
+
   import-cwd@3.0.0:
     dependencies:
       import-from: 3.0.0
@@ -9451,6 +9464,12 @@ snapshots:
       parse-srcset: 1.0.2
       postcss: 8.4.38
 
+  sass@1.77.6:
+    dependencies:
+      chokidar: 3.6.0
+      immutable: 4.3.6
+      source-map-js: 1.2.0
+
   sax@1.3.0: {}
 
   sax@1.4.1: {}
@@ -10043,7 +10062,7 @@ snapshots:
       unist-util-stringify-position: 4.0.0
       vfile-message: 4.0.2
 
-  vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1):
+  vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.4.38
@@ -10052,12 +10071,13 @@ snapshots:
       '@types/node': 20.14.7
       fsevents: 2.3.3
       lightningcss: 1.25.1
+      sass: 1.77.6
       stylus: 0.63.0
       terser: 5.31.1
 
-  vitefu@0.2.5(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1)):
+  vitefu@0.2.5(vite@5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1)):
     optionalDependencies:
-      vite: 5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(stylus@0.63.0)(terser@5.31.1)
+      vite: 5.3.1(@types/node@20.14.7)(lightningcss@1.25.1)(sass@1.77.6)(stylus@0.63.0)(terser@5.31.1)
 
   volar-service-css@0.0.45(@volar/language-service@2.2.5):
     dependencies:
diff --git a/src/components/GlobalStyles.astro b/src/components/GlobalStyles.astro
index 0904e23..340d6c3 100644
--- a/src/components/GlobalStyles.astro
+++ b/src/components/GlobalStyles.astro
@@ -177,7 +177,7 @@ color_set({
 
 
 </style>
-<style is:global>
+<style is:global lang="scss">
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -192,11 +192,15 @@ color_set({
     .card-shadow {
         @apply drop-shadow-[0_2px_4px_rgba(0,0,0,0.005)]
     }
+    .expand-animation {
+        @apply relative before:ease-out before:transition active:bg-none hover:before:bg-[var(--btn-plain-bg-hover)] active:before:bg-[var(--btn-plain-bg-active)] z-0
+        before:absolute before:rounded-[inherit] before:inset-0 before:scale-[0.85] hover:before:scale-100 before:-z-10
+    }
     .link {
-        @apply transition hover:bg-[var(--link-hover)] active:bg-[var(--link-active)] rounded-md p-1 -m-1;
+        @apply transition rounded-md p-1 -m-1 expand-animation;
     }
     .link-lg {
-        @apply transition hover:bg-[var(--link-hover)] active:bg-[var(--link-active)] rounded-md p-1.5 -m-1.5;
+        @apply transition rounded-md p-1.5 -m-1.5 expand-animation;
     }
     .float-panel {
         @apply top-[5.25rem] rounded-[var(--radius-large)] overflow-hidden bg-[var(--float-panel-bg)] transition shadow-xl dark:shadow-none
@@ -217,14 +221,12 @@ color_set({
     }
     .btn-plain {
         @apply transition relative flex items-center justify-center bg-none
-        overflow-hidden text-black/75 hover:text-[var(--primary)] dark:text-white/75 dark:hover:text-[var(--primary)];
+        text-black/75 hover:text-[var(--primary)] dark:text-white/75 dark:hover:text-[var(--primary)];
         &:not(.scale-animation) {
             @apply hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)]
         }
         &.scale-animation {
-            @apply before:ease-out hover:bg-none relative active:bg-none hover:before:bg-[var(--btn-plain-bg-hover)] active:before:bg-[var(--btn-plain-bg-active)] z-0
-            before:absolute before:rounded-[inherit] before:inset-0 before:transition before:scale-[0.85] hover:before:scale-100 before:-z-10;
-
+            @apply expand-animation;
             &.current-theme-btn {
                 @apply before:scale-100 before:opacity-100 before:bg-[var(--btn-plain-bg-hover)] text-[var(--primary)]
             }
diff --git a/src/components/PostCard.astro b/src/components/PostCard.astro
index 974b084..f1d4769 100644
--- a/src/components/PostCard.astro
+++ b/src/components/PostCard.astro
@@ -34,20 +34,22 @@ const { remarkPluginFrontmatter } = await entry.render();
 <div class:list={["card-base flex flex-col-reverse md:flex-col w-full rounded-[var(--radius-large)] overflow-hidden relative", className]} style={style}>
     <div class:list={["pl-6 md:pl-9 pr-6 md:pr-2 pt-6 md:pt-7 pb-6 relative", {"w-full md:w-[calc(100%_-_52px_-_12px)]": !hasCover, "w-full md:w-[calc(100%_-_var(--coverWidth)_-_12px)]": hasCover}]}>
         <a href={url}
-           class="transition w-full block font-bold mb-3 text-3xl text-90
+           class="transition group w-full block font-bold mb-3 text-3xl text-90
         hover:text-[var(--primary)] dark:hover:text-[var(--primary)]
         active:text-[var(--title-active)] dark:active:text-[var(--title-active)]
         before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
         before:absolute before:top-[35px] before:left-[18px] before:hidden md:before:block
         ">
-            {title}<Icon class="inline text-[var(--primary)] md:hidden -translate-y-[0.15rem]" name="material-symbols:chevron-right-rounded" size={28} ></Icon>
+            {title}
+            <Icon class="inline text-[var(--primary)] md:hidden translate-y-0.5 absolute" name="material-symbols:chevron-right-rounded" size="2rem" ></Icon>
+            <Icon class="text-[var(--primary)] transition hidden md:inline absolute translate-y-0.5 opacity-0 group-hover:opacity-100 -translate-x-1 group-hover:translate-x-0" name="material-symbols:chevron-right-rounded" size="2rem" ></Icon>
         </a>
 
         <!-- metadata -->
-        <PostMetadata published={published} tags={tags} category={category} hideTagsForMobile={true} class:list={{"mb-4": description, "mb-6": !description}}></PostMetadata>
+        <PostMetadata published={published} tags={tags} category={category} hideTagsForMobile={true} class="mb-4"></PostMetadata>
 
         <!-- description -->
-        <div class="transition text-75 mb-3.5">
+        <div class="transition text-75 mb-3.5 pr-4">
             { description }
         </div>
 
@@ -68,7 +70,7 @@ const { remarkPluginFrontmatter } = await entry.render();
         <div class="absolute pointer-events-none z-10 w-full h-full group-hover:bg-black/30 group-active:bg-black/50 transition"></div>
         <div class="absolute pointer-events-none z-20 w-full h-full flex items-center justify-center ">
             <Icon name="material-symbols:chevron-right-rounded"
-                  class="transition opacity-0 group-hover:opacity-100 text-white text-5xl">
+                  class="transition opacity-0 group-hover:opacity-100 scale-50 group-hover:scale-100 text-white text-5xl">
             </Icon>
         </div>
         <ImageWrapper src={image} basePath={path.join("content/posts/", getDir(entry.id))} alt="Cover Image of the Post"
diff --git a/src/components/widget/Profile.astro b/src/components/widget/Profile.astro
index 184bd40..4d949a4 100644
--- a/src/components/widget/Profile.astro
+++ b/src/components/widget/Profile.astro
@@ -13,25 +13,27 @@ const config = profileConfig;
         <div class="absolute transition pointer-events-none group-hover:bg-black/30 group-active:bg-black/50
         w-full h-full z-50 flex items-center justify-center">
             <Icon name="fa6-regular:address-card"
-                  class="transition opacity-0 group-hover:opacity-100 text-white text-5xl">
+                  class="transition opacity-0 scale-90 group-hover:scale-100 group-hover:opacity-100 text-white text-5xl">
             </Icon>
         </div>
         <ImageWrapper src={config.avatar} alt="Profile Image of the Author" class="mx-auto lg:w-full h-full lg:mt-0 "></ImageWrapper>
     </a>
-    <div class="font-bold text-xl text-center mb-1 dark:text-neutral-50 transition">{config.name}</div>
-    <div class="h-1 w-5 bg-[var(--primary)] mx-auto rounded-full mb-2 transition"></div>
-    <div class="text-center text-neutral-400 mb-2.5 transition">{config.bio}</div>
-    <div class="flex gap-2 justify-center mb-1">
-        {config.links.length > 1 && config.links.map(item =>
-            <a rel="me" aria-label={item.name} href={item.url} target="_blank" class="btn-regular rounded-lg h-10 w-10 active:scale-90">
-                <Icon name={item.icon} size="1.5rem"></Icon>
-            </a>
-        )}
-        {config.links.length == 1 && <a rel="me" aria-label={config.links[0].name} href={config.links[0].url} target="_blank"
-                                        class="btn-regular rounded-lg h-10 gap-2 px-3 font-bold active:scale-95">
-            <Icon name={config.links[0].icon} size="1.5rem"></Icon>
-            {config.links[0].name}
-        </a>}
+    <div class="px-2">
+        <div class="font-bold text-xl text-center mb-1 dark:text-neutral-50 transition">{config.name}</div>
+        <div class="h-1 w-5 bg-[var(--primary)] mx-auto rounded-full mb-2 transition"></div>
+        <div class="text-center text-neutral-400 mb-2.5 transition">{config.bio}</div>
+        <div class="flex gap-2 justify-center mb-1">
+            {config.links.length > 1 && config.links.map(item =>
+                    <a rel="me" aria-label={item.name} href={item.url} target="_blank" class="btn-regular rounded-lg h-10 w-10 active:scale-90">
+                        <Icon name={item.icon} size="1.5rem"></Icon>
+                    </a>
+            )}
+            {config.links.length == 1 && <a rel="me" aria-label={config.links[0].name} href={config.links[0].url} target="_blank"
+                                            class="btn-regular rounded-lg h-10 gap-2 px-3 font-bold active:scale-95">
+                <Icon name={config.links[0].icon} size="1.5rem"></Icon>
+                {config.links[0].name}
+            </a>}
+        </div>
     </div>
 </div>