个人主页项目

Personal Portfolio Website

这是一个使用现代Web技术栈构建的个人主页项目，展示个人信息、技术栈和AI探索经历。

这是一个展示个人信息的静态网站，采用现代化设计风格

项目概述 | Project Overview

• 项目名称：黑眼圈的个人主页
• 响应式设计：支持移动端和桌面端 # 采用移动优先设计理念
• 设计风格：现代简约，紫色主题 # 参考当代设计趋势

功能特点 | Features

• 响应式导航栏，支持移动端菜单 # 自适应不同设备尺寸
• 平滑滚动效果 # 使用JavaScript实现页面平滑过渡
• 卡片式布局展示技能和工具 # 采用现代卡片UI设计
• 渐变背景和现代化设计元素 # 使用CSS渐变创建视觉效果
• 交互动画效果 # 增强用户体验的动画设计

页面结构 | Page Structure

1. 首页（Hero Section）

   • 个人简介 # 简要自我介绍
   • 职业标签 # 职业身份标识
   • 教育背景 # 教育经历展示

2. 关于我 # 详细的个人信息部分

   • 个人介绍 # 详细的自我介绍
   • 职业背景 # 职业经历
   • 联系方式 # 社交媒体链接

3. 技术栈 # 专业技能展示区域

   • Android开发 # 移动应用开发能力
   • Flutter开发 # 跨平台开发技能
   • Web开发 # 前端开发能力
   • 鸿蒙开发 # 新兴平台开发经验
   • 开发工具 # 工具使用能力
   • AI工具探索 # AI相关技术探索

4. AI探索之旅 # AI技术实践展示

   • AI对话助手体验 # AI工具使用经验
   • AI编程工具应用 # AI辅助开发实践

5. 联系方式 # 社交联系信息

   • 微信 # 即时通讯联系方式
   • 邮箱 # 电子邮件联系方式
   • 教育背景 # 教育经历信息

技术实现 | Technical Implementation

使用的技术和工具 # 项目技术栈详解

• TailwindCSS：用于样式设计 # 原子化CSS框架
• Font Awesome：提供图标支持 # 专业图标库
• JavaScript：实现交互功能 # 交互逻辑实现
• CDN引用：确保快速加载 # 资源加载优化

主要特性 # 核心技术特点

• 使用TailwindCSS实现响应式设计 # 响应式布局实现方案
• 使用CSS渐变创建现代化背景 # 视觉效果实现方式
• 实现卡片悬停动画效果 # 交互动画实现
• 移动端菜单的平滑切换 # 移动端适配方案
• 页面间的平滑滚动 # 用户体验优化

本地运行 | Local Development

1. 克隆项目到本地 # 获取项目源码
2. 直接在浏览器中打开index.html文件 # 无需构建步骤
3. 无需安装任何依赖，所有资源通过CDN加载 # 简化部署流程

后续优化计划 | Future Improvements

• 添加深色模式支持 # 增强用户体验
• 优化移动端性能 # 提升加载速度
• 添加更多交互动画 # 丰富交互效果
• 集成更多项目展示 # 扩展内容展示
• 添加博客文章展示 # 增加内容维度

联系方式 | Contact Information

• 微信：wxid_4pw47lfsl2g321 # 微信联系方式
• 邮箱：[email protected] # 电子邮件

版权信息 | Copyright

© 2024 黑眼圈. All rights reserved. # 版权声明