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