104 lines (79 loc) · 2.12 KB

山禾个人网站 - 优化规划 v2

当前版本问题分析

像素风格不够强烈 - 需要更多MC元素
缺少场景感 - 可以加入MC游戏内的经典场景
动画可以更丰富
缺少交互性

优化方案

1. 首页Hero区 - 像素村庄场景

保留人物头像
背景添加MC风格像素云朵☁️
添加漂浮的像素花朵、树叶装饰
经典MC像素太阳☀️
像素小鸟飞过动画

2. 技能区 - Inventory背包风格

技能以"物品槽"形式展示（9宫格背包）
每个技能是一个可悬停的物品
熟练度用物品数量显示（如🍎🍎🍎🍎☆）
背景使用深色羊毛/石头纹理

3. 文章区 - 书与羽毛笔风格

文章卡片做成MC书本样式
悬停时有"翻页"动画
添加羽毛笔装饰

4. 社交区 - 末影箱风格

按钮做成MC箱子样式
悬停开箱动画
箱子打开弹出社交链接

5. 整体增强

添加更多像素生物装饰（猪、牛、羊）
进度条用MC-style（绿条）
按钮全部MC化
背景添加动态云朵、粒子效果

新增组件

Decorations.astro - 全局装饰组件

漂浮的像素云
飘落的花瓣/树叶粒子

PixelAnimals.astro - MC生物

像素猪、牛、羊、鸡
可以添加简单的动画

InventorySkills.astro - 背包式技能展示

3x3 或 4x3 物品槽
物品图标 + 名称

BookList.astro - 书本式文章列表

MC书本样式
翻页动画

配色方案（加深MC风格）

主色调

草地绿: #5D9C59 (更深)
泥土棕: #6D4C41
木头: #5D4037
石头灰: #757575
羊毛白: #F5F5F5

强调色

钻石蓝: #4FC3F7
红石红: #E53935
金色: #FFD54F
史莱姆绿: #8BC34A

暗色背景

洞穴背景: #1a1a2e
深夜: #16213e

优先级

第一期（核心优化）

Hero背景添加MC云朵
技能区改为背包风格
按钮MC化
添加装饰粒子

第二期（丰富细节）

MC生物装饰
书本式文章
开箱动画
场景化背景

技术实现

继续使用 Astro + Tailwind
CSS动画为主
少量JS交互