Personal portfolio
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

Portfolio Site

Hey there, thank you for stopping by and taking a look at my portfolio site.

Setup, Server and Deployment


git clone
bundle install
bower install

Run the server

Please note the development branch is source-code

middleman server

Deploy to master

middleman deploy

The Site


GP Pages Link:

Under Development

My site is continuously developed and maintianed by myself.


This is the second iteration for my personal portfolio site. Back in time, when I was building my first site, I haven't quite mastered all the skills required to build a site. Therefore, my first site was built based on a Bootstrap template named Freelancer.

By learning and practicing more, I feel it's the right time to build a new site from scratch with a bunch of handy techs. Also, I am aiming to make a shift from an aesthetic focus desginer to a proper User Experience oriented designer. So, here goes the new site you are seeing now.


By designing and coding up the site, I am aiming for these goals:

  • keep improving the website (you can find all the issues I am looking into in here)
  • Design a portfolio site with a focus on demonstrating my UX skills
  • Practice minimal design
  • Refresh my visual identity (e.g. logo)
  • Build a site from scratch
  • Get familiar with website building process from desgin to deployment
  • Learn and use Middleman
  • Learn and use Github and Github Pages
  • Learn and use Flexbox
  • Practice SASS with SCSS syntax and functional CSS
  • Develop a style guide (live here)
  • Add an automated testing tool Use hound for reviewing pull requests (mainly HAML and SCSS) and act on the comments
  • Use Bower for managing the front-end plugins
  • Add proper social media metadata to enhance the SEO of the site
  • Start using Github as a project management tool
  • Learn to create custom helper function in Middleman
  • Learn to use partials, layout and data in Middleman
Special Thanks

Special Thanks to Felix Lee, who inspired and encouraged me to build the site; Kian Zhu, who provided a huge amount of feedback and patience to me.

Tech Stack & Tools


The stylesheets of this site follows the spirit of SMACSS (Scalable and Modular Architecture of CSS). By using the structure, lines of CSS can be kept at a minimal number. The ability to reuse the classes increase the flexibility as well as maintainability.

The stylesheets in this project is created collaboratively by Felix Lee and myself.

Plugin & Resource

  • Formspree - contact form
  • Smooth Scroll - better internal link scrolling experience
  • Prism - code snippet and syntax highlighting
  • Sticky-kit - make sticky elements
  • Headroom.js - better user experience on the top navigation bar when reading the articles
  • Unsplash - stock image with great quality