Portofolio Site

This is the first time to have a portfolio site with my own domain and server. It is flexible to use WordPress and customized theme which means I can effectively update on the back-end. In addition, Bootstrap Grid System is used to handle the layout, so that it is suitable for different size devices as a responsive website.

ToolKit

https://sunnyxue.com/wp-content/themes/dimension_sHTMLhttps://sunnyxue.com/wp-content/themes/dimension_sSasshttps://sunnyxue.com/wp-content/themes/dimension_sjQueryhttps://sunnyxue.com/wp-content/themes/dimension_sBootstraphttps://sunnyxue.com/wp-content/themes/dimension_sPHPhttps://sunnyxue.com/wp-content/themes/dimension_sWordPresshttps://sunnyxue.com/wp-content/themes/dimension_sPhotoshop

Website On Devices

 

Project List Filter

When doing the project list filter function, instead of using plugin or extension, I code the filter function by myself with jQuery.

Here is the simple description how I did it.

  1. Use the WP_Query function to get the project list object from the database.
  2. With the jQuery.data( element, key, value ), the single project category name(WordPress, jQuery, React, etc. )can be stored in the specified element.
  3. Binding the function to category tag buttons about looping the project list object to get the same value as the tag name.
  4. Finally, using hide() function to hide the already output list and fadeIn() function to show the specified tag list the user chosen.