GitHub个人主页美化

效果展示

展示为静态效果,动态效果请查看我的GitHub页面

创建GitHub仓库

创建与GitHub用户名相同的仓库,当仓库名与用户名相同时,此仓库会被视作特殊仓库,其README.md(自述文件)会展示在GitHub个人主页,以我的GitHub举例,我GitHub用户名是Gzzzxx,就要创建一个名为Gzzzxx的仓库
注意:此仓库须设置为公开状态!

顶部和底部动图

开源项目

https://github.com/kyechan99/capsule-render

页面顶部

html 复制代码
<p align="center">
<img src="https://capsule-render.vercel.app/api?type=waving&color=timeGradient&height=260&&section=header&text=HI%20THERE&fontSize=90&fontAlign=50&fontAlignY=28&desc=I%20am%20Gzzzxx%F0%9F%98%81&descAlign=50&descSize=30&descAlignY=56&animation=twinkling" />
</p>

页面底部

html 复制代码
<p align="center">
<img src="https://capsule-render.vercel.app/api?type=waving&color=timeGradient&height=260&&section=footer&text=THE%20END&fontSize=90&fontAlign=50&fontAlignY=78&desc=Hope%20your%20program%20is%20bug-free!&descAlign=50&descSize=30&descAlignY=46&animation=twinkling" />
</p>

打字机效果

开源项目

https://github.com/DenverCoder1/readme-typing-svg

代码

html 复制代码
<p align="center">
<img src="https://readme-typing-svg.demolab.com?font=Orbitron&size=25&pause=1000&center=true&vCenter=true&random=false&width=600&lines=Welcome+to+my+GitHub+profile+page!;I+am+super+obsessed+with+programming!" />
</p>

GitHub数据概览、项目语言比例

开源项目

https://github.com/anuraghazra/github-readme-stats

代码

将代码中username=后面改为你自己的用户名

html 复制代码
<picture>
  <source
    srcset="https://github-readme-stats.vercel.app/api?username=Gzzzxx&show_icons=true&hide_border=true&line_height=24&theme=dark"
    media="(prefers-color-scheme: dark)"
  />
  <img src="https://github-readme-stats.vercel.app/api?username=Gzzzxx&show_icons=true&hide_border=true&line_height=24" />
</picture>
<picture>
  <source
    srcset="https://github-readme-stats.vercel.app/api/top-langs/?username=Gzzzxx&layout=compact&hide_border=true&langs_count=8&theme=dark"
    media="(prefers-color-scheme: dark)"
  />
  <img src="https://github-readme-stats.vercel.app/api/top-langs/?username=Gzzzxx&layout=compact&hide_border=true&langs_count=8" />
</picture>

贡献折线图

开源项目

https://github.com/Ashutosh00710/github-readme-activity-graph

代码

将代码中username=后面改为你自己的用户名

html 复制代码
<img width="800" src="https://github-readme-activity-graph.vercel.app/graph?username=Gzzzxx&theme=github-compact&hide_border=true&area=true" />

技术栈图标展示

开源项目

https://github.com/tandpfun/skill-icons

代码

html 复制代码
<img align="center" src="https://go-skill-icons.vercel.app/api/icons?i=java,html,css,js,jquery,nodejs,ts,md,vue,vite,py,docker,linux,nginx">

徽章

开源项目

项目徽章
https://github.com/badges/shields

个人资料访问统计徽章
https://github.com/antonkomarev/github-profile-views-counter

代码

代码中给出的是我个人页面的内容,请根据自己需求进行修改

html 复制代码
<p align="center">
<a href="https://github.com/Gzzzxx"><img src="https://img.shields.io/badge/GitHub-Gzzzxx-blue?logo=github" /></a>
<a href="https://gitee.com/gzzz-art"><img src="https://img.shields.io/badge/Gitee-gzzz_art-red?logo=gitee&logoColor=rgb(199, 29, 35)" /></a>
<a href="https://blog.csdn.net/weixin_41386222?type=blog"><img src="https://img.shields.io/badge/CSDN-Gzzz__-green?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAB+FBMVEUAAABqMy7wroeAUEvuso1vOTNwOzbxt5WKYFyniYm/qKLe3s1sNTBsNjGQVkhvODR6Rj7ip4XutZOCU07wtpXxupnst5eKXFmJXlrwu5qKbWryv6Hzx62gfXuwiYb44tNvODNWNSuKUUbwr4iKUkXwsImCVUZ3Qjt5UkN3QjvwsYtGLSfws454SERyPzp4RD/ws4/ws49xPzvvtI/xtJBPODJ7S0Z7SkXWnIFiTkbVnIGCU0/ps5TxvaDwvqGSaWWSaGiOaGSTb2uPamXzx7HxyrCjhHrwrYVqMi3wrITuq4RrMy63eF9jPS/Cg2fupoLqqIHopoDfn3rXlnXAfmSwcluNWkfioHzmkXrihXXccW2zdFypbFehZlKFWUVzSTlwSTh7QThuNS9VMyjto4HlpH7ionzjh3bXmXXOkG/Mi22tb1l/UUB9TT15TDxtRzZcNytZNypRMCVPLiTrnn/cnXnZm3fZmHbhgXTddG7IiGvMgGrPY2S2gGK+e2K1dl7CXV6uel28WlqocFika1WnalWdbFOaYk6dYE6SYUySVkaQVUaIVkSCV0OHVEOJTkF4UD2CRTxmQTJaLCZXKyVNKyJJJR9EIx0+IRrTknLffXLabWzZbGzFi2u5emGucFqicVeXaFCSXUp1STpdOy1hNyxdMilXMCfoEl0hAAAAR3RSTlMA/vqLn+7meVAWDgX59/X13LSGgoF7c2hdVlJQLSklEff18/Ly7+zs5ubi4djX1szHxMG5uLSjnZaJhn1pXldEPT05Ny4nGbaUVn8AAAIPSURBVDjLvdNFlxpBEMDxBgLsknX3jbu7e1I1wzC4OyzusO7u7nFPvmYGwr4HWZJc8vI71at/H/rQTf65g3/pReclTX/qj0rKL175fW4ViBCRd0HQWjC/uFGCWaU3i/f3hyLMIXq873alKJVma3oqL8rvTw7Ns+qeALOCuMIEetTsvPBpbpdUsBSk0SMjdGag2ApJzgEBC4qxJdtQJtJDNtuYAjSCvfpMfKeMUslkOp3MoQTwxNLTup4uuyVuSfcqPoTeUfbIicN2JqoDsEW1p9zh6CowIeDXEXIfaMNasHtr+fb1nWXG7fEmGXvT2e2ZlCq4ZqChmVwC46Ar+DYe2dndjAzHk6nEsGx7d+NTPNDvGvTBVXKGMo3ie3/K8n3jm0WT6PK7NTNbm1/Nya4QjvbBOXIZjOPoVK4vmq1mzdwSUKtzGq2VWYwpnTjug2vkAdADiFa12z45EZZ5AVRfwhOTnxPdVsQBit9MiJivkqJ0Vv0x5vig1FOU3jPtcEz7Z7mlil9LOC33TiOiUwEAL139rEvNDQontzpZ95z8VI2IC8BRar16rSI9LXCrarKnWIhogTwWRGHOo2jgoRnA4Ms0ymgA0CKvgeS4y5sC6DAZ5UB19PbJAaZ4ApKn/gjNnXj1xmR63ct1+lg9+UVbJXDknZ1y4FS2Ffgytcch62hN4f/T3lhzgFPV2E7+qx9xsqq+PsbsOwAAAABJRU5ErkJggg==" /></a>
<a href="https://blog.gzzz.pro"><img src="https://img.shields.io/badge/Blog-blog.gzzz.pro-pink?logo=Blogger&logoColor=rgb(135, 206, 250)" /></a>
<a href="https://github.com/Gzzzxx"><img src="https://komarev.com/ghpvc/?username=Gzzzxx&abbreviated=true&color=yellow" ></a>
</p>

完成

完整README.md文件可参考我的GitHub地址:https://github.com/Gzzzxx/Gzzzxx

参考自「GitHub 个人主页的究极美化攻略

相关推荐
掘金安东尼1 天前
Node.js 如何在 2025 年挤压 I/O 性能
前端·javascript·github
老马啸西风1 天前
v0.29.1 敏感词性能优化之内部类+迭代器内部类
性能优化·开源·nlp·github·敏感词
杨杨杨大侠1 天前
第5章:实现Spring Boot集成
java·github·eventbus
杨杨杨大侠1 天前
第6章:高级特性与性能优化
java·github·eventbus
HelloGitHub1 天前
这款开源调研系统越来越“懂事”了
前端·开源·github
ruanCat1 天前
配置 github workflow 工作流文件,实现仓库自动更新 github page 站点
github
绝无仅有1 天前
面试总结之Nginx 经验常见问题汇总第二篇
后端·面试·github
绝无仅有1 天前
面试实战总结之Nginx配置经验第一篇
后端·面试·github
掘金安东尼1 天前
Chrome 17 岁了——我们的浏览器简史
前端·javascript·github
至善迎风2 天前
版本管理系统与平台(权威资料核对、深入解析、行业选型与国产平台补充)
git·gitee·gitlab·github·svm