diff --git a/src/assets/style.css b/src/assets/style.css
index de25035..bb634ea 100644
--- a/src/assets/style.css
+++ b/src/assets/style.css
@@ -11,6 +11,7 @@
     --color-bg-0: light-dark(oklch(95% 0 0), oklch(30% 0.02 270));
     --color-fg-0: light-dark(oklch(25% 0.02 270), oklch(90% 0.02 270));
     --color-bg-1: light-dark(oklch(90% 0 0), oklch(25% 0.02 270));
+    --color-bg-2: light-dark(oklch(85% 0 0), oklch(20% 0.02 270));
 
     --color-blue: light-dark(oklch(40% 0.2 270), oklch(80% 0.2 270));
     --color-green: light-dark(oklch(50% 0.1 150), oklch(80% 0.15 150));
diff --git a/src/components/MainpageTypewriter.svelte b/src/components/MainpageTypewriter.svelte
index b0b8bb0..0c4bccb 100644
--- a/src/components/MainpageTypewriter.svelte
+++ b/src/components/MainpageTypewriter.svelte
@@ -81,6 +81,13 @@
         '钻研手工开发',
       ],
     },
+    {
+      stages: [
+        { text: '', editing: ['b', 'bw', "bw'v", "bw'vj"] },
+        { text: '备战', editing: ['k', 'kc', "kc'y", "kc'yj"] },
+        '备战考研',
+      ],
+    },
   ]
 
   // 状态机定义
diff --git a/src/pages/index.astro b/src/pages/index.astro
index adb094c..02fab58 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -97,7 +97,40 @@ try {
     <div class="slide-title-design2" aria-hidden="true">
       <Icon name="mdi:email" />
     </div>
-    <h1>当前页面还在开发中......</h1>
+    <div class="contact-container">
+      <h1><div class="text">联系我</div><div class="animation"></div></h1>
+      <table>
+        <tbody>
+          <tr>
+            <th>Github</th>
+            <th><a href="https://github.com/passthem-desu">passthem-desu</a></th
+            >
+          </tr>
+          <tr>
+            <th>Youtube</th>
+            <th
+              ><a href="https://www.youtube.com/@Passthem183">@Passthem183</a
+              ></th
+            >
+          </tr>
+          <tr>
+            <th>OtoSite</th>
+            <th><a href="https://otomad.site/@passthem">@passthem</a></th>
+          </tr>
+          <tr>
+            <th>Email</th>
+            <th
+              ><a href="mailto:passthem183@gmail.com">passthem183@gmail.com</a
+              ></th
+            >
+          </tr>
+          <tr>
+            <th>Bilibili</th>
+            <th><a href="https://space.bilibili.com/92852604">passthem</a></th>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </section>
 
   <section class="slide">
@@ -110,7 +143,57 @@ try {
     <div class="slide-title-design2" aria-hidden="true">
       <Icon name="mdi:link-variant" />
     </div>
-    <h1>当前页面还在开发中......</h1>
+    <h1>友情链接</h1>
+    <div class="friends">
+      {
+        [
+          [
+            'https://omega98.top/images/blog_avatar.jpg',
+            'https://omega98.top',
+            '核子的博客',
+          ],
+          ['https://www.tnot.top/logo.png', 'https://tnot.top', 'TNOT 的博客'],
+          [
+            'https://ruusuge.top/img/logo_hu_cc283ac364b1bc0b.png',
+            'https://ruusuge.top',
+            'ルース毛的博客',
+          ],
+          [
+            'https://cdn.jsdelivr.net/gh/TransparentLC/transparentlc.github.io/img/avatar.jpg',
+            'https://akarin.dev',
+            '存在感消失的地方',
+          ],
+          [
+            'https://wzq02.top/assets/icons/favicon-96x96.png',
+            'https://wzq02.top',
+            'wzq02 的博客',
+          ],
+          [
+            'https://pics.r1kka.one/file/1738764637932_-305500c1acccdf39.jpg',
+            'https://r1kka.one/',
+            "Rikka's Blog",
+          ],
+          [
+            'https://legacy.passthem.top/assets/ydt-DIeb2Djx.png',
+            'https://qm.qq.com/q/nDnHUy9KQo',
+            '有顶天变电站 (QQ)'
+          ],
+          [
+            'https://legacy.passthem.top/assets/lfxdxy-BogfTZvz.png',
+            'https://qm.qq.com/q/QOpCVZcvyS',
+            '六方相的新月 (QQ)'
+          ]
+        ].map(b => <a href={b[1]} class="friend">
+          <div class="avatar">
+            <Image src={b[0]} width={60} height={60} alt=`网站「${b[2]}」的图标` />
+          </div>
+          <div class="description">
+            {b[2]}
+          </div>
+        </a>
+      )
+      }
+    </div>
   </section>
 </FullLayoutV1>
 
@@ -131,6 +214,11 @@ try {
 
     document.querySelectorAll('section.slide').forEach((ele) => {
       observer.observe(ele)
+      ;(ele as HTMLElement).addEventListener('focusin', () => {
+        ele.scrollIntoView({
+          block: 'start',
+        })
+      })
     })
   }
 
@@ -437,4 +525,226 @@ try {
       }
     }
   }
