DEV Community

loading...
Cover image for Building your  personal website

Building your personal website

mandareis profile image Amanda Updated on ・4 min read

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.

carousel-high-five

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

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!
divs-transition

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.

Discussion (1)

Collapse
pablotz profile image
Pablo Hernández Castillo

Thanks for make this post!
I was very lost to search how to start my personal website and you give me all the information and different things to search.
Awesome ❤

Forem Open with the Forem app