返回项目
已完成Next.jsReactTypeScriptTailwind CSSGSAP2026

Fravelz 作品集（Next.js）

使用 Next.js 16 与 React 19 构建的公开作品集，展示项目、技术栈、经历与认证。语言前缀路由 es/en/ru/zh；默认服务端组件，证书 PDF 弹层预览，亮色/深色/跟随系统主题（cookie + localStorage），以及覆盖项目与静态页的全站搜索浮层。

查看演示查看代码

项目截图

Fravelz 作品集（Next.js） — vista previa

1 / 7

我学到了什么

  • 使用 `[lang]` 的应用路由与各页 metadata
  • 将项目数据拆成模块与 `getProjectBySlug` 等工具函数
  • 首帧前主题：内联脚本与 ToggleTheme、cookie 一致
  • PDF 弹层与搜索的无障碍要点（语义、Escape、焦点）

更多说明

  • 这个作品集也是我在正式记录之前尝试 UX、国际化与性能的试验场。
  • 当布局或核心流程有变时，会更新截图。

技术细节

  • •Next.js 16（应用路由）、React 19、TypeScript
  • •Tailwind CSS 4 — `globals.css` 中 `rgb(var(--color-*))` 设计令牌
  • •GSAP 用于少量动画（如 404）
  • •i18n：`public/locals/` JSON + `public/i18n.js` 客户端