始める最も簡単な方法は、私たちのウェブサイトにアクセスすることです。ここでは、カードをライブでカスタマイズしてプレビューできます。
https://github-readme-tech-stack.vercel.app
開発者として、さまざまなテクノロジーの専門知識を潜在的な協力者や雇用主に紹介することが重要です。 Github-readme-Techスタックを使用すると、GitHubリポジトリで使用されているテクノロジーの視覚的表現を簡単に作成し、プロファイルREADMEに含めることができます。これは、特定のスキルセットを持つ開発者を探している他の人の注意を引き付け、目立つことができます。
画像は完全にカスタマイズ可能であるため、紹介するテクノロジーを選択し、色、アイコン、アライメントを調整して、個人ブランドに合わせて調整できます。
個人的には、私は常に清潔でモダンな方法で自分のスキルを披露したいと思っていました。バッジだけでそれを行うことができましたが、Github-readme-Streak-StatsとGithub-readme-statsのスタイルとは一致しませんでした。 Github-readme-Techスタックでは、それはもはや問題ではなく、自然にそれらのカードと一致します!
profile READMEにマークダウンタグを追加するのと同じくらい簡単です。svgアイコンをアップロードして使用することもできます。フィールドはどれも必要ありません。各クエリパラメーターにはデフォルト値があり、これは以下にリストされています。
| パラメーター | 例 | デフォルト値 | 説明 |
|---|---|---|---|
| タイトル | title=My%20Title | 私の技術スタック | カードのタイトル。 %20空間として使用できます。 |
| テーマ | theme=github_dark | github | カードのテーマ。ここでテーマを閲覧できます。 |
| 整列します | align=center | 左 | バッジのアライメント。 ( left 、 center 、 right ) |
| titlealign | align=center | 左 | タイトルのアラインメント。 ( left 、 center 、 right ) |
| ショーボーダー | showBorder=false | 真実 | カードの周りに境界線を表示するかどうか。 ( true 、 false ) |
| Hidetitle | hideTitle=true | 間違い | カードのタイトルを表示するかどうか。 ( true 、 false ) |
| hidebg | hideBg=true | 間違い | 本当なら、背景を透明に設定します。 ( true 、 false ) |
| borderradius | borderRadius=12.5 | 4.5 | 0〜50の数。 |
| フォントファミリー | fontFamily=consolas | Segoe UI | タイトルのフォントファミリー。指定されたファミリが存在しない場合、デフォルトが使用されます。 |
| fontsize | fontSize=20 | 18 | タイトルのサイズ。 15〜30の数を受け入れます。 |
| フォント級 | fontWeight=normal | セミボルド | タイトルの厚さ。 ( thin 、 normal 、 semibold 、 bold ) |
| 幅 | width=500 | 495 | カードの幅。有効な番号を受け入れます。 |
| ギャップ | gap=15 | 10 | バッジ間のギャップ。 0〜30の数を受け入れます。 |
| ラインハイト | 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 | - | タイトルの色。 |
これらのカードには、使用できるいくつかの組み込みテーマが付属しています。ここをクリックして、すべてを見つけることができます。
テーマをカスタマイズすることもできます。デモWebサイトで簡単に実行できます。
# 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すべての貢献は大歓迎です。
ここで貢献ガイドラインを見つけることができます。
このプロジェクトは、MITライセンスの下でリリースされます。