A short, simple portfolio with React & GitHub Pages

Portfolio: https://vimala95.github.io/portfolio-create-react-app/#/

Before we dive into the basic setup it's advisable that you decide on the portfolio design.
You can refer to Colorlib for the portfolio design template.

Let’s dive into the basic setup:

Pre-requisites:

• VS Code
• Node.js

Getting Started
Navigate to the project directory and initialize the application:

npx create-react-app portfolio-create-react-app

Setting up Prettier

• You press save and the code is formatted
• No need to discuss style in code review
• Saves you time and energy

npm i prettier --save-dev

Refer to the config in case you need to know the basic config.

Time to dive into some coding

In case you are not familiar with React please visit the official website to understand how to create basic React components.

We will be creating 3 folders under the src directory viz:

• components: Start by identifying your portfolio components like header, footer, etc.
• pages: Will hold the various pages of our portfolio like home, about, contact, etc.
• constants: Define all the static info

To Run the project

cd portfolio-create-react-app
npm run start

The npm run start the command will take you tohttps://localhost:3000 , where you can see the fruits of all the work!

Try looking into the Github Repository to see how components are structured.

Deploy to the GitHub Pages

Steps:

1. Commit all your code and push it to GitHub
2. Make sure your repository is public and GitHub pages are enabled under the repo settings
3. Add the homepage "http://<username>.github.io/<repo-name>" to your package.json
4. Install gh-pages
5. Add 2 scripts to your package.json:

"predeploy": "npm run build",
"deploy": "gh-pages -d build"

6. Finally, run npm run deploy and visit the URL that you specified in the homepage.

Additional info on how to deploy the Create React App with the GitHub Pages can be found here: https://create-react-app.dev/docs/deployment/#github-pages

Future Additions

1. Try to utilize APIs instead of adding the portfolio data under the constants
2. Make your portfolio mobile responsive