From b5202db389e9a7ffbd1492abf5345ad39c4bc707 Mon Sep 17 00:00:00 2001
From: Evan Pratten <ewpratten@gmail.com>
Date: Wed, 9 Sep 2020 12:20:06 -0400
Subject: [PATCH] Make the projects section much more fancy

---
 _includes/footer.html |   3 +
 index.html            | 211 ++++++++----------------------------------
 2 files changed, 42 insertions(+), 172 deletions(-)

diff --git a/_includes/footer.html b/_includes/footer.html
index 92ed5b7..20d7331 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -16,6 +16,9 @@
     integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
     crossorigin="anonymous"></script>
 
+<!-- Masonry for card grids -->
+<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
+
 <!-- Load KaTeX -->
 <script src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" crossorigin="anonymous"></script>
 <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js" crossorigin="anonymous"
diff --git a/index.html b/index.html
index 62ccbf0..a2f0a87 100644
--- a/index.html
+++ b/index.html
@@ -21,8 +21,10 @@ title: Home
             <div class="inner-content-container home-content container">
                 <h1>Who I am</h1>
 
-                <h3>I am a senior-year Highschool student who studies computer science, an intern Technical Director
-                    at <a href="https://industrialbrothers.com">Industrial Brothers</a> and one of the primary software
+                <h3>I am a senior-year Highschool student who studies computer science, just finished a pipeline
+                    internship
+                    at <a href="https://industrialbrothers.com">Industrial Brothers</a> and am one of the primary
+                    software
                     developers
                     writing the code that powers competition-ready robots at <a href="https://github.com/frc5024">Raider
                         Robotics</a>.</h3>
@@ -50,177 +52,31 @@ title: Home
 
                 <div style="padding-top:3rem;"></div>
 
