建立一个出色的 GitHub 开发人员组合。

2025-06-07

建立一个出色的 GitHub 开发人员组合。

在软件开发领域，有效地展示你的工作成果和你编写的代码至关重要。作品集网站是开发者展示技能、项目和贡献的绝佳途径。增强作品集的一个创新方法是集成 GitHub 统计数据，它可以实时洞察你的编程活动和贡献。

为了帮助其他开发者实现这一目标，我从零开始创建了一个新网站，用于展示你的 GitHub 作品。该网站使用 NextJS 和 Tailwind CSS 构建，并从你的 GitHub 个人资料和工作中获取所有数据。

本文将逐步指导您完成设置过程，并为您提供 GitHub 链接。

这是实时预览： 实时预览网址

图片描述

步骤 01：使用GitHub 链接
克隆存储库并将目录更改为 github-portfolio。



git clone https://github.com/said7388/github-portfolio.git
cd github-portfolio
Enter fullscreen mode Exit fullscreen mode

步骤 02：
现在使用npm或安装所有包yarn。



npm install
# or
yarn
Enter fullscreen mode Exit fullscreen mode

安装所有软件包后，请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'
};
Enter fullscreen mode Exit fullscreen mode

步骤 03：
如果您想使用 Google Analytics（分析），请.env从该文件创建一个新文件.env.example并提供值。该.env文件将如下所示：



NEXT_PUBLIC_GTM = ""
Enter fullscreen mode Exit fullscreen mode

步骤 04：
现在 GitHub 作品集网站已准备好运行。您可以使用npm或运行它yarn。



npm run dev
# or
yarn dev
Enter fullscreen mode Exit fullscreen mode

如果您喜欢这个 GitHub 作品集项目，您可以考虑在GitHub 存储库上给它一颗星。

您可以在 Linkedin 上与我联系：https://www.linkedin.com/in/abu-said-bd/

免责声明：在此代码库中，我使用了一些开源 API。所有版权归属于这些代码库的所有者。

文章来源：https://dev.to/said7388/build-an-awesome-github-developer-portfolio-54ka
Devto 翻译
PREV
前 20 个 React.JS 面试问题。
NEXT
WebSockets：概念概述