A modern, responsive and customizable portfolio builder for Developers!
https://shakibmostahid.github.io
ezProfile is an easy-to-customize personal dev portfolio builder that is created with React.js. When you manage the code in a GitHub repository, it will automatically render a webpage with the owner's profile information, including a photo, bio, and repositories. Also, it includes space to highlight your details, job history, education history, skills, and recent blog posts.
It's all possible using GitHub API (for automatically populating your website with content) and Article-api (for fetching recent blog posts).
✓ 21 Themes
✓ Google Analytics
✓ Meta Tags
✓ Avatar and Bio
✓ Social Links
✓ Skills
✓ Experience
✓ Education
✓ Projects
✓ Blog Posts
To view a live example, click here.
These instructions will get you a copy of the project up and running on your local machine.
You'll need Git and Node.js (which comes with npm) installed on your computer.
-
Fork the repo so you have your own project to customize. A "fork" is a copy of a repository.
-
Once you've found a home for your forked repository, clone it.
-
Change into your new directory.
cd ezprofile- Install dependencies
npm install- Start the development server
npm startAll the magic happens in the file src/config.js. Open it and modify it according to your preference.
These are the default values:
config.js
// config.js
module.exports = {
github: {
username: 'arifszn', // Your GitHub org/user name. (Required)
sortBy: 'stars', // stars | 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: ['my-project1', 'my-project2']
}
},
social: {
linkedin: '',
twitter: '',
facebook: '',
dribbble: '',
behance: '',
medium: '',
devto: '',
website: '',
phone: '',
email: ''
},
skills: [
'JavaScript',
'React.js',
],
experiences: [
{
company: 'Company name 1',
position: 'Software Engineer',
from: 'July 2019',
to: 'Present'
},
{
company: 'Company name 2',
position: 'Jr. Software Engineer',
from: 'January 2019',
to: ' June 2019'
}
],
education: [
{
institution: 'Institution name 1',
degree: 'Bachelor of Science',
from: '2015',
to: '2019'
},
{
institution: 'Institution name 2',
degree: 'Higher Secondary Certificate (HSC)',
from: '2012',
to: '2014',
}
],
blog: {
// Display blog posts from your medium or dev.to account. (Optional)
source: 'dev.to', // medium | dev.to
username: 'arifszn',
limit: 5 // How many posts to display. Max is 10.
},
googleAnalytics: {
// GA3 tracking id/GA4 tag id
id: '' // UA-XXXXXXXXX-X | G-XXXXXXXXXX
},
themeConfig: {
default: 'light',
// Hides the theme change switch
// Useful if you want to support a single color mode
disableSwitch: false,
// Should we use the prefers-color-scheme media-query,
// using user system preferences, instead of the hardcoded default
respectPrefersColorScheme: true,
// Available themes. To remove any theme, exclude from here.
themes: [
'light',
'dark',
'cupcake',
'bumblebee',
'emerald',
'corporate',
'synthwave',
'retro',
'cyberpunk',
'valentine',
'halloween',
'garden',
'forest',
'aqua',
'lofi',
'pastel',
'fantasy',
'wireframe',
'black',
'luxury',
'dracula'
]
}
}There are 21 themes available that can be selected from the dropdown.
The default theme can be specified.
// config.js
module.exports = {
// ...
themeConfig: {
default: 'light',
// ...
}
}
Here are some screenshots of different themes.
ezFolio supports both GA3 and GA4. If you do not want to use Google Analytics, keep the id empty.
// config.js
module.exports = {
// ...
googleAnalytics: {
id: ''
},
}Besides tracking visitors, ezFolio will track click events on projects and blog posts, and send them to Google Analytics.
Meta tags will be auto-generated from configs dynamically. However, you can also manually add meta tags in public\index.html
Your github avatar and bio will be displayed here.
ezProfile supports linking your social media services you're using, including LinkedIn, Twitter, Facebook, Dribbble, Behance, Medium, dev.to, personal website, phone and email.
// config.js
module.exports = {
// ...
social: {
linkedin: 'ariful-alam',
twitter: 'arif_swozon',
facebook: '',
dribbble: '',
behance: '',
medium: '',
devto: '',
website: 'https://arifszn.github.io',
phone: '',
email: ''
},
}To showcase your skills provide them here.
// config.js
module.exports = {
// ...
skills: [
'JavaScript',
'React.js',
],
}Empty array will hide the skills section.
Provide your job history in experiences.
// config.js
module.exports = {
// ...
experiences: [
{
company: 'Company name 1',
position: 'Software Engineer',
from: 'July 2019',
to: 'Present'
},
{
company: 'Company name 2',
position: 'Jr. Software Engineer',
from: 'January 2019',
to: ' June 2019'
}
],
}Empty array will hide the experience section.
Provide your education history in education.
// config.js
module.exports = {
// ...
education: [
{
institution: 'Institution name 1',
degree: 'Bachelor of Science',
from: '2015',
to: '2019'
},
{
institution: 'Institution name 2',
degree: 'Higher Secondary Certificate (HSC)',
from: '2012',
to: '2014',
}
],
}Empty array will hide the education section.
Your 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.
// config.js
module.exports = {
// ...
github: {
username: 'arifszn',
sortBy: 'stars',
limit: 8,
exclude: {
forks: false,
projects: ['my-project1', 'my-project2']
}
},
}If you have medium or dev.to account, you can show your recent blog posts in here just by providing your medium/dev.to username. You can limit how many posts to display (Max is 10).
// config.js
module.exports = {
// ...
blog: {
source: 'dev.to',
username: 'arifszn',
limit: 5
},
}
The posts are fetched by Article-api.
Once you are done with your setup and have completed all steps above, you need to put your website online! The fastest approach is to use GitHub Pages which is completely free.
1. Github Pages:
-
Rename your forked repository to
username.github.ioin github, whereusernameis your GitHub username (or organization name). -
Open
package.json, and changehomepage's value tohttps://username.github.io.// package.json { // ... "homepage": "https://username.github.io", }
-
Now commit to your main branch with your changes.
-
The CI/CD pipeline will publish your page at the gh-pages branch automatically.
-
Go to your repo's Settings -> Pages -> Source and change the branch to gh-pages.
-
Your personal portfolio will be live at
username.github.io. -
Any time you commit a change to main branch the website will automatically update.
Manual deployment is also available by running npm run deploy. For more info, visit here. If you see only README at username.github.io, be sure to change your GitHub Page's source to gh-pages branch. See how to.
2. Other: You can also host your website to Netlify, Vercel, Heroku, or other popular services. Please refer to this doc for a detailed deployment guide.
I intend to keep my works open source. Please do not discourage me by claiming this work by copying it as your own or removing/changing the footer notice. However You are open to use this project by forking it and change any code necessary(except footer notice). Go through the License before thinking of stealing this project. For every stolen copy found, an issue will be created on the concerned repo and a DMCA Takedown notice will be sent. Do not fall into this list.
If you are using this project and happy with it or just want to encourage me to continue creating stuff, you can do it by just starring and sharing the project.
Any contributors who want to make this project better can make contributions, which will be greatly appreciated. To contribute, clone this repo locally and commit your code to a new branch. Feel free to create an issue or make a pull request.
ezProfile is licensed under the Apache-2.0 License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent