Today I release my website with blog feature, there is only portfolio feature left. I’d like to share with you few thoughts about my website.
You may wonder what technology I’m using for my personal website, which scores 99/100 Google PageSpeed Insights.
People say we should not care about chasing a grade, 100/100 is not the goal, even none of Google’s websites reach 99/100 (google search just got 71/100 for mobile). However, trying to achieve an as high score as I can is quite fun 
I’ve learned a lot about optimization. I can’t get the last point because I’m using google analytics for tracking the visitors, and this is an external lib that I can’t control the cache expiry date. There is a way to work around but this is such a minor thing, I just don’t want to solve 
like they say “nothing is perfect”, I’m happy with my website.
About the layout of my website, I’m a big fan of lightweight and simplicity, therefore, I want to keep the UI clear & clean. I’m not a web designer but I don’t want my website is just a copy of others. So I’ve spent much effort for every detail on my website to keep it simple and cool.
Finally, I would like to thank the authors and contributors of below awesome libs/tools/assets that help me a lot to build my website.
TECHNOLOGY
Jekyll (for building static web)
http://jekyllrb.com
Github Page (for hosting from your GitHub repository)
https://pages.github.com
Mickey Theme (Jekyll theme that I use to get start my own website)
https://github.com/vincentchan/mickey
Sass (preprocessor css)
http://sass-lang.com
jQuery (don’t need to explain :D)
http://jquery.com
Masonry (cascading grid layout) http://masonry.desandro.com
Swiper (modern mobile touch slider) http://idangero.us/swiper
Remodal (simple popup) http://vodkabears.github.io/remodal
Gulp (task runner)
http://gulpjs.com
- Gulp plugins:
- concurrent-transform
- gulp-autoprefixer
- gulp-clean-css
- gulp-rename
- gulp-sass
- gulp-concat
- gulp-uglify
- gulp-uncss
- gulp-image-resize
- gulp-imagemin
Browsersync (for live-server & for testing UI in multi-devices) http://www.browsersync.io
Snap svg (for svg animation) http://snapsvg.io
Cloudflare (for https & optimization)
https://www.cloudflare.com
Disqus (free commenting service)
https://disqus.com
Codepen (for marking code example)
http://codepen.io
Codrops (a web design and development blog that has great inspirational articles for font-end dev) http://tympanus.net/codrops
GRAPHIC ASSETS
Lato (font)
https://www.google.com/fonts/specimen/Lato
Cabin Sketch (font)
https://www.google.com/fonts/specimen/Cabin+Sketch
Short Stack (font)
https://www.google.com/fonts/specimen/Short+Stack
Icomoon (icons)
https://icomoon.io/app
IMAGES ASSETS
Unsplash (Free high-resolution photos)
https://unsplash.com
Update: September 2, 2016
Now my website is done, I added CV, About, Testimonial, and Portfolio sections. It scores 100/100 Google PageSpeed Insights after I setTimeout 5s for loading Google Analytics script (it’s not important for my website).
I’m really happy with it.
About me
