ilia/profile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update docs

Browse Source
This commit is contained in:
Ariful Alam 2024-01-20 19:55:48 +06:00
parent c7db8ee0b8
commit cac7ee3a16
2 changed files with 218 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

391
README.md
View File

@ -30,9 +30,6 @@
<a href="https://github.com/arifszn/gitprofile/blob/main/LICENSE"> <a href="https://github.com/arifszn/gitprofile/blob/main/LICENSE">
<img src="https://img.shields.io/github/license/arifszn/gitprofile"/> <img src="https://img.shields.io/github/license/arifszn/gitprofile"/>
</a> </a>
<a href="https://www.buymeacoffee.com/arifszn">
<img src="https://img.shields.io/badge/sponsor-buy%20me%20a%20coffee-yellow?logo=buymeacoffee"/>
</a>
<a href="https://twitter.com/intent/tweet?text=Check%20out%20the%20portfolio%20builder.%20Create%20an%20automatic%20portfolio%20based%20on%20GitHub%20profile.&url=https://github.com/arifszn/gitprofile&hashtags=javascript,opensource,js,webdev,developers"> <a href="https://twitter.com/intent/tweet?text=Check%20out%20the%20portfolio%20builder.%20Create%20an%20automatic%20portfolio%20based%20on%20GitHub%20profile.&url=https://github.com/arifszn/gitprofile&hashtags=javascript,opensource,js,webdev,developers">
<img src="https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Fgithub.com%2Farifszn%2Fgitprofile"/> <img src="https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Fgithub.com%2Farifszn%2Fgitprofile"/>
</a> </a>
@ -49,18 +46,18 @@
<p align="center"> <p align="center">
<a href="https://arifszn.github.io/gitprofile"> <a href="https://arifszn.github.io/gitprofile">
<img src="https://arifszn.netlify.app/assets/img/hosted/gitprofile/preview.gif" alt="Preview" width="60%"/> <img src="https://github.com/arifszn/gitprofile/assets/45073703/eb6c38a4-ac92-4006-869b-e4e24f6f5cf6" alt="Preview" width="60%"/>
</a> </a>
<br/> <br/>
<a href="#arifszn"><img src="https://arifszn.netlify.app/assets/img/drop-shadow.png" width="50%" alt="Shadow"/></a> <a href="#arifszn"><img src="https://github.com/arifszn/gitprofile/assets/45073703/4d2ccd45-e566-4743-bf61-cadc03ece54c" width="50%" alt="Shadow"/></a>
</p> </p>
**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. But it's not necessary to have knowledge on these to get you started. You can make your own copy with zero coding experience. **GitProfile** is a powerful portfolio builder that allows you to create a stunning and personalized portfolio site in minutes, even if you have no coding experience. Simply provide your GitHub username, and GitProfile will automatically generate a portfolio. Best of all, you can easily deploy your portfolio to GitHub Pages with just a few clicks, making it accessible to the world in no time.
**Features:** **Features:**
✓ [Easy to Setup](#-installation--setup) ✓ [Easy to Setup](#-installation--setup)
✓ [30 Themes](#themes) ✓ [33 Themes](#themes)
✓ [Google Analytics](#google-analytics) ✓ [Google Analytics](#google-analytics)
✓ [Hotjar](#hotjar) ✓ [Hotjar](#hotjar)
✓ [SEO](#seo) ✓ [SEO](#seo)
@ -76,18 +73,8 @@
To view a live example, **[click here](https://arifszn.github.io/gitprofile)**. To view a live example, **[click here](https://arifszn.github.io/gitprofile)**.
Or try it **[online](https://stackblitz.com/edit/gitprofile)**.
<p align="center"> <p align="center">
<img src="https://arifszn.netlify.app/assets/img/hosted/gitprofile/themes.png" alt="Themes"> <img src="https://github.com/arifszn/gitprofile/assets/45073703/406e8368-415a-42ef-89c5-d43cc8bbeb19" alt="Themes">
</p>
## 🎉 Thank you for the 800 ★
<p>
<a href="https://arifszn.github.io/gitprofile">
<img src="https://github.com/arifszn/gitprofile/assets/45073703/b3d34d17-cf55-4c74-bf44-3196b1f0ac66" alt="Thank You" width="50%"/>
</a>
</p> </p>
## 🛠 Installation & Setup ## 🛠 Installation & Setup
@ -96,7 +83,6 @@ There are three ways to use **GitProfile**. Use any.
- [Forking this repo _(recommended)_](#forking-this-repo) - [Forking this repo _(recommended)_](#forking-this-repo)
- [Setting up locally](#setting-up-locally) - [Setting up locally](#setting-up-locally)
- [Installing as package](#installing-as-package)
### Forking this repo ### Forking this repo
@ -108,16 +94,16 @@ These instructions will get you a copy of the project and deploy your portfolio
- If you want to host your portfolio at `https://<USERNAME>.github.io/<REPO_NAME>` (e.g. `https://<USERNAME>.github.io/portfolio`), rename your forked repository to `<REPO_NAME>` (e.g. `portfolio`) in GitHub. - If you want to host your portfolio at `https://<USERNAME>.github.io/<REPO_NAME>` (e.g. `https://<USERNAME>.github.io/portfolio`), rename your forked repository to `<REPO_NAME>` (e.g. `portfolio`) in GitHub.
- **Enable workflows:** Go to your repo's **Actions** tab and enable workflows. - **Enable workflows:** Go to your repo's **Actions** tab and enable workflows.
![Workflows](https://arifszn.netlify.app/assets/img/hosted/gitprofile/workflows.png) ![Workflows](https://github.com/arifszn/gitprofile/assets/45073703/7e82f7d4-900c-4cb9-83f9-bcaa1ca2b910)
- **Base Value:** Open `vite.config.js`, and change `base`'s value. - **Base Value:** Open `gitprofile.config.ts`, and change `base`'s value.
- If you are deploying to `https://<USERNAME>.github.io`, set `base` to `'/'`. - If you are deploying to `https://<USERNAME>.github.io`, set `base` to `'/'`.
- If you are deploying to `https://<USERNAME>.github.io/<REPO_NAME>` (e.g. `https://<USERNAME>.github.io/portfolio`), then set `base` to `'/<REPO_NAME>/'` (e.g. `'/portfolio/'`). - If you are deploying to `https://<USERNAME>.github.io/<REPO_NAME>` (e.g. `https://<USERNAME>.github.io/portfolio`), then set `base` to `'/<REPO_NAME>/'` (e.g. `'/portfolio/'`).
```js ```ts
// vite.config.js // gitprofile.config.ts
{ {
base: '/', base: '/',
// ... // ...
@ -126,11 +112,11 @@ These instructions will get you a copy of the project and deploy your portfolio
- **Commit the changes:** Now commit to your **main** branch with your changes. Wait a few minutes so that the CI/CD pipeline can publish your website to GitHub Pages. You can check the progress in the [Actions](https://github.com/arifszn/gitprofile/actions) tab. - **Commit the changes:** Now commit to your **main** branch with your changes. Wait a few minutes so that the CI/CD pipeline can publish your website to GitHub Pages. You can check the progress in the [Actions](https://github.com/arifszn/gitprofile/actions) tab.
Your portfolio website will be live shortly. Any time you commit a change to the **main** branch, the website will be automatically updated. If you face any issue viewing the website, double-check the `base` value in the `vite.config.js` file. Also, check if **Source** is set to **GitHub Actions** in **Settings** ➜ **Pages** ➜ **Build and deployment**. Your portfolio website will be live shortly. Any time you commit a change to the **main** branch, the website will be automatically updated. If you face any issue viewing the website, double-check the `base` value in the `gitprofile.config.ts` file. Also, check if **Source** is set to **GitHub Actions** in **Settings** ➜ **Pages** ➜ **Build and deployment**.
If you wish to add a custom domain, no CNAME file is required. Just add it to your repo's **Settings** ➜ **Pages** ➜ **Custom domain**. If you wish to add a custom domain, no CNAME file is required. Just add it to your repo's **Settings** ➜ **Pages** ➜ **Custom domain**.
As 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. Also, if you are not deploying to GitHub pages, `base:` might need to be deleted from `vite.config.js`. As 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.
### Setting up locally ### Setting up locally
@ -155,86 +141,107 @@ As this is a Vite project, you can also host your website to Netlify, Vercel, He
- Finally, visit [`http://localhost:5173/gitprofile/`](http://localhost:5173/gitprofile/) from your browser. - Finally, visit [`http://localhost:5173/gitprofile/`](http://localhost:5173/gitprofile/) from your browser.
### Installing as package
You can also use **GitProfile** by installing as an NPM package.
First Install **GitProfile** via <a href="https://www.npmjs.com/package/@arifszn/gitprofile">NPM</a>.
```sh
npm install @arifszn/gitprofile
```
Or via <a href="https://yarnpkg.com/package/@arifszn/gitprofile">Yarn</a>.
```sh
yarn add @arifszn/gitprofile
```
Then, import the package, import and style and provide the config.
```js
import GitProfile from '@arifszn/gitprofile';
import '@arifszn/gitprofile/dist/style.css';
function App() {
return (
<GitProfile
config={{
github: {
username: 'arifszn',
},
}}
/>
);
}
export default App;
```
List of all config [here](#-customization).
**If you face any problems or have any questions, open an issue [here](https://github.com/arifszn/gitprofile/issues).**
## 🎨 Customization ## 🎨 Customization
All the magic happens in the file `gitprofile.config.js`. Open it and modify it according to your preference. All the magic happens in the file `gitprofile.config.ts`. Open it and modify it according to your preference.
```js ```ts
// gitprofile.config.js // gitprofile.config.ts
const config = { const CONFIG = {
github: { github: {
username: 'arifszn', // Your GitHub org/user name. (Required) username: 'arifszn', // Your GitHub org/user name. (This is the only required config)
sortBy: 'stars', // stars | updated },
limit: 8, // How many projects to display. /**
exclude: { * If you are deploying to https://<USERNAME>.github.io/, for example your repository is at https://github.com/arifszn/arifszn.github.io, set base to '/'.
forks: false, // Forked projects will not be displayed if set to true. * If you are deploying to https://<USERNAME>.github.io/<REPO_NAME>/,
projects: [], // These projects will not be displayed. example: ['my-project1', 'my-project2'] * for example your repository is at https://github.com/arifszn/portfolio, then set base to '/portfolio/'.
*/
base: '/gitprofile/',
projects: {
github: {
display: true, // Display GitHub projects?
header: 'Github Projects',
mode: 'automatic', // Mode can be: 'automatic' or 'manual'
automatic: {
sortBy: 'stars', // Sort projects by 'stars' or 'updated'
limit: 8, // How many projects to display.
exclude: {
forks: false, // Forked projects will not be displayed if set to true.
projects: [], // These projects will not be displayed. example: ['arifszn/my-project1', 'arifszn/my-project2']
},
},
manual: {
// Properties for manually specifying projects
projects: ['arifszn/gitprofile', 'arifszn/pandora'], // List of repository names to display. example: ['arifszn/my-project1', 'arifszn/my-project2']
},
},
external: {
header: 'My Projects',
// To hide the `External Projects` section, keep it empty.
projects: [
{
title: 'Project Name',
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: 'Project Name',
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: 'Portfolio of Ariful Alam',
description: '',
imageURL: '',
},
social: { social: {
linkedin: '', linkedin: 'ariful-alam',
twitter: '', twitter: 'arif_szn',
mastodon: '', mastodon: 'arifszn@mastodon.social',
facebook: '', facebook: '',
instagram: '', instagram: '',
youtube: '', youtube: '', // example: 'pewdiepie'
dribbble: '', dribbble: '',
behance: '', behance: '',
medium: '', medium: 'arifszn',
dev: '', dev: 'arifszn',
stackoverflow: '', // format: userid/username stackoverflow: '', // example: '1/jeff-atwood'
website: '',
skype: '', skype: '',
telegram: '', telegram: '',
website: 'https://www.arifszn.com',
phone: '', phone: '',
email: '', email: 'arifulalamszn@gmail.com',
}, },
resume: { resume: {
fileUrl: '', // Empty fileUrl will hide the `Download Resume` button. fileUrl:
'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf', // Empty fileUrl will hide the `Download Resume` button.
}, },
skills: ['JavaScript', 'React.js'], skills: [
'PHP',
'Laravel',
'JavaScript',
'React.js',
'Node.js',
'Nest.js',
'MySQL',
'PostgreSQL',
'Git',
'Docker',
'PHPUnit',
'CSS',
'Antd',
'Tailwind',
],
experiences: [ experiences: [
{ {
company: 'Company Name', company: 'Company Name',
@ -253,13 +260,13 @@ const config = {
], ],
certifications: [ certifications: [
{ {
body: 'Certification Body Name', name: 'Lorem ipsum',
name: 'Sample Certification', body: 'Lorem ipsum dolor sit amet',
year: 'March 2022', year: 'March 2022',
link: 'https://example.com', link: 'https://example.com',
}, },
], ],
education: [ educations: [
{ {
institution: 'Institution Name', institution: 'Institution Name',
degree: 'Degree', degree: 'Degree',
@ -273,28 +280,11 @@ const config = {
to: '2014', to: '2014',
}, },
], ],
// To hide the `My Projects` section, keep it empty. // Display articles from your medium or dev account. (Optional)
externalProjects: [
{
title: 'Project Name',
description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.',
imageUrl: 'https://via.placeholder.com/250x250',
link: 'https://example.com',
},
{
title: 'Project Name',
description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.',
imageUrl: 'https://via.placeholder.com/250x250',
link: 'https://example.com',
},
],
// Display blog posts from your medium or dev account. (Optional)
blog: { blog: {
source: 'dev', // medium | dev source: 'dev', // medium | dev
username: 'arifszn', // to hide blog section, keep it empty username: 'arifszn', // to hide blog section, keep it empty
limit: 5, // How many posts to display. Max is 10. limit: 3, // How many articles to display. Max is 10.
}, },
googleAnalytics: { googleAnalytics: {
id: '', // GA3 tracking id/GA4 tag id UA-XXXXXXXXX-X | G-XXXXXXXXXX id: '', // GA3 tracking id/GA4 tag id UA-XXXXXXXXX-X | G-XXXXXXXXXX
@ -305,18 +295,18 @@ const config = {
snippetVersion: 6, snippetVersion: 6,
}, },
themeConfig: { themeConfig: {
defaultTheme: 'light', defaultTheme: 'nord',
// Hides the theme change switch // Hides the switch in the navbar
// Useful if you want to support a single color mode // Useful if you want to support a single color mode
disableSwitch: false, disableSwitch: false,
// Should use the prefers-color-scheme media-query, // Should use the prefers-color-scheme media-query,
// using user system preferences, instead of the hardcoded defaultTheme // using user system preferences, instead of the hardcoded defaultTheme
respectPrefersColorScheme: true, respectPrefersColorScheme: false,
// Hide the ring in Profile picture // Display the ring in Profile picture
hideAvatarRing: false, displayAvatarRing: true,
// Available themes. To remove any theme, exclude from here. // Available themes. To remove any theme, exclude from here.
themes: [ themes: [
@ -349,10 +339,13 @@ const config = {
'night', 'night',
'coffee', 'coffee',
'winter', 'winter',
'dim',
'nord',
'sunset',
'procyon', 'procyon',
], ],
// Custom theme // Custom theme, applied to `procyon` theme
customTheme: { customTheme: {
primary: '#fc055b', primary: '#fc055b',
secondary: '#219aaf', secondary: '#219aaf',
@ -365,19 +358,27 @@ const config = {
}, },
// Optional Footer. Supports plain text or HTML. // Optional Footer. Supports plain text or HTML.
footer: `Copyright © 2023 John Doe`, footer: `Made with <a
class="text-primary" href="https://github.com/arifszn/gitprofile"
target="_blank"
rel="noreferrer"
>GitProfile</a> and ❤️`,
enablePWA: true,
}; };
export default CONFIG;
``` ```
### Themes ### Themes
There are 30 themes available that can be selected from the dropdown. There are 33 themes available that can be selected from the dropdown.
The default theme can be specified. The default theme can be specified.
```js ```ts
// gitprofile.config.js // gitprofile.config.ts
const config = { const CONFIG = {
// ... // ...
themeConfig: { themeConfig: {
defaultTheme: 'light', defaultTheme: 'light',
@ -387,14 +388,14 @@ const config = {
``` ```
<p align="center"> <p align="center">
<img src="https://arifszn.netlify.app/assets/img/hosted/gitprofile/theme-dropdown.png" alt="Theme Dropdown" width="50%"> <img src="https://github.com/arifszn/gitprofile/assets/45073703/91a2d9e6-67e5-47b4-9752-1881ac0f907f" alt="Theme Dropdown" width="50%">
</p> </p>
You can create your own custom theme by modifying these values. Theme `procyon` will have the custom styles. You can create your own custom theme by modifying these values. Theme `procyon` will have the custom styles.
```js ```ts
// gitprofile.config.js // gitprofile.config.ts
const config = { const CONFIG = {
// ... // ...
themeConfig: { themeConfig: {
customTheme: { customTheme: {
@ -415,9 +416,9 @@ const config = {
**GitProfile** supports both GA3 and GA4. If you do not want to use Google Analytics, keep the `id` empty. **GitProfile** supports both GA3 and GA4. If you do not want to use Google Analytics, keep the `id` empty.
```js ```ts
// gitprofile.config.js // gitprofile.config.ts
const config = { const CONFIG = {
// ... // ...
googleAnalytics: { googleAnalytics: {
id: '', id: '',
@ -431,9 +432,9 @@ Besides tracking visitors, it will track `click events` on projects and blog pos
**GitProfile** supports [hotjar](https://www.hotjar.com) to track visitor interaction and behavior. If you do not want to use Hotjar, keep the `id` empty. **GitProfile** supports [hotjar](https://www.hotjar.com) to track visitor interaction and behavior. If you do not want to use Hotjar, keep the `id` empty.
```js ```ts
// gitprofile.config.js // gitprofile.config.ts
const config = { const CONFIG = {
// ... // ...
hotjar: { hotjar: {
id: '', id: '',
@ -444,11 +445,23 @@ const config = {
### SEO ### SEO
Meta tags will be auto-generated from configs dynamically. However, you can also manually add meta tags in `public/index.html`. You can customize the meta tags for SEO in `seo`.
```ts
// gitprofile.config.ts
const CONFIG = {
// ...
seo: {
title: 'Portfolio of Ariful Alam',
description: '',
imageURL: '',
},
};
```
### PWA ### PWA
GitProfile is PWA enabled. The site can be installed as a Progressive Web App. GitProfile is PWA enabled. The site can be installed as a Progressive Web App. To turn it off, set `enablePWA` to `false`.
![PWA](https://github.com/arifszn/gitprofile/assets/45073703/9dc7cc5c-4262-4445-a7a5-1e3566ef43fa) ![PWA](https://github.com/arifszn/gitprofile/assets/45073703/9dc7cc5c-4262-4445-a7a5-1e3566ef43fa)
@ -460,9 +473,9 @@ Your avatar and bio will be fetched from GitHub automatically.
You can link your social media services you're using, including LinkedIn, Twitter, Mastodon, Facebook, Instagram, YouTube, Dribbble, Behance, Medium, dev, Stack Overflow, Skype, Telegram, personal website, phone and email. You can link your social media services you're using, including LinkedIn, Twitter, Mastodon, Facebook, Instagram, YouTube, Dribbble, Behance, Medium, dev, Stack Overflow, Skype, Telegram, personal website, phone and email.
```js ```ts
// gitprofile.config.js // gitprofile.config.ts
const config = { const CONFIG = {
// ... // ...
social: { social: {
linkedin: 'ariful-alam', linkedin: 'ariful-alam',
@ -489,9 +502,9 @@ const config = {
To showcase your skills provide them here. To showcase your skills provide them here.
```js ```ts
// gitprofile.config.js // gitprofile.config.ts
const config = { const CONFIG = {
// ... // ...
skills: ['JavaScript', 'React.js'], skills: ['JavaScript', 'React.js'],
}; };
@ -503,9 +516,9 @@ Empty array will hide the skills section.
Provide your job history in `experiences`. Provide your job history in `experiences`.
```js ```ts
// gitprofile.config.js // gitprofile.config.ts
const config = { const CONFIG = {
// ... // ...
experiences: [ experiences: [
{ {
@ -530,13 +543,13 @@ Empty array will hide the experience section.
### Education ### Education
Provide your education history in `education`. Provide your education history in `educations`.
```js ```ts
// gitprofile.config.js // gitprofile.config.ts
const config = { const CONFIG = {
// ... // ...
education: [ educations: [
{ {
institution: 'Institution name 1', institution: 'Institution name 1',
degree: 'Bachelor of Science', degree: 'Bachelor of Science',
@ -559,9 +572,9 @@ Empty array will hide the education section.
Provide your industry certifications in `certifications`. Provide your industry certifications in `certifications`.
```js ```ts
// gitprofile.config.js // gitprofile.config.ts
const config = { const CONFIG = {
// ... // ...
certifications: [ certifications: [
{ {
@ -580,19 +593,30 @@ Empty array will hide the certifications section.
#### Github Projects #### Github Projects
Your public repo from GitHub will be displayed in the `Github Projects` section automatically. You can limit how many projects do you want to be displayed. Also, you can hide forked or specific repo. - **Automatic Mode:** Seamlessly showcase your top GitHub projects based on stars or last updated date.
- **Manual Mode:** Choose specific repositories to highlight.
```js ```ts
// gitprofile.config.js // gitprofile.config.ts
const config = { const CONFIG = {
// ... // ...
github: { projects: {
username: 'arifszn', github: {
sortBy: 'stars', display: true, // Display GitHub projects?
limit: 8, header: 'Github Projects',
exclude: { mode: 'automatic', // Mode can be: 'automatic' or 'manual'
forks: false, automatic: {
projects: ['my-project1', 'my-project2'], sortBy: 'stars', // Sort projects by 'stars' or 'updated'
limit: 8, // How many projects to display.
exclude: {
forks: false, // Forked projects will not be displayed if set to true.
projects: [], // These projects will not be displayed. example: ['arifszn/my-project1', 'arifszn/my-project2']
},
},
manual: {
// Properties for manually specifying projects
projects: ['arifszn/gitprofile', 'arifszn/pandora'], // List of repository names to display. example: ['arifszn/my-project1', 'arifszn/my-project2']
},
}, },
}, },
}; };
@ -600,20 +624,37 @@ const config = {
#### External Projects #### External Projects
In this section you can showcase your external/personal projects. - **Highlight Projects Beyond GitHub:** Feature projects hosted on other platforms or personal websites.
- **Control over Content:** Provide custom titles, descriptions, images, and links for each external project.
```js ```ts
// gitprofile.config.js // gitprofile.config.ts
const config = { const CONFIG = {
// ... // ...
externalProjects: [ projects: {
{ external: {
title: 'Project Name', header: 'My Projects',
description: 'Description', // To hide the `External Projects` section, keep it empty.
link: 'https://example.com', projects: [
imageUrl: 'https://via.placeholder.com/250x250', {
title: 'Project Name',
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: 'Project Name',
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',
},
],
}, },
], },
}; };
``` ```
@ -621,9 +662,9 @@ const config = {
If 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`). If 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`).
```js ```ts
// gitprofile.config.js // gitprofile.config.ts
const config = { const CONFIG = {
// ... // ...
blog: { blog: {
source: 'dev', source: 'dev',
@ -633,7 +674,7 @@ const config = {
}; };
``` ```
![Blog](https://arifszn.netlify.app/assets/img/hosted/gitprofile/blog.png) ![Blog](https://github.com/arifszn/gitprofile/assets/45073703/410124f2-a3c2-48f1-8ec8-0c6fae74ae3d)
The posts are fetched by [blog.js](https://github.com/arifszn/blog.js). The posts are fetched by [blog.js](https://github.com/arifszn/blog.js).

4
gitprofile.config.ts
View File

@ -7,7 +7,7 @@ const CONFIG = {
/** /**
* If you are deploying to https://<USERNAME>.github.io/, for example your repository is at https://github.com/arifszn/arifszn.github.io, set base to '/'. * If you are deploying to https://<USERNAME>.github.io/, for example your repository is at https://github.com/arifszn/arifszn.github.io, set base to '/'.
* If you are deploying to https://<USERNAME>.github.io/<REPO_NAME>/, * If you are deploying to https://<USERNAME>.github.io/<REPO_NAME>/,
* for example your repository is at https://github.com/arifszn/example, then set base to '/example/'. * for example your repository is at https://github.com/arifszn/portfolio, then set base to '/portfolio/'.
*/ */
base: '/gitprofile/', base: '/gitprofile/',
projects: { projects: {
@ -25,7 +25,7 @@ const CONFIG = {
}, },
manual: { manual: {
// Properties for manually specifying projects // Properties for manually specifying projects
projects: ['arifszn/gitprofile'], // List of repository names to display. example: ['arifszn/my-project1', 'arifszn/my-project2'] projects: ['arifszn/gitprofile', 'arifszn/pandora'], // List of repository names to display. example: ['arifszn/my-project1', 'arifszn/my-project2']
}, },
}, },
external: { external: {