From 3bc5165015727ae37110ea30dbe43886087bd79d Mon Sep 17 00:00:00 2001
From: Evan Pratten <ewpratten@gmail.com>
Date: Tue, 4 Aug 2020 10:31:26 -0400
Subject: [PATCH] Make a new projects section in index

---
 _includes/nav.html       |   2 +-
 assets/css/edges.css     | 171 ++++++++++++++++++++++++++++++++-----
 assets/css/home.css      |  36 +++++---
 index.html               | 178 +++++++++++++++++++++++++++++++++++++++
 index.md => index.md.old |   0
 5 files changed, 355 insertions(+), 32 deletions(-)
 create mode 100644 index.html
 rename index.md => index.md.old (100%)

diff --git a/_includes/nav.html b/_includes/nav.html
index 050b88f..594dfe6 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -10,7 +10,7 @@
         <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
             <div class="navbar-nav ml-auto">
                 <a class="nav-item nav-link" href="{{site.baseurl}}/blog">Blog</a>
-                <a class="nav-item nav-link" href="{{site.baseurl}}/projects">Projects</a>
+                <!-- <a class="nav-item nav-link" href="{{site.baseurl}}/projects">Projects</a> -->
                 <a class="nav-item nav-link" href="{{site.baseurl}}/events">Events</a>
                 <a class="nav-item nav-link" href="{{site.baseurl}}/about">About</a>
             </div>
