个人主页搭建

个人主页预览

写了一半的总结

用opencode和claude code写了接近一天，差不多完成了80%吧

概念设计

  • 风格：手绘/卡通冒险风，温馨房间人设（暖色调、木质、绿植、小摆件）
  • 主页导航：点击房间里的物品跳转对应页面
  • 互动机制：成就徽章系统、隐藏彩蛋、返访记忆（localStorage）
  • 时间系统：随系统时间切换白天/傍晚/夜晚氛围

技术栈搭建

  • React 19 + Vite 8 + React Router v7 + Framer Motion 12
  • oxlint 代码检查
  • 生产构建 (dist/) 可部署

房间主页 (src/pages/Home.jsx)

温馨房间背景（墙面+地板+踢脚线+木纹），根据系统时间自动切换色调：

  • ☀️ 上午 — 暖黄明亮
  • 🌤️ 下午 — 金黄
  • 🌅 傍晚 — 橙红
  • 🌙 夜晚 — 深蓝

10 个房间物品，数据驱动渲染：

物品 类型 行为
🖼️ 照片墙 navigation → /photos
🏆 奖杯架 navigation → /growth
📚 书架 navigation → /reading
✍️ 日记本 navigation → /blog
🎮 游戏机 navigation → /games
🪟 窗户 ambient 氛围装饰，随时间变化
🐱 小猫 easter-egg 隐藏彩蛋
🛋️ 沙发 reserved 显示 COMING SOON
🪴 绿植 decor 纯装饰
🟫 地毯 decor 纯装饰

所有物品悬停发光 + 弹动动画 + 名称浮现，点击跳转到对应页面。
右上角显示时段标签 + 探索进度（已点击/可点击总数）。
底部固定成就栏，实时显示 7 个徽章的锁定/解锁状态。

RoomItem 组件 (src/components/RoomItem.jsx)

  • 5 种物品类型：navigation / easter-egg / ambient / decor / reserved
  • 悬停效果：放大、金色光晕 (boxShadow) + 描边 (1.5px outline)、文字提示、浮动动画
  • 点击效果：弹簧缩放、摇动反馈
  • 导航延迟 400ms 后跳转
  • 导航防抖：useRef 持有定时器，卸载/重复点击时清除
  • 键盘可访问性：role="button", tabIndex, onKeyDown(Enter/Space), aria-label, aria-description

GameState 上下文 (src/context/GameState.jsx)

  • localStorage 持久化（key: main-index-game-state）
  • 追踪：visitCount / achievementsUnlocked / clickedItems / easterEggsFound / timeOnReading
  • 首访检测（isFirstVisit 标记）
  • 成就自动检测（监听 clickedItems.size / visitCount / easterEggsFound.size / timeOnReading 变化）
  • newAchievements 队列 + clearNewAchievement — 支持成就解锁通知
  • API: clickItem / findEasterEgg / incrementReadingTime / dismissFirstVisit / checkAchievementsSync

运行方式

1
2
3
4
cd D:\Projects\main-index
npm run dev      # 启动开发服务器 (http://localhost:5173)
npm run build    # 生产构建
npm run preview  # 预览生产构建

🔨 待办

P0 — 视觉与沉浸感

  • 美术素材替换 — 全部替换为自定义手绘风SVG ✅
  • 入口动画 — 房间物品到子页面的过渡动画（如翻开书、打开相册）

P1 — 交互增强

  • 跳转页简化 — 3秒倒计时改为1秒快速跳转+旋转动画 ✅
  • 房间装饰细化 — 更多细节元素提升沉浸感
  • 彩蛋扩展 — 更多隐藏可点击物（蜘蛛、飞虫等）
  • 音效 — 点击物品、解锁成就、页面切换的轻量音效
  • 移动端适配优化 — 当前物品依赖百分比定位，需在小屏验证

P2 — 布局与资产

  • Room布局优化 — 调整为 Virtual Cottage 风格 ✅
  • 成就栏折叠交互 — 默认收起，点击向左弹出 ✅

⏸️ 搁置 — 子页面内容填充

  • 照片页 — 替换 emoji 占位为真实图片源
  • 阅读页 — 打通完整 WeRead 数据链路
  • 个人发展页 — 用真实数据替换 Demo 占位