这个项目是一次实验性的尝试，通过AI技术帮助作者在几乎没有HTML、CSS和JavaScript基础的情况下创建了一个独特而个性化的个人网站。
Fuling Chen’s Personal Website
欢迎来到 Fuling Chen 的个人主页！这个项目是一次实验性的尝试，通过AI技术帮助作者在几乎没有HTML、CSS和JavaScript基础的情况下创建了一个独特而个性化的个人网站。以下是该项目的详细功能和样式说明：
主要特点：
1. AI辅助创作
- 作者没有任何前端开发基础，但通过AI的支持，成功创造了这个网站。
- 展示了技术的学习和尝试，通过AI实现了复杂功能和创意设计。
2. 加载动画
- 页面加载时引人注目的加载动画，提供清晰的视觉指示。
3. 背景图片轮播
- 平滑的背景图片轮播为页面增色，切换间呈现出一种连贯的流动感。
4. 时钟卡片和一言展示
- 时钟卡片提供实时的日期和时间显示，搭配一言格言，为用户带来思考或启示。
5. 深色模式
- 提供深色模式选择，保护用户在夜间浏览时的眼睛，并体现个性化设计。
6. 滚动控制按钮
- 返回顶部和返回底部按钮，方便用户控制页面位置，提供便捷导航体验。
7. 图片轮播卡片
- 展示引人入胜的图片，用户可手动/自动切换，为网页增加视觉多样性。
8. 个人信息展示卡片
- 突显作者身份，用户通过头像、姓名和用户名迅速了解作者基本信息，并可进行互动。
9. 关于我和个人信息卡片
- 展示作者低调、热爱简单生活的个性，强调对兴趣爱好和内心平衡的追求。
10. 个人项目展示
- 展示作者技术实力和兴趣爱好，简要描述使访问者能迅速了解项目特点。
11. 教育背景、联系方式、网站信息卡片
- 提供更深入了解，包括作者学术背景、联系方式和网站统计信息。
12. 音乐播放器
- APlayer 插件呈现出优雅的音乐播放器，用户可在浏览网页时欣赏到作者喜欢的音乐。
13. 留言板功能
- 集成 Twikoo 插件的留言板功能，让用户能留下反馈和评论。
14. PWA 功能
- 渐进式Web应用功能，用户可将网页添加到主屏幕，享受离线缓存等便利。
15. 网站信息统计
- 利用busuanzi实现的的网站信息统计功能。
主要样式：
1. 响应式布局
- 兼容不同设备，确保在各种屏幕尺寸下提供良好用户体验。
2. 加载动画和过渡效果
- 精心设计的加载动画和平滑的过渡效果，创造无缝浏览体验。
3. 卡片式布局
- 采用卡片式布局，页面结构清晰，模块之间分隔明确，给用户逻辑井然感。
4. 自定义图标
- 使用自定义头像、网页图标和按钮图标，使页面更个性化和专属。
5. 背景图片过渡效果
- 切换背景图片时的过渡效果美化页面，增加整体美感。
6. 字体图标
- FontAwesome 图标库的运用，赋予页面独特的图标风格，增加层次感。
7. 页面主题色切换
- 提供浅色和深色模式切换，用户可根据光照环境或个人偏好选择。
8. 音乐播放器样式
- 使用 Meting.js 插件呈现的音乐播放器样式简洁美观，与整体网页风格协调一致。
9. 留言板样式
- Twikoo 插件的集成使留言板呈现简洁清爽的样式，鼓励用户进行互动。
如何使用
克隆项目到本地
1
git clone https://github.com/0fuling0/home
打开
index.html文件，即可在浏览器中查看个人主页。
技术栈
- HTML
- CSS
- JavaScript
- FontAwesome 图标库
- APlayer 播放器
- Meting.js 音乐插件
- Twikoo 留言板插件
- GPT-3.5（AI辅助）
第三方库版权说明
APlayer 播放器
APlayer 播放器的版权和使用信息详见 APlayer GitHub 仓库。
Meting.js 音乐插件
Meting.js 音乐插件的版权和使用信息详见 Meting.js GitHub 仓库。
霞鹜文楷字体
Meting.js 音乐插件的版权和使用信息详见 霞鹜文楷 GitHub 仓库。
Twikoo 留言板插件
Twikoo 留言板插件的版权和使用信息详见 Twikoo GitHub 仓库。
FontAwesome 图标库
FontAwesome 图标库的版权和使用信息详见 FontAwesome 官方网站。
联系方式
- 电子邮件：[email protected]
- GitHub: 0fuling0
- Bilibili: Fuling Chen
访问我的个人主页
版权和免责声明
© 2024 Fuling Chen. 保留所有权利。
该项目仅作为个人学习和尝试的实验性作品，不提供任何明示或暗示的担保或保证。作者概不对因使用该项目而造成的任何损失负责。