+
+  /* 联络页 */
+  @keyframes bg-contact-roll {
+    0% {
+      background-position: 0 0;
+    }
+    100% {
+      background-position: var(--bg-width) 0;
+    }
+  }
+
+  .contact-container {
+    & > h1 {
+      --height: 1.5em;
+      --skew-angle: 15deg;
+      --col1: var(--color-fg-0);
+      --bg-width: 2rem;
+
+      height: var(--height);
+      line-height: var(--height);
+      display: grid;
+      grid-template-columns: auto 1fr;
+      color: var(--color-bg-0);
+      margin-block-end: 0.5em;
+
+      & > .text {
+        background-color: var(--color-fg-0);
+        position: relative;
+
+        &::after {
+          content: '';
+          display: block;
+          position: absolute;
+          inset-inline-end: calc(tan(var(--skew-angle)) * var(--height) * -1);
+          inset-block-start: 0;
+          height: 100%;
+          width: calc(tan(var(--skew-angle)) * var(--height));
+          background-image: linear-gradient(
+            to left bottom,
+            transparent 50%,
+            var(--col1) 50%
+          );
+        }
+      }
+
+      & > .animation {
+        content: '';
+        display: block;
+        background-image: linear-gradient(
+          90deg,
+          transparent 0,
+          transparent 25%,
+          var(--col1) 25%,
+          var(--col1) 75%,
+          transparent 75%,
+          transparent 100%
+        );
+        background-repeat: repeat;
+        background-size: var(--bg-width) 100%;
+        animation: bg-contact-roll infinite linear 2s;
+        transform: skewX(var(--skew-angle))
+          translateX(calc(0.5 * tan(var(--skew-angle)) * var(--height) - 1px));
+      }
+    }
+
+    & > table {
+      font-family: var(--font-mono);
+
+      & caption {
+        text-align: center;
+      }
+
+      & tr {
+        text-align: left;
+        display: grid;
+        grid-template-columns: 6em 16em;
+        gap: 1em;
+        line-height: 2em;
+
+        @media (max-width: 767px) {
+          grid-template-columns: 18em;
+          gap: 0;
+          line-height: 1.8em;
+          margin-block: 1em;
+        }
+
+        & th:nth-child(1) {
+          display: flex;
+          justify-content: space-between;
+
+          @media (max-width: 767px) {
+            justify-content: left;
+          }
+
+          &::after {
+            content: ':';
+          }
+        }
+
+        & th:nth-child(2) {
+          display: flex;
+          justify-content: space-between;
+
+          @media (max-width: 767px) {
+            justify-content: end;
+          }
+
+          &::before {
+            content: '[';
+          }
+
+          &::after {
+            content: ']';
+          }
+
+          &:hover,
+          &:has(a:focus) {
+            background-color: var(--color-fg-0);
+            color: var(--color-bg-0);
+          }
+
+          & > a {
+            text-align: center;
+            margin-inline: 1em;
+
+            &:focus {
+              outline: none;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /* 友链页 */
+  .slide:has(>.friends) {
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .friends {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+    max-width: 50rem;
+    max-height: 30rem;
+    padding-block: 3rem;
+    overflow-y: scroll;
+    margin-inline: 1rem;
+    background-color: rgb(from var(--color-bg-0) r g b / .3);
+    border-radius: 2rem;
+    backdrop-filter: blur(5px);
+
+    & > .friend {
+      background-color: var(--color-bg-0);
+      display: grid;
+      align-items: center;
+      border-radius: 30px;
+      overflow: hidden;
+      width: 14rem;
+      height: 60px;
+      grid-template-columns: 60px 1fr;
+      position: relative;
+      isolation: isolate;
+
+      & > .avatar {
+        border-radius: 30px;
+        height: 60px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        background-color: var(--color-bg-n);
+        /* box-shadow: 0 0 0 10px var(--color-bg-2); */
+        transition: all cubic-bezier(0.2, 1, 0.4, 1) 0.5s;
+      }
+
+      & > .description {
+        text-align: center;
+      }
+
+      &::before {
+        content: '';
+        display: block;
+        border-radius: 30px;
+        background-color: var(--color-bg-n);
+        position: absolute;
+        z-index: -1;
+        width: 100%;
+        height: 100%;
+
+        inset-inline-start: calc(-100% + 30px);
+        box-shadow: 0 0 0 10px var(--color-blue);
+        transition: inset-inline-start cubic-bezier(0.2, 1, 0.4, 1) 0.5s;
+      }
+
+      outline: solid 0px transparent;
+      outline-offset: 0px;
+      transition: all cubic-bezier(0.2, 1, 0.4, 1) 0.5s;
+
+      &:focus {
+        outline: solid 3px var(--color-blue);
+        outline-offset: 3px;
+      }
+
+      &:hover, &:focus {
+        transform: scale(1.1);
+      }
+
+      &:hover::before,
+      &:focus::before {
+        inset-inline-start: 0;
+      }
+
+      &:hover .avatar,
+      &:focus .avatar {
+        /* transform: rotate(360deg); */
+      }
+    }
+  }
 </style>