Style

To create a unique portfolio website, how to make users more focused is my main idea for this project. Oblique rectangle is the main element of the website, changing the angle of the figure a bit can make a big difference in the visual presentation. The color chooses are dark gray and dark red with a little pink, presenting the image of stability and innovation.

Color

Interaction

First, I used an oblique rectangle on my website's header to create more space to set the menu in right-angle direction. The design makes this website look simpler and easier to use. Compared to using the hamburger menu, users can click items in the menu more conveniently.
Second, I used diverse CSS effects on the category items, for example, on the ‘UI/UX’ page, the effect used is Parallax Scrolling, and it is a great type to increase the quality of the preview boxes; on the ‘Animation projects’ page and ‘Editing projects’ page, the image will enlarge when users move their cursor on the preview blocks.
Last but not least, the pop-out effect is applied to the ‘Contact me’ page, so the user can browse the info at anytime without changing pages.

HTML

The most difficult part of the project is to create the oblique rectangle by writing the code. It's important to put the labels on the right layers because I used the masking effect to cover up the place that users don't need. If the label sets on the wrong layer, the background of those unwanted will display in white, but not the color of the page's background.

CSS

It is a must to write codes of different angles of each oblique rectangle to suit the RWD which is complex, therefore, I key every single item to complete the work.

JavaScript

The less JavaScript effect a website uses, the fast loading speed a website will have. So I only use the pop-out effect on the ‘Contact me’ page. Most of the effects can achieve the same goals by using CSS.