{% set page_title = 'Creative Designer Portfolio' %}
{% set header_show = true %}
{% set header_subtitle = 'Charles Leonard' %}
{% set header_title = 'ui/ux  designer' %}
{% set header_image = 'assets/images/demo-creative-designer-header.jpg' %}
{% set header_size = 'full' %}
{% set header_text_color = 'text-white' %}
{% set header_parallax = true %}
{% set nav_opaque = false %}
{% set nav_transparent = true %}
{% set nav_white_text_on_top = true %}

{% extends 'layouts/layout-creative-designer-portfolio.html' %}

{% block content %}

    <!-- START: Links Row  -->
    <div class="nk-links-row bg-dark text-white">
        <div class="container">
            <ul>
                <li><a href="demo-creative-designer-portfolio-works.html">Web / Interactive</a></li>
                <li class="nk-links-row-separator"></li>
                <li><a href="demo-creative-designer-portfolio-works.html">Graphic Design</a></li>
                <li class="nk-links-row-separator"></li>
                <li><a href="demo-creative-designer-portfolio-works.html">Web Development</a></li>
                <li class="nk-links-row-separator"></li>
                <li><a href="demo-creative-designer-portfolio-works.html">Game / Illustration</a></li>
            </ul>
        </div>
    </div>
    <!-- END: Links Row  -->

    <!-- START: Resume -->
    <div class="container text-center">
        <div class="nk-gap-6"></div>
        <div class="row">
            <div class="col-md-8 offset-md-2">
                <h3 class="fw-500 lh-35"><em>I'm a professional UI / UX, Web & Graphic Designer from San Francisco. I create web sites, mobile interfaces and user experiences that are meticulously researched and thoughtfully designed.</em></h3>
            </div>
        </div>
        <a href="#" class="nk-btn nk-btn-no-bg text-main mt-10"><span class="pe-7s-download"></span> Download Resume</a>
        <div class="nk-gap-5"></div>
    </div>
    <!-- END: Resume -->

    <!-- START: Works -->
    <div class="nk-portfolio-list nk-isotope nk-isotope-2-cols bg-dark-1">
        <div class="nk-isotope-item" data-filter="Branding">
            <div class="nk-portfolio-item nk-portfolio-item-info-style-1-a hover">
                <a href="demo-creative-designer-portfolio-work-single-1.html" class="nk-portfolio-item-link"></a>
                <div class="nk-portfolio-item-image"><div style="background-image: url('assets/images/portfolio-single-style-2-1.jpg');"></div></div>
                <div class="nk-portfolio-item-info nk-portfolio-item-info-bottom">
                    <div>
                        <h2 class="nk-portfolio-item-title h3">New Magazine</h2>
                        <div class="nk-portfolio-item-category">Branding</div>
                        <div class="nk-portfolio-item-letter display-extra-big text-main">N</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="nk-isotope-item" data-filter="Photography">
            <div class="nk-portfolio-item nk-portfolio-item-info-style-1-a hover">
                <a href="demo-creative-designer-portfolio-work-single-2.html" class="nk-portfolio-item-link"></a>
                <div class="nk-portfolio-item-image"><div style="background-image: url('assets/images/portfolio-single-style-2-2.jpg');"></div></div>
                <div class="nk-portfolio-item-info nk-portfolio-item-info-bottom">
                    <div>
                        <h2 class="nk-portfolio-item-title h3">Apple Watch</h2>
                        <div class="nk-portfolio-item-category">Photography</div>
                        <div class="nk-portfolio-item-letter display-extra-big text-main">A</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="nk-isotope-item" data-filter="Print">
            <div class="nk-portfolio-item nk-portfolio-item-info-style-1-a hover">
                <a href="demo-creative-designer-portfolio-work-single-3.html" class="nk-portfolio-item-link"></a>
                <div class="nk-portfolio-item-image"><div style="background-image: url('assets/images/portfolio-single-style-2-3.jpg');"></div></div>
                <div class="nk-portfolio-item-info nk-portfolio-item-info-bottom">
                    <div>
                        <h2 class="nk-portfolio-item-title h3">Creative Mobile App</h2>
                        <div class="nk-portfolio-item-category">Print</div>
                        <div class="nk-portfolio-item-letter display-extra-big text-main">C</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="nk-isotope-item" data-filter="Web Design">
            <div class="nk-portfolio-item nk-portfolio-item-info-style-1-a hover">
                <a href="demo-creative-designer-portfolio-work-single-1.html" class="nk-portfolio-item-link"></a>
                <div class="nk-portfolio-item-image"><div style="background-image: url('assets/images/portfolio-single-style-2-4.jpg');"></div></div>
                <div class="nk-portfolio-item-info nk-portfolio-item-info-bottom">
                    <div>
                        <h2 class="nk-portfolio-item-title h3">Social Website</h2>
                        <div class="nk-portfolio-item-category">Web Design</div>
                        <div class="nk-portfolio-item-letter display-extra-big text-main">S</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="nk-isotope-item" data-filter="Marketing">
            <div class="nk-portfolio-item nk-portfolio-item-info-style-1-a hover">
                <a href="demo-creative-designer-portfolio-work-single-2.html" class="nk-portfolio-item-link"></a>
                <div class="nk-portfolio-item-image"><div style="background-image: url('assets/images/portfolio-single-style-2-5.jpg');"></div></div>
                <div class="nk-portfolio-item-info nk-portfolio-item-info-bottom">
                    <div>
                        <h2 class="nk-portfolio-item-title h3">Promotional Video</h2>
                        <div class="nk-portfolio-item-category">Marketing</div>
                        <div class="nk-portfolio-item-letter display-extra-big text-main">P</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="nk-isotope-item" data-filter="Development">
            <div class="nk-portfolio-item nk-portfolio-item-info-style-1-a hover">
                <a href="demo-creative-designer-portfolio-work-single-3.html" class="nk-portfolio-item-link"></a>
                <div class="nk-portfolio-item-image"><div style="background-image: url('assets/images/portfolio-single-style-2-6.jpg');"></div></div>
                <div class="nk-portfolio-item-info nk-portfolio-item-info-bottom">
                    <div>
                        <h2 class="nk-portfolio-item-title h3">Photography Website</h2>
                        <div class="nk-portfolio-item-category">Development</div>
                        <div class="nk-portfolio-item-letter display-extra-big text-main">P</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END: Works -->

    <!-- START: Twitter -->
    <div class="bg-gray-4">
        <div class="nk-gap-5"></div>
        <div class="container">
            <div class="nk-twitter-list-2" data-twitter-count="4" data-twitter-template="<div class='nk-twitter'><div class='nk-twitter-name'>{{ '{{screen_name}}' }}</div><div class='nk-twitter-text'>{{ '{{tweet}}' }}</div><div class='nk-twitter-date'><span class='nk-twitter-icon fa fa-twitter'></span> {{ '{{date}}' }}</div></div>"></div>
        </div>
        <div class="nk-gap-5"></div>
    </div>
    <!-- END: Twitter -->

    <!-- START: Let's Work Together -->
    <div class="nk-box bg-dark-1 text-center">
        <div class="nk-gap-5"></div>
        <div class="bg-image bg-image-parallax">
            <img src="assets/images/demo-creative-designer-contact-bg.jpg" alt="" class="jarallax-img">
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-8 offset-lg-2">
                    <h2 class="text-white">Let`s work together</h2>
                    <div class="nk-gap-1 mnt-20"></div>
                    <p class="text-white">Let us know what you're looking for in an agency. We'll take a look and see if this could be the start of something beautiful.</p>
                    <div class="nk-gap mnt-9"></div>
                    <a href="#" class="nk-btn nk-btn-outline nk-btn-color-white">Contact Me</a>
                </div>
            </div>
        </div>
        <div class="nk-gap-5"></div>
    </div>
    <!-- END: Let's Work Together -->

{% endblock %}