个人网站开发日志

从 v0.dev 快速搭建基础框架，到 Cursor 精修细节功能，逐步形成了一套完整的个人网站开发解决方案。

使用 v0.dev 快速生成 Next.js 项目基础框架，包含现代化的 React 组件结构、Tailwind CSS 样式系统、响应式布局设计、基础路由配置、侧边栏导航组件、Hero 首页组件和博客文章页面。

通过 Cursor 进行代码优化和功能完善，包括首页 Hero 部分动态效果和社交链接、MBTI 性格分析模块集成、博客系统文章列表和详情页面设计、友链页面展示卡片设计、侧边栏导航菜单优化等核心功能。

利用 GitHub Pages 进行免费静态托管，配置 Next.js 静态导出、设置 GitHub Actions 自动部署、优化 SEO 和性能，为后续域名绑定做准备。

创建类似 Reddit 的社区发现页面，实现分类筛选功能（科技、设计、开发、生活等）、社区卡片展示设计、响应式网格布局优化、桌面端分类导航左右箭头功能、动态箭头显示和隐藏滚动条提升视觉体验。

设计现代极简风格 404 页面，集成自定义 GIF 动画、动态呼吸效果（柔和的透明度变化），与网站整体风格保持一致。

强制移动端使用网站指定字体覆盖系统字体，修复移动端显示和首屏 icon 显示问题，优化 MBTI 模块移动端布局，实现移动端滑动导航，调整移动端按钮和文字布局，修复侧边栏 z-index 层级问题。

实现动态 Table of Contents 组件，支持 h2、h3、h4 标题自动解析、实时高亮当前阅读章节、支持同时高亮多个可见章节、平滑滚动到指定章节、目录上下间距统一优化、目录字号统一化、目录自动跟随阅读位置调整。

添加字数统计功能、实现阅读时间预估（300 字/分钟）、实时阅读进度百分比显示、进度条平滑动画效果、优化文章布局和间距、修复重复返回顶部按钮问题、创建独立 BackToTop 组件。

文章底部添加版权信息卡片，包含文章标题、链接、作者、发布日期、CC BY-NC-SA 4.0 许可协议、知识共享标志设计、半透明毛玻璃效果。

友链卡片设计优化，响应式布局完善，提升友链展示效果。

绑定自定义域名 forthing.top，从临时域名更新为正式域名，更新所有相关链接和引用。

为移动端 h2 标题添加默认折叠状态，提升移动端阅读体验，实现响应式折叠功能。通过检测屏幕宽度自动调整折叠状态，移动端默认折叠所有 h2 标题，桌面端默认展开。

修复目录定位问题，将 sticky 定位改为 fixed 定位，确保目录始终固定在屏幕上，不会随页面滚动而移动。添加响应式设计，移动端自动隐藏目录。

优化文章内容间距，缩小折叠后 h2 标题间距，扩大其他内容元素间距，提升阅读体验。调整目录和正文之间的间距，为目录留出足够空间。

修复首屏 V 字箭头跳转功能，优先使用状态切换来显示 MBTI 模块，保留滚动逻辑作为备用方案，确保在所有情况下都能正常工作。

优化目录组件状态管理、实现多章节同时高亮逻辑、改进滚动监听性能、完善 TypeScript 类型定义、统一组件样式规范、解决 Next.js 静态生成与客户端组件兼容性问题、优化构建流程和错误处理。

实现目录智能滚动逻辑，根据可见行数动态调整滚动时机。当高亮项目接近底部时自动滚动到底部，避免内容被遮挡。添加平滑过渡区域，让滚动更加自然流畅。

重新设计友链卡片布局，移除标签显示，采用左对齐头像和标题布局。实现触摸动画效果，文字淡出时头像居中放大，提升交互体验。按名称排序友链，优化视觉层次。

移除返回顶部按钮，简化页面布局。修复 h2 标题下划线粗细不一致问题，统一中英文间距格式。完善博客文章更新时间和日期显示格式。修复 h3 标题中英文间距问题。