Building your  personal website
Tags: react, newbie, website, webdev
Published: 2021-01-06 19:16:46

As I approach graduation day at my boot camp, I decided to work on my brand. Over the holidays, I started building a website to display all of my work.
It was time to put everything I had learned to the test. 
This blog post is about the experience and the tools that I used along the way. Please note that this is my personal experience and not a set of guides, but I do hope you take something from this. 

I figured that the first step was to get excited about this, and everything would fall into place.
Well, it turns out that coming up with designs for websites is a tough thing to do. I had these half ideas of where I wanted certain elements, styles, and colors to go, but I couldn't see the big picture. 

So I started looking for inspiration online. I looked through Pinterest, searched for people's portfolios, and eventually landed on a website called [Dribbble](https://dribbble.com).
Dribble is a website for designers to share and promote their work as well as hire a designer. You can look through the explore tab for the popular design and designers or research specific themes. 
I knew I wanted something minimalistic and easy to navigate.
After only a few minutes of looking through the designs, I knew where I wanted to start!
Behold! 

I had a black background!

Kidding! 

I mean, the background is black, but I did feel inspired enough to come up with a design. 

So then came the time to begin building the app, using React, of course. I used [Jamboard]("https://jamboard.google.com/")(not my favorite but couldn't think of anything else, neither did I want to pay for an app) and my iPad Pro to start sketching the design, as well as the components I would need. 
The idea was to use React to build the website, but I wanted to add an admin page, so the backend was built with Rails (which is what I am most familiar with at the current time).

I am slowly falling in love with React and had set the goal to learn about Hooks over the winter break.
I knew I wanted to use only Hooks for my small app, and I set out to learn as much as I could. 
So like any React super fan, I started reading the documentation, 
and watched this video(as most people have)
["React Today and Tomorrow and 90% Cleaner React With Hooks"](https://www.youtube.com/watch?v=dpw9EHDh2bM)

Now I got my black background, some HTML, basic CSS, my functional components with their states, and all that is left to do is make sense of it.  I used [Bootstrap](https://getbootstrap.com/) for the basics of adding containers, rows, and columns, but from early on I knew I wanted to do most of the CSS myself. 

The plan was to display every blog post or GitHub link in a beautiful carousel. I wanted to find a library out there that had the code ready and then add the pretty to it, and I did! I found a library for the carousel of my dreams.

![carousel-high-five](https://media.giphy.com/media/9wZIavvv35hM0g7vZJ/giphy.gif)


After a few days of working with the carousel and  I hit tons of obstacles trying to customize it to my liking. 
The lesson there: 
Do a thorough research of the library if you want to implement them on your website. 
In the end, I had to decide to ditch the carousel and build something from scratch. Getting rid of the carousel now meant that the design would be compromised.

![kuzco-sad](https://media.giphy.com/media/Txh1UzI7d0aqs/giphy.gif)

It proved to be an opportunity for me to work with animation and CSS. Also, to learn how to compromise. I was upset I had wasted hours trying to fix something that would not work. However, it provided me the chance to learn about third-party libraries, and sure enough, it came in handy when I had to add animation.

I will be the first person to tell you that I did not know the first thing about animation. I think it's fascinating, but I did not imagine how complex it can be. After exploring multiple libraries, I landed on [Framer Motion](https://www.framer.com/motion/).
Read through most of the documentation and knew it would allow me to do most of the things I needed.

Ta-da! 
I have a nice transition of mouseOver/mouseLeave between divs!
![divs-transition](https://amanda.depaula.xyz/assets/hover-demo.gif)
 
I relied heavily on [Font Awesome](https://fontawesome.com/) for all of the icons you see above and all of the buttons I have on the site. 

The experience of putting together something for myself, exactly the way I wanted was what kept me so motivated. 
I spent a ridiculous amount of hours working on it and I feel really proud of the work I did. None of it was easy, and at times I got so frustrated I just had to walk away. But what I took from this is that I do like coding and learning new things, and after an intense 4 months or so of Bootcamp, it's good to be reminded of that.

I regret to say I don't have the site to link here yet because I am deciding where to deploy it. Once it's out there, I will be sure to refer back to this and link it.

For a list of all other resources used:

[cdnjs](https://cdnjs.com/)
[Animate.style](https://animate.style/).
[Css-tricks](https://css-tricks.com/).
[React Router](https://reactrouter.com/).
[npm](https://www.npmjs.com/).