Creating my Portfolio

When creating my portfolio, I went through many iterations to get my final product and something I could feel good about putting my name on. When creating my projects page, I wanted a way to show my different projects in a clean and organized manner. My first iteration looked like this.

The idea was that the user would see the cards, see the little description with each one and get a small summary, as well as see the repository in Github and see a live demo of the site. There were a few things I liked about this, but there were more things I did not like about this. I liked how you could see everything at once, and you didn’t have to scroll anywhere to get more info. I disliked how the cards would be different sizes depending on how much text was in there. I could fix that by doing a smaller font, but honestly that looked worse. Three projects there looks nice, but if I were to add a fourth would it go underneath all of them? To the side? In the middle? As you can see, there was still some work that needed to be done.

So I broke out my handy dandy whiteboard and got to work. For my opening of the page, I wanted it to say in big letters “Projects” with a little description, as well as a little animation of something going across a picture of a phone, tablet, and desktop, to show responsiveness.

I quite liked the way this could look. With having that be the first thing the user sees, it would make sense to have the projects take up the entire screen. I think showing the user what the project does, rather than forcing them to go to an exterior site is beneficial. Having them stay on my site is what I wanted. For the projects, I wanted them just scroll down from that first page and immediately know what was coming. In big letters what the project is, a slight description, as well as links to the Github and a live demo if the would like. Then, to the side of the description, I would have a GIF just automatically playing so the user could really see what the project can do.

I really liked the way these could look. I took inspiration from the Apple website. I love how each point they are making takes up the entire screen. It shows the importance of what they are saying, and it is definitely something I wanted to replicate.

Finally, it was time to fire up Visual Studio Code and get cracking. React is an awesome library to use for something like this, and his hundreds of different libraries to choose from. I am quite pleased with my final result.