Glassmorphism Portfolio Demo

https://glassmorphism-portfolio.vercel.app/

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

部署到 Netlify（使用 GitHub Issues 作为博客内容源）

本仓库将 GitHub Issues 用作博客编辑器（文章以 issue 的形式存在，并使用标签区分 blog 与分类）。下面是为 Netlify 配置部署与自动触发更新的详细步骤：

1. 必备环境变量（在 Netlify 仪表盘 → Site settings → Build & deploy → Environment）：

   • GITHUB_TOKEN：建议创建一个 GitHub Personal Access Token（最少权限：repo:public_repo 或 repo，如果仓库私有则需要 repo 权限；也可只开启 issues、repo 的精确权限），用于提高 API 速率限制并允许访问私有仓库。将其设置为 Netlify 的环境变量（Secure）。
   • NEXT_PUBLIC_GITHUB_REPO_OWNER：仓库所有者（例如 mofelo）。
   • NEXT_PUBLIC_GITHUB_REPO_NAME：仓库名（例如 glassmorphism）。

2. 在 Netlify 中使用 @netlify/plugin-nextjs：

   • 我们已在 netlify.toml 中声明插件：

     [[plugins]]
        package = "@netlify/plugin-nextjs"

   • 在 netlify.toml 中已移除 publish = "out"，让插件自动选择正确的发布目录（不要强制使用 next export 的 out 目录）。

3. 创建 Netlify Build Hook（用于在 Issue 更新时触发站点重建）：

   • 在 Netlify 仪表盘 → Site settings → Build & deploy → Build hooks → Add build hook。
   • 填写名称（例如 github-issues-hook），选择分支（例如 main），点击 Create。复制生成的 Hook URL（示例：https://api.netlify.com/build_hooks/<HOOK_ID>）。

4. 在 GitHub 仓库中创建 Webhook（监听 Issues 事件并调用 Netlify Build Hook）：

   • 打开仓库 → Settings → Webhooks → Add webhook。
   • Payload URL：粘贴 Netlify 的 Build Hook URL。
   • Content type：application/json。
   • Which events：选择 Let me select individual events，勾选 Issues（或勾选 Issues 与 Issue comment，取决于你是否希望评论也触发构建）。
   • 添加 webhook。

   示例：当 Issue 被创建或编辑时，GitHub 会向 Netlify 的 Build Hook 发起 POST 请求，从而触发 Netlify 的构建流程并拉取最新内容。

5. 可选：使用 Netlify Deploy preview / Webhook 验证

   • 你可以在 GitHub 上手动创建或编辑一个 Issue，观察 Netlify 是否收到 Webhook 请求并触发部署（Netlify 仪表盘有构建历史可查看触发来源）。

6. 注意事项

   • 如果你需要严格的“完全静态导出” (next export)，则必须为所有动态路由实现 generateStaticParams() 并使用 next export（本项目目前使用 next build 由 @netlify/plugin-nextjs 处理，更灵活地支持 SSG/SSR）。
   • 保密：不要把 GITHUB_TOKEN 写入仓库。请使用 Netlify 的环境变量配置。

示例 Netlify Build Hook 使用示例（你不需要自己发送此请求，Netlify 会生成 Hook URL 并自动使用）：

# 下面仅作示例：向 Netlify Build Hook 发送一个模拟触发（请替换为你的 Hook URL）
curl -X POST -d '{}' https://api.netlify.com/build_hooks/<HOOK_ID>

示例 GitHub webhook 接收到的 payload 片段（Issues 事件示例）——Netlify Build Hook 不需要验证 payload，只要你设置为指向 Hook URL 即可：

{
  "action": "edited",
  "issue": {
	 "number": 12,
	 "title": "我的新文章",
	 "body": "# 文章内容\n这里是 Markdown 内容",
	 "labels": [{"name": "blog"}, {"name": "javascript"}]
  },
  "repository": {"full_name": "mofelo/glassmorphism"}
}

7. 部署完成后验证：

   • 登录 Netlify 仪表盘查看最新构建是否成功。
   • 访问站点，检查文章列表与详情页是否如预期显示（文章由 Issues 驱动）。

如果你希望我把这些说明写入 README（我已完成）并将更改提交到仓库，我可以继续为你创建 commit 并 push（请回复同意 “A” 来允许我执行 git 提交和 push）。

---

下面我将检查 components/Card.tsx 是否被改动并在本地启动 dev server 以供你预览。