index.html

---
layout: default
---

<header class="masthead">
    <div class="container h-100">
        <div class="row h-100">
            <div class="col-lg-7 d-flex flex-column my-auto">
                <div class="header-content mx-auto">
                    <h1 class="mb-5">The Percentage Project</h1>
                    <a href="#about" class="btn btn-outline btn-xl js-scroll-trigger learn-btn">Learn More</a>
                </div>
            </div>
        </div>
    </div>
</header>

<section class="about" id="about">
    <div class="container text-white">
        <h2>%</h2>
        <p class="text-white">The Percentage Project is an artistic, visual outlet for data collected from an
            anonymous survey of Computer Science students each year. The goal is
            to showcase data along with advocates to put a face to a number; we aim to encourage reflection upon
            the situations of minorities affected by microaggression, discrimination, and for what could be done to
            alleviate these instances.</p>
        <a alt="Click here to see the gallery of participating students." href="#gallery"
            class="mr-2 btn btn-outline btn-xl js-scroll-trigger ">Gallery</a>
        <a alt="Click here to find out how to contact us." href="#contact"
            class="ml-2 btn btn-outline btn-xl js-scroll-trigger">Contact</a>
    </div>
    <div class="overlay"></div>
</section>

<section class="contact" id="contact">
    <div class="container text-white">
        <h2>Contact</h2>
        <p class="text-white">
            If you are interested in participating or bringing The % Project to your campus, shoot us an email.<br />
            <a href="mailto:hello@percentageproject.com">hello@percentageproject.com</a>
        </p>
    </div>
</section>

<section class="gallery features mb-5" id="gallery">
    <div class="dropdown year-selection">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="true">
            Latest gallery
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            {% for year in site.years %}
                <a href="#" class="dropdown-item js-gallery-trigger" data-value="{{ year.year }}">{{ year.title }}</a>
            {% endfor %}
        </ul>
    </div>
    <img class="loading" src="{{ '/assets/img/dribbble.gif' | prepend: site.baseurl }}" />
    {% for year in site.years %}
        {% if year.published %}
            <div class="container">
                {{ year.content }}
            </div>
        {% endif %}
    {% endfor %}
</section>

<script>
    $(".dropdown-menu .dropdown-item").click(function () {
        event.preventDefault();
        $(this).parents(".dropdown").find('.btn').html($(this).text() + ' gallery <span class="caret"></span>');
        $(this).parents(".dropdown").find('.btn').val($(this).data('value'));
    });

    var $current = $('.latest-photos');

    if ($.browser.mobile) { // only need this to be called once and not dynamically because its unlikely that one would suddenly change their user agent
        $('body').addClass('mobile');
    }

    // init Masonry
    var $grid = $current.masonry({
        itemSelector: '.masonry-item-loaded'
    });
    

    var setUpLazy = function() {
        $current.find('.card-img-top').Lazy({
            afterLoad: function (element) {
                $newItem = $(element)
                    .closest('.card-outer')
                    .addClass('.masonry-item-loaded');

                $grid.masonry('appended', $newItem);
            },
            onFinishedAll: function () {
                $('.loading').fadeOut();
                $current
                    .addClass("already-loaded")
                    .fadeIn();

                $grid.masonry('layout');

            },
            onError: function (element) {
                console.log('error loading ' + element.data('src'));
            }
        });
    }

    $(function () {
        setUpLazy();
    });

    // when we resize re-layout masonry
    $(window).on("resize", function () {
        $grid.masonry('layout');
    });

    $('.js-gallery-trigger').click(function () {
        // we are "Loading" again
        $('.loading').fadeIn();
        // hide from user
        $current.fadeOut();

        // get set of photos
        var year = $(this).data('value');
        $current = $('.' + year + '-photos');

        // destroy rid of old masonry
        $grid.masonry('destroy');

        // set up new masonry
        $grid = $current.masonry({
            itemSelector: '.masonry-item-loaded'
        })

        // load photos
        if ($current.hasClass("already-loaded")) {
            $('.loading').fadeOut();
            $current.fadeIn();
            $grid.masonry('layout');
        } else {
            setUpLazy();
        }

    })

</script>