github主页自定义设计
本帖最后由 sudezhao 于 2024-11-18 00:18 编辑我们都知道，github有个主页显示，正常情况下是显示我们置顶的仓库，然后是我们的提交情况。
虽然我很早就想做这些（实在是太酷啦），但是苦于一直不知道怎么做。
然后今天偶然刷到一个视频，就学习和模仿了几个大佬的主页制作，写了一篇文档，供大家学习。
下面是文档地址以及我的github主页，还有一些效果展示，大家可以直接抄作业:lol:lol。
我的git主页：https://github.com/buptsdz
文档地址：https://www.yuque.com/u39067637/kf2l8e/eiikckg6x9pya8bo
代码主要就是创建一个同名仓库，然后编辑readme（markdown）和workflow（照抄），很多效果都只用一行代码，十分简单（部分代码在最下面）
楼主是小菜鸡，代码水平和star都没有{:1_923:}{:1_923:}，大佬们不要嫌弃
https://static.52pojie.cn/static/image/hrline/5.gif
https://static.52pojie.cn/static/image/hrline/5.gif
效果展示：
紫色的是commit表的贪吃蛇效果
这是一些统计图表和奖杯
个人介绍
仓库metrics统计（小黄鸭是自己加的）
静态和动态的一些软件图，还有3d的贡献图效果
甚至还有修仙风格
markdown代码（新建md文档粘进去预览就行）
<div align="center">
<!-- dynamic typing effect 动态打字效果 -->
<div>
<a href="http://sue.sparkflare.cn/views/personal-introduction.html">
<img src="https://readme-typing-svg.demolab.com?font=Fira+Code&pause=1000&width=435&lines=I'm Sue, welcome here!¢er=true&size=27" />
</a>
</div>
<!-- knock code pictures 敲代码的图片 -->
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/buptsdz/buptsdz/assets/images/coding.gif" />
<source media="(prefers-color-scheme: light)" srcset="https://cdn.jsdelivr.net/gh/buptsdz/buptsdz/assets/images/developer.svg" height="225px" />
<img src="https://cdn.jsdelivr.net/gh/buptsdz/buptsdz/assets/images/coding.gif" />
</picture>
<!-- for beauty 留个空行好看点 -->
<div> </div>
<!-- profile logo 个人资料徽标 -->
<div>
<a href="http://sue.sparkflare.cn"><img src="https://img.shields.io/badge/Website-个人网站-rgb(170, 220, 245)" /></a>
<a href="https://www.xiaohongshu.com/user/profile/624e74200000000010005b95"><img src="https://img.shields.io/badge/Xiaoghongshu-小红书-rgb(255, 36, 66)" /></a>
<a href="https://www.yuque.com/u39067637"><img src="https://img.shields.io/badge/Yuque-语雀-rgb(49, 204, 121)" /></a>
<a href="https://space.bilibili.com/512181208?spm_id_from=333.1007.0.0"><img src="https://img.shields.io/badge/Bilibili-B站-ff69b4" /></a>
<a href="http://sue.sparkflare.cn/mulu/mulu1.html"><img src="https://img.shields.io/badge/Poems-我写的诗-rgb(225, 224, 199)" /></a>
<a href="http://www.sparkflare.cn"><img src="https://img.shields.io/badge/Sparkflare-星火-rgb(227, 52, 43)" /></a>
<!-- visitor -->
<img src="https://komarev.com/ghpvc/?username=buptsdz&label=Views&color=0e75b6&style=flat" alt="访问量统计" />
<!-- wakatime -->
<!-- <a href="https://wakatime.com/@buptsdz"><img src="https://wakatime.com/badge/user/42d0678c-368b-448b-9a77-5d21c5b55352.svg"/></a> -->
</div>
<!-- 活跃贪吃蛇 -->
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/buptsdz/buptsdz/output/github-contribution-grid-snake-dark.svg">
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/buptsdz/buptsdz/output/github-contribution-grid-snake.svg">
<img alt="github contribution grid snake animation" src="https://raw.githubusercontent.com/buptsdz/buptsdz/output/github-contribution-grid-snake.svg">
</picture>
<!-- 个人信息统计 -->
<img align="center" src="https://github-readme-stats.vercel.app/api?username=buptsdz&show_icons=true&include_all_commits=true&hide_border=true" alt="Sue's github stats" /><img align="center" src="https://github-readme-stats.vercel.app/api/top-langs/?username=buptsdz&layout=compact&theme=buefy&hide_border=true" />
<!-- 活跃折线图 -->
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://github-readme-activity-graph.vercel.app/graph?username=buptsdz&theme=xcode&bg_color=FF000000&hide_border=true" />
<source media="(prefers-color-scheme: light)" srcset="https://github-readme-activity-graph.vercel.app/graph?username=buptsdz&theme=xcode&bg_color=FF000000&color=000000&hide_border=true" />
<img src="https://github-readme-activity-graph.vercel.app/graph?username=buptsdz&theme=xcode&bg_color=FF000000&hide_border=true" />
</picture>
<div> </div>
<!-- GitHub 奖杯🏆 -->
<div><img src="https://github-profile-trophy.vercel.app/?username=buptsdz&theme=gruvbox&row=1&column=7&no-frame=true&no-bg=true" /><br/></div>
</div>
<div> </div>
# Hello 👋, here is Sue ~
<table>
<tr><td>
### 🤺 About Me
<!-- 个人介绍 -->
<img align="right" width="88" src="https://cdn.jsdelivr.net/gh/buptsdz/buptsdz/assets/images/computer.png"/>
我现在就读**北京邮电大学**通信工程英才班，目前大四，已保研至**复旦大学**直博，人工智能方向
- 🌱 以后的研究方向是频率方向的**机器学习**和集成学习。
- 📚 目前正在学习线性代数和矩阵的基础知识以及常见的模型和应用，包括自己做一些简单的**全栈开发**,希望能成为一名优秀的开发者。
- ✨ 我在我的语雀文档上分享我的学习 🔜[语雀·史迪仔](https://www.yuque.com/u39067637)
- 🤔 我是一个终身学习者，对编程、人工智能、数据科学和历史、经济学充满热情。
- 👥 2024年初和朋友创业，是关于数据方向的，现在还在做，有兴趣的朋友可以来看看 ▶️(http://www.sparkflare.cn)
</td></tr>
<tr><td>
### 🏢 Study Experience
<!-- 就读经历 -->
<img align="right" width="88" src="https://cdn.jsdelivr.net/gh/buptsdz/buptsdz/assets/images/bupt.png"/>
- [北京邮电大学](https://www.bupt.edu.cn/) 📌 2021-09-01 —— Now
- 学院：信息与通信工程学院
- 专业：通信工程
<div> </div>
<img align="right" width="88" src="https://cdn.jsdelivr.net/gh/buptsdz/buptsdz/assets/images/fdu.png" />
- [复旦大学](https://www.fdu.edu.cn/) 📌 2025-09-01 ——
- 学院：智能复杂体系基础理论与关键技术实验室
- 研究方向：机器学习，集成学习，大模型
<div> </div>
</td></tr>
</table>
<div align="center">
<!-- github-readme-streak-stats 连续提交代码天数记录 -->
<img align="left" width="150" src="https://cdn.jsdelivr.net/gh/buptsdz/buptsdz/assets/images/left.png" />
<picture>
<source aligh="center" media="(prefers-color-scheme: dark)" srcset="https://github-readme-streak-stats.herokuapp.com/?user=buptsdz&theme=dark&hide_border=true" />
<source aligh="center" media="(prefers-color-scheme: light)" srcset="https://github-readme-streak-stats.herokuapp.com/?user=buptsdz&theme=light&hide_border=true" />
<img aligh="center" src="https://github-readme-streak-stats.herokuapp.com/?user=buptsdz&theme=dark&hide_border=true" />
</picture>
<img align="right" width="150"src="https://cdn.jsdelivr.net/gh/buptsdz/buptsdz/assets/images/right.png" />
<div> </div>
<!-- metrics -->
<img width="150" src="https://cdn.jsdelivr.net/gh/buptsdz/buptsdz/assets/images/cxyduck.gif"/>
<img src="/github-metrics.svg">
<img width="150" src="https://cdn.jsdelivr.net/gh/buptsdz/buptsdz/assets/images/cxyduck.gif">
</div>
### 🧰 Tools:
<!--skill badge 技能徽章 -->
<div align="center">
!(https://img.shields.io/badge/Python-6DB33F?logo=python&logoColor=fff&style=flat) !(https://img.shields.io/badge/Mysql-47A248?logo=mysql&logoColor=fff&style=flat) !(https://img.shields.io/badge/Django-092E20?logo=django&logoColor=fff&style=flat) !(https://img.shields.io/badge/Vue.js-4FC08D?logo=vuedotjs&logoColor=fff&style=flat)!(https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=000&style=flat) !(https://img.shields.io/badge/HTML5-E34F26?logo=html5&logoColor=fff&style=flat) !(https://img.shields.io/badge/CSS3-1572B6?logo=css3&logoColor=fff&style=flat) !(https://img.shields.io/badge/C%2B%2B-00599C?logo=cplusplus&logoColor=fff&style=flat)
!(https://img.shields.io/badge/Node.js-393?logo=nodedotjs&logoColor=fff&style=flat) !(https://img.shields.io/badge/Vite-646CFF?logo=vite&logoColor=fff&style=flat) !(https://img.shields.io/badge/-Git-FCC624?style=flat-square&logo=git) !(https://img.shields.io/badge/-GitHub-pink?style=flat-square&logo=github) !(https://img.shields.io/badge/Linux-FCC624?style=style=flat-square&logo=linux&logoColor=black) !(https://img.shields.io/badge/Chrome-4285F4?style=flat-square&logo=GoogleChrome&logoColor=white) !(https://img.shields.io/badge/Lenovo-E2231A?logo=lenovo&logoColor=fff&style=flat)
</div>
<div align="center">
<!-- svg动图 -->
<img src="https://techstack-generator.vercel.app/js-icon.svg" alt="icon" width="65" style="width: 65px; height: 65px; margin-right:35px; margin-bottom: 0px;" />
<img src="https://techstack-generator.vercel.app/docker-icon.svg" alt="icon" width="65" style="width: 65px; height: 65px; margin-right: 35px; margin-bottom: 0px;" />
<img src="https://techstack-generator.vercel.app/mysql-icon.svg" alt="icon" width="65" style="width: 65px; height: 65px; margin-right: 35px; margin-bottom: 0px;" />
<img src="https://techstack-generator.vercel.app/nginx-icon.svg" alt="icon" width="65" style="width: 65px; height: 65px; margin-right: 35px; margin-bottom: 0px;" />
<img src="https://techstack-generator.vercel.app/django-icon.svg" alt="icon" width="65" style="width: 65px; height: 65px; margin-right: 35px; margin-bottom: 0px;" />
<img src="https://techstack-generator.vercel.app/webpack-icon.svg" alt="icon" width="65" style="width: 65px; height: 65px; margin-right: 35px; margin-bottom: 0px;" />
<img src="https://techstack-generator.vercel.app/eslint-icon.svg" alt="icon" width="65" style="width: 65px; height: 65px; margin-right: 35px; margin-bottom: 0px;" />
<img src="https://techstack-generator.vercel.app/java-icon.svg" alt="icon" width="65" style="width: 65px; height: 65px; margin-right: 0px; margin-bottom: 0px;" />
<!-- svg静态图 -->
<img src="https://skillicons.dev/icons?i=git,postman,anaconda,pycharm,webstorm,linux,ubuntu,gmail,unity,mongodb,c,cpp"/>
</div>
<!-- Gif -->
<div align="center">
<img alt="VSCode" src="https://i.giphy.com/media/IdyAQJVN2kVPNUrojM/200.webp" width="100" title="vscode">
<img alt="github" src="https://i.giphy.com/media/KzJkzjggfGN5Py6nkT/200.webp" width="100" title="github">
<img height="100" width="100" src="https://cdn.jsdelivr.net/gh/sun0225SUN/sun0225SUN/assets/images/python.webp">
<img alt="node" src="https://media.giphy.com/media/kdFc8fubgS31b8DsVu/giphy.gif" width="85" title="node">
<img height="95" width="95" src="https://cdn.jsdelivr.net/gh/sun0225SUN/sun0225SUN/assets/images/vue.webp">
<img alt="javascript" src="https://media3.giphy.com/media/ln7z2eWriiQAllfVcn/200w.webp" width="100" title="javascript">
<img alt-"html5" src="https://media.giphy.com/media/XAxylRMCdpbEWUAvr8/giphy.gif" width="100" title="html">
<img alt="css" src="https://media.giphy.com/media/fsEaZldNC8A1PJ3mwp/giphy.gif" width="100" title="css">
</div>
<!-- profile-3d-contrib 3D 贡献图-->
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/gh/buptsdz/buptsdz/profile-3d-contrib/profile-night-rainbow.svg" />
<source media="(prefers-color-scheme: light)" srcset="https://cdn.jsdelivr.net/gh/buptsdz/buptsdz/profile-3d-contrib/profile-gitblock.svg" />
<img src="https://cdn.jsdelivr.net/gh/buptsdz/buptsdz/profile-3d-contrib/profile-night-rainbow.svg" />
</picture>
<div align="center">
<img src="https://cdn.jsdelivr.net/gh/buptsdz/buptsdz/assets/images/icon.png" />
</div>
抓到北邮学弟一枚 复旦直博啊……呵呵居然能在这里刷到某种意义上的校友，有意思有意思，lz勤奋啊。学到了！ 学习中，但是表示，看花了眼哇。。。 wyesheng 发表于 2024-11-18 02:27
学习中，但是表示，看花了眼哇。。。
看文档，一个一个来 确实值得学习 看着确实不错，优秀 这是换皮肤？ 很炫酷，很有个性，用起来 哇哦，还可以这样，太好了 值得学习，努力让自己的GitHub页面变得更好看