为每个 GitHub 用户提供易用的自动投资组合生成器!
GitProfile 是一个强大的作品集构建器,即使您没有编程经验,也能在几分钟内创建一个令人惊叹的个性化作品集网站。只需提供您的 GitHub 用户名,GitProfile 就会自动生成一个作品集。最棒的是,您只需点击几下就可以轻松地将您的作品集部署到 GitHub Pages,使其在短时间内对全世界开放访问。
功能:
✓ 易于设置
✓ 33 种主题
✓ Google Analytics
✓ Hotjar
✓ SEO
✓ PWA
✓ 头像和简介
✓ 社交链接
✓ 技能部分
✓ 经验部分
✓ 认证部分
✓ 教育部分
✓ 项目部分
✓ 出版物部分
✓ 博客文章部分
要查看实际示例,点击这里。
🛠 安装与设置
使用 GitProfile 有三种方式。任选其一。
复刻此仓库
以下说明将帮助您获取项目副本并使用 GitHub Pages 在线部署您的作品集!
-
复刻仓库: 点击这里复刻仓库,这样您就有了可以自定义的项目。"复刻"是指仓库的副本。
-
重命名仓库:
- 如果您想在
https://<USERNAME>.github.io
托管您的作品集,请在 GitHub 中将您复刻的仓库重命名为username.github.io
,其中username
是您的 GitHub 用户名(或组织名称)。 - 如果您想在
https://<USERNAME>.github.io/<REPO_NAME>
托管您的作品集(例如https://<USERNAME>.github.io/portfolio
),请在 GitHub 中将您复刻的仓库重命名为<REPO_NAME>
(例如portfolio
)。
- 如果您想在
-
启用工作流: 转到您仓库的 Actions 标签页并启用工作流。
-
基础值: 打开
gitprofile.config.ts
,更改base
的值。-
如果您要部署到
https://<USERNAME>.github.io
,将base
设置为'/'
。 -
如果您要部署到
https://<USERNAME>.github.io/<REPO_NAME>
(例如https://<USERNAME>.github.io/portfolio
),则将base
设置为'/<REPO_NAME>/'
(例如'/portfolio/'
)。
// gitprofile.config.ts { base: '/', // ... }
-
-
提交更改: 现在将您的更改提交到 main 分支。等待几分钟,让 CI/CD 管道将您的网站发布到 GitHub Pages。您可以在 Actions 标签页中查看进度。
您的作品集网站很快就会上线。每次您向 main 分支提交更改时,网站都会自动更新。如果您在查看网站时遇到任何问题,请再次检查 gitprofile.config.ts
文件中的 base
值。同时,检查 Settings ➜ Pages ➜ Build and deployment 中的 Source 是否设置为 GitHub Actions。
如果您希望添加自定义域名,不需要 CNAME 文件。只需将其添加到您仓库的 Settings ➜ Pages ➜ Custom domain。 由于这是一个 Vite 项目,您还可以将您的网站托管到 Netlify、Vercel、Heroku 或其他流行的服务上。请参考这份文档,获取详细的部署指南。
本地设置
-
克隆项目并切换目录。
git clone https://github.com/arifszn/gitprofile.git cd gitprofile
-
安装依赖。
npm install
-
运行开发服务器。
npm run dev
-
最后,在浏览器中访问
http://localhost:5173/gitprofile/
。
或者,您可以使用 Docker 和 Vail 设置和运行项目,Vail 是一个用于 JavaScript/TypeScript 应用本地开发的强大工具。
🎨 自定义
所有的魔法都发生在 gitprofile.config.ts
文件中。打开它并根据您的偏好进行修改。
如果您不想在作品集中显示某些部分,可以将其留空。
// gitprofile.config.ts
const CONFIG = {
github: {
username: 'arifszn', // 您的 GitHub 组织/用户名。(这是唯一必填的配置)
},
/**
* 如果您要部署到 https://<USERNAME>.github.io/,例如您的仓库位于 https://github.com/arifszn/arifszn.github.io,请将 base 设置为 '/'。
* 如果您要部署到 https://<USERNAME>.github.io/<REPO_NAME>/,
* 例如您的仓库位于 https://github.com/arifszn/portfolio,则将 base 设置为 '/portfolio/'。
*/
base: '/gitprofile/',
projects: {
github: {
display: true, // 是否显示 GitHub 项目?
header: 'Github 项目',
mode: 'automatic', // 模式可以是:'automatic' 或 'manual'
automatic: {
sortBy: 'stars', // 按 'stars' 或 'updated' 排序项目
limit: 8, // 显示多少个项目。
exclude: {
forks: false, // 如果设置为 true,则不会显示 fork 的项目。
projects: [], // 这些项目不会被显示。例如:['arifszn/my-project1', 'arifszn/my-project2']
},
},
manual: {
// 手动指定项目的属性
projects: ['arifszn/gitprofile', 'arifszn/pandora'], // 要显示的仓库名称列表。例如:['arifszn/my-project1', 'arifszn/my-project2']
},
},
external: {
header: '我的项目',
// 要隐藏 `外部项目` 部分,请保持为空。
projects: [
{
title: '项目名称',
description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.',
imageUrl:
'https://img.freepik.com/free-vector/illustration-gallery-icon_53876-27002.jpg',
link: 'https://example.com',
},
{
title: '项目名称',
description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.',
imageUrl:
'https://img.freepik.com/free-vector/illustration-gallery-icon_53876-27002.jpg',
link: 'https://example.com',
},
],
},
},
seo: {
title: 'Ariful Alam 的作品集',
description: '',
imageURL: '',
},
social: {
linkedin: 'ariful-alam',
twitter: 'arif_szn',
mastodon: 'arifszn@mastodon.social',
researchGate: '',
facebook: '',
instagram: '',
reddit: '',
threads: '',
youtube: '', // 例如:'pewdiepie'
udemy: '',
dribbble: '',
behance: '',
medium: 'arifszn',
dev: 'arifszn',
stackoverflow: '', // 例如:'1/jeff-atwood'
skype: '',
telegram: '',
website: 'https://www.arifszn.com',
phone: '',
email: 'arifulalamszn@gmail.com',
},
resume: {
fileUrl:
'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf', // 空的 fileUrl 将隐藏 `下载简历` 按钮。
},
skills: [
'PHP',
'Laravel',
'JavaScript',
'React.js',
'Node.js',
'Nest.js',
'MySQL',
'PostgreSQL',
'Git',
'Docker',
'PHPUnit',
'CSS',
'Antd',
'Tailwind',
],
experiences: [
{
company: '公司名称',
position: '职位',
from: '2021年9月',
to: '至今',
companyLink: 'https://example.com',
},
{
company: '公司名称',
position: '职位',
from: '2019年7月',
to: '2021年8月',
companyLink: 'https://example.com',
},
],
certifications: [
{
name: 'Lorem ipsum',
body: 'Lorem ipsum dolor sit amet',
year: '2022年3月',
link: 'https://example.com',
},
],
educations: [
{
institution: '机构名称',
degree: '学位',
from: '2015',
to: '2019',
},
{
institution: '机构名称',
degree: '学位',
from: '2012',
to: '2014',
},
],
publications: [
{
title: '出版物标题',
conferenceName: '',
journalName: '期刊名称',
authors: 'John Doe, Jane Smith',
link: 'https://example.com',
description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.',
},
{
title: '出版物标题',
conferenceName: '会议名称',
journalName: '',
authors: 'John Doe, Jane Smith',
link: 'https://example.com',
description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.',
},
],
// 显示来自您的 medium 或 dev 账号的文章。(可选)
blog: {
source: 'dev', // medium | dev
username: 'arifszn', // 要隐藏博客部分,请保持为空
limit: 3, // 显示多少篇文章。最多为 10。
},
googleAnalytics: {
id: '', // GA3 跟踪 id/GA4 标签 id UA-XXXXXXXXX-X | G-XXXXXXXXXX
},
// 跟踪访客互动和行为。https://www.hotjar.com
hotjar: {
id: '',
snippetVersion: 6,
},
themeConfig: {
defaultTheme: 'nord',
// 在导航栏中隐藏切换按钮
// 如果您只想支持单一颜色模式,这很有用
disableSwitch: false,
// 是否使用 prefers-color-scheme 媒体查询,
// 根据用户系统偏好,而不是硬编码的 defaultTheme
respectPrefersColorScheme: false,
// 在个人资料图片中显示环
displayAvatarRing: true,
},
}
// 可用主题。要移除任何主题,从这里删除即可。
主题: [
'浅色',
'深色',
'纸杯蛋糕',
'大黄蜂',
'翡翠',
'公司',
'合成波',
'复古',
'赛博朋克',
'情人节',
'万圣节',
'花园',
'森林',
'水色',
'lo-fi',
'粉彩',
'奇幻',
'线框',
'黑色',
'奢华',
'德古拉',
'CMYK',
'秋天',
'商务',
'酸性',
'柠檬水',
'夜晚',
'咖啡',
'冬季',
'暗淡',
'北欧',
'日落',
'南门二'
],
// 自定义主题,应用于"南门二"主题
自定义主题: {
主色: '#fc055b',
副色: '#219aaf',
强调色: '#e8d03a',
中性色: '#2A2730',
'基础-100': '#E3E3ED',
'--圆角盒子': '3rem',
'--圆角按钮': '3rem',
},
},
// 可选页脚。支持纯文本或HTML。
页脚: `使用 <a
class="text-primary" href="https://github.com/arifszn/gitprofile"
target="_blank"
rel="noreferrer"
>GitProfile</a> 和 ❤️ 制作`,
启用PWA: true,
};
导出默认 CONFIG;
主题
有33个可供选择的主题,可以从下拉菜单中选择。
可以指定默认主题。
// gitprofile.config.ts
const CONFIG = {
// ...
主题配置: {
默认主题: '浅色',
// ...
},
};
你可以通过修改这些值来创建自己的自定义主题。主题"南门二"将应用自定义样式。
// gitprofile.config.ts
const CONFIG = {
/**
* 定义应用程序的自定义主题颜色和样式。
* 主题包括以下属性:
* - `主色`: 整个应用程序中使用的主要颜色。
* - `副色`: 用于强调和高亮显示的辅助颜色。
* - `强调色`: 用于特殊元素的强调颜色。
* - `中性色`: 用于背景和文本的中性颜色。
* - `基础-100`: 基础背景色。
* - `--圆角盒子`: 盒子和容器的边框圆角。
* - `--圆角按钮`: 按钮的边框圆角。
*/
主题配置: {
自定义主题: {
主色: '#fc055b',
副色: '#219aaf',
强调色: '#e8d03a',
中性色: '#2A2730',
'基础-100': '#E3E3ED',
'--圆角盒子': '3rem',
'--圆角按钮': '3rem',
},
},
};
谷歌分析
GitProfile 同时支持 GA3 和 GA4。如果你不想使用谷歌分析,请将 id
保留为空。
// gitprofile.config.ts
const CONFIG = {
// ...
谷歌分析: {
id: 'G-XXXXXXXXX',
},
};
除了跟踪访客外,它还会跟踪项目和博客文章的点击事件,并将其发送到谷歌分析。
Hotjar
GitProfile 支持使用 hotjar 来跟踪访客互动和行为。如果你不想使用 Hotjar,请将 id
保留为空。
// gitprofile.config.ts
const CONFIG = {
// ...
hotjar: {
id: '',
代码版本: 6,
},
};
SEO
你可以在 seo
中自定义 SEO 的元标签。
// gitprofile.config.ts
const CONFIG = {
// ...
seo: {
标题: 'Ariful Alam 的作品集',
描述: '',
图片URL: '',
},
};
PWA
GitProfile 已启用 PWA。该网站可以作为渐进式网络应用程序安装。要关闭它,请将 启用PWA
设置为 false
。
头像和简介
你的头像和简介将自动从 GitHub 获取。
社交链接
你可以链接你正在使用的社交媒体服务,包括 LinkedIn、Twitter、Mastodon、ResearchGate、Facebook、Instagram、Reddit、Threads、YouTube、Udemy、Dribbble、Behance、Medium、dev、Stack Overflow、Skype、Telegram、个人网站、电话和电子邮件。
// gitprofile.config.ts
const CONFIG = {
// ...
社交: {
领英: 'ariful-alam',
推特: 'arif_szn',
长毛象: 'arifszn@mastodon.social',
研究门: '',
脸书: '',
instagram: '',
reddit: '',
threads: '',
youtube: '',
udemy: '',
dribbble: '',
behance: '',
medium: '',
dev: '',
stackoverflow: '',
skype: '',
telegram: '',
网站: '',
电话: '',
邮箱: '',
},
};
技能
要展示你的技能,请在此处提供。
// gitprofile.config.ts
const CONFIG = {
// ...
技能: ['JavaScript', 'React.js'],
};
空数组将隐藏技能部分。
工作经历
在 工作经历
中提供你的工作历史。
// gitprofile.config.ts
const CONFIG = {
// ...
工作经历: [
{
公司: '公司名称',
职位: '职位',
开始时间: '2021年9月',
结束时间: '至今',
公司链接: 'https://example.com',
},
{
公司: '公司名称',
职位: '职位',
开始时间: '2019年7月',
结束时间: '2021年8月',
公司链接: 'https://example.com',
},
],
};
空数组将隐藏工作经历部分。
教育经历
在 教育经历
中提供你的教育历史。
// gitprofile.config.ts
const CONFIG = {
// ...
教育经历: [
{
学校: '学校名称1',
学位: '理学学士',
开始年份: '2015',
结束年份: '2019',
},
{
学校: '学校名称2',
学位: '高中毕业证书(HSC)',
开始年份: '2012',
结束年份: '2014',
},
],
};
空数组将隐藏教育经历部分。
证书
在 证书
中提供你的行业证书。
// gitprofile.config.ts
const CONFIG = {
// ...
证书: [
{
名称: 'Lorem ipsum',
发证机构: 'Lorem ipsum dolor sit amet',
年份: '2022年3月',
链接: 'https://example.com',
},
],
};
空数组将隐藏证书部分。
项目
GitHub 项目
- 自动模式: 根据星标或最后更新日期无缝展示你的热门 GitHub 项目。
- 手动模式: 选择特定的仓库进行突出显示。
// gitprofile.config.ts
const CONFIG = {
// ...
projects: {
github: {
display: true, // 是否显示 GitHub 项目?
header: 'Github 项目',
mode: 'automatic', // 模式可以是: 'automatic' 或 'manual'
automatic: {
sortBy: 'stars', // 按 'stars' 或 'updated' 排序项目
limit: 8, // 显示多少个项目
exclude: {
forks: false, // 如果设置为 true,则不会显示 fork 的项目
projects: [], // 这些项目不会被显示。例如: ['arifszn/my-project1', 'arifszn/my-project2']
},
},
manual: {
// 手动指定项目的属性
projects: ['arifszn/gitprofile', 'arifszn/pandora'], // 要显示的仓库名称列表。例如: ['arifszn/my-project1', 'arifszn/my-project2']
},
},
},
};
外部项目
- 突出显示 GitHub 以外的项目: 展示托管在其他平台或个人网站上的项目。
- 内容控制: 为每个外部项目提供自定义标题、描述、图片和链接。
// gitprofile.config.ts
const CONFIG = {
// ...
projects: {
external: {
header: '我的项目',
// 要隐藏"外部项目"部分,请保持为空。
projects: [
{
title: '项目名称',
description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.',
imageUrl:
'https://img.freepik.com/free-vector/illustration-gallery-icon_53876-27002.jpg',
link: 'https://example.com',
},
{
title: '项目名称',
description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.',
imageUrl:
'https://img.freepik.com/free-vector/illustration-gallery-icon_53876-27002.jpg',
link: 'https://example.com',
},
],
},
},
};
出版物
在 publications
中提供您的学术出版物。
// gitprofile.config.ts
const CONFIG = {
// ...
publications: [
{
title: '出版物标题',
conferenceName: '会议名称',
journalName: '期刊名称',
authors: 'John Doe, Jane Smith',
link: 'https://example.com',
description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.',
},
],
};
空数组将隐藏出版物部分。
博客文章
如果您有 medium 或 dev 账号,只需提供您的 medium/dev 用户名,就可以在此处显示您最近的博客文章。您可以限制显示的文章数量(最多 10
篇)。
// gitprofile.config.ts
const CONFIG = {
// ...
blog: {
source: 'dev',
username: 'arifszn',
limit: 5,
},
};
文章通过 blog.js 获取。
💖 支持
您可以通过给这个项目加星来表示支持。 ★
💡 贡献
要贡献,请参阅 贡献指南。