我的AI编程学习之旅

这是一个记录我从2024年9月13日到11月学习AI编程的个人博客网站。

📖 博客内容

博客记录了我八周的AI编程学习历程，包括：

• AI辅助编程：学习使用Claude Code进行开发
• 项目实战：独立开发任务管理工具的完整过程
• Git版本控制：从零掌握Git的核心概念和实际应用
• 技能提升：前端开发、项目管理等综合能力成长

🚀 在线访问

博客通过GitHub Pages托管，在线访问地址： https://yourusername.github.io/blog/

🛠️ 技术栈

• 前端：HTML5, CSS3, JavaScript (ES6+)
• 样式：CSS Grid, Flexbox, 渐变设计
• 交互：原生JavaScript, 平滑滚动, 动画效果
• 部署：GitHub Pages
• 字体：Google Fonts (Inter)
• 图标：Font Awesome

📁 项目结构

blog/
├── index.html          # 主页面
├── styles.css          # 样式文件
├── script.js           # 交互脚本
├── README.md           # 项目说明
└── my-ai-programming-journey.md  # 博客Markdown原文

✨ 主要特性

响应式设计

• 完美适配桌面端、平板和移动设备
• 移动端友好的导航菜单
• 灵活的网格布局系统

交互体验

• 平滑滚动导航
• 滚动显示动画
• 悬停效果和微交互
• 打字机效果的标题动画
• 页面加载进度条

视觉设计

• 现代渐变色彩方案
• 卡片式布局设计
• 时间线式的学习历程展示
• 技能网格化展示

📱 功能模块

Hero区域

• 醒目的标题和副标题
• 学习统计信息展示
• 浮动动画卡片
• CTA行动按钮

学习历程时间线

• 可视化的学习时间线
• 详细的每周学习内容
• 技术标签展示
• 响应式时间线布局

项目展示

• 完整的项目介绍
• 技术栈详细说明
• 问题与解决方案展示
• 代码和技术细节

技能总结

• 分类技能展示
• 学习心得体会
• 洞察卡片设计
• 个人成长总结

联系方式

• 社交媒体链接
• 邮箱联系方式
• 响应式联系卡片

🎨 设计特色

色彩方案

• 主色调：紫蓝渐变 (#667eea → #764ba2)
• 背景色：白色和浅灰色 (#ffffff, #f8f9fa)
• 强调色：渐变色彩系统

字体系统

• 主字体：Inter (Google Fonts)
• 图标：Font Awesome 6.4.0
• 字重：400, 500, 600, 700

动画效果

• CSS过渡和动画
• JavaScript驱动的时间线动画
• 悬停状态变化
• 页面加载淡入效果

🚀 部署指南

本地运行

1. 克隆仓库到本地

git clone https://github.com/yourusername/blog.git
cd blog

2. 使用Live Server或其他本地服务器打开 index.html

GitHub Pages部署

1. 确保仓库是公开的
2. 进入仓库Settings页面
3. 找到Pages选项
4. 选择Source为"Deploy from a branch"
5. 选择main分支和/(root)文件夹
6. 保存设置，等待部署完成

自定义域名（可选）

在仓库根目录创建 CNAME 文件，内容为你的域名：

yourdomain.com

🔧 自定义配置

修改个人信息

编辑 index.html 中的以下部分：

• 联系链接（第225-235行）
• GitHub用户名（第2行注释）
• 邮箱地址（第228行）

修改样式

主要样式在 styles.css 中：

• 颜色变量：搜索 #667eea 和 #764ba2
• 字体设置：第10-15行
• 响应式断点：媒体查询部分

修改内容

主要内容在 index.html 的各个section中：

• Hero标题和副标题
• 时间线内容
• 项目描述
• 技能列表

🌟 性能优化

• 使用CDN加载字体和图标
• 图片懒加载支持
• CSS和JavaScript压缩
• 渐进式加载动画
• 节流函数优化滚动性能

📊 浏览器兼容性

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+
• 移动端浏览器

📝 更新日志

v1.0.0 (2024-11)

• 初始版本发布
• 完整的博客内容
• 响应式设计
• GitHub Pages部署

🤝 贡献

欢迎提交Issue和Pull Request来改进这个博客模板！

📄 许可证

MIT License - 详见 LICENSE 文件

---

用 ❤️ 和 AI 制作