> For AI agents: the complete documentation index is available at https://www.tteam.icu/llms.txt, the full documentation bundle is available at https://www.tteam.icu/llms-full.txt.

# “关于我”编写


AI SummaryAI Generated

这篇文章分享了使用 React、Tailwind CSS 和 Magic UI 编写个人“关于我”页面的过程。
- 页面通过 Cloudflare Pages 部署，并使用 Umami 统计访问数据。
- 文章拆解了头像、WakaTime 语言统计、工作经历、项目和工具页等模块的实现方式。

本周，我开始了“关于我”页面的编写工作

使用的技术栈包括`React`、`Tailwind CSS`、`Magic UI`以及`Cloudflare`的自动部署功能

当然，编写过程中也得到了`ChatGPT`的协助

这是我第一次使用`React`和`Tailwind CSS`，在GPT的帮助下，整个开发过程非常顺畅

接下来我将分享一下编写的具体过程\~

## 部署方面

最初，包括本页面在内，编译和访问完全使用`Cloudflare`的`Pages`功能，图床使用自行部署的服务

同时使用`Umami`进行访问统计

## 编写方面

### 主页

#### 头像模块

使用到的是`Magic UI`的`Orbiting Circles`组件

#### 语言使用模块

我使用的是`wakatime`的`API`获取编程语言使用时间

我新开了一个仓库, 使用py每天去调用api, 然后生成json文件, 放在cf上

![](https://img.tteam.icu/i/2024/11/24/z9n29e-3.webp)

在`关于我`的编译阶段, 先度调用上面爬到的数据放在本地, 也写了调用接口

![](https://img.tteam.icu/i/2024/11/24/zavb61-3.webp)

用户在访问的时候，默认显示我放在本地的数据, 在接口返回后, 替换掉原来在页面上的数据

#### 工作经历模块

我使用的是`Magic UI`的`Neon Gradient Card`组件

#### 项目模块

使用字节的`卡片`功能

### 工具页

使用自己封装的组件

### 链接页

使用字节的`卡片`功能

### 总结

使用`react`编写简单的ui界面, 没有用到复杂的js, 对于我来说还是写的很舒服的