How I set up my portfolio website using Material Kit React in a few hours?
Tags: womenintech, portfolio, react
Published: 2020-07-23 04:05:54

---
title: How I set up my portfolio website using Material Kit React in a few hours?
published: true
description: Using Material UI React to create a static portfolio website and publish on GitHub pages.
tags: #womenintech #portfolio #react
//cover_image: https://direct_url_to_image.jpg
---
### 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](https://type404.github.io/tisa/)
[GitHub Repo](https://github.com/type404/tisa)

#### 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](https://www.codeinwp.com/blog/react-ui-component-libraries-frameworks/) and decided to go with [Material Kit React](https://www.creative-tim.com/product/material-kit-react/?partner=91096) 

2. **Setting it up locally**
I chose the Free download option on the website and followed the steps on the [Docs](https://demos.creative-tim.com/material-kit-react/?_ga=2.87932689.841775929.1595121511-76355822.1594951349#/documentation/tutorial) to set up the project locally. It looks exactly like the [live preview version](https://demos.creative-tim.com/material-kit-react/?_ga=2.116022031.841775929.1595121511-76355822.1594951349#/). 

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](https://demos.creative-tim.com/material-kit-react/?_ga=2.116022031.841775929.1595121511-76355822.1594951349#/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](https://dev-to-uploads.s3.amazonaws.com/i/95bp3xxy8a56j62msc8w.PNG)
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](https://dev-to-uploads.s3.amazonaws.com/i/q7m0fmjaedogzqbte6li.PNG)

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](https://code.visualstudio.com/docs/editor/editingevolved)_
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](https://dev-to-uploads.s3.amazonaws.com/i/6frwh5gemgeamixsz1hc.jpg)

6. **Using Material UI components**
This Material UI React component has been built using [Material UI](https://material-ui.com/) and I had a whole range of styles available to use from there as well. I went through the [documentation](https://material-ui.com/components/lists/) and picked up the components I wanted and imported them in my file(_below screenshot_).
 ![Material-UI](https://dev-to-uploads.s3.amazonaws.com/i/avqo6wnklm8vxpphwaha.jpg)

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](https://dev.to/yuribenjamin/how-to-deploy-react-app-in-github-pages-2a1f) 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.