Feat: Home Page

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

app/routes/_index.tsx

@@ -1,41 +0,0 @@
-import type { MetaFunction } from "@remix-run/node";
-
-export const meta: MetaFunction = () => {
-  return [
-    { title: "New Remix App" },
-    { name: "description", content: "Welcome to Remix!" },
-  ];
-};
-
-export default function Index() {
-  return (
-    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
-      <h1>Welcome to Remix</h1>
-      <ul>
-        <li>
-          <a
-            target="_blank"
-            href="https://remix.run/tutorials/blog"
-            rel="noreferrer"
-          >
-            15m Quickstart Blog Tutorial
-          </a>
-        </li>
-        <li>
-          <a
-            target="_blank"
-            href="https://remix.run/tutorials/jokes"
-            rel="noreferrer"
-          >
-            Deep Dive Jokes App Tutorial
-          </a>
-        </li>
-        <li>
-          <a target="_blank" href="https://remix.run/docs" rel="noreferrer">
-            Remix Docs
-          </a>
-        </li>
-      </ul>
-    </div>
-  );
-}

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);
+}

app/routes/gallery.$/route.tsx

@@ -64,7 +64,7 @@ export default function Gallery() {
           ))}
         </div>
       </section>
-      <section className="grid gap-8 grid-cols-2 sm:grid-cols-[repeat(auto-fill,minmax(18em,_1fr))] mb-12">
+      <section className="grid gap-4 lg:gap-8 grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mb-12">
         {media.data.map((item) => (
           <div key={item.id} className="relative bg-white rounded-xl overflow-hidden border-4 border-transparent hover:border-pink-400 transition-colors border-b-4 border-b-cyan-200">
             <img className={styles.image} src={item.thumb_url} alt={item.title} loading="lazy" />

app/routes/note._index.tsx

@@ -1,5 +1,5 @@
-import { ChangeEvent, useEffect, useState } from "react";
-import { Link, unstable_useViewTransitionState, useLoaderData, useNavigate, useSearchParams } from "@remix-run/react";
+import { ChangeEvent } from "react";
+import { Link, useLoaderData, useNavigate, useSearchParams } from "@remix-run/react";
 import { json, LoaderFunctionArgs, type MetaFunction } from "@remix-run/node";
 import Pagination from "~/components/common/pagination";
 import { clsn, siteTitle } from "~/utils";