Tianci Zhang

Tianci Zhang portfolio

Website Design – With Grid System Template

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.

UX/web project
Web project


The first time that I heard about grid system was from Youtube. I was so excited and couldn’t wait to embrace this groundbreaking web development concept. At the same time, I was in need to build a project showcase. That is how this site was born.

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


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 – Side project update

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.