portfolio.html

---
layout: default
title: Portfolio
section_id: portfolio
works:
 - image: images/@stock/work-2.jpg
   title: AIYINFA OFFICIAL WEBSITE
   link_to: https://medium.com/@33sun/aiyinfa-official-website-319daecb9933#.cap2g8vvm
   klass: graphic-design front-ended
   desc: Graphic Design & Front-Ended
 - image: images/@stock/work-3.jpg
   title: AIYINFA APP
   link_to: https://medium.com/@33sun/aiyinfa-app-dbfcf7e32560#.8dbhoo6u1
   klass: graphi-design product-design
   desc: Product Design
 - image: images/@stock/work-4.jpg
   title: Eat Healthy
   link_to: https://medium.com/@33sun/eat-healthy-aff648f9afd3#.j6yeghavk
   klass: product-design product-design
   desc: Graphic & Product Design
 - image: images/@stock/work-8.jpg
   title: Vsport
   link_to: https://medium.com/@33sun/vsport-32f8c065ae40
   klass: graphic-design product-design
   desc: Graphic & Product Design
 - image: images/@stock/work-1.jpg
   title: ReapGirls
   link_to: https://medium.com/@33sun/reapgirls-card-design-e0e559bde84f#.viok85e4g
   klass: graphic-design product-design
   desc: Graphic Design
 - image: images/@stock/work-5.jpg
   title: Mini Run
   link_to: https://medium.com/@33sun/mini-run-818bc4949948#.76h7mmwkz
   klass: graphic-design
   desc: Graphic Design
 - image: images/@stock/work-7.jpg
   title: Design Resources
   link_to: https://github.com/timmy3131/design-resource
   klass: graphic-design
   desc: Design
 - image: images/@stock/work-6.jpg
   title: Taipei Design
   link_to: https://steller.co/s/5gySn4kMPEm?from=timeline&isappinstalled=0
   klass: photography
   desc: Photography

---


<div class='full parallax' style='background-image: url(images/@stock/portfolio-header-bg2.jpg); color: #fff;'>
  <div class='row'>
    <div class='large-12 columns'>
      {% include section-header.html title="MY portfolio" tagline="Have a look at my works" color="#fff" class="big" %}
    </div>
  </div>
  <div class='five spacing'></div>
</div>


<div class='full'>
  <div class='row'>
    <div class='mod modGallery'>
      <div class='gallery-nav'>
        <ul>
          <li class='current'>
            <a data-cat='all' href='#'>All</a>
          </li>
          <li>
            <a data-cat='graphic-design' href='#'>Graphic Design</a>
          </li>
          <li>
            <a data-cat='product-design' href='#'>Product Design</a>
          </li>
          <li>
            <a data-cat='front-ended' href='#'>Front-Ended</a>
          </li>
          <li>
            <a data-cat='photography' href='#'>Photography</a>
          </li>
        </ul>
      </div>

      <ul class='gallery large-block-grid-4 medium-block-grid-3 small-block-grid-2'>

        {% for work in page.works %}
          <li class="{{ work.klass }}">
            <a href='{{ work.link_to }}'>
              <img alt="" src="{{ work.image }}" />
              <div class='overlay'>
                <div class='thumb-info'>
                  <h3>{{ work.title }}</h3>
                  <p>{{ work.desc }}</p>
                </div>
              </div>
            </a>
          </li>
        {% endfor %}

      </ul>

    </div>
  </div>

  <div class='four spacing'></div>
</div>