diff --git a/package-lock.json b/package-lock.json
index 78fe322..9068386 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,8 @@
         "lxgw-wenkai-lite-webfont": "^1.7.0",
         "mitt": "^3.0.1",
         "vue": "^3.4.37",
-        "vue-router": "^4.4.5"
+        "vue-router": "^4.4.5",
+        "vue-typed-js": "^0.1.2"
       },
       "devDependencies": {
         "@types/node": "^22.5.5",
@@ -2729,6 +2730,11 @@
       "dev": true,
       "license": "Apache-2.0"
     },
+    "node_modules/typed.js": {
+      "version": "2.1.0",
+      "resolved": "git+ssh://git@github.com/mattboldt/typed.js.git#f0759c1dc054a2d6743862d5331f03e49f9845d7",
+      "license": "MIT"
+    },
     "node_modules/typescript": {
       "version": "5.6.2",
       "resolved": "https://registry.npmmirror.com/typescript/-/typescript-5.6.2.tgz",
@@ -2909,6 +2915,15 @@
         "typescript": ">=5.0.0"
       }
     },
+    "node_modules/vue-typed-js": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmmirror.com/vue-typed-js/-/vue-typed-js-0.1.2.tgz",
+      "integrity": "sha512-9kDGuz17uYJghe/1hepRWiWYssgUFtrKnMGPHlWjVRxdvs/d9xYYWMkgzztjhx1R1B33hXkN8ctmkzCYHQ+caA==",
+      "license": "MIT",
+      "dependencies": {
+        "typed.js": "git+https://github.com/mattboldt/typed.js.git"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index b004616..6d9de64 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,8 @@
     "lxgw-wenkai-lite-webfont": "^1.7.0",
     "mitt": "^3.0.1",
     "vue": "^3.4.37",
-    "vue-router": "^4.4.5"
+    "vue-router": "^4.4.5",
+    "vue-typed-js": "^0.1.2"
   },
   "devDependencies": {
     "@types/node": "^22.5.5",
diff --git a/src/App.vue b/src/App.vue
index 6861051..53af3d5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,7 +3,9 @@
 </script>
 
 <template>
-  <router-view/>
+  <div class="min-h-screen w-screen bg-blue-50">
+    <router-view/>
+  </div>
 </template>
 
 <style scoped>
diff --git a/src/assets/BaconyScript_PERSONAL_USE_ONLY.otf b/src/assets/BaconyScript_PERSONAL_USE_ONLY.otf
new file mode 100644
index 0000000..0657fb0
Binary files /dev/null and b/src/assets/BaconyScript_PERSONAL_USE_ONLY.otf differ
diff --git a/src/components/card/ArticleCard.vue b/src/components/card/ArticleCard.vue
index 4da0e17..5f8b013 100644
--- a/src/components/card/ArticleCard.vue
+++ b/src/components/card/ArticleCard.vue
@@ -23,11 +23,12 @@ const handleOnCardClick = () => {
 
 <template>
   <div :title="post.title"
-       class="container relative overflow-hidden rounded-2xl hover:cursor-pointer text-white hover:text-amber-200 h-56"
+       class="container relative overflow-hidden rounded-2xl hover:cursor-pointer text-white hover:text-amber-200 h-56 hover:shadow-lg"
        @click="handleOnCardClick">
     <!-- 图片 -->
     <div class="container h-full">
-      <img :src="thumbUrl" alt="" class="object-cover h-full w-full object-center transition-all hover:scale-110">
+      <img :src="thumbUrl" alt=""
+           class="object-cover h-full w-full object-center transition-all hover:scale-110 duration-300">
     </div>
     <!-- 文字部分 -->
     <div class="container relative">
diff --git a/src/components/card/ArticleDigestViewer.vue b/src/components/card/ArticleDigestViewer.vue
index 84863a1..fb555de 100644
--- a/src/components/card/ArticleDigestViewer.vue
+++ b/src/components/card/ArticleDigestViewer.vue
@@ -3,16 +3,13 @@ import {computed, onMounted, onUnmounted, ref} from "vue";
 import emitter from "@/utils/mitt.ts";
 import {getAssetURL} from "@/utils/function.ts";
 
-const isShow = ref(false)
 const currentPost = ref<IPost | null>(null)
 
 const onOpenPost = (e: IPost) => {
-  isShow.value = true
   currentPost.value = e;
 }
 
 const onClosePost = () => {
-  isShow.value = false
   currentPost.value = null
 }
 
@@ -33,8 +30,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div v-show="isShow" class="absolute top-0 left-0 right-0 bottom-0 bg-black bg-opacity-60">
-
+  <div v-if="currentPost" class="fixed top-0 left-0 right-0 bottom-0 bg-black bg-opacity-60 z-50">
     <div class="container bg-white mx-auto my-10 rounded-3xl overflow-hidden max-h-full">
       <!-- 标题栏 -->
       <div class="w-full relative border-b-2 border-b-gray-200">
@@ -45,7 +41,7 @@ onUnmounted(() => {
         <!-- 预览标题 -->
         <div
             class="h-12 pl-8 py-1.5 pr-16 truncate absolute top-0 left-0 right-0 bg-black bg-opacity-60 backdrop-blur-3xl text-white">
-          <span v-if="currentPost" :title="currentPost.title" class="text-3xl font-bold">
+          <span :title="currentPost.title" class="text-3xl font-bold">
             文章预览 /
           </span>
         </div>
@@ -59,7 +55,7 @@ onUnmounted(() => {
       </div>
       <!-- 正文 -->
       <div class="container p-8">
-        <div v-if="currentPost" class="container" v-html="currentPost.digest"/>
+        <div class="container" v-html="currentPost.digest"/>
       </div>
     </div>
   </div>
diff --git a/src/components/card/IntroCard.vue b/src/components/card/IntroCard.vue
new file mode 100644
index 0000000..929e2a9
--- /dev/null
+++ b/src/components/card/IntroCard.vue
@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+type Widget = {
+  icon: string[]
+  url: string
+  title: string
+}
+// const welcomeWords = ['你好👋，很高兴认识你！']
+
+const littleWidget: Widget[] = [
+  {
+    icon: ['fab', 'qq'],
+    url: "tencent://message/?uin=1922471905&Site=&Menu=yes",
+    title: "QQ",
+  },
+  {
+    icon: ['fab', 'github-alt'],
+    url: "https://github.com/Aurora1949",
+    title: "Github",
+  },
+  {
+    icon: ['fab', 'weibo'],
+    url: "https://weibo.com/u/7923648952",
+    title: "微博"
+  },
+  {
+    icon: ['fab', 'steam-symbol'],
+    url: "https://steamcommunity.com/id/cantyonion/",
+    title: "Steam"
+  }
+]
+</script>
+
+<template>
+  <div class="container w-full flex my-16">
+    <!-- 头像部分 -->
+    <div class="w-32 h-32 rounded-full bg-white overflow-hidden hover:animate-pulse hidden sm:block">
+      <img alt="" src="https://q.qlogo.cn/g?b=qq&nk=1922471905&s=640">
+    </div>
+
+    <!--  文字部分  -->
+    <div class="container flex-1 px-8 flex flex-col justify-between">
+      <div class="text-4xl">Jeffrey Hsu</div>
+      <div class="text-2xl text-gray-400">你好👋，很高兴认识你！</div>
+      <!--      <vue-typed-js :strings="['First text', 'Second Text']">-->
+      <!--        <h1 class="typing"></h1>-->
+      <!--      </vue-typed-js>-->
+      <div class="flex text-xl gap-4">
+        <a v-for="item in littleWidget"
+           :key="item.url" :href=item.url :title=item.title
+           class="w-10 h-10 rounded-full bg-green-400 flex items-center justify-center text-white transition-all hover:scale-125">
+          <font-awesome-icon :icon="item.icon"/>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/nav/NavBar.vue b/src/components/nav/NavBar.vue
new file mode 100644
index 0000000..1860ac2
--- /dev/null
+++ b/src/components/nav/NavBar.vue
@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+
+type Widget = {
+  icon: string[]
+  url: string
+  title: string
+}
+
+const littleWidget: Widget[] = [
+  {
+    icon: ['fas', 'gauge'],
+    url: "/pi-dashboard/",
+    title: "Pi Dashboard",
+  },
+  {
+    icon: ['fas', 'cloud'],
+    url: "/files/",
+    title: "Tiny File Manager",
+  },
+  {
+    icon: ['fas', 'code-branch'],
+    url: "/git/",
+    title: "Git Repository"
+  }
+]
+</script>
+
+<template>
+  <nav
+      class="w-full h-16 bg-white shadow backdrop-blur-md bg-opacity-70 fixed text-gray-600 z-20"
+  >
+    <div class="w-full container flex justify-center sm:justify-between items-center mx-auto">
+      <!--  Logo  -->
+      <div class="min-w-16 h-full text-4xl logo py-3.5">
+        <span>CantyOni_on's Index</span>
+      </div>
+      <!--  Entry  -->
+      <!--      <div class="flex-1"></div>-->
+      <!--  快速跳转小组件  -->
+      <div class="items-center justify-between gap-4 text-xl hidden sm:flex">
+        <a v-for="item in littleWidget"
+           :key="item.url" :href=item.url :title=item.title
+           class="transition-all hover:scale-125">
+          <font-awesome-icon :icon="item.icon"/>
+        </a>
+      </div>
+    </div>
+  </nav>
+  <!-- 用于隔开元素的 -->
+  <div class="h-16 w-full mb-4"></div>
+</template>
+
+<style scoped>
+.logo {
+  font-family: BaconyScript, serif;
+}
+</style>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 12dc7d0..3eb4448 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,12 +1,16 @@
 import {createApp} from 'vue'
 import './style.css'
 import App from './App.vue'
+// import VueTypedJs from 'vue-typed-js'
 import router from "@/router";
 import {library} from '@fortawesome/fontawesome-svg-core'
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
 import {faClock} from '@fortawesome/free-regular-svg-icons'
-import {faXmark, faBlog} from '@fortawesome/free-solid-svg-icons'
+import {faXmark, faBlog, faGauge, faCodeBranch, faCloud, faChevronRight} from '@fortawesome/free-solid-svg-icons'
+import {faWeibo, faQq, faGithubAlt, faSteamSymbol} from '@fortawesome/free-brands-svg-icons'
 
-library.add(faClock, faXmark, faBlog)
+library.add(
+  faClock, faXmark, faBlog, faGauge, faCodeBranch, faCloud, faWeibo, faQq, faGithubAlt, faSteamSymbol, faChevronRight
+)
 
 createApp(App).use(router).component('font-awesome-icon', FontAwesomeIcon).mount('#app')
diff --git a/src/style.css b/src/style.css
index 150aed1..5ddcc16 100644
--- a/src/style.css
+++ b/src/style.css
@@ -4,6 +4,11 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+    font-family: 'BaconyScript';
+    src: url("./assets/BaconyScript_PERSONAL_USE_ONLY.otf") format("opentype");
+}
+
 body {
     font-family: "LXGW WenKai Lite", sans-serif;
 }
diff --git a/src/views/home/HomeView.vue b/src/views/home/HomeView.vue
index 1d40ae9..3095969 100644
--- a/src/views/home/HomeView.vue
+++ b/src/views/home/HomeView.vue
@@ -3,6 +3,8 @@ import {computed, onMounted, ref} from "vue";
 import ArticleCard from "@/components/card/ArticleCard.vue";
 import {getBlogRecentPost} from "@/api/blog.ts";
 import ArticleDigestViewer from "@/components/card/ArticleDigestViewer.vue";
+import NavBar from "@/components/nav/NavBar.vue";
+import IntroCard from "@/components/card/IntroCard.vue";
 
 const recentPosts = ref<IPost[] | null>(null);
 const hasPosts = computed(() => (recentPosts.value ?? []).length > 0);
@@ -14,26 +16,50 @@ onMounted(async () => {
 </script>
 
 <template>
+  <nav-bar/>
+
   <div class="container mx-auto">
+    <!--  个人介绍  -->
+    <intro-card/>
+
     <!-- 标题部分 -->
-    <div class="text-2xl mb-4 text-white font-bold">
-      <div class="bg-pink-500 w-max rounded-2xl overflow-hidden">
-        <div class="inline-block py-2 px-4 bg-pink-700 rounded-2xl">
+    <div class="text-2xl mb-4 text-white font-bold flex justify-between">
+      <div class="bg-rose-500 w-max rounded-2xl overflow-hidden">
+        <div class="inline-block py-2 px-4 bg-rose-600 rounded-2xl">
           <font-awesome-icon :icon="['fas', 'blog']"/>
         </div>
         <span class="px-4">最新博文</span>
       </div>
+      <a class="bg-rose-500 rounded-2xl py-2 px-4" href="/blog/">
+        <font-awesome-icon :icon="['fas', 'chevron-right']"/>
+      </a>
     </div>
     <!-- 内容 -->
     <div :class="{'justify-center': !hasPosts}" class="container flex">
       <span v-if="!hasPosts" class="text-2xl font-bold">最近没有动态</span>
-      <div v-else class="grid grid-cols-4 gap-4 w-full">
+      <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 w-full">
         <article-card v-for="item in recentPosts" :key="item.cid" :post="item"/>
       </div>
     </div>
   </div>
 
   <article-digest-viewer/>
+
+  <footer class="bg-white w-full mt-8 min-h-48 flex items-end py-4">
+    <div class="container mx-auto">
+      <p class="text-center leading-8">&copy;2024 All rights reserved.</p>
+      <div class="flex justify-center gap-4">
+        <a href="https://beian.miit.gov.cn/" target="_blank">
+          <img alt="苏ICP备2022016243号-1"
+               src="https://img.shields.io/badge/%E8%8B%8FICP%E5%A4%87-2022016243%E5%8F%B7--1-green?style=for-the-badge">
+        </a>
+        <a href="https://beian.mps.gov.cn/#/query/webSearch?code=32050602011641" rel="noreferrer" target="_blank">
+          <img alt="苏公网安备32050602011641"
+               src="https://img.shields.io/badge/%E8%8B%8F%E5%85%AC%E7%BD%91%E5%AE%89%E5%A4%87-32050602011641-blue?style=for-the-badge&logo=data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAACQAAAAoCAYAAACWwljjAAAFQklEQVRYw%2B3Wa1BUdRjH8SOpMeg4WhZGpDIxiaaTeUFgWrxE4AVRQJGlRRAVIV1JkbgMgQLi5AVBQSVLSp0xlEAUKBEEFZCrCstll8UV2AV2YbmoGCrYv31%2BR95UL5pmmtamZ%2Bbz6rz5nvOc%2F5zDcX9jGLs%2FiTxuyvIlWYkRFeTHA2HVRFtzfhthTG5KuH96%2FvUgNlC4mMgyw1NJit%2FaAXLKazYje9xtIMZ%2FOZz50gW%2B9hcNkvoLEemEPbnrSP47QYwxQ5Ifv54RqzcXwFFvSyjaOhfavN8F7Y5ZcC%2FHH9JOB4LNa9Zw5YA76OZV8vIGMdZtSp7cDrtOnOavYiQhTAiPwi1AMtIQaqyngsxpBtw2GAGDKfaQmpUAa6xc4Vfp4UtEdzAMycsT9JQ1Tyctl%2F2eEkuTlYysF%2FrCUNxMqDEzgTqzSXBnpgnIHCzgjvEEuD52DLBr3rA1MAaWmNtB582wdtIljZ9G9D%2BIPU6aTxIPBjHCcXvg3CEh9K2fDLWvjIH6D6fwTIyheuwEqLUyhzLOALq8pkN%2BbgRw3HY4FBsMzxojZxP9DequLjAlQwVrbpIjhyIY4UYGQ%2FbuhdBqPxlk3Gion2IMDQIz3kJe%2FZS34I7uHkmD7VSQVgYDNyIAwsNCgfXGXoOBPjP9DKrOCAogA2etGTmTHAMcFwFZye7wS5QlVHGjoEw4A2qPCUBZ6AzNcQ5Q%2FYYRdO%2BYB1U3dsDwypLio4FJ3ECryIzWz6Cm3NgTRHN8HiPF6eHAGSbAdh8feFZkB7krzaHE9h2o85sDsiAbkIsXQMN%2Be2CtGyF0kzdwXCgU5%2B%2BD%2FouLQFV4OEU%2Fg2Q%2FiNuIPNaKkQflAWBqexxGjhLDVUcL6IwSQN3SGVChe6FJg9dckCx6D1QBliDZLIAxo7eA8eyv4KE0BJqTrHkZvnL9DJKn%2BTwmt0NsGGHZy2Dn3kQYfsQ53Hh4%2Fr4RNGz8AIpdzKEuaAF0RC2E57MmQgE3ATjuM%2FCPiANW7AqSfQJQ5vk362eQKmd3JrmXsoSRocpNIMnbB9zbceDIWUPmuHFQNMkISqa9DpUvNK6YDpW2s8DfwBK48WFQnhMCgzUBoLy0BrRVe5P0NWjPLdKUsJiR1tR1wGp8IeZwMgx%2FSrgRvjxuAziNcwLvyathLOcJHLflhRDYGRYFrNET2rJ5yvPLoas0tOj%2FoL8UpC4JHyTSU%2B6MNCS4gvKoAB5WiKG%2BMAQSg0WwLXQ%2FZJ3xhao0FxB5hYCbUwAEfhEF3Td8QP2dAOQnPwFlxgrolUVq9TPoaX%2BZB2nLc2Gk6awj1MU78HZZwJMid2Byb550JQwVO0NfxlJgdz14vWKeRAiK6DlQF28PLZdcoLNcBIO92bb6GTQ8Q%2F13RURT6tlH2gvXMlITLYD6uI%2Bgp2ozdF0VQXumM6ivCqGvahM8kPiDItkeGo8tB025GFQ3xFrSr06zI3%2F4yde7oN7m0sWk5eKWDqK5JWJQvAHac9ygq3Adr9gTNNc3QG85rzPfHe5%2F7wDtPwuhp%2FZz6CjyhaZzwi6ivfetHdH%2FoP77%2B3PJQOsuRnqkQdCa4wWqyx6gyecpL64GTaEX7ycXUJz4GJp1B4O0X%2FHg0Xp1tFV%2B8Ei1k6c5coHofxBrrzQinbKYo0SVJ%2Bwn6iurGHlY5gY911aDJnMFaHXXiDp9GQyvtKfUA9QFTtBZ7gPdit0tpFd9OpwwFmlA9D%2Fo9yNLDpxIKmI8PMnNSNtviCLVpYTITzrXEGWaq4qos0WgOPdpCenIF%2BeRrurjB4k0PXopYZG6gMg%2FD%2FgNBUxhAbSAmKMAAAAASUVORK5CYII%3D">
+        </a>
+      </div>
+    </div>
+  </footer>
 </template>
 
 <style scoped>
diff --git a/vite.config.ts b/vite.config.ts
index ad7fc18..2c2b792 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -15,7 +15,7 @@ export default defineConfig({
   server: {
     proxy: {
       '/api': {
-        target: 'http://cantyonion.site',
+        target: 'https://cantyonion.site',
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, '')
       }