GitProfile 是一个强大的作品集构建器，即使您没有编程经验，也能在几分钟内创建一个令人惊叹的个性化作品集网站。只需提供您的 GitHub 用户名，GitProfile 就会自动生成一个作品集。最棒的是，您只需点击几下就可以轻松地将您的作品集部署到 GitHub Pages，使其在短时间内对全世界开放访问。
功能：
✓ 易于设置
✓ 33 种主题
✓ Google Analytics
✓ Hotjar
✓ SEO
✓ PWA
✓ 头像和简介
✓ 社交链接
✓ 技能部分
✓ 经验部分
✓ 认证部分
✓ 教育部分
✓ 项目部分
✓ 出版物部分
✓ 博客文章部分
要查看实际示例，点击这里。
<p align="center"> <img src="https://github.com/arifszn/gitprofile/assets/45073703/406e8368-415a-42ef-89c5-d43cc8bbeb19" alt="主题"> </p>🛠 安装与设置
使用 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个可供选择的主题,可以从下拉菜单中选择。
可以指定默认主题。
<p align="center"> <img src="https://github.com/arifszn/gitprofile/assets/45073703/91a2d9e6-67e5-47b4-9752-1881ac0f907f" alt="主题下拉菜单" width="50%"> </p>// 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 获取。
💖 支持
<p>您可以通过给这个项目加星来表示支持。 ★</p> <a href="https://github.com/arifszn/gitprofile/stargazers"> <img src="https://img.shields.io/github/stars/arifszn/gitprofile?style=social" alt="Github Star"> </a>💡 贡献
要贡献，请参阅 贡献指南。
📄 许可证
编辑推荐精选
Keevx
AI数字人视频创作平台
Keevx 一款开箱即用的AI数字人视频创作平台，广泛适用于电商广告、企业培训与社媒宣传，让全球企业与个人创作者无需拍摄剪辑，就能快速生成多语言、高质量的专业视频。
即梦AI
一站式AI创作平台
提供 AI 驱动的图片、视频生成及数字人等功能，助力创意创作
扣子-AI办公
AI办公助手，复杂任务高效处理
AI办公助手，复杂任务高效处理。办公效率低？扣子空间AI助手支持播客生成、PPT制作、网页开发及报告写作，覆盖科研、 商业、舆情等领域的专家Agent 7x24小时响应，生活工作无缝切换，提升50%效率！
TRAE编程
AI辅助编程，代码自动修复
Trae是一种自适应的集成开发环境（IDE），通过自动化和多元协作改变开发流程。利用Trae，团队能够更快速、精确地编写和部署代码，从而提高编程效率和项目交付速度。Trae具备上下文感知和代码自动完成功能，是提升开发效率的理想工具。
蛙蛙写作
AI小说写作助手，一站式润色、改写、扩写
蛙蛙写作—国内先进的AI写作平台，涵盖小说、学术、社交媒体等多场景。提供续写、改写、润色等功能，助力创作者高效优化写作流程。界面简洁,功能全面,适合各类写作者提升内容品质和工作效率。
问小白
全能AI智能助手，随时解答生活与工作的多样问题
问小白，由元石科技研发的AI智能助手，快速准确地解答各种生活和工作问题，包括但不限于搜索、规划和社交互动，帮助用户在日常生活中提高效率，轻松管理个人事务。
Transly
实时语音翻译/同声传译工具
Transly是一个多场景的AI大语言模型驱动的同声传译、专业翻译助手，它拥有超精准的音频识别翻译能力，几乎零延迟的使用体验和支持多国语言可以让你带它走遍全球，无论你是留学生、商务人士、韩剧美剧爱好者，还是出国游玩、多国会议、跨国追星等等，都可以满足你所有需要同传的场景需求，线上线下通用，扫除语言障碍，让全世界的语言交流不再有国界。
讯飞智文
一键生成PPT和Word，让学习生活更轻松
讯飞智文是一个利用 AI 技术的项目，能够帮助用户生成 PPT 以及各类文档。无论是商业领域的市场分析报告、年度目标制定，还是学生群体的职业生涯规划、实习避坑指南，亦或是活动策划、旅游攻略等内容，它都能提供支持，帮助用户精准表达，轻松呈现各种信息。
讯飞星火
深度推理能力全新升级，全面对标OpenAI o1
科大讯飞的星火大模型，支持语言理解、知识问答和文本创作等多功能，适用于多种文件和业务场景，提升办公和日常生活的效率。讯飞星火是一个提供丰富智能服务的平台，涵盖科技资讯、图像创作、写作辅助、编程解答、科研文献解读等功能，能为不同需求的用户提供便捷高效的帮助，助力用户轻松获取信息、解决问题，满足多样化使用场景。
Spark-TTS
一种基于大语言模型的高效单流解耦语音令牌文本到语音合成模型
Spark-TTS 是一个基于 PyTorch 的开源文本到语音合成项目，由多个知名机构联合参与。该项目提供了高效的 LLM（大语言模型）驱动的语音合成方案，支持语音克隆和语音创建功能，可通过命令行界面（CLI）和 Web UI 两种方式使用。用户可以根据需求调整语音的性别、音高、速度等参数，生成高质量的语音。该项目适用于多种场景，如有声读物制作、智能语音助手开发等。
推荐工具精选
AI云服务特惠
懂AI专属折扣关注微信公众号
最新AI工具、AI资讯
独家AI资源、AI项目落地
微信扫一扫关注公众号