Portfolio made with reactJs for github pages. Supports light and dark theme.
Watch > All Activity - for getting notified of updates on this project.
If this template helped you, leave a star and link to this repo on your website, so that the project can grow.
To view a live demo, click here
Remove <meta http-equiv="refresh" content="0;url=https://tasin5541.github.io/" />
in the index.html
file
You'll need Git and Node.js (which comes with npm) installed on your computer
Create a repository in github named username.github.io (your github username in place of username)
Open up cmd/powershell in admin mode and enter the following line to download this repository
git clone https://github.com/Tasin5541/portfolio.git
Then go to C:\Windows\System32\portfolio
in your File Explorer
Delete the .git
file
Open package.json
and add your repository name ("https://your_github_username.github.io") to the homepage section
"homepage": "https://username.github.io"
Create a file called .env in the root directory of your project, type the following in cmd/powershell
cp env.example .env
Inside the .env file, add key REACT_APP_GITHUB_TOKEN
and assign your github token like this.
// .env
REACT_APP_GITHUB_TOKEN = "YOUR GITHUB TOKEN HERE"
You can get a github token as described here. Give all permissions while generating token. Also add your githubUserName
in the correct field inside git_data_fetcher.js
.
You will find git_data_fetcher.js
file in the main directory of the repository. This file is used to fetch the data (Pull requests, Issues, Organizations, Pinned projects etc.) from your github.
If you open the file, you will see below component at the top of the file. You need to change only that component.
const openSource = {
githubUserName: "Your Github Username Here.",
};
Navigate to C:\Windows\System32\portfolio\src
and open the portfolio.js
file to change your information. [Use https://icon-sets.iconify.design/skill-icons/ for changing the skill icons on the home page]
Type the following lines in cmd/powershell one by one and press enter after each line
cd portfolio
npm install
node git_data_fetcher.js
npm run build
#To view the website in localhost before deploying
npm start
#press ctrl+c in cmd to stop the localhost if you executed the last command
#Deploy to github
cd build
git init
#Use your github username
git remote add origin https://github.com/username/username.github.io.git
git add .
git commit -m 'deploy'
git push -u origin master
You're all set, now visit "username.github.io" to see your website
Note: You'll need to copy the .git
file inside build folder and save it elsewhere. Everytime you update any information run npm build
and copy the .git
back into build folder before continuing with git add .
and the rest of the commands. Remember to copy the .git
everytime you run npm build