在軟體開發領域,有效地展示您的工作以及您編寫的程式碼至關重要。作品集網站是開發人員展示其技能、專案和貢獻的絕佳方式。增強您的作品集的一種創新方法是整合 GitHub 統計資料,它可以提供有關您的編碼活動和貢獻的即時見解。

為了幫助其他開發人員實現這一目標,我從頭開始建立了一個新網站,重點介紹您的 GitHub 作品。該網站是使用 NextJS 和 Tailwind CSS 建立的,它從您的 GitHub 個人資料和工作中獲取所有資料。

本文將逐步引導您完成設定過程,並且還將為您提供 GitHub 連結。

這是即時預覽:即時預覽網址

圖片描述

步驟01:

使用GitHub 連結複製儲存庫並將目錄變更為 github-portfolio。

git clone https://github.com/said7388/github-portfolio.git
cd github-portfolio

步驟02:

現在使用npmyarn安裝所有套件。

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 作品集網站已準備好運作。您可以使用npmyarn執行它。

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


共有 0 則留言