Making my personal static page (the second time)

The Second Time

In September 2015, I decided it is time to learn more about frontend development by making my own website, without all the traditional learning such as steps by step like Codecademy or following an online tutorial.

I went into the dark and figured my way around it and I was never proud of it. Despite a lot of effort went into it, it was a well-developed template where I switched out the colour palette and profile pictures. It simply wasn’t my design.

My personal site, made in September 2015

In the next several months, I thought long and hard with research, about web design and development. I wanted to learn more about jQuery, Javascript and APIs, below is all the themes I thought for my most recent personal site in chronological order :

  1. Split design: to show my interest in both web design and development
  2. Day and night theme: to have dynamic content to illustrate my love for web design and development.
  3. Grid background: to share my favourite Instagram uploads, and an overlap text design to display information about myself.

I went for the third one, as it felt it is the more appropriate design where it is simple to read, and my personality and memories shared in a glance.

I started with a blank Bootstrap template, The Big Picture <> and using Instafeed.js <> with a custom Javascript file to generate the background. It took a while to figure out how to put the Instagram posts into the Bootstrap column grid, but I got there by referencing the grid formula in the template part of custom Javascript file.

The part I spent most of my time improving, was the custom CSS part where I tried to stick to the DRY (Don’t Repeat Yourself) philosophy and I was happy that it may not be perfect, I have managed to stick to it over the course of compiling the file.

After two and a half days of solid building and refining, I have a final product where I am proud of and I can’t wait to build something else this year.

Personal site, made in April 2016

If you are interested in checking out the source files, click here to see the repo on GitHub.

Like what you read? Give Jaycee Cheong a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.