{"id":19584908,"url":"https://github.com/krypton-byte/krypton-byte.github.io","last_synced_at":"2025-08-03T10:13:18.666Z","repository":{"id":41386640,"uuid":"509372666","full_name":"krypton-byte/krypton-byte.github.io","owner":"krypton-byte","description":null,"archived":false,"fork":false,"pushed_at":"2025-06-09T08:22:56.000Z","size":1690,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-30T07:27:57.915Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://krypton-byte.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/krypton-byte.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-07-01T08:09:38.000Z","updated_at":"2025-01-18T09:09:39.000Z","dependencies_parsed_at":"2024-01-20T08:22:16.937Z","dependency_job_id":"560a3be7-4eb8-4dfc-8281-b6780050b914","html_url":"https://github.com/krypton-byte/krypton-byte.github.io","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/krypton-byte/krypton-byte.github.io","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krypton-byte%2Fkrypton-byte.github.io","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krypton-byte%2Fkrypton-byte.github.io/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krypton-byte%2Fkrypton-byte.github.io/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krypton-byte%2Fkrypton-byte.github.io/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/krypton-byte","download_url":"https://codeload.github.com/krypton-byte/krypton-byte.github.io/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krypton-byte%2Fkrypton-byte.github.io/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268527248,"owners_count":24264612,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-11T07:51:33.980Z","updated_at":"2025-08-03T10:13:18.615Z","avatar_url":"https://github.com/krypton-byte.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/arifszn"],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eGitProfile\u003c/h1\u003e\n\u003cp align=\"center\"\u003eEasy to use automatic portfolio builder for every GitHub user!\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/arifszn/gitprofile/blob/main/CONTRIBUTING.md\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/arifszn/gitprofile/blob/main/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/license/arifszn/gitprofile\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://twitter.com/intent/tweet?text=Check%20out%20the%20portfolio%20builder.%20Create%20an%20automatic%20portfolio%20based%20on%20GitHub%20profile.\u0026url=https://github.com/arifszn/gitprofile\u0026hashtags=javascript,opensource,js,webdev,developers\"\u003e\n    \u003cimg src=\"https://img.shields.io/twitter/url?style=social\u0026url=https%3A%2F%2Fgithub.com%2Farifszn%2Fgitprofile\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://arifszn.github.io/gitprofile\"\u003e\n      \u003cimg src=\"https://arifszn.github.io/assets/img/hosted/gitprofile/preview.gif\" alt=\"Preview\"/\u003e\n  \u003c/a\u003e\n  \u003cbr/\u003e\n  \u003ca href=\"#arifszn\"\u003e\u003cimg src=\"https://arifszn.github.io/assets/img/drop-shadow.png\" width=\"80%\" alt=\"Shadow\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nWhat if you could create your portfolio in 5 minutes just by providing your GitHub username and even host it without any cost? Do you want to display your skills, job history, education, or blog posts on your portfolio? Introducing **GitProfile**.\n\n**GitProfile** is an easy to use portfolio builder where you can create a portfolio page automatically by just providing your GitHub username. It is built using React.js on top of Vite.js. But it's not necessary to have knowledge on these to get you started. You can make your own copy with zero coding experience.\n\n**Features:**\n\n✓ [Easy to Setup](#-installation--setup)  \n✓ [30 Themes](#themes)  \n✓ [Google Analytics](#google-analytics)  \n✓ [Hotjar](#hotjar)  \n✓ [SEO](#seo)  \n✓ [Avatar and Bio](#avatar-and-bio)  \n✓ [Social Links](#social-links)  \n✓ [Skills](#skills)  \n✓ [Experience](#experience)  \n✓ [Education](#education)  \n✓ [Projects](#projects)  \n✓ [Blog Posts](#blog-posts)\n\nTo view a live example, **[click here](https://arifszn.github.io/gitprofile)**.\n\nOr try it **[online](https://stackblitz.com/edit/gitprofile)**.\n\n## 🛠 Installation \u0026 Setup\n\nThere are two ways to use **GitProfile**. Use either one.\n\n\u003cdetails\u003e\n\u003csummary\u003eForking this repo (Click to expand)\u003c/summary\u003e\n\n\u003cbr/\u003e\n\nThese instructions will get you a copy of the project and deploy your portfolio online!\n\n- **Fork repo:** Click [here](https://github.com/arifszn/gitprofile/fork) to fork the repo so you have your own project to customize. A \"fork\" is a copy of a repository.\n- **Rename repo:** Rename your forked repository to `username.github.io` in GitHub, where `username` is your GitHub username (or organization name).\n- **Enable workflows:** Go to your repo's **Actions** page and enable workflows.\n\n  ![Workflows](https://arifszn.github.io/assets/img/hosted/gitprofile/workflows.png)\n\n- **Base Value:** Open `vite.config.js`, and change `base`'s value.\n\n  - If you are deploying to `https://\u003cUSERNAME\u003e.github.io/`, set `base` to `'/'`.\n\n  - If you are deploying to `https://\u003cUSERNAME\u003e.github.io/\u003cREPO\u003e/`, for example your repository is at `https://github.com/\u003cUSERNAME\u003e/\u003cREPO\u003e`, then set `base` to `'/\u003cREPO\u003e/'`.\n\n  ```js\n  // vite.config.js\n  {\n    base: '/',\n    // ...\n  }\n  ```\n\n- **First Commit:** Now commit to your **main** branch with your changes. The CI/CD pipeline will publish your page at the `gh-pages` branch automatically.\n- **Change deploy branch:** Go to your repo's **Settings** ➜ **Pages** ➜ **Source** and change the branch to `gh-pages` and click **save**.\n\nYour personal portfolio will be live at `username.github.io`. Any time you commit a change to the **main** branch, the website will be automatically updated.\n\nIf you see only `README` at `username.github.io`, be sure to change your GitHub Page's source to `gh-pages` branch. See [how to](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site). Also, if you face any issue rendering the website, double-check the `base` value in the `vite.config.js`.\n\nAs this is a vite project, you can also host your website to Netlify, Vercel, Heroku, or other popular services. Please refer to this [doc](https://vitejs.dev/guide/static-deploy.html) for a detailed deployment guide to other services.\n\n\u003c/details\u003e\n\nOr\n\n\u003cdetails\u003e\n\u003csummary\u003eInstalling as package (Click to expand)\u003c/summary\u003e\n\n\u003cbr/\u003e\n\nFirst Install **GitProfile** via \u003ca href=\"https://www.npmjs.com/package/@arifszn/gitprofile\"\u003eNPM\u003c/a\u003e.\n\n```sh\nnpm install @arifszn/gitprofile\n```\n\nOr via \u003ca href=\"https://yarnpkg.com/package/@arifszn/gitprofile\"\u003eYarn\u003c/a\u003e.\n\n```sh\nyarn add @arifszn/gitprofile\n```\n\nThen, import the package, import and style and provide the config.\n\n```js\nimport GitProfile from '@arifszn/gitprofile';\nimport '@arifszn/gitprofile/dist/style.css';\n\nfunction App() {\n  return (\n    \u003cGitProfile\n      config={{\n        github: {\n          username: 'arifszn',\n        },\n      }}\n    /\u003e\n  );\n}\n\nexport default App;\n```\n\nList of all config [here](#-customization).\n\n\u003c/details\u003e\n\n**If you face any problems or have any questions, open an issue [here](https://github.com/arifszn/gitprofile/issues).**\n\n## 🎨 Customization\n\nAll the magic happens in the file `gitprofile.config.js`. Open it and modify it according to your preference.\n\n```js\n// gitprofile.config.js\n\nconst config = {\n  github: {\n    username: 'arifszn', // Your GitHub org/user name. (Required)\n    sortBy: 'stars', // stars | updated\n    limit: 8, // How many projects to display.\n    exclude: {\n      forks: false, // Forked projects will not be displayed if set to true.\n      projects: [], // These projects will not be displayed. example: ['my-project1', 'my-project2']\n    },\n  },\n  social: {\n    linkedin: '',\n    twitter: '',\n    facebook: '',\n    dribbble: '',\n    behance: '',\n    medium: '',\n    dev: '',\n    website: '',\n    phone: '',\n    email: '',\n  },\n  skills: ['JavaScript', 'React.js'],\n  experiences: [\n    {\n      company: 'Company name 1',\n      position: 'Software Engineer',\n      from: 'July 2019',\n      to: 'Present',\n    },\n    {\n      company: 'Company name 2',\n      position: 'Jr. Software Engineer',\n      from: 'January 2019',\n      to: ' June 2019',\n    },\n  ],\n  education: [\n    {\n      institution: 'Institution name 1',\n      degree: 'ABC',\n      from: '2015',\n      to: '2019',\n    },\n    {\n      institution: 'Institution name 2',\n      degree: 'XYZ',\n      from: '2012',\n      to: '2014',\n    },\n  ],\n  // Display blog posts from your medium or dev account. (Optional)\n  blog: {\n    source: 'dev', // medium | dev\n    username: 'arifszn',\n    limit: 5, // How many posts to display. Max is 10.\n  },\n  googleAnalytics: {\n    // GA3 tracking id/GA4 tag id\n    id: '', // UA-XXXXXXXXX-X | G-XXXXXXXXXX\n  },\n  hotjar: {\n    id: '',\n    snippetVersion: 6,\n  },\n  themeConfig: {\n    defaultTheme: 'light',\n\n    // Hides the theme change switch\n    // Useful if you want to support a single color mode\n    disableSwitch: false,\n\n    // Should use the prefers-color-scheme media-query,\n    // using user system preferences, instead of the hardcoded defaultTheme\n    respectPrefersColorScheme: true,\n\n    // Available themes. To remove any theme, exclude from here.\n    themes: [\n      'light',\n      'dark',\n      'cupcake',\n      'bumblebee',\n      'emerald',\n      'corporate',\n      'synthwave',\n      'retro',\n      'cyberpunk',\n      'valentine',\n      'halloween',\n      'garden',\n      'forest',\n      'aqua',\n      'lofi',\n      'pastel',\n      'fantasy',\n      'wireframe',\n      'black',\n      'luxury',\n      'dracula',\n      'cmyk',\n      'autumn',\n      'business',\n      'acid',\n      'lemonade',\n      'night',\n      'coffee',\n      'winter',\n      'procyon',\n    ],\n\n    // Custom theme\n    customTheme: {\n      primary: '#fc055b',\n      secondary: '#219aaf',\n      accent: '#e8d03a',\n      neutral: '#2A2730',\n      'base-100': '#E3E3ED',\n      '--rounded-box': '3rem',\n      '--rounded-btn': '3rem',\n    },\n  },\n};\n```\n\n### Themes\n\nThere are 30 themes available that can be selected from the dropdown.\n\nThe default theme can be specified.\n\n```js\n// gitprofile.config.js\nmodule.exports = {\n  // ...\n  themeConfig: {\n    defaultTheme: 'light',\n    // ...\n  },\n};\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://arifszn.github.io/assets/img/hosted/gitprofile/theme-dropdown.png\" alt=\"Theme Dropdown\" width=\"50%\"\u003e\n\u003c/p\u003e\n\nYou can create your own custom theme by modifying these values. Theme `procyon` will have the custom styles.\n\n```js\n// gitprofile.config.js\nmodule.exports = {\n  // ...\n  themeConfig: {\n    customTheme: {\n      primary: '#fc055b',\n      secondary: '#219aaf',\n      accent: '#e8d03a',\n      neutral: '#2A2730',\n      'base-100': '#E3E3ED',\n      '--rounded-box': '3rem',\n      '--rounded-btn': '3rem',\n    },\n    // ...\n  },\n};\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://arifszn.github.io/assets/img/hosted/gitprofile/themes.png\" alt=\"Themes\"\u003e\n\u003c/p\u003e\n\n### Google Analytics\n\n**GitProfile** supports both GA3 and GA4. If you do not want to use Google Analytics, keep the `id` empty.\n\n```js\n// gitprofile.config.js\nmodule.exports = {\n  // ...\n  googleAnalytics: {\n    id: '',\n  },\n};\n```\n\nBesides tracking visitors, it will track `click events` on projects and blog posts, and send them to Google Analytics.\n\n### Hotjar\n\n**GitProfile** supports hotjar. If you do not want to use Hotjar, keep the `id` empty.\n\n```js\n// gitprofile.config.js\nmodule.exports = {\n  // ...\n  hotjar: {\n    id: '',\n    snippetVersion: 6,\n  },\n};\n```\n\n### SEO\n\nMeta tags will be auto-generated from configs dynamically. However, you can also manually add meta tags in `public/index.html`.\n\n### Avatar and Bio\n\nYour avatar and bio will be fetched from GitHub automatically.\n\n### Social Links\n\nYou can link your social media services you're using, including LinkedIn, Twitter, Facebook, Dribbble, Behance, Medium, dev, personal website, phone and email.\n\n```js\n// gitprofile.config.js\nmodule.exports = {\n  // ...\n  social: {\n    linkedin: 'ariful-alam',\n    twitter: 'arif_swozon',\n    facebook: '',\n    dribbble: '',\n    behance: '',\n    medium: '',\n    dev: '',\n    website: 'https://arifszn.github.io',\n    phone: '',\n    email: '',\n  },\n};\n```\n\n### Skills\n\nTo showcase your skills provide them here.\n\n```js\n// gitprofile.config.js\nmodule.exports = {\n  // ...\n  skills: ['JavaScript', 'React.js'],\n};\n```\n\nEmpty array will hide the skills section.\n\n### Experience\n\nProvide your job history in `experiences`.\n\n```js\n// gitprofile.config.js\nmodule.exports = {\n  // ...\n  experiences: [\n    {\n      company: 'Company name 1',\n      position: 'Software Engineer',\n      from: 'July 2019',\n      to: 'Present',\n    },\n    {\n      company: 'Company name 2',\n      position: 'Jr. Software Engineer',\n      from: 'January 2019',\n      to: ' June 2019',\n    },\n  ],\n};\n```\n\nEmpty array will hide the experience section.\n\n### Education\n\nProvide your education history in `education`.\n\n```js\n// gitprofile.config.js\nmodule.exports = {\n  // ...\n  education: [\n    {\n      institution: 'Institution name 1',\n      degree: 'Bachelor of Science',\n      from: '2015',\n      to: '2019',\n    },\n    {\n      institution: 'Institution name 2',\n      degree: 'Higher Secondary Certificate (HSC)',\n      from: '2012',\n      to: '2014',\n    },\n  ],\n};\n```\n\nEmpty array will hide the education section.\n\n### Projects\n\nYour public repo from GitHub will be displayed here automatically. You can limit how many projects do you want to be displayed. Also, you can hide forked or specific repo.\n\n```js\n// gitprofile.config.js\nmodule.exports = {\n  // ...\n  github: {\n    username: 'arifszn',\n    sortBy: 'stars',\n    limit: 8,\n    exclude: {\n      forks: false,\n      projects: ['my-project1', 'my-project2'],\n    },\n  },\n};\n```\n\n### Blog Posts\n\nIf you have [medium](https://medium.com) or [dev](https://dev.to) account, you can show your recent blog posts in here just by providing your medium/dev username. You can limit how many posts to display (Max is `10`).\n\n```js\n// gitprofile.config.js\nmodule.exports = {\n  // ...\n  blog: {\n    source: 'dev',\n    username: 'arifszn',\n    limit: 5,\n  },\n};\n```\n\n![Blog](https://arifszn.github.io/assets/img/hosted/gitprofile/blog.png)\n\nThe posts are fetched by [Blog-js](https://github.com/arifszn/blog-js).\n\n## 💖 Support\n\n\u003ca href=\"https://www.buymeacoffee.com/arifszn\" target=\"_blank\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/arifszn/arifszn/main/assets/bmc-button.png\" alt=\"Buy Me A Coffee\" style=\"height: 60px !important;width: 217px !important;\" \u003e\n\u003c/a\u003e\n\n## 💡 Contribute\n\nTo contribute, see the [Contributing guide](https://github.com/arifszn/gitprofile/blob/main/CONTRIBUTING.md).\n\n## 📄 License\n\n**GitProfile** is licensed under the [Apache-2.0 License](https://github.com/arifszn/gitprofile/blob/main/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkrypton-byte%2Fkrypton-byte.github.io","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkrypton-byte%2Fkrypton-byte.github.io","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkrypton-byte%2Fkrypton-byte.github.io/lists"}