Chinese Calligraphy Website

Overview

The Chinese Calligraphy Website is a team project, this website project is intended to introduce the masterpiece of Chinese Calligraphy to the public as well as its history and tools. The website is equiped with a user login system which allows users to log in and save their faviourite masterpieces into their personal page. The Website is reponsive designed, we choose a more direct way to display the content in the mobile view, while we have more animation on the larger view.

I served as the full stack developer in this project, which includes Front-end developing(Using HTML5, CSS3, JavaScript, BootStrap, Flask) and Backend developing(MySQL). The hardest thing for this project is the time limits, we only have two weeks to finish it. So we choose Flask as the framework, the MVC model could help us saving time of repeting codes and makes it easier to generate data from the database and display it on the website

Role:

Full Stack Developer

When:

Dec.2015-Jan.2016

Skills:

HTML5,CSS3,JavaScript,JQuery
Boostrap,Flask,MySQL

Bigger View

In the computer view, the menu bar is displayed on the top half of the screen, which is indicated by one of the Chinese symbols-the cloud from Chinese paintings.In the computer view, most of the sections will onlu take portions of the screen so users can get a big picture of the whole webstie in a direct way. In the history page, the history contet could be filtered by different kinds of Calligraphy, the content is lying on the both side of the vertical line.

Contextual Inquiry
Parallel Design

Mobile View

In the mobile view, we use Bootstrap to create the menu bar and make it display at the top right corner of the screen to save some space.In the mobile view of the page, most of the pictures will be take the full width of the screen instead of portion of it, so as the section with the words. For the history page, the history of the Calligraphy is now listed on one side of the screen instead of lying on the both sides of a vertical line

Contextual Inquiry
Parallel Design

User Sysytem

The user have their own profile page, on which they can save their faviorite masterpieces of Chinese Caligraphy and change their password. All the information on the profile page would be stored into the MySQL database and be generated through Flask next time user logged in.