UniverseSite 2.0
In the beginning there was UniverseSite 1.0
Back in 2011, I finished my first year of university at the end of April. This meant that, apart from a short 3 week term some time in June, I would have no obligations for studying or work until I started my new job in September and the second year of university in October.
So I decided to make good use of this time and do something that I always wanted to do: build a website. Not only would this pass the time a bit, it would also allow me to develop my PHP skills (as well as HTML and CSS) as this would be a big part of my job in that September.
UniverseSite was born.
I was pretty excited at the time despite how rubbish it looked. I even made a 'trailer' video for it (this is a bit embarrassing):
You can see the very first design. I was pretty proud of it at the time. Especially the 'Read Me Later' functionality which let you save bookmarks until you closed the browser (a good chance to learn about sessions). The menu was manually built with jQuery and :hover in the CSS and all the graphics and artwork was created by me (obviously after I discovered the 'lens flare' feature).
Over the months that followed, I built on it and improved it. As I learnt new things, I would practice on this site. The menu was redone, the homepage improved more than once and a whole section just on the constellations was added.
As you can see, an improvement to what was in the trailer! Although 'StarSite' looks particularly bad.
But development eventually fizzled out. A combination of constant university deadlines and working 4 days a week, meant I had little time for side projects. I left it online as I still wanted to work on it eventually, it was just finding the time.
First attempt of UniverseSite 2.0
In the summer of 2013, I was ready to have another go. This time, I wanted to put all I had learnt in the previous 2 years into practice and rewrite the entire code base of the website.
I made good progress. I even posted this picture in the Facebook group:
I felt a the time that this was a massive improvement. Brighter, wider and cleaner. I think I also had 'mobile responsiveness' in mind as I made it.
I can not remember why this version was never finished. But it didn't make it online. Maybe I ran out of time before I restarted university, or maybe I ran out of steam. Either way, the "version 1" of UniverseSite remained online and this version never made it online.
The real UniverseSite 2.0
Fast forward 3 years and 5 years after originally starting and UniverseSite 2.0 is finally done and released. My motivation this time came from the fact that my hosting renewal with iPage was coming up and they had doubled their price! It was fairly expensive before but now it was ridiculous.
In the years since my first attempt, I had learnt a lot about how to configure the server on which web systems run both on AWS and more recently on Digital Ocean. I no longer needed the restricted shared hosting solution that iPage provided. I want full root access to my server so I can decide what to install and not install.
And so I started again. Opened a new project and built UniverseSite again from scratch. I had a deadline which was the end of May when the hosting was going to be renewed.
I built it from scratch as I wanted to make it in the same way I made Taylor's Cards website. Using Silex framework for the routing, Bootstrap for the responsive layouts and Twig to build the templates in. I even restructured the database. The only thing that I kept was the data and the content - although I wanted to review this at some point, this task had to solely be about rewriting the code base.
The new article page:
New constellations page:
As you can see, I kept the base dark blue colour but didn't overuse it making the site much brighter. Some of my favourite features are:
- The images on the article page are on a responsive carousel using a library called Slick. On the desktop, you see 4 images in one go, on the mobile, this shrinks to 1 image.
- The constellation page was probably the worse part of the original site. It has been given a much needed make over and that allows you to switch from list view to grid view. Look, the filters even line up with each other.
- The URLs now more RESTful. Instead of ?article=earth, it is /planets/earth. Don't worry, ?article=earth will redirect to its correct new URL.
- It is way more mobile responsive. Using Bootstrap for the templates means that it automatically will deal with all of the re-sizing business for you.
- Running on the latest LAMP stack: PHP 7.0 (although the code is not really PHP 7.0 and compatible with 5.3 probably), MySQL 5.7 and Ubuntu 16.04.
Overall, I am just so happy with the way that it now looks. I am now actually proud to show someone this along with my other sites. I was a little sad to see my first website be replaced, that code represented a very young version of me at the very beginning of my career.
The Future
So what is next for UniverseSite? Well, from the very beginning, it was a place for me to put into practice what I had learnt and this is somewhat going to continue.
I have always wanted to implement a search feature and quite recently I have had the desire to learn about Elastic Search. Now that I have full control of the server and shiny new code base, this is now way more possible.
Other than that, I do not know right now how it will continue to evolve. It will always be "My First Website" and so will always have a spot in my heart.