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:
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
npm run start
npm run start the command will take you to
https://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
- Commit all your code and push it to GitHub
- Make sure your repository is public and GitHub pages are enabled under the repo settings
- Add the homepage
- Add 2 scripts to your
"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
- Try to utilize APIs instead of adding the portfolio data under the constants
- Make your portfolio mobile responsive