gitprofile

<img src="https://yellow-cdn.veclightyear.com/0a4dffa0/4310a06a-9aad-4241-84cc-0a16e8da560c.png" width="35%"> <h4 align="center">为每个 GitHub 用户提供易用的自动投资组合生成器！</h4> <a href="https://codeclimate.com/github/arifszn/gitprofile/maintainability"><img src="https://api.codeclimate.com/v1/badges/c60f42d7d0b61bd33e98/maintainability" /></a> <a href="https://github.com/arifszn/gitprofile/actions/workflows/test-deploy.yml"><img src="https://yellow-cdn.veclightyear.com/0a4dffa0/1c459dcb-27aa-48ef-8d28-4c3fc979a920.svg" /></a> <a href="https://github.com/arifszn/gitprofile/issues"><img src="https://img.shields.io/github/issues/arifszn/gitprofile"/></a> <a href="https://github.com/arifszn/gitprofile/stargazers"><img src="https://img.shields.io/github/stars/arifszn/gitprofile"/></a> <a href="https://github.com/arifszn/gitprofile/network/members"><img src="https://img.shields.io/github/forks/arifszn/gitprofile"/></a> <a href="https://github.com/arifszn/gitprofile/commits/main"><img src="https://img.shields.io/github/last-commit/arifszn/gitprofile/main"/></a> <a href="https://github.com/arifszn/gitprofile/blob/main/CONTRIBUTING.md"><img src="https://yellow-cdn.veclightyear.com/0a4dffa0/cdddb18d-421f-4cb3-a92a-fdf37c43d73b.svg?style=flat"/></a> <a href="https://github.com/arifszn/gitprofile/blob/main/LICENSE"><img src="https://img.shields.io/github/license/arifszn/gitprofile"/></a> <a href="https://idx.google.com/import?url=https%3A%2F%2Fgithub.com%2Farifszn%2Fgitprofile"><picture> <source media="(prefers-color-scheme: dark)" srcset="https://cdn.idx.dev/btn/open_dark_20.svg"> <source media="(prefers-color-scheme: light)" srcset="https://cdn.idx.dev/btn/open_light_20.svg"> <img height="20" alt="在 IDX 中打开" src="https://yellow-cdn.veclightyear.com/0a4dffa0/bc6ab1b1-0136-42b6-a24d-29cbee229cce.svg"> </picture></a> <a href="https://arifszn.github.io/gitprofile">查看演示</a> · <a href="https://github.com/arifszn/gitprofile/issues">报告错误</a> · <a href="https://github.com/arifszn/gitprofile/discussions">请求功能</a> <a href="https://arifszn.github.io/gitprofile"> <img src="https://github.com/arifszn/gitprofile/assets/45073703/eb6c38a4-ac92-4006-869b-e4e24f6f5cf6" alt="预览" width="60%"/> </a> <a href="#arifszn"><img src="https://github.com/arifszn/gitprofile/assets/45073703/4d2ccd45-e566-4743-bf61-cadc03ece54c" width="50%" alt="阴影"/></a>

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。

PWA

头像和简介

你的头像和简介将自动从 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 获取。

💖 支持

您可以通过给这个项目加星来表示支持。 ★ <a href="https://github.com/arifszn/gitprofile/stargazers"> <img src="https://img.shields.io/github/stars/arifszn/gitprofile?style=social" alt="Github Star"> </a>