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

git clone [email protected]:lennonzf/lennonzf.github.io.git
cd lennonzf.github.io
bundle install
bower install

Please note the development branch is source-code

middleman server

middleman deploy

Site: http://lennonzf.me/

GP Pages Link: https://lennonzf.github.io/

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 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.

• Github & Github Pages - version control and hosting the development site
• Middleman - building and deploying the site
• SASS and SCSS Syntax - stylesheet preprocessor
• Sketch - design
• Sublime Text 3 - coding
• Hound - automated pull request review tool maintained by Thoughtbot
• Bower - package manager for the front-end plugins

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.

• 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

• Harryhon - idea of the new identity
• Mailchimp Patterns Library - style guide
• TINGYU LI - case study story telling