Personal portfolio
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
bower_components
data
helpers
source
.gitignore
.hound.yml
Gemfile
Gemfile.lock
README.md
bower.json
config.rb
config.ru
index.html
rakefile.rb

README.md

Portfolio Site

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

Setup, Server and Deployment

Setup

git clone git@github.com:lennonzf/lennonzf.github.io.git
cd lennonzf.github.io
bundle install
bower install

Run the server

Please note the development branch is source-code

middleman server

Deploy to master

middleman deploy

The Site

Site: http://lennonzf.com/

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

Under Development

My site is continuously developed and maintianed by myself.

Motivation

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.

Goal

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

Stylesheet

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

Inspiration