Make the projects section much more fancy
This commit is contained in:
parent
84f49fe3b6
commit
b5202db389
@ -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"
|
||||
|
||||
211
index.html
211
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>
|
||||
Loading…
x
Reference in New Issue
Block a user