https://github.com/tasin5541/portfolio
Portfolio made with reactJs for github pages. Toggle between light and dark theme.
https://github.com/tasin5541/portfolio
demo github-api github-io github-page github-pages github-pages-template github-pages-theme github-pages-website personal-site personal-website portfolio portfolio-construction portfolio-page portfolio-site portfolio-template portfolio-website portfolios react reactjs
Last synced: about 2 months ago
JSON representation
Portfolio made with reactJs for github pages. Toggle between light and dark theme.
- Host: GitHub
- URL: https://github.com/tasin5541/portfolio
- Owner: Tasin5541
- License: mit
- Created: 2020-09-17T14:48:15.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-12-11T09:57:20.000Z (over 1 year ago)
- Last Synced: 2023-12-11T10:49:25.892Z (over 1 year ago)
- Topics: demo, github-api, github-io, github-page, github-pages, github-pages-template, github-pages-theme, github-pages-website, personal-site, personal-website, portfolio, portfolio-construction, portfolio-page, portfolio-site, portfolio-template, portfolio-website, portfolios, react, reactjs
- Language: JavaScript
- Homepage: https://tasin5541.github.io/
- Size: 33.7 MB
- Stars: 70
- Watchers: 2
- Forks: 21
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
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](https://tasin5541.github.io/)**
# Toggle Theme
# How to use
- Remove `` in the `index.html` file
- You'll need [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which comes with [npm](http://npmjs.com)) 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
- ```python
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
- ```python
"homepage": "https://username.github.io"
```
- Create a file called .env in the root directory of your project, type the following in cmd/powershell
- ```bash
cp env.example .env
```
- Inside the .env file, add key `REACT_APP_GITHUB_TOKEN` and assign your github token like this.
- ```javascript
// .env
REACT_APP_GITHUB_TOKEN = "YOUR GITHUB TOKEN HERE"
```
You can get a github token as described [here](https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token). 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.
- ```python
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
- ```python
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](https://github.com/saadpasta/developerFolio) and [ashutosh1919 masterPortfolio Project](https://github.com/ashutosh1919/masterPortfolio).