Design personal homepage

2026-06-08 13:53:22 +08:00
parent cac65a5cee
commit 0a1c46e037
5 changed files with 282 additions and 81 deletions
@@ -1,26 +1,62 @@
@import "tailwindcss";

 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --background: #101411;
+  --foreground: #f4efe4;
 }

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --font-sans: var(--font-body);
+  --font-mono: var(--font-code);
+  --font-display: var(--font-heading);
 }

-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
 }

 body {
+  margin: 0;
  background: var(--background);
  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-body), sans-serif;
+}
+
+::selection {
+  background: #d3ff30;
+  color: #101411;
+}
+
+a {
+  text-decoration: none;
+}
+
+.noise-layer {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  opacity: 0.2;
+  background-image:
+    radial-gradient(circle at 18% 30%, rgba(244, 239, 228, 0.18) 0 1px, transparent 1px),
+    radial-gradient(circle at 72% 64%, rgba(211, 255, 48, 0.14) 0 1px, transparent 1px);
+  background-size: 34px 34px, 46px 46px;
+  mix-blend-mode: screen;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+  }
 }
@@ -1,20 +1,28 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { JetBrains_Mono, Newsreader, Noto_Sans_SC } from "next/font/google";
 import "./globals.css";

-const geistSans = Geist({
-  variable: "--font-geist-sans",
+const display = Newsreader({
+  variable: "--font-heading",
  subsets: ["latin"],
+  display: "swap",
 });

-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const sans = Noto_Sans_SC({
+  variable: "--font-body",
  subsets: ["latin"],
+  display: "swap",
+});
+
+const mono = JetBrains_Mono({
+  variable: "--font-code",
+  subsets: ["latin"],
+  display: "swap",
 });

 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "fly | Personal Website",
+  description: "fly 的个人网站，记录前端开发、技术笔记和页面实验。",
 };

 export default function RootLayout({
@@ -24,8 +32,8 @@ export default function RootLayout({
 }>) {
  return (
    <html
-      lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+      lang="zh-CN"
+      className={`${display.variable} ${sans.variable} ${mono.variable} h-full antialiased`}
    >
      <body className="min-h-full flex flex-col">{children}</body>
    </html>
@@ -1,65 +1,5 @@
-import Image from "next/image";
+import { HomePage } from "@/components/home-page";

 export default function Home() {
-  return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
-  );
+  return <HomePage />;
 }
@@ -0,0 +1,217 @@
+"use client";
+
+import Image from "next/image";
+import { motion, useReducedMotion } from "motion/react";
+
+const highlights = [
+  { label: "Frontend", value: "React / Vue / Next.js" },
+  { label: "Notes", value: "HTML, CSS, JS, Git" },
+  { label: "Current", value: "Rebuilding a personal web identity" },
+];
+
+const chapters = [
+  {
+    title: "Engineering Notes",
+    eyebrow: "01",
+    body: "把前端知识拆成可复用的笔记，不追求堆砌，追求每次回看都能拿来解决问题。",
+    href: "http://124.221.147.173:3000/fly/flys_blog",
+  },
+  {
+    title: "Personal Experiments",
+    eyebrow: "02",
+    body: "记录一些页面、工具、交互和生活灵感，把学习过程变成能被看见的作品。",
+    href: "http://124.221.147.173:3000/fly/fly-personal-site",
+  },
+  {
+    title: "Quiet Systems",
+    eyebrow: "03",
+    body: "偏爱清晰、克制、有质感的界面。让复杂内容保持秩序，让细节自己发光。",
+    href: "#signal",
+  },
+];
+
+const stack = [
+  "Next.js",
+  "Tailwind CSS",
+  "Motion",
+  "TypeScript",
+  "Vue",
+  "React",
+  "Git",
+  "VitePress",
+];
+
+export function HomePage() {
+  const reduceMotion = useReducedMotion();
+
+  const reveal = {
+    hidden: { opacity: 0, y: reduceMotion ? 0 : 24 },
+    show: { opacity: 1, y: 0 },
+  };
+
+  return (
+    <main className="min-h-dvh overflow-hidden bg-[#101411] text-[#f4efe4]">
+      <section className="relative isolate flex min-h-dvh items-center px-5 py-6 sm:px-8 lg:px-12">
+        <div className="absolute inset-0 -z-10 bg-[linear-gradient(90deg,rgba(244,239,228,0.08)_1px,transparent_1px),linear-gradient(180deg,rgba(244,239,228,0.08)_1px,transparent_1px)] bg-[size:72px_72px]" />
+        <div className="absolute inset-x-0 top-0 -z-10 h-80 bg-[radial-gradient(circle_at_18%_18%,rgba(211,255,48,0.18),transparent_34%),radial-gradient(circle_at_82%_4%,rgba(242,124,74,0.22),transparent_28%)]" />
+        <div className="noise-layer" />
+
+        <div className="mx-auto grid w-full max-w-7xl gap-10 lg:grid-cols-[minmax(0,1.05fr)_minmax(360px,0.95fr)] lg:items-center">
+          <motion.div
+            initial="hidden"
+            animate="show"
+            transition={{ staggerChildren: reduceMotion ? 0 : 0.08 }}
+            className="flex min-h-[calc(100dvh-48px)] flex-col justify-between gap-10 py-2 lg:min-h-[calc(100dvh-64px)]"
+          >
+            <motion.header variants={reveal} className="flex items-center justify-between gap-4">
+              <a
+                href="#top"
+                aria-label="fly homepage"
+                className="group inline-flex h-11 items-center gap-3 rounded-full border border-[#f4efe4]/18 bg-[#f4efe4]/8 px-4 text-sm font-medium text-[#f4efe4] outline-none transition hover:border-[#d3ff30]/70 hover:bg-[#d3ff30] hover:text-[#101411] focus-visible:ring-2 focus-visible:ring-[#d3ff30]"
+              >
+                <span className="h-2.5 w-2.5 rounded-full bg-[#d3ff30] transition group-hover:bg-[#101411]" />
+                fly
+              </a>
+              <nav aria-label="Primary navigation" className="hidden items-center gap-2 sm:flex">
+                {["notes", "work", "signal"].map((item) => (
+                  <a
+                    key={item}
+                    href={`#${item}`}
+                    className="rounded-full px-4 py-2 text-sm text-[#f4efe4]/68 outline-none transition hover:bg-[#f4efe4]/10 hover:text-[#f4efe4] focus-visible:ring-2 focus-visible:ring-[#d3ff30]"
+                  >
+                    {item}
+                  </a>
+                ))}
+              </nav>
+            </motion.header>
+
+            <div id="top" className="max-w-4xl">
+              <motion.p variants={reveal} className="mb-6 text-sm font-medium text-[#d3ff30]">
+                Personal website / frontend notes / visual experiments
+              </motion.p>
+              <motion.h1
+                variants={reveal}
+                className="max-w-4xl font-display text-7xl font-semibold leading-none text-[#f8f4ea] sm:text-8xl lg:text-9xl"
+              >
+                fly
+              </motion.h1>
+              <motion.p
+                variants={reveal}
+                className="mt-8 max-w-2xl text-lg leading-8 text-[#d8d0bf] sm:text-xl sm:leading-9"
+              >
+                前端开发者，正在把技术笔记、页面实验和个人审美重新整理成一个更自由、更有质感的个人网站。
+              </motion.p>
+              <motion.div variants={reveal} className="mt-9 flex flex-col gap-3 sm:flex-row">
+                <a
+                  href="#work"
+                  className="inline-flex h-12 items-center justify-center rounded-full bg-[#d3ff30] px-6 text-sm font-semibold text-[#101411] outline-none transition hover:bg-[#f4efe4] focus-visible:ring-2 focus-visible:ring-[#f4efe4]"
+                >
+                  查看主页结构
+                </a>
+                <a
+                  href="http://124.221.147.173:3000/fly/flys_blog"
+                  className="inline-flex h-12 items-center justify-center rounded-full border border-[#f4efe4]/22 px-6 text-sm font-semibold text-[#f4efe4] outline-none transition hover:border-[#f27c4a] hover:bg-[#f27c4a] hover:text-[#101411] focus-visible:ring-2 focus-visible:ring-[#f27c4a]"
+                >
+                  打开旧博客仓库
+                </a>
+              </motion.div>
+            </div>
+
+            <motion.div
+              variants={reveal}
+              className="grid gap-3 border-y border-[#f4efe4]/14 py-5 sm:grid-cols-3"
+            >
+              {highlights.map((item) => (
+                <div key={item.label} className="min-h-24">
+                  <p className="text-xs font-semibold uppercase text-[#f27c4a]">{item.label}</p>
+                  <p className="mt-3 max-w-[18rem] text-sm leading-6 text-[#f4efe4]/72">{item.value}</p>
+                </div>
+              ))}
+            </motion.div>
+          </motion.div>
+
+          <motion.aside
+            id="signal"
+            initial={{ opacity: 0, y: reduceMotion ? 0 : 28, rotate: reduceMotion ? 0 : 1.5 }}
+            animate={{ opacity: 1, y: 0, rotate: 0 }}
+            transition={{ duration: reduceMotion ? 0 : 0.7, ease: "easeOut" }}
+            className="relative mx-auto w-full max-w-[520px] lg:ml-auto"
+          >
+            <div className="absolute -inset-4 rounded-[2rem] border border-[#f4efe4]/10 bg-[#f4efe4]/6" />
+            <div className="relative overflow-hidden rounded-[1.5rem] border border-[#f4efe4]/16 bg-[#f4efe4]/8 p-3 shadow-2xl shadow-black/40">
+              <Image
+                src="/fly-signal.png"
+                alt="Abstract fly personal field notes artwork"
+                width={1200}
+                height={1400}
+                priority
+                className="aspect-[6/7] w-full rounded-[1rem] object-cover"
+              />
+            </div>
+            <div className="absolute bottom-5 left-5 right-5 rounded-2xl border border-[#101411]/12 bg-[#f8f4ea]/88 p-4 text-[#101411] shadow-xl shadow-black/20 backdrop-blur">
+              <p className="text-xs font-semibold uppercase text-[#6e6a5e]">signal</p>
+              <p className="mt-2 text-sm leading-6">
+                A new home for notes, projects, experiments, and the quiet parts of making things.
+              </p>
+            </div>
+          </motion.aside>
+        </div>
+      </section>
+
+      <section id="work" className="bg-[#f4efe4] px-5 py-20 text-[#101411] sm:px-8 lg:px-12">
+        <div className="mx-auto max-w-7xl">
+          <div className="grid gap-8 border-t border-[#101411]/16 pt-8 lg:grid-cols-[0.72fr_1.28fr]">
+            <div>
+              <p className="text-sm font-semibold text-[#a24325]">What this site becomes</p>
+              <h2 className="mt-5 max-w-md font-display text-5xl font-semibold leading-tight sm:text-6xl">
+                一个更像 fly 的个人主页。
+              </h2>
+            </div>
+            <div className="grid gap-4 md:grid-cols-3">
+              {chapters.map((chapter) => (
+                <a
+                  key={chapter.title}
+                  href={chapter.href}
+                  className="group flex min-h-72 flex-col justify-between rounded-[1.25rem] border border-[#101411]/14 bg-white/55 p-5 outline-none transition hover:-translate-y-1 hover:border-[#101411]/35 hover:bg-white focus-visible:ring-2 focus-visible:ring-[#101411]"
+                >
+                  <div>
+                    <p className="text-sm font-semibold text-[#a24325]">{chapter.eyebrow}</p>
+                    <h3 className="mt-8 text-2xl font-semibold">{chapter.title}</h3>
+                    <p className="mt-5 text-sm leading-7 text-[#4d493f]">{chapter.body}</p>
+                  </div>
+                  <span className="mt-8 inline-flex h-10 w-10 items-center justify-center rounded-full border border-[#101411]/18 text-lg transition group-hover:bg-[#d3ff30]">
+                    /
+                  </span>
+                </a>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section id="notes" className="bg-[#101411] px-5 py-20 text-[#f4efe4] sm:px-8 lg:px-12">
+        <div className="mx-auto grid max-w-7xl gap-10 lg:grid-cols-[1fr_1fr] lg:items-end">
+          <div>
+            <p className="text-sm font-semibold text-[#d3ff30]">Stack and rhythm</p>
+            <h2 className="mt-5 font-display text-5xl font-semibold leading-tight sm:text-6xl">
+              写代码，也整理判断。
+            </h2>
+            <p className="mt-6 max-w-xl text-base leading-8 text-[#d8d0bf]">
+              首页先完成品牌感和结构感。后续可以接入 MDX 博客、项目详情页、关于页和部署流程，把旧 VitePress 的内容慢慢迁过来。
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-3">
+            {stack.map((item) => (
+              <span
+                key={item}
+                className="rounded-full border border-[#f4efe4]/16 bg-[#f4efe4]/8 px-4 py-3 text-sm text-[#f4efe4]/78"
+              >
+                {item}
+              </span>
+            ))}
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+}