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

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