James的个人网站

一个现代化的个人网站，使用React.js、Tailwind CSS和动画效果构建，展示个人技能、经历和项目。

技术栈

• 前端框架：React.js - 组件化开发，实现3D交互效果
• CSS框架：Tailwind CSS - 实现现代UI和响应式设计
• 动画效果：苹果风格的UI动效、轨道系统和装饰性浮动元素
• 无服务器部署：使用纯HTML/JS/CSS，可部署在任何静态服务器上

功能特点

• 苹果风格的3D卡片悬停效果
• 行星轨道式技能图标展示系统
• 响应式设计，适配各种设备屏幕
• 流畅的动画和交互体验
• 导航锚点滚动功能
• 每个部分都有独特的装饰性浮动圆圈，增强视觉效果
• 内嵌的联系方式部分，包含多种联系渠道
• 新增: 现代化的鼠标跟随效果，带有悬停动画和点击反馈
• 新增: 平滑的页面加载动画，提升用户体验
• 新增: 移动端优化，确保在各种设备上的稳定性

页面组件

• Hero区域：3D交互卡片，展示姓名和职业
• About区域：个人介绍和成就统计，带有装饰性浮动元素
• Skills区域：分类技能展示，带有进度条和图标
• Experience区域：时间轴样式的工作经历展示
• Projects区域：正在开发中
• Contact区域：内嵌联系部分，展示电话、邮件和WhatsApp联系方式

用户体验优化

• 页面加载动画：进入网站时的平滑过渡效果
• 鼠标跟随效果：双层设计的现代化鼠标指示器，提供交互反馈
• 移动端适配：针对小屏幕设备的特殊布局调整
• 平滑滚动：优化的锚点导航，带有缓动效果
• 悬浮卡片：所有卡片元素都有微妙的悬浮效果，提升交互感
• 渐变文本：主要标题使用渐变色彩，增强视觉吸引力

成就展示

• IT支持
• Web开发
• PHP开发
• 前端专家
• 全栈开发者
• UI/UX开发
• 2+年开发经验
• 1个IT认证

导航功能

网站实现了单页应用的锚点导航功能：

• 主页 (Home)
• 关于我 (About me)
• 技能 (Skills)
• 经验 (Experience)
• 联系我 (Contact)

项目结构

个人网站/
├── index.html       # 主HTML文件，包含React组件和样式
├── styles.css       # 自定义CSS样式
├── README.md        # 项目说明文档
├── LICENSE          # 许可证文件
└── images/          # 图片资源目录

装饰效果

每个主要部分都有独特的装饰性浮动圆圈：

• About区域：右上角半透明白色圆圈，左下角和中左侧的辅助圆圈
• Skills区域：左上角渐变圆圈
• Experience区域：底部中央径向渐变圆圈
• Projects区域：右侧带内阴影的圆圈（开发中）

响应式设计

• 桌面端：完整展示所有效果，包括轨道系统和装饰元素
• 平板端：优化布局，缩小部分装饰元素
• 移动端：简化布局，隐藏复杂动画元素，重新排列内容

交互效果

• 鼠标跟随：双层设计的光标效果，内层小圆随鼠标即时移动，外层大圆平滑跟随
• 链接悬停：鼠标悬停在链接和按钮上时的特殊视觉反馈
• 点击动画：鼠标点击时的缩放动画
• 卡片悬浮：卡片在悬停时轻微上浮
• 进场动画：各部分内容在滚动到视图时的淡入效果

自定义

• 修改index.html中的React组件内容可自定义网站文本和功能
• 在轨道系统中添加或修改技术图标
• 个性化3D卡片效果和动画参数

后续开发计划

• 技能详情页面
• 项目展示区域（正在开发中）
• 博客文章功能
• 多语言支持
• 黑暗/明亮模式切换
• 联系表单与后端集成

最近更新

• 2025-04-17：将ReactDOM.render更新为React 18的createRoot API
• 2025-04-17：修改头像图片路径，从images目录移至根目录
• 2025-04-17：优化图片资源加载