我有一个代码库，但必须加入我的网站的其余部分

Question

这是独立图库代码的链接：http://codepen.io/giuliachristie/pen/QbjypG/

＆＃13;

＆＃13;

<section id="projects">
    <center>
        <div id="SectionTitle">Alguns trabalhos</div>
        <div id="line-black"></div>
    </center>
    <div id="col-md-3">
        <div class="grid">

            <li data-tags="Print Design">
                <figure class="effect-zoe">
                    <img src="http://www.addictedtoibiza.com/wp-content/uploads/2012/12/example.png" alt="img25" />
                    <figcaption>
                        <h2>Creative <span>Zoe</span></h2>
                        <p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>
                    </figcaption>
                </figure>
            </li>

            <li data-tags="Print Design, Logo Design">
                <figure class="effect-zoe">
                    <img src="http://www.addictedtoibiza.com/wp-content/uploads/2012/12/example.png" alt="img26" />
                    <figcaption>
                        <h2>Creative <span>Zoe</span></h2>
                        <p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>
                    </figcaption>
                </figure>
            </li>

            <li data-tags="Webdesign">
                <figure class="effect-zoe">
                    <img src="http://www.addictedtoibiza.com/wp-content/uploads/2012/12/example.png" alt="img25" />
                    <figcaption>
                        <h2>Creative <span>Zoe</span></h2>
                        <p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>
                    </figcaption>
                </figure>
            </li>

            <li data-tags="Print Design">
                <figure class="effect-zoe">
                    <img src="http://www.addictedtoibiza.com/wp-content/uploads/2012/12/example.png" alt="img25" />
                    <figcaption>
                        <h2>Creative <span>Zoe</span></h2>
                        <p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>
                    </figcaption>
                </figure>
            </li>

            <li data-tags="Blog, Gráfico">
                <figure class="effect-zoe">
                    <img src="http://www.addictedtoibiza.com/wp-content/uploads/2012/12/example.png" alt="img25" />
                    <figcaption>
                        <h2>Creative <span>Zoe</span></h2>
                        <p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>
                    </figcaption>
                </figure>
            </li>

            <li data-tags="Webdesign, Print Design">
                <figure class="effect-zoe">
                    <img src="http://www.addictedtoibiza.com/wp-content/uploads/2012/12/example.png" alt="img25" />
                    <figcaption>
                        <h2>Creative <span>Zoe</span></h2>
                        <p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>
                    </figcaption>
                </figure>
            </li>

            <figure class="effect-zoe">
                <img src="http://www.addictedtoibiza.com/wp-content/uploads/2012/12/example.png" alt="img25" />
                <figcaption>
                    <h2>Creative <span>Zoe</span></h2>
                    <p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>
                </figcaption>
            </figure>
        </div>
        </center>
</section>

＆＃13;

＆＃13;

＆＃13;

这是整个网站：http://codepen.io/giuliachristie/pen/doPYmw/

请有人帮帮我!!投资组合令我头疼！ 我怎样才能增加过滤菜单？按主题分隔图库图像，如网页设计，博客，图形等。