Hacking a small project over the weekend - A personal projects portfolio web page

This weekend the weather was not encouraging to go outside as you can see below.

So, I decided to hack a small project for fun.

The idea

A few days ago I was looking at a spreadsheet I keep with the list of all projects I can remember I started at some point in my life. I call this document "Personal Project Portfolio".

While looking at some of the projects, I was wondering if I could share them on my blog as it would be nice to have them public so other people can read about them or maybe find some inspiration on non-finished projects.

I don't know why but writing an article listing all these projects didn't appeal to me. Then I thought maybe there's something out there I can use to properly input these projects and get a page listing the ones I mark as public.

And that's the idea, a tool where people can add their projects, maybe elaborate on them over there and share on a public feed of projects the ones that are most relevant.

So, let's go!

A visual idea

First thing I did in parallel of writing this blog post was to open AdobeXD, which is the design tool I'm most familiar with, copy an old project just so I don't start from zero and start wire-framing/mocking the ideas for the final product.

Right at the beginning, I decided to choose the typeface and sizes I'll use in order to keep things consistent.

This article was very nice to understand better how to get typography right on designs: https://www.smashingmagazine.com/2018/06/reference-guide-typography-mobile-web-design/

I was initially doing a black and white mock but then I decide to add some colours to it so it become move live! Why not? It's a hack project isn't it?

During this process I found two very useful tools:

1. https://grtcalculator.com/
   
   This was super useful to help me define a good looking typeface and appropriate sizes.
2. http://colormind.io/image/
   
   This tool was super handy to extract some colours from a nice design I saw on the internet. I liked a lot the colours there, but didn't want to extract them manually, so I just uploaded the file to colormind and voi lá!
   
   The tool gave me the colour pallet I wanted to use very easily. Below you can see the colour palled I'll be using.

Now with Fonts and Colours defined, I moved to layout the presentation on a nice design :)

I also recorded my screen while I was creating the mockup, if you like seeing what happened you can see below:

To be continued...