diff --git a/assets/css/edges.css b/assets/css/edges.css
index d2a44d4..1a9f470 100644
--- a/assets/css/edges.css
+++ b/assets/css/edges.css
@@ -1,22 +1,151 @@
+.edge--bottom {
+  position: relative;
+  z-index: 1;
+}
+.edge--bottom:after {
+  background: inherit;
+  content: '';
+  display: block;
+  height: 50%;
+  left: 0;
+  position: absolute;
+  right: 0;
+  z-index: -1;
+  -webkit-backface-visibility: hidden;
+}
+.edge--bottom:after {
+  bottom: 0;
+  -webkit-transform: skewY(-1.5deg);
+          transform: skewY(-1.5deg);
+  -webkit-transform-origin: 100%;
+          transform-origin: 100%;
+}
+
+.edge--bottom--reverse {
+  position: relative;
+  z-index: 1;
+}
+.edge--bottom--reverse:after {
+  background: inherit;
+  content: '';
+  display: block;
+  height: 50%;
+  left: 0;
+  position: absolute;
+  right: 0;
+  z-index: -1;
+  -webkit-backface-visibility: hidden;
+}
+.edge--bottom--reverse:after {
+  bottom: 0;
+  -webkit-transform: skewY(1.5deg);
+          transform: skewY(1.5deg);
+  -webkit-transform-origin: 0 100%;
+          transform-origin: 0 100%;
+}
+
 .edge--top {
-    position: relative;
-    z-index: 1;
-  }
-  .edge--top:before {
-    background: inherit;
-    content: '';
-    display: block;
-    height: 50%;
-    left: 0;
-    position: absolute;
-    right: 0;
-    z-index: -1;
-    -webkit-backface-visibility: hidden;
-  }
-  .edge--top:before {
-    top: 0;
-    -webkit-transform: skewY(2.5deg);
-            transform: skewY(2.5deg);
-    -webkit-transform-origin: 100% 0;
-            transform-origin: 100% 0;
-  }
\ No newline at end of file
+  position: relative;
+  z-index: 1;
+}
+.edge--top:before {
+  background: inherit;
+  content: '';
+  display: block;
+  height: 50%;
+  left: 0;
+  position: absolute;
+  right: 0;
+  z-index: -1;
+  -webkit-backface-visibility: hidden;
+}
+.edge--top:before {
+  top: 0;
+  -webkit-transform: skewY(1.5deg);
+          transform: skewY(1.5deg);
+  -webkit-transform-origin: 100% 0;
+          transform-origin: 100% 0;
+}
+
+.edge--top--reverse {
+  position: relative;
+  z-index: 1;
+}
+.edge--top--reverse:before {
+  background: inherit;
+  content: '';
+  display: block;
+  height: 50%;
+  left: 0;
+  position: absolute;
+  right: 0;
+  z-index: -1;
+  -webkit-backface-visibility: hidden;
+}
+.edge--top--reverse:before {
+  top: 0;
+  -webkit-transform: skewY(-1.5deg);
+          transform: skewY(-1.5deg);
+  -webkit-transform-origin: 0 0;
+          transform-origin: 0 0;
+}
+
+.edge--both {
+  position: relative;
+  z-index: 1;
+}
+.edge--both:before, .edge--both:after {
+  background: inherit;
+  content: '';
+  display: block;
+  height: 50%;
+  left: 0;
+  position: absolute;
+  right: 0;
+  z-index: -1;
+  -webkit-backface-visibility: hidden;
+}
+.edge--both:before {
+  top: 0;
+  -webkit-transform: skewY(1.5deg);
+          transform: skewY(1.5deg);
+  -webkit-transform-origin: 100% 0;
+          transform-origin: 100% 0;
+}
+.edge--both:after {
+  bottom: 0;
+  -webkit-transform: skewY(-1.5deg);
+          transform: skewY(-1.5deg);
+  -webkit-transform-origin: 100%;
+          transform-origin: 100%;
+}
+
+.edge--both--reverse {
+  position: relative;
+  z-index: 1;
+}
+.edge--both--reverse:before, .edge--both--reverse:after {
+  background: inherit;
+  content: '';
+  display: block;
+  height: 50%;
+  left: 0;
+  position: absolute;
+  right: 0;
+  z-index: -1;
+  -webkit-backface-visibility: hidden;
+}
+.edge--both--reverse:before {
+  top: 0;
+  -webkit-transform: skewY(-1.5deg);
+          transform: skewY(-1.5deg);
+  -webkit-transform-origin: 0 0;
+          transform-origin: 0 0;
+}
+.edge--both--reverse:after {
+  bottom: 0;
+  -webkit-transform: skewY(1.5deg);
+          transform: skewY(1.5deg);
+  -webkit-transform-origin: 0 0;
+          transform-origin: 0 0;
+}
\ No newline at end of file
diff --git a/assets/css/home.css b/assets/css/home.css
index ce40427..1b4dbb8 100644
--- a/assets/css/home.css
+++ b/assets/css/home.css
@@ -1,24 +1,40 @@
-.color-hero{
-    height:108vh;
-
+.color-hero {
+    height: 108vh;
     background-color: var(--color-purple)!important;
 }
 
-.color-hero .hello{
+.color-hero .hello {
     padding-top: 30vh;
-    color:white;
+    color: white;
 }
 
-.home-secondary-panel{
+.home-secondary-panel {
     transform: translateY(-50px);
-    background-color:white;
+    background-color: white;
+    min-height: 800;
+}
+
+.home-third-panel {
+    transform: translateY(-50px);
+    background-color: var(--color-dark-blue)!important;
     min-height: 500px;
+    color: white;
 }
 
-.home-content{
+.home-third-panel a {
+    color: var(--color-blue)!important;
+}
+
+.home-content {
+    padding-top: 6rem;
+    padding-bottom: 6rem;
+}
+
+.header-space {
     padding-top: 6rem;
 }
 
-.header-space{
-    padding-top: 6rem;
+.home-project {
+    /* min-height: 310px; */
+    margin-top:1rem;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..fda790c
--- /dev/null
+++ b/index.html
@@ -0,0 +1,178 @@
+---
+title: Home
+---
+
+{% include head.html %}
+
+<body>
+
+    <div class="site-ctr">
+        <!-- Navbar -->
+        {% include nav.html %}
+
+        <div class="color-hero">
+            <div class="hello container">
+                <h1>Hi,</h1>
+                <h1>I am Evan&nbsp;Pratten</h1>
+            </div>
+        </div>
+
+        <div class="home-secondary-panel edge--top">
+            <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
+                    developers
+                    writing the code that powers competition-ready robots at <a href="https://github.com/frc5024">Raider
+                        Robotics</a>.</h3>
+
+                <div class="header-space"></div>
+
+                <!-- <h1>What I do</h1>
+
+                <h3> I am a software developer, and photographer. I use this website to host
+                    <a href="/blog">blog posts</a>
+                    about my learnings as a programmer, and to share the best of my
+                    <a href=" /photography">photos</a></h3>
+
+
+                <div style="padding-top:3rem;"></div>
+                <hr>
+                <div style="padding-top:3rem;"></div> -->
+
+                <h1>My notable projects</h1>
+
+                <h3>I develop and provide many web and desktop applications for public use. I host them all on my
+                    private backend infrastructure. The network of servers that powers these applications was originally
+                    set up to help me learn server management and distributed application development.</h3>
+
+
+                <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>
+                            </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>
+        </div>
+
+        <!-- <div class="home-third-panel">
+            <div class="inner-content-container home-content container">
+                
+            </div>
+        </div> -->
+
+
+    </div>
+    {% include footer.html %}
+
+</body>
\ No newline at end of file
diff --git a/index.md b/index.md.old
similarity index 100%
rename from index.md
rename to index.md.old