Building a personal inspiration site as a COVID-19 Project.

We’ve been locked down, we couldn’t go out (much), you know the story. You’ve heard it 1000 times. After watching a lot of Netflix, reading a couple of books I decided to try and do something productive.

My goal was to build a simple screensaver for MacOS that displays random quotes in a pretty interface to help me get motivated to get back to work and get stuff done. So I downloaded XCode and then realised I had absolutely no idea what I was doing. So I hit google, got stuck in, persevered and then gave up because I still had no idea what I was doing.

So I went back to something I knew but hadn’t done for quite a while. I decided to take the same idea and make it in website form with PHP, MySQL and Bootstrap 4. I haven’t done that much web development over the past 4-5 years and front end development has changed a lot.

I started with templates to make it easier for myself and the goal was to create a website that would load up a random inspirational/motivational quote when you visited it. Rather than have the cheesy imagery you see to go alongside the quote, it would just be a really simple design made up of two colours inspired by an amazing colour resource I found by designer Tobias Van Schneider. The colour scheme also changes each time you load the page so it feels fresh and different, rather than just another quote. The idea is that I or someone else can simply log on, get a bit of inspiration and then move on.

I didn’t stop there though, I felt it needed a backend so I could delete quotes if their authors turned out to be racist or something worse. It is 2020 after all. I also wanted to carry the same colour scheme through the back end as well.

Once I got the hang of bootstrap it was fairly effortless to design. I didn’t want to use any images, so all icons including the light bulb logo are served from the free edition of font awesome which is easy to implement and the icons are really well done. I also used tooltips to explain what buttons do, rather than have labels. Again this was easily achieved with Bootstrap 4.

And that pretty much sums the whole project up. Here’s a few more screenshots. You can view the site at https://altl.io

I hope it helps you if you need a little inspiration.

Leave a Reply

Your email address will not be published. Required fields are marked *