Feat: Home Page

增加首页，调整页眉页尾，样式优化

app/routes/_index/route.tsx

@@ -0,0 +1,49 @@
+import type { MetaFunction } from "@remix-run/node";
+import { siteTitle } from "~/utils";
+import { BiliBili, CloudMusic, GitHub, QQ, Steam, TwitterX } from "~/components/common/icons";
+
+import styles from "./styles.module.less";
+
+export const meta: MetaFunction = () => {
+  return [
+    { title: siteTitle() },
+    { name: "description", content: "一只正在学习前后端技术的萌新" },
+  ];
+};
+
+export default function Index() {
+  return (
+    <main className="px-2 py-24">
+      <section className="flex flex-col h-[60vh] max-w-2xl mx-auto">
+        <div className="my-auto px-4 py-10 bg-white rounded-xl text-center">
+          <div className="mx-auto w-40 mb-10 relative select-none">
+            <div className="top-4 left-2 w-36 h-36 rounded-full absolute bg-pink-100"></div>
+            <img className={styles.avatar} src="/avatar.webp" alt="奇趣保罗" />
+          </div>
+          <h1 className="text-5xl mb-4">奇趣保罗</h1>
+          <p className="opacity-60 mb-10">一只正在学习前后端技术的萌新</p>
+          <p className="flex justify-center gap-3">
+            <a href="https://paul.ren/join-group" target="_blank" rel="noreferrer" title="企鹅群">
+              <QQ className="w-6" />
+            </a>
+            <a href="https://github.com/Dreamer-Paul" target="_blank" rel="noreferrer" title="GitHub">
+              <GitHub className="w-6" />
+            </a>
+            <a href="https://music.163.com/#/user/home?id=7041859" target="_blank" rel="noreferrer" title="网易云">
+              <CloudMusic className="w-6" />
+            </a>
+            <a href="https://x.com/Dreamer__Paul" target="_blank" rel="noreferrer" title="X">
+              <TwitterX className="w-6" />
+            </a>
+            <a href="https://space.bilibili.com/124512959" target="_blank" rel="noreferrer" title="哔哩哔哩">
+              <BiliBili className="w-6" />
+            </a>
+            <a href="https://steamcommunity.com/id/dreamer-paul" target="_blank" rel="noreferrer" title="Steam">
+              <Steam className="w-6" />
+            </a>
+          </p>
+        </div>
+      </section>
+    </main>
+  );
+}

app/routes/_index/styles.module.less

@@ -0,0 +1,7 @@
+.avatar {
+  width: 160px;
+  position: relative;
+  --path: path('M0 88V0h160v88h-8c0 39.738-32.262 72-72 72S8 127.738 8 88H0z');
+  --webkit-clip-path: var(--path);
+  clip-path: var(--path);
+}