-                <div class="row">
-                    <div class="col-sm-4">
-                        <div class="card home-project">
-                            <div class="card-body">
-                                <h5 class="card-title"><strong>Student Portal</strong></h5>
-                                <p class="card-text">This is a free-to-use webapp that acts as a new frontend to the
-                                    <a href="https://schoolapps2.tvdsb.ca/students/student_login/lgn.aspx">
-                                        TVDSB Student Portal
-                                    </a>
-                                    website. This webapp also includes some extra data and graphs of each student's
-                                    progress through highschool.</p>
-                                <a href="https://studentportal.retrylife.ca" class="btn btn-primary">Open App</a>
-                                <a href="https://github.com/Ewpratten/student_portal" class="btn btn-dark"><i
-                                        class="fab fa-github"></i></a>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col-sm-4">
-                        <div class="card home-project">
-                            <div class="card-body">
-                                <h5 class="card-title"><strong>RetryLife API</strong></h5>
-                                <p class="card-text">If you are looking to build an application that hooks into the
-                                    backend of any one of my services, take a look at the RetryLife API. My backend API
-                                    is edge-cached and CORS-ready for use in any application at any load.</p>
-                                <a href="https://api.retrylife.ca/apidocs" class="btn btn-primary">View
-                                    Documentation</a>
-                                <a href="https://status.retrylife.ca" class="btn btn-dark"><i
-                                        class="fas fa-info-circle"></i></a>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col-sm-4">
-                        <div class="card home-project">
-                            <div class="card-body">
-                                <h5 class="card-title"><strong>Lib5K</strong></h5>
-                                <p class="card-text">Lib5K is the core software library that powers all of Raider
-                                    Robotics' robots. It started as a summer project of mine, and has now been used to
-                                    build high-performance competitive robots, and win some awards along the way.</p>
-                                <a href="https://github.com/frc5024/lib5k" class="btn btn-dark"><i
-                                        class="fab fa-github"></i></a>
-                                <a href="https://frc5024.github.io/lib5k" class="btn btn-dark"><i
-                                        class="fas fa-book"></i></a>
-                                <a href="https://ultralight.retrylife.ca/?a=lib5k&g=io.github.frc5024"
-                                    class="btn btn-dark"><i class="fas fa-download"></i></a>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col-sm-4">
-                        <div class="card home-project">
-                            <div class="card-body">
-                                <h5 class="card-title"><strong>MCInfo</strong></h5>
-                                <p class="card-text">MCInfo is a simple web app for viewing information about any
-                                    public
-                                    Minecraft server or user. The site is powered by the RetryLife API, and
-                                    communicates
-                                    to servers via TCP connections using <a
-                                        href="https://github.com/dinnerbone">Dinnerbone</a>'s Python library.</p>
-                                <a href="https://mcinfo.retrylife.ca/" class="btn btn-primary">Open App</a>
-                                <a href="https://github.com/Ewpratten/mcinfo" class="btn btn-dark"><i
-                                        class="fab fa-github"></i></a>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col-sm-4">
-                        <div class="card home-project">
-                            <div class="card-body">
-                                <h5 class="card-title"><strong>Easy Pose Notation library</strong></h5>
-                                <p class="card-text">LibEPN is a Java library I built that provides a common
-                                    interface
-                                    for working with the position and orientation of objects in 3-dimensional space
-                                    by
-                                    making heavy
-                                    use of Quaternions.</p>
-                                <a href="https://github.com/Ewpratten/libepn" class="btn btn-dark"><i
-                                        class="fab fa-github"></i></a>
-                                <a href="https://ewpratten.retrylife.ca/libepn" class="btn btn-dark"><i
-                                        class="fas fa-book"></i></a>
-                                <a href="https://ultralight.retrylife.ca/?a=libepn&g=ca.retrylife"
-                                    class="btn btn-dark"><i class="fas fa-download"></i></a>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col-sm-4">
-                        <div class="card home-project">
-                            <div class="card-body">
-                                <h5 class="card-title"><strong>Ultralight</strong></h5>
-                                <p class="card-text">Ultralight is a custom maven server that is designed to run on
-                                    machines with very low resources, and almost no storage. I use Ultralight to
-                                    host my
-                                    personal maven repositories, and welcome other people to set up their own
-                                    instances.
-                                </p>
-                                <a href="https://ultralight.retrylife.ca" class="btn btn-primary">Demo</a>
-                                <a href="https://github.com/Ewpratten/ultralight" class="btn btn-dark"><i
-                                        class="fab fa-github"></i></a>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col-sm-4">
-                        <div class="card home-project">
-                            <div class="card-body">
-                                <h5 class="card-title"><strong>GitHub Actions for FRC</strong></h5>
-                                <p class="card-text">A GitHub CI action specifically built for FRC/GradleRIO
-                                    codebases.
-                                    This has been used in production by multiple FRC teams, and has become a core
-                                    tool
-                                    in the Raider Robotics software development pipeline.</p>
-                                <a href="https://github.com/marketplace/actions/frc-build-test"
-                                    class="btn btn-primary">GitHub Marketplace</a>
-                                <a href="https://github.com/Ewpratten/FRC-actions" class="btn btn-dark"><i
-                                        class="fab fa-github"></i></a>
-                            </div>
-                        </div>
-                    </div>
-                    <!-- <div class="col-sm-4">
-                        <div class="card home-project">
-                            <div class="card-body">
-                                <h5 class="card-title"><strong>Remains.xyz</strong></h5>
-                                <p class="card-text">Remains is my first ever web-based multiplayer game. During the
-                                    development process, I learned how to work with Node.js, design load balancers, and
-                                    write algorithms that can handle multiplayer network latency.</p>
-                                <a href="https://remains.xyz" class="btn btn-primary">Play game</a>
-                                <a href="https://github.com/Ewpratten/remains.xyz" class="btn btn-dark"><i
-                                        class="fab fa-github"></i></a>
-                            </div>
-                        </div>
-                    </div> -->
-                    <div class="col-sm-4">
-                        <div class="card home-project">
-                            <div class="card-body">
-                                <h5 class="card-title"><strong>Shift</strong></h5>
-                                <p class="card-text">Shift is a rotating-key, XOR-based data encryption tool that I
-                                    built to learn about the inner workings of simple encryption tools. This tool is
-                                    used to obfuscate program data in some of my other applications.</p>
-                                <a href="/blog/2019/08/24/shift2" class="btn btn-primary">Blog Post</a>
-                                <a href="https://github.com/Ewpratten/shift" class="btn btn-dark"><i
-                                        class="fab fa-github"></i></a>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col-sm-4">
-                        <div class="card home-project">
-                            <div class="card-body">
-                                <h5 class="card-title"><strong>Rayzor</strong></h5>
-                                <p class="card-text">Rayzor is my final project from my ICS4U computer science
-                                    class.
-                                    This is a 3D raytracer that can generate still images from a scene definition
-                                    file.
-                                    Take a look at the project's README file for some examples.</p>
-                                <a href="https://github.com/Ewpratten/Rayzor" class="btn btn-dark"><i
-                                        class="fab fa-github"></i></a>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col-sm-4">
-                        <div class="card home-project">
-                            <div class="card-body">
-                                <h5 class="card-title"><strong>Pi-hole API</strong></h5>
-                                <p class="card-text">This is an old project of mine that is used in some of my
-                                    backend
-                                    server management tools, and by many other people in personal projects. Pi-hole
-                                    API
-                                    is a Python3 wrapper around the <a href="https://pi-hole.net/">Pi-hole</a> admin
-                                    interface.</p>
-                                <a href="https://github.com/Ewpratten/pihole-api" class="btn btn-dark"><i
-                                        class="fab fa-github"></i></a>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+                <div class="row" id="project-grid">
 
+                    {% for project in site.data.projects %}
+                    <div class="col-sm-4 project-item">
+                        <div class="card home-project">
+                            {% if project.hero %}
+                            <img src="{{project.hero.img_src}}" class="card-img-top" alt="">
+                            {% endif %}
+                            <div class="card-body">
+                                <h5 class="card-title"><strong>{{project.title}}</strong></h5>
+                                <p class="card-text">{{project.description}}</p>
+
+                                {% for text_btn in project.text_buttons %}
+                                <a href="{{text_btn.url}}" class="btn btn-{{text_btn.color}}">{{text_btn.text}}</a>
+                                {% endfor %}
+
+                                {% for icon_btn in project.icon_buttons %}
+                                <a href="{{icon_btn.url}}" class="btn btn-dark"><i class="{{icon_btn.icon}}"></i></a>
+                                {% endfor %}
+                            </div>
+                        </div>
+                    </div>
+                    {% endfor %}
+
+                </div>
             </div>
         </div>
 
@@ -239,6 +95,17 @@ title: Home
         }
     </script>
 
+
     {% include footer.html %}
 
+    <!-- Project grid -->
+    <script>
+        $('#project-grid').masonry({
+            // options
+            itemSelector: '.project-item',
+            // columnWidth: 500,
+            transitionDuration: '0s'
+        });
+    </script>
+
 </body>
\ No newline at end of file