This is an introductory post to all elements provided in the Apes Portfolio Theme and help you start with Markdown.

ELEMENTS

Feel free to use and edit the elements below for your blog posts.

LISTS

To add a list with bullet:

• Item number one
• Item number two
  • A nested item
  • A nested item
• A final item

To add a list with nubmers:

1. Install Jekyll
2. Download and install Crocodile Theme
3. Build your online portfolio

LINKS

There are three ways to add url in your post. - Method 1: Insert the whole url Put the url in this format
[http://zoe4meii.com/portfolio/](http://zoe4meii.com/portfolio/)
The link will be shonw in your post as http://zoe4meii.com/portfolio/.

• Method 2: Define a customized name of your url
  Dongmei’s website

• Method 3: URL as superscript
  Name the url like this
  [Crocodile Wikipedia Reference][^1]]
[^1]: https://en.wikipedia.org/wiki/Crocodile
  The reference link will be shonw in your post as [Crocodile Wikipedia Reference]¹.

IMAGES

With some simple CSS codes, you can add responsive images into your post.

QUOTATION

"It doesn’t matter if the feature an icon represents is immediately and intuitively obvious; what matters is that once you’ve made the link in your head - once you’ve learned what an icon does - some quality of the icon makes that link unbreakable." Susan Kare

FILTER BY TAG

What if you want to present all of your posts and allow your to filter by post tags? We use Isotope Javascript created by Metafizzy (Read more on Isotope GitHub repository.)

In Crocodile Theme, all posts under Gallery were tagged with different subjects, and user may click to see only the categories that they are interested.

First, to tag post with subjects respectively in the post markdown header:

---
layout: project
title:  Add title here
date:   2014-07-25 16:54:46
author: Add name here
categories:
- work
img: sketch-1.jpg
subjects: sketchbook
---

Second, to load the below JavaScript to allow selection:

<script type="text/javascript">

/*################################################################
	JavaScript Isotope to filter gallery works by category
################################################################# */
$(window).load(function(){
    var $container = $('.portfolioContainer');
    $container.isotope({
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
    });
 
    $('.galleryFilter a').click(function(){
        $('.galleryFilter .current').removeClass('current');
        $(this).addClass('current');
 
        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
         });
         return false;
    }); 
});

</script>