index.html

---
layout: shade
title: 30 Days - GLSL Gallery
---
<p class="spacing">Below is an interactive list of over 30 shaders created in GLSL over the course of 31 days in January 2019 for shits and gigs. Don't expect code to be commented or good; these are just rough sketches. <em>Click on any of the shaders to view and play with their code</em>.</p>
<p class="spacing">If you're interested in <a href="https://github.com/willstall/30-days-of-shade/blob/master/README.md" alt = "learn to write shaders">learning how to write shaders</a>, you can find a nice cheat sheet and <a href="https://github.com/willstall/30-days-of-shade" alt="learn to write shaders">all my code on github.</a></p>

<div class="grid">

    {% assign shaders = site.data.shaders | reverse %}
    {% for shader in shaders %}
    <div id="copy" class="grid-item center spacing font-heavy">                
        <div class="shader">                
                <a href={{ "/editor.html?file=" | append: shader.path|page.url|relative_url}}>
                <div class="shader-hover img"><i class="fas fa-cog fa-5x"></i></div>                
                <!-- <img class="img" src="assets/imgs/placeholder.png" /> -->
                
                <video class="img" autoplay loop>
                        <source src={{ shader.movie | page.url |relative_url }} type="video/mp4">
                </video>
                </a>
        </div>
        <div class="shader-menu">
            <div class="left"><h3>{{ shader.name }}</h3></div>
            <div></div>
            <div class="right">
                <nav>
                    <a href="https://github.com/willstall/30-days-of-shade/blob/master/{{ shader.path }}"><i class="fas fa-file"></i></a>
                    <a href={{ "/editor.html?file=" | append: shader.path|page.url|relative_url}}><i class="fas fa-cog"></i></a>
                    <!-- <a href="#"><i class="fas fa-eye"></i></a> -->                    
                    <a href="{{ shader.twitter }}"><i class="fab fa-twitter"></i></a>
                    <a href="{{ shader.instagram }}"><i class="fab fa-instagram"></i></a>
                </nav>
            </div>
        </div>
    </div>
    {% endfor %}

</div>