How I set up my portfolio website using Material Kit React in a few hours?

What and Why's it?

It's basically my resume rendered on a website link. The idea is to share my resume with ease and also provide links to easily navigate to projects.
On the tech side of things, the motive was to see how can I use the widely available React UI frameworks out there to build an aesthetically pleasing FrontEnd.
Check it out live here
GitHub Repo

My Process - Building and Deploying a Portfolio Page

1. Finding React UI Components
   Accepting the fact that I'm not good when it comes to designing and hence wanted to not waste a lot of time figuring out HTML and CSS but rather find a template I could work with.
   So, I did the most obvious thing i.e. Google and found a blog on 20+ best React UI Components and decided to go with Material Kit React

2. Setting it up locally
   I chose the Free download option on the website and followed the steps on the Docs to set up the project locally. It looks exactly like the live preview version.

3. Choosing my view
   From there, it was basically figuring out what I need on my website and pick the components that I needed. I chose the profile page look because it was quite to the point and it met my needs for a portfolio website.

4. Routing changes and deleting folders
   From there, the plan was to get rid of all the extra stuff that I didn't need. But before you just start deleting folders, you also need to make sure that they're not being used So the best way is to modify the routing and start with deleting from the views folder.
   I changed the routing of the file in my Index.js file to only refer to the folder I'll be using as below.
   

5. Updating Header
   Being a newbie in learning React, structuring components in react is what I find the most interesting and confusing, so figuring out where to edit the header was a bit of to and fro between files. In times like this, I have so much appreciation for the power of F12 on Visual Studio Code
   Going through ProfilePage.js (below screenshot) figured half of the header was being rendered using one component and the other half was being rendered by another, so had to navigate to change the content.
   

6. Using Material UI components
   This Material UI React component has been built using Material UI and I had a whole range of styles available to use from there as well. I went through the documentation and picked up the components I wanted and imported them in my file(below screenshot).
   

7. Updating Content
   The last and easiest part was adding in the content and except the header and footer which were in their respective component files, most of the content was updated in ProfilePage.js file.

8. Deploying to GitHub pages
   The next step was deploying to GitHub pages, which is just a few button clicks away when it comes to a normal HTML, CSS, JS files. However, I realized that wasn't the case with a react app.
   Going back to good old friend google again. I found an article on Deploying React App to GitHub pages and followed the steps there.
   Every time I make changes now, it doesn't automatically update if I push to my code repo like for GitHub pages, rather I need to re-deploy every time there's an update.

Conclusion
So to conclude, setting up a static portfolio page and deploying was easy after I figured out that there was react frameworks that I could use and understanding how to use them by referring to the documentation and then, of course, relying on Google whenever there was a road bump.

Feel free to reach out, if you have further questions or any comments on this post, haven't written a blog in ages so would appreciate any feedback you have.