Personal Website Powered by Gatsby + Contentful + React

Why would I build my own website?

I think of it as building my own house using the raw materials. For a more detailed description of why I decided to build my personal website instead of using something like wordpress, squarespace or webflow, check out this other post.

What I was going to build

I thought about what my personal website needed to do and I determined I wanted it to host my blog and be a portfolio of work and projects I've done. Additionally, the site needed to be responsive for both mobile and desktop and a fast experience for my users. Finally, I was going to take a "mobiel first" approach and design the site thinking proimarily of mobile users.

In a bullet point list I wanted:

• Host Blog
• Host Portfolio of work
• Be fast
• Be responsive for mobile and desktop
• Needs to be in English and Spanish

Once I established what I was going to build, I wanted to figure out how the site would look like to understand a little better what I needed to make it work.

So, I drew it. I drew the site first to have a basic idea of what tools and resources I needed. I wasn't gong to complicate things either. This was the first site I built entirely from sratch.

Once I drew the site (I'll try to find an img and post it), I used Figma to create a mockup of the site. That mockup was the first mockup I created and looked like this.

This is by no means the fanciest thing I've built on Figma. Remember it was my first stab at Figma! Anyways, once I saw what I wanted to build I made a list of the containers/pages and components I needed to build.

The stack

I had done some previous projects with React.js and Gatsby.js, so I decided to use these frameworks again. The Gatsby framework allowed a static site like my own to be lightning fast, satisfying one of the first requirements of the project. Gatsby also has the plus of allowing me to use GraphQL which I found very amazing to use.

From a CSS standpoint, I wanted to learn how to use Styled Components so I decided to use this particular CSS framework.

Next, I needed to figure out how to host content on my site. The simplest thing I could've done was to use was to create the posts on my repo but I wanted to have the experience of using a headless CMS and found the Contentful to be very intuitive (bonus points to Gatsby for also having great documentation on implementing Contentful). So, I'm currently writing this post on Contentful.

Finally, I needed to find somewhere to host this thing. After experience with zeit/now and Firebase, I decided to continue on the serverless trend and use another service called Netlify.

The result

This is what the site now looks like and you'd know, you're on it.

It took me about a month to really get all the pieces together and considering it was my first time creating a site from scratch, I'm fairly happy with my result. Then, like any good project, procrastination happens and I didn't touch the site again for 3 months.

Now that 3 months have passed, I'm happy with the result and will continue adding more projects onto the site as well as more thoughts and continual updates to the site itself.

I did take a screenshot of the audit test for desktop and this is the result as of Friday, Dec 13, 2019:

Upcoming updates

Some of the updates I'd like to see and work on are:

1. Make the site able to change from English to Spanish.
2. Create "tag pages" so I can display all posts with the same tag in a page.
3. Refactor the CSS code. The first go was a bit sloppy and I know I can make it cleaner.
4. Add some CSS animation to the home page, possibly my profile picture.
5. Add Google Analytics.
6. Make the site 100% a PWA.

And that's it! Thanks for reading, and I hope you stick around to read other projects I've worked on and my thoughts.

You can view my site's repo by clicking here. You can also follow me on social networks here: Twitter, LinkedIn.