Website design

Grid System Website

Jun 2017 – Jul 2017

I created this website for myself with HTML, CSS and JS, based on the grid system. This site is hosted on Github, I used it as a showcase of my design work in 2017.


I created my first portfolio in 2016. It was a complete report for my UX project for Clark. As time went by, I got more web/UX work so I was considering to have a romantic look and feel for my portfolio. The second version was built with that idea.

Github is a great place for simple website hosting. I built the site with pure html, css and javascript code, tested with local browsers and push it on the server, it reflected the result immediately (2 min).

Design Process

Site Structure

The site was built with a template. It was belt shaped, so the presentation has better to tell a story that attracted visitors to keep reading. However, to catch their eyes, I would put the latest and best projects in the front.





Code and Test

I coded with local editor and tested with local browsers: Firefox, Chrome and Safari. Also make sure the site was responsive.

Several Updates

Jul. 10 – Site title fixed

Sep.12 – UX project content update

Sep. 13 – Form updated, UX project update, Introduction update

Jan. 8, 2018 – Side project update

Apr. 23 – Add animation to the home button

In the end…

From this project I got more familiar with grid system in CSS and Github. I specially like the CSS overlay effect, which creates filters to your content and photos, giving the whole site a modern looking. The second time of organizing my projects gave me a chance to look back and rethink my design. There was a lot to be improved.

However, the second portfolio site has some shortages. This template is better for photography portfolio, not big projects with a lot of details. A site with menus and jump anchors will be a better choice. Furthermore, as I am adding projects, the belt will be very very long, which will be a tester for visitor’s patience and memory.