使用cursor编写了一个全新的个人主页,源码以开源

个人主页源码

心血来潮用cursor零代码搞了一个个人主页,感觉还可以,开源给需要的朋友,有需要的可以拿去修改成自己的信息使用,本源码信息如下:

# HttpsGuo的个人主页

一个简洁美观的个人主页模板,包含响应式设计、动态时钟、新年祝福生成器、文章展示等功能。

## 预览
- 演示地址:[www.httpsguo.cn](https://www.httpsguo.cn)
- 博客地址:[blog.httpsguo.cn](https://blog.httpsguo.cn)

## 功能特点
- 响应式设计,适配各种设备
- 桌面端(>768px):双列布局
- 平板端(768px-480px):单列布局
- 移动端(<480px):紧凑单列布局
- 精美的动态时钟显示
- 新年祝福生成器
- 最新文章和热门文章展示
- 社交媒体链接和二维码展示
- 友情链接展示
- SEO优化
- 性能优化

## 目录结构
├── index.html # 主页面
├── style.css # 样式文件
├── script.js # JavaScript脚本
└── README.md # 说明文档

## 快速开始

1. 克隆仓库

2. 修改个人信息
- 打开 `index.html`,修改以下部分:
- 标题和描述
- 头像地址
- 个人简介
- 联系方式
- 社交媒体链接
- 导航栏链接
- 备案信息

3. 修改文章列表
- 在 `script.js` 中修改 `popularArticles` 数组来更新热门文章
- 配置 WordPress API 地址来获取最新文章

## 可自定义部分

### 1. 基础信息
- 网站标题和描述(SEO相关)
- 头像和个人简介
- 联系方式
- 社交媒体链接和二维码
- 导航栏链接
- 备案信息

### 2. 样式定制
- 背景颜色(修改 `style.css` 中的 `background-color`)
- 主题颜色(修改 `style.css` 中的颜色变量)
- 卡片样式
- 时钟样式
- 字体和文字大小

### 3. 功能模块
- 时钟显示(可在 `clock-card` 中修改)
- 新年祝福生成器(可在 `script.js` 中修改祝福语)
- 文章展示(可修改文章数量和来源)
- 友情链接(可添加或移除)

### 4. 性能优化
- 图片懒加载
- DNS预解析
- 资源预加载
- 字体图标按需加载

## 注意事项
1. 修改社交媒体链接时,需同时更新图标和对应的二维码
2. 添加友情链接时,建议保持图标大小一致(16x16px)
3. 修改文章API时,需要确保返回数据格式正确
4. 自定义样式时,建议保持响应式设计的兼容性
5. 移动端适配时注意测试不同尺寸设备的显示效果

## 技术栈
- HTML5
- CSS3
- JavaScript(原生)
- Font Awesome(图标)

## 浏览器支持
- Chrome (推荐)
- Firefox
- Safari
- Edge
- Opera

## 开源协议
本项目基于 MIT 协议开源,使用时请保留作者信息。

## 特别感谢
感谢 [前端嘛](https://www.fecoder.cn/) 提供的代码支持。

## 作者信息
- 作者:httpsguo
- 网站:https://www.httpsguo.cn
- 博客:https://blog.httpsguo.cn
- 邮箱:httpsguo@163.com
- Telegram:https://t.me/httpsguo

## 更新日志
- 2024-01-25:初始版本发布

喜欢的朋友可以移步github:https://github.com/HttpsGuo/blogpage  或者在下面按钮下载后修改使用

相关文件下载地址
©本站所有资源均来源于网络,仅供学习使用,请支持正版!

HttpsGuo

创建属于自己的元宇宙

相关推荐

DeepSeek + DeepResearch:开启智能科研新时代

DeepSeek + DeepResearch 是一款集数据采集、数据处理、数据分析、数据挖掘和数据可视化于一体的 AI 学术工具,旨在让科研工作变得更加高效和便捷。通过多 agent 实现全流程自动化,该工具能够帮助用户快速收集和分析数据,生成直观的可视化图表,为科研、金融、商业等领域提供强大的支持。

1 条评论

  1. 谢谢分享

发表评论

您的电子邮件地址不会被公开,必填项已用*标注。