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
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
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.
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.
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.
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).
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.
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.
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.