github主页自定义设计

sudezhao · 发表于 2024-11-17 23:52

本帖最后由 sudezhao 于 2024-11-18 00:18 编辑

我们都知道，github有个主页显示，正常情况下是显示我们置顶的仓库，然后是我们的提交情况。
虽然我很早就想做这些（实在是太酷啦），但是苦于一直不知道怎么做。
然后今天偶然刷到一个视频，就学习和模仿了几个大佬的主页制作，写了一篇文档，供大家学习。
下面是文档地址以及我的github主页，还有一些效果展示，大家可以直接抄作业

。
我的git主页：https://github.com/buptsdz
文档地址：https://www.yuque.com/u39067637/kf2l8e/eiikckg6x9pya8bo
代码主要就是创建一个同名仓库，然后编辑readme（markdown）和workflow（照抄），很多效果都只用一行代码，十分简单（部分代码在最下面）

楼主是小菜鸡，代码水平和star都没有

，大佬们不要嫌弃

效果展示：
紫色的是commit表的贪吃蛇效果

这是一些统计图表和奖杯

个人介绍

仓库metrics统计（小黄鸭是自己加的）

静态和动态的一些软件图，还有3d的贡献图效果

甚至还有修仙风格

markdown代码（新建md文档粘进去预览就行）

[HTML] 纯文本查看 复制代码

<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!&#162;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>&#8195;
    <a href="https://www.xiaohongshu.com/user/profile/624e74200000000010005b95"><img src="https://img.shields.io/badge/Xiaoghongshu-小红书-rgb(255, 36, 66)" /></a>&#8195;
    <a href="https://www.yuque.com/u39067637"><img src="https://img.shields.io/badge/Yuque-语雀-rgb(49, 204, 121)" /></a>&#8195;
    <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>&#8195;
    <a href="http://sue.sparkflare.cn/mulu/mulu1.html"><img src="https://img.shields.io/badge/Poems-我写的诗-rgb(225, 224, 199)" /></a>&#8195;
    <a href="http://www.sparkflare.cn"><img src="https://img.shields.io/badge/Sparkflare-星火-rgb(227, 52, 43)" /></a>&#8195;
    <!-- visitor -->
    <img src="https://komarev.com/ghpvc/?username=buptsdz&label=Views&color=0e75b6&style=flat" alt="访问量统计" />&#8195;
    <!-- 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 奖杯&#127942; -->
  <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 &#128075;, here is Sue ~
<table>
<tr><td>

  ### &#129338; About Me
  <!-- 个人介绍 -->
  <img align="right" width="88" src="https://cdn.jsdelivr.net/gh/buptsdz/buptsdz/assets/images/computer.png"/>

  我现在就读**北京邮电大学**通信工程英才班，目前大四，已保研至**复旦大学**直博，人工智能方向

  - &#127793; 以后的研究方向是频率方向的**机器学习**和集成学习。

  - &#128218; 目前正在学习线性代数和矩阵的基础知识以及常见的模型和应用，包括自己做一些简单的**全栈开发**,希望能成为一名优秀的开发者。

  - &#10024; 我在我的语雀文档上分享我的学习 &#128284;[语雀·史迪仔](https://www.yuque.com/u39067637)

  - &#129300; 我是一个终身学习者，对编程、人工智能、数据科学和历史、经济学充满热情。

  - &#128101; 2024年初和朋友创业，是关于数据方向的，现在还在做，有兴趣的朋友可以来看看 &#9654;&#65039;[Sparkflare](http://www.sparkflare.cn)
</td></tr>

<tr><td>

### &#127970; Study Experience
<!-- 就读经历 -->
<img align="right" width="88" src="https://cdn.jsdelivr.net/gh/buptsdz/buptsdz/assets/images/bupt.png"/>

- [北京邮电大学](https://www.bupt.edu.cn/) &#8195; &#128204; 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/) &#8195; &#128204; 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>

### &#129520; Tools:
<!--  skill badge 技能徽章 -->
<div align="center">

![Python](https://img.shields.io/badge/Python-6DB33F?logo=python&logoColor=fff&style=flat) ![Mysql](https://img.shields.io/badge/Mysql-47A248?logo=mysql&logoColor=fff&style=flat) ![Django Badge](https://img.shields.io/badge/Django-092E20?logo=django&logoColor=fff&style=flat) ![Vue.js Badge](https://img.shields.io/badge/Vue.js-4FC08D?logo=vuedotjs&logoColor=fff&style=flat)  ![JavaScript Badge](https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=000&style=flat) ![HTML5 Badge](https://img.shields.io/badge/HTML5-E34F26?logo=html5&logoColor=fff&style=flat) ![CSS3 Badge](https://img.shields.io/badge/CSS3-1572B6?logo=css3&logoColor=fff&style=flat) ![C++ Badge](https://img.shields.io/badge/C%2B%2B-00599C?logo=cplusplus&logoColor=fff&style=flat)

![Node.js Badge](https://img.shields.io/badge/Node.js-393?logo=nodedotjs&logoColor=fff&style=flat) ![Vite Badge](https://img.shields.io/badge/Vite-646CFF?logo=vite&logoColor=fff&style=flat) ![Git](https://img.shields.io/badge/-Git-FCC624?style=flat-square&logo=git) ![GitHub](https://img.shields.io/badge/-GitHub-pink?style=flat-square&logo=github) ![Linux](https://img.shields.io/badge/Linux-FCC624?style=style=flat-square&logo=linux&logoColor=black) ![Google Chrome](https://img.shields.io/badge/Chrome-4285F4?style=flat-square&logo=GoogleChrome&logoColor=white) ![Lenovo Badge](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>

sudezhao · 发表于 2024-11-19 15:05

LSDog 发表于 2024-11-19 14:35
我去感觉这么花里胡哨的加载会很慢啊。。。

cdn异步加载

Ivocin · 发表于 2024-11-20 17:14

抓到北邮学弟一枚

Mayrain5 · 发表于 2024-11-18 08:31

复旦直博啊……呵呵居然能在这里刷到某种意义上的校友，有意思有意思，lz勤奋啊。学到了！

wyesheng · 发表于 2024-11-18 02:27

学习中，但是表示，看花了眼哇。。。

sudezhao · 发表于 2024-11-18 03:15

wyesheng 发表于 2024-11-18 02:27
学习中，但是表示，看花了眼哇。。。

看文档，一个一个来

kenkenss · 发表于 2024-11-18 08:03

确实值得学习

ShayLuo · 发表于 2024-11-18 08:05

看着确实不错，优秀

xiabo · 发表于 2024-11-18 08:10

这是换皮肤？

d199212 · 发表于 2024-11-18 08:23

很炫酷，很有个性，用起来

Oo0520 · 发表于 2024-11-18 08:43

哇哦，还可以这样，太好了

earnm · 发表于 2024-11-18 08:45

值得学习，努力让自己的GitHub页面变得更好看

帐号		自动登录	找回密码
密码			注册[Register]

[其他原创] github主页自定义设计

免费评分

本帖被以下淘专辑推荐: