在軟體開發領域,有效地展示您的工作以及您編寫的程式碼至關重要。作品集網站是開發人員展示其技能、專案和貢獻的絕佳方式。增強您的作品集的一種創新方法是整合 GitHub 統計資料,它可以提供有關您的編碼活動和貢獻的即時見解。
為了幫助其他開發人員實現這一目標,我從頭開始建立了一個新網站,重點介紹您的 GitHub 作品。該網站是使用 NextJS 和 Tailwind CSS 建立的,它從您的 GitHub 個人資料和工作中獲取所有資料。
本文將逐步引導您完成設定過程,並且還將為您提供 GitHub 連結。
這是即時預覽:即時預覽網址
步驟01:
使用GitHub 連結複製儲存庫並將目錄變更為 github-portfolio。
git clone https://github.com/said7388/github-portfolio.git
cd github-portfolio
步驟02:
現在使用npm
或yarn
安裝所有套件。
npm install
# or
yarn
安裝完所有套件後,現在根據您的情況更改data/user-data.js
上的所有資料。例如:
export const userData = {
githubUser: 'said7388',
devUsername: "said7388",
github: 'https://github.com/said7388',
facebook: 'https://www.facebook.com/abusaid.riyaz/',
linkedIn: 'https://www.linkedin.com/in/abu-said-bd/',
twitter: 'https://twitter.com/said7388',
stackOverflow: 'https://stackoverflow.com/users/16840768/abu-said',
leetcode: "https://leetcode.com/said3812/",
resume: "https://drive.google.com/file/d/1eyutpKFFhJ9X-qpQGKhUNnVRkB5Wer00/view?usp=sharing",
skills: ['React', 'NextJS', 'Redux', 'Express', 'NestJS', 'MySql', 'MongoDB', 'Postgres', 'Docker', 'AWS'],
timezone: '+6'
};
步驟03:
如果您想使用 Google Analytics,請從.env.example
檔案建立新的.env
檔案並提供值。 .env
文件如下:
NEXT_PUBLIC_GTM = ""
步驟04:
現在 GitHub 作品集網站已準備好運作。您可以使用npm
或yarn
執行它。
npm run dev
# or
yarn dev
如果您喜歡這個 GitHub 組合專案,您可以考慮在GitHub 儲存庫上給它一顆星。
您可以在 Linkedin 上與我聯絡: https://www.linkedin.com/in/abu-said-bd/
免責聲明:在這個儲存庫中,我使用了一些開源 API。所有積分均歸這些儲存庫的擁有者所有。
原文出處:https://dev.to/said7388/build-an-awesome-github-developer-portfolio-54ka