“关于我”编写
“关于我”编写
在这周, 我开始了“关于我”的编写
使用的技术栈是react、Tailwind CSS、Magic UI以及Cloudflare的自动部署
当然也没有离开chatGPT的帮助
这是我第一次写react，也是第一次使用Tailwind CSS, 经过了gpt的帮助, 写的还是很舒服的
接下来我就来分享一下编写的过程吧~
部署方面
最开始, 包括本站, 编译和访问完全使用及Cloudflare的pages功能, 图床使用部署的+小黄云
然后使用umami进行访问统计
编写方面
主页
头像模块
使用到的是Magic UI的Orbiting Circles组件
语言使用模块
我使用的是wakatime的API获取编程语言使用时间
我新开了一个仓库, 使用py每天去调用api, 然后生成json文件, 放在cf上
在关于我的编译阶段, 先度调用上面爬到的数据放在本地, 也写了调用接口
用户在访问的时候，默认显示我放在本地的数据, 在接口返回后, 替换掉原来在页面上的数据
工作经历模块
我使用的是Magic UI的Neon Gradient Card组件
项目模块
使用字节的卡片功能
工具页
使用自己封装的组件
链接页
使用字节的卡片功能
总结
使用react编写简单的ui界面, 没有用到复杂的js, 对于我来说还是写的很舒服的
本博客所有文章除特别声明外，均采用 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》 许可协议。转载请注明来源 buyfakett's Blog！
wechat
alipay
相关推荐
2024-11-30
cloudflare pages钉钉通知
cloudflare pages钉钉通知开始我的纯静态网站博客、关于我、笔记等网站都用cf的pages来编译和部署 但是我发现cf没有集成通知功能, 编译完成/失败, 我都不知道 接下来我就在网上找了有没有类似的功能, 找到了cloudflare-pages-slack-notification 但是经过测试后, 发现不能支持钉钉webhook, 所以我在这个仓库基础上二开并翻译了一下 项目地址 配置github原理是github的workflows自动检测cf的状态来推送 1234567891011121314151617181920212223name: dingding_webhookon: pushjobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Await CF Pages and send Slack notification id: cf-pages uses:...
2024-12-27
cloudflare 加载git信息
cloudflare加载git信息前言我之前会把git的信息获取到后塞到head中 把笔记、博客和关于我从jenkins自动化迁移到cloudflare后发现获取git的参数有问题 cloudflare编译的结果git分支会显示HEAD，git提交数永远显示1 开始经过我一系列的测试，发现在构建命令前增加几个命令即可 1git fetch --unshallow && git fetch origin && git checkout main && git pull origin main 附录获取git参数1234567891011121314151617181920212223242526272829303132333435363738394041424344454647const fs = require('fs');const { execSync } = require('child_process');const path =...
2024-12-20
鲲鹏编译Chromium
鲲鹏编译Chromium前言鲲鹏的服务器似乎和别的arm架构都不一样，使用线上别人的二进制是直接跑不起来这里记录一下自己编译的过程服务器使用华为云上海8C32G鲲鹏架构服务器，镜像用的是ubuntu代理是自己准备的用gost中转socks5 代理准备由于我用的是gost先要准备gost，但是官方编译的不支持，需要自己编译 环境准备1234wget https://golang.google.cn/dl/go1.23.4.linux-arm64.tar.gzrm -rf /usr/local/go && tar -C /usr/local -xzf go1.23.4.linux-arm64.tar.gzexport PATH=$PATH:/usr/local/go/bingo env -w GOPROXY=https://mirrors.aliyun.com/goproxy/,direct 开始编译123git clone https://github.com/go-gost/gost.gitcd gost/cmd/gostgo...
评论
