Hey there, thank you for stopping by and taking a look at my portfolio site.
Setup, Server and Deployment
git clone email@example.com:lennonzf/lennonzf.github.io.git cd lennonzf.github.io bundle install bower install
Run the server
Please note the development branch is
Deploy to master
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
Tech Stack & Tools
- 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.
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