github readme tech stack
v2.1.1
最简单的入门方法是访问我们的网站,您可以在其中定制和预览卡。
https://github-readme-tech-c- stack.vercel.app
作为开发人员,重要的是向潜在的合作者和雇主展示您在不同技术方面的专业知识。借助GitHub-ReadMe-Tech-stack ,您可以轻松地创建GitHub存储库中使用的技术的可视化表示,并将其包含在您的个人资料readme中。这可以帮助您脱颖而出,并吸引其他正在寻找具有特定技能的开发人员的注意力。
这些图像是完全可自定义的,因此您可以选择要展示的技术,甚至可以调整颜色,图标和对齐方式以匹配您的个人品牌。
就个人而言,我一直想以干净,现代的方式炫耀自己的技能。我只能用徽章来做到这一点,但它们与Github-Readme-Streak-Stats和Github-Readme-Stats的风格不符。对于Github-Readme-Tech-stack ,这不再是问题,它自然与这些卡相匹配!
profile README中添加Markdown标签一样简单。svg图标。不需要字段。每个查询参数都有一个默认值,如下所示。
| 范围 | 例子 | 默认值 | 描述 |
|---|---|---|---|
| 标题 | title=My%20Title | 我的技术堆栈 | 卡的标题。 %20可以用作空间。 |
| 主题 | theme=github_dark | github | 卡的主题。您可以在这里的主题之间浏览。 |
| 对齐 | align=center | 左边 | 徽章的对齐。 ( left center , right ) |
| 滴定 | align=center | 左边 | 标题的对齐。 ( left center , right ) |
| 展示border | showBorder=false | 真的 | 是否在卡周围显示边界。 ( true , false ) |
| Hidetitle | hideTitle=true | 错误的 | 是否显示卡的标题。 ( true , false ) |
| hidebg | hideBg=true | 错误的 | 如果为true,则将背景设置为透明。 ( true , false ) |
| Borderradius | borderRadius=12.5 | 4.5 | 数量在0到50之间。 |
| fontfomily | fontFamily=consolas | Segoe UI | 标题的字体家族。如果不存在指定的家族,则使用默认为。 |
| 字体大小 | fontSize=20 | 18 | 标题的大小。接受15至30之间的数字。 |
| 量级 | fontWeight=normal | 半磅 | 标题的厚度。 ( thin , normal , semibold , bold ) |
| 宽度 | width=500 | 495 | 卡的宽度。接受有效的数字。 |
| 差距 | gap=15 | 10 | 徽章之间的差距。接受0到30之间的数字。 |
| LineHeight | lineHeight=10 | 7 | 线之间的差距。接受0到30之间的数字。 |
| LineCount | lineCount=2 | 1 | 您要添加到卡中的行数。 |
| 亚麻布} | line1=html5,html5,auto | - | 徽章的当前行,其中{n}是一个数字。 (1 <= n <= lineCount) |
| BG | bg=%2383324c | - | 背景的颜色。 |
| 边界 | border=%232da7c7 | - | 边界的颜色。 |
| 徽章 | badge=%2383324c | - | 徽章的颜色。 |
| titlecolor | titleColor=%232da7c7 | - | 标题的颜色。 |
这些卡具有您可以使用的几个内置主题。您可以通过单击此处找到所有内容。
您也可以自定义主题。使用演示网站更容易。
# Clone the project:
git clone https://github.com/0l1v3rr/github-readme-tech-stack.git
cd github-readme-tech-stack
# Install the dependencies:
npm i
npm run prepare
# Running the application:
npm run dev
# Running the storybook:
npm run storybook欢迎所有贡献。
您可以在此处找到一个贡献指南。
该项目根据麻省理工学院许可发布。