Design My Portfolio

How my portfolio (Where you're right now!) was designed and built!

Time: December 2015 - January 2016

Team: Myself and Sam Tung (My best friend who gave me incredible technical support)

Tools: Paper & Pen, Sketch App, Photoshop, Illustrator; JavaScript (JQuery.js, D3.js), HTML5, CSS3, Bootstrap

Product: My Portfolio website you are currently on

Understanding Users

This website was built for job searching purposes. The primary purposes for people who come to my website:

Design Concepts & Elements

I used minimalist web design principles to design this website. I want my users to get to the point and find what they need right away without much distractions. So I reduced the elements of my website to the ones that are truly needed, so users can interact with less clicks:

About me: I originally envisioned this section to be a separate page, but then I realized people may be interested in my portfolio more. The current design is a small section on the homepage that gives users a quick idea of who I am without distracting them too much. The design of this section was inspired by Tingting Wu's portfolio.


Contact: A necessary section for every personal website. I left my contact information with social networks. I didn't use forms, because my personal experience is that most submitted online forms will end up in black holes.

Resume: After seeing many online portfolios, I found that linking resume to a pdf file is a more conventional design. It's easy for people to download or print. So, for this section, I believe following the convention is a good choice.

Design Process

I. Paper sketches

II. Sketch Application:

Screen capture for Sketch art boards
Fig 1. Screenshot of Different Artboards in Sketch Application

Screen capture for a sample artboard
Fig 2. Sample Artboard: High Fidelity Prototype - Iteration 3

Screen capture for a sample artboard
Fig 3. Sample Artboard: Navigation Bar Design Variations

Logo design
Fig 4. Site Logo Designs: After Navigation Bar Shrink, Before Shrink, Browser Tab Logo

Updates - Google Analytics

Purely out of curiosity, I incorporated Google Analytics for my website. It is lots of fun to get to know what kinds of users are visiting my website. I added a couple of images below. It seems like if you are browsing this page right now, you are most likely:

One google analytics report screen
Fig 0.1. Screenshot of Google Analytics Report for My Homepage

Another google analytics report screen
Fig 0.2. One Interesting Google Analytics Report

Note: Google Analytics is a powerful service, and one question I have is that some of this data is probably generated by myself, as I need to constantly check if my portfolio is updated. How can I identify and separate my data from everyone else’s? Please let me know if you get an idea.

Special Thanks!

Special thanks to my friends Sam Tung, Lauren Tonge, Geoffrey Goh, Saumya Bhatt, Cynthia Todd, and all other friends who gave me incredible technical, design, and writting support.

This website wouldn't be done without their help. :)