github readme tech stack
v2.1.1
วิธีที่ง่ายที่สุดในการเริ่มต้นคือการเยี่ยมชมเว็บไซต์ของเราซึ่งคุณสามารถปรับแต่งและดูตัวอย่างการ์ดของคุณสด
https://github-redme-tech-stack.vercel.app
ในฐานะนักพัฒนาสิ่งสำคัญคือการแสดงความเชี่ยวชาญของคุณในเทคโนโลยีที่แตกต่างกันไปยังผู้ทำงานร่วมกันและนายจ้างที่มีศักยภาพ ด้วย GitHub-ReadMe-Tech-Stack คุณสามารถสร้างการแสดงภาพของเทคโนโลยีที่ใช้ในที่เก็บ GitHub ของคุณได้อย่างง่ายดายและรวมไว้ใน โปรไฟล์ ของคุณ สิ่งนี้สามารถช่วยให้คุณโดดเด่นและดึงดูดความสนใจของผู้อื่นที่กำลังมองหานักพัฒนาที่มีชุดทักษะเฉพาะ
รูปภาพสามารถปรับแต่งได้อย่างสมบูรณ์ดังนั้นคุณสามารถเลือกเทคโนโลยีที่คุณต้องการแสดงและปรับสีไอคอนและการจัดตำแหน่งเพื่อให้ตรงกับแบรนด์ส่วนตัวของคุณ
โดยส่วนตัวแล้วฉันอยากจะแสดงทักษะของฉันในแบบที่สะอาดและทันสมัยอยู่เสมอ ฉันสามารถทำได้ด้วยเพียงแค่ป้าย แต่พวกเขาไม่ตรงกับสไตล์ของ GitHub-Readme-Streak-Stats และ GitHub-Readme-Stats ด้วย GitHub-Readme-Tech-Stack นั่นไม่ใช่ปัญหาอีกต่อไปมันตรงกับการ์ดเหล่านั้น!
profile README ของคุณsvg ของคุณ เอง ได้หากไม่มีอยู่จริงไม่จำเป็นต้องมีฟิลด์ใด พารามิเตอร์แบบสอบถามแต่ละตัวมีค่าเริ่มต้นซึ่งแสดงอยู่ด้านล่าง
| พารามิเตอร์ | ตัวอย่าง | ค่าเริ่มต้น | คำอธิบาย |
|---|---|---|---|
| ชื่อ | title=My%20Title | สแต็คเทคโนโลยีของฉัน | ชื่อของการ์ด %20 สามารถใช้เป็นพื้นที่ได้ |
| ธีม | theme=github_dark | คนอื่น ๆ | ธีมของการ์ด คุณสามารถเรียกดูระหว่างธีมที่นี่ |
| จัดแนว | align=center | ซ้าย | การจัดตำแหน่งของป้าย ( left center right ) |
| titlealign | align=center | ซ้าย | การจัดตำแหน่งของชื่อ ( left center right ) |
| ผู้จัดแสดง | showBorder=false | จริง | แสดงเส้นขอบรอบการ์ดหรือไม่ ( true false ) |
| Hidetitle | hideTitle=true | เท็จ | แสดงชื่อของการ์ดหรือไม่ ( true false ) |
| ที่ซ่อนตัว | hideBg=true | เท็จ | ถ้าเป็นจริงให้ตั้งค่าพื้นหลังเป็นโปร่งใส ( true false ) |
| ชายแดน | borderRadius=12.5 | 4.5 | จำนวนระหว่าง 0 ถึง 50 |
| fontfamily | 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 | จำนวนบรรทัดที่คุณต้องการเพิ่มลงในการ์ดของคุณ |
| บรรทัด {n} | line1=html5,html5,auto | - | บรรทัดปัจจุบันของป้ายโดยที่ {n} เป็นตัวเลข (1 <= n <= lineCount) |
| BG | bg=%2383324c | - | สีของพื้นหลัง |
| ชายแดน | border=%232da7c7 | - | สีของเส้นขอบ |
| ตราสัญลักษณ์ | badge=%2383324c | - | สีของป้าย |
| เสื้อคลุมสี | 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 ยินดีต้อนรับการมีส่วนร่วมทั้งหมด
คุณสามารถค้นหาแนวทางที่มีส่วนร่วมได้ที่นี่
โครงการนี้เปิดตัวภายใต้ใบอนุญาต MIT
