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歡迎所有貢獻。
您可以在此處找到一個貢獻指南。
該項目根據麻省理工學院許可發布。