Building your personal website

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.
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(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"

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

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.

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

I relied heavily on Font Awesome 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
Animate.style.
Css-tricks.
React Router.
npm.