Jun Tan

This Site

You're reading this post on the third iteration of my portfolio site. Since its inception in December 2015, the site has gone through three major redesigns, one backend overhaul, and multiple minor changes that have coalesced into what it is today. It's been an interesting process building this, especially because portfolio sites are such faithful representations of ones' personal visual style and design preferences. Over time, I'm able to see those shift flow from different trends, ideas, and move from one source of inspiration to the next.

V1: Sweet (sort of) and simple

I realised I needed a personal portfolio site on one night in December, as I was completing an application for an internship; figuring that it would look good to have built my own site, and feeling the need to consolidate my portfolio from three sites to one, I made a pot of coffee and set out to build a website.

Built in Jekyll and hosted on GitHub Pages, the first iteration of the site was a hands-on experience in learning the ins and outs of Jekyll as a static site generator. I used Pixyll, a pre-built Jekyll theme, and began making my own changes on top of it. Even though the site was functionally complete and able to satisfy its purpose, I knew that it was missing the visual flair and technical complexity that I wanted to demonstrate for myself.

V2: More concepts, more complex

The conceptual drawings for the second iteration of the site came about during the summer of 2016, where I was travelling between Texas, Massachusetts, and then China. With lots of free time to kill on plane rides, I decided to re-do my site and figure out a new visual brand for myself. The sketches below were created as a way to introduce more colour and graphic playfulness into my online presence while remaining relatively muted in contrast and brightness.

The final site that was put into production, however, came about in a three-week code sprint in September of 2016. Realizing that I needed to actually *build* a site in time for career fair, and relatively disillusioned with the original sketches, I decided to take a completely different route and re-drew the entire website. The front-end was created within the first week, and then content production and filling took two more weeks to finish. Ultimately, I had an easily-deployable Jekyll portfolio that allowed for searching, content organization, as well as an interactive UI that lazy-loaded images. A problem, however, remained; it was difficult to post new content as everything was done in markdown, which started to strain my ability to add new items to my portfolio. That, for me, was something to be fixed in the next iteration.

Version 3: Playful

Conceptual drawings for version 3 came about during my summer internship at Textron, where I had lots of time after work to focus on personal projects. Inspired by several items on Behance that used muted greys and blues, and wanting to create a bit of contrast between washed-out and vibrant colours, I drew sketches of a site that would not only have a dynamic, animated logo, but also various interactive UI components including a skills pop-out. The Django backend, meanwhile, would provide a WYSIWYG editor that solved the issue of trying to write everything in Sublime Text.

The logotype:


Designed to break into three pieces in animation, I wanted a recognizable logo that could be reused across multiple domains and contexts.

The bright, vibrant colour scheme contrasting with pure white and black values allowed for a visual contrast that wasn't so present in my earlier designs.

Initial designs focused on presenting as much information as possible on one page, an approach which I soon became disillusioned with.

Today: cleaner, more efficient

As I worked through building the front-end code for the third iteration, I realized that a lot of the complexity of the UI elements were completely unneeded. Instead of focusing on desktop, I needed to create a site that would break down not only responsively but also efficiently across multiple platforms, creating the same experience for someone viewing from their phone as well as their iMac. 

With inspiration from Brutalist Websites, I set out to create a site that was as simple and as beautiful as possible, with the most important information easily found and extracted from the page. With mockups that adopted a simple black-and-white colour scheme, as well as a highlighter yellow for accenting, I found the correct balance of visual uniqueness and simplicity that worked perfectly for me.

As one can see, the site you're reading this on is built to the exact same specification of the mockup (almost pixel-by-pixel). The technical challenges, then, lay in creating a backend that could handle multiple image uploads and edit traffic without locking up. I built the site's framework with Django because of my familiarity with the framework, and deployed on Heroku—compared to DigitalOcean, it's an absolute breeze. I chose to use Amazon S3 for asset storage, and interfaced an S3 bucket with my Django project.

Today, the site is robust, easily editable and extendable, and visually beautiful.