当前位置: 首页 > article >正文

GitHub个人主页美化

效果展示

展示为静态效果,动态效果请查看我的GitHub页面
在这里插入图片描述

创建GitHub仓库

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

顶部和底部动图

在这里插入图片描述

开源项目

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

页面顶部

<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>

页面底部

<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

代码

<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=后面改为你自己的用户名

<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=后面改为你自己的用户名

<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

代码

<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

代码

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

<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 个人主页的究极美化攻略」


http://www.kler.cn/a/374111.html

相关文章:

  • PostgreSQL 同表结构对比
  • 大模型面试题63题(1-11)
  • Java中的多态性是什么?
  • 北京迅为iTOP-LS2K0500开发板快速使用编译环境虚拟机Ubuntu基础操作及设置
  • 软件压力测试有多重要?北京软件测试公司有哪些?
  • 批量剪辑视频软件源码搭建全解析,支持OEM
  • 【Paper Note】利用Boundary-aware Attention边界感知注意力机制增强部分伪造音频定位
  • Java | Leetcode Java题解之第523题连续的子数组和
  • linux之netlink 内核源码分析
  • 【K8S系列】Kubernetes LoadBalancer 类型的 Service 未分配 IP 地址排查步骤及命令执行结果分析
  • 从壹开始解读Yolov11【源码研读系列】——Data.Augment.py:数据增强模块第四部分——Format标签格式标准化操作
  • C++刷怪笼(9)继承
  • vscode摸鱼学习插件开发
  • Rust 力扣 - 2379. 得到 K 个黑块的最少涂色次数
  • Kubernetes——part8-2 k8s集群存储解决方案 GlusterFS
  • CST软件如何理解Axial Ratio轴比
  • 【论文速读】Optimization-based Prompt Injection Attack to LLM-as-a-Judge
  • 【AI工作流】FastGPT - 深入解析FastGPT工作流编排:从基础到高级应用的全面指南
  • ESP8266 连接 MQTT 服务器EMQX 连接MQTTX
  • 【分布式技术】分布式序列算法Snowflake深入解读
  • (蓝桥杯C/C++)——STL(下)
  • Vue-cli之库模式以及模块化的魅力 - - 【UMD】
  • 【英特尔IA-32架构软件开发者开发手册第3卷:系统编程指南】2001年版翻译,2-9
  • Django后台接口开发
  • 讲一讲 kafka 的 ack 的三种机制?
  • 【全新上线】波克2021天恒系统源码 - 70款娱乐游戏带视频教程支持