Tasin5541 / portfolio

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.

Demo

To view a live demo, click here

Toggle Theme

How to use

• 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

References 👏🏻

• Most of the Design and Implementation Ideas are taken from Saad Pasta's Portfolio Project and ashutosh1919 masterPortfolio Project.