DEV Community


Posted on

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. Router Index.js
    I changed the routing of the file in my Index.js file to only refer to the folder I'll be using as below.
    Updated Router

  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.
    Header ss

  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.

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.

Top comments (0)