Merge branch 'drafts'

5 years ago · 92d14f955f
24 changed files with 400 additions and 856 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,5 +1,6 @@
 public/*
 /* resources/_gen/* */
 public/
 /* _gen files required by Netlify */
 resources/_gen/
 themes/base16*
 commit-msg.txt
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@ -2,6 +2,7 @@
 //  base colors {{{ // 
 $base03: #747369;
 $base04: #a09f93;
 $base05: #d3d0c8; 
 $base-red: #f2777a;
@ -81,10 +82,15 @@ $phone-width: 800px;
 //  general elements {{{ // 
 $background-color: #2d2d2d;
 $color: #f2f0ec;
 // $background-color: white;
 // $color: black;
 body {
  margin: 0;
  background-color: #2d2d2d;
  color: #f2f0ec;
  background-color: $background-color;
  color: $color;
  line-height: 1.5;
  font-size: 100%;
  /* font-family: 'Source Code Pro', monospace; */
@ -407,7 +413,40 @@ footer {// {{{
  margin-right: 2em;
 } */// }}}
 #resume {
 #print-icon {// {{{
  float: right;
  img {
    height: 1.75em;
    position: relative;
    top: 1em;
  }
 }// }}}
 #contact-info {// {{{
  @include vert-padding-rem(0.5);
  display: flex;
  align-content: center;
  div {
    flex-grow: 1;
    color: $base05;
    img {
      height: 1em;
    }
  }
  #email {
    text-align: center;
  }
  #website {
    text-align: right;
  }
 }// }}}
 #resume {// {{{
  a {
    text-decoration: none;
    &:hover {
@ -419,18 +458,47 @@ footer {// {{{
    color: $base-orange;
  }
  .date {
    float: right;
    color: $base03;
  }
  .project {
    @include vert-padding-rem(.2);
    h2 {
    color: $base-yellow;
      color: $base-sky-blue;
      display: inline;
    }
  p {
    &.project-date {
      float: right;
    img {
      height: 1.2em;
    }
    .project-link {
      &:hover {
        text-decoration: none;
      }
    }
 }
    .btn {
      display: inline;
      background-color: transparent;
      margin-bottom: 5px;
      padding-left: 7px;
      &:focus, &:active {
        outline: none !important;
        box-shadow: none;
      }
    }
    // [id^="details-"] {
      // margin-top: .5em;
    // }
  }
 }// }}}
 // TODO: converted up to here
--- a/content/posts/outage-night.md
+++ b/content/posts/outage-night.md
@ -1,4 +1,7 @@
 ---
 title: "Outage Night"
 date: 2019-02-11T07:50:51-05:00
 draft: true
 ---
 - procrastinating on assignment
  - want to play Pokemon randomizer
--- a/content/posts/server-apps.md
+++ b/content/posts/server-apps.md
@ -0,0 +1,14 @@
 ---
 title: "Server Apps"
 date: 2019-09-03T12:31:45-04:00
 draft: true
 ---
 - Baikal
 - Gitea
 - Synapse
 - Taskserver
 - haste-server
 - liteshort
 - personal site
 - spv
 - twem
--- a/content/posts/wallpaper-playlist.md
+++ b/content/posts/wallpaper-playlist.md
@ -1,7 +1,7 @@
 ---
 title: Wallpaper Playlist for pywal
 date: 2019-02-16T11:42:33-05:00
 draft: false
 draft: true
 ---
 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
 tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
--- a/content/resume/_index.md
+++ b/content/resume/_index.md
@ -3,69 +3,109 @@ title: "Resume"
 date: 2019-02-11T07:50:51-05:00
 draft: false
 ---
 {{% resume/section goal %}}<!--- {{{ -->
 {{% resume/section overview %}}<!--- {{{ -->
 To find an internship to fully dedicate myself that will test my limits,
 provide the opportunity to gain valuable knowledge and experience and
 jumpstart my career with a solid foundation.
 I am a 3<sup>rd</sup> year CS student and enthusiast of all things Linux
 and FOSS. I am looking for an internship to fully dedicate myself to that
 will test my abilities, provide the opportunity to gain valuable knowledge
 and experience and jumpstart my career with a solid foundation.
 <!--- }}} -->
 {{% /resume/section %}}<!--- }}} -->
 {{% resume/section projects %}}<!--- {{{ -->
 <!--- Spotify Graphs {{{ -->
 {{< resume/project-header name="Spotify Visualizer" url="https://github.com/Kevin-Mok/spotify-lib-vis" date="July 2018" >}}
 {{% resume/project-details %}}
 {{% resume/project name="Spotify Visualizer" 
 url="https://github.com/Kevin-Mok/spotify-lib-vis" date="July 2018" show="true" %}}
 - Web app that scans your Spotify library using their API to produce [d3
  graphs][d3 graph examples] to visualize the artists, genres and features
  of tracks in your library.
 - Web app that scans your Spotify library using their API to produce
  [**d3** graphs][d3 graph examples] to visualize the artists, genres and
  features of tracks in your library.
 - Can also keep track of your listening history. Currently runs as a `cron`
  job on my local machine to keep track of my own.
 - Uses Django and PostgreSQL for back-end.
 - Uses __Django__ and __PostgreSQL__ for back-end.
 [d3 graph examples]: https://github.com/d3/d3/wiki/Gallery
 {{% /resume/project-details %}}
 {{% /resume/project %}}
 <!--- Spotify Graphs }}} -->
 <!--- ParsaFood {{{ -->
 {{< resume/project-header name="ParsaFood" url="https://github.com/Kevin-Mok/ParsaFood" date="Feb. 2018" >}}
 {{% resume/project name="ParsaFood" 
 url="https://github.com/Kevin-Mok/ParsaFood" date="Feb. 2018" 
 show="true" %}}
 {{% resume/project-details %}}
 - Android app that reads ingredients labels and detects any dietary			
  restrictions/allergies. Came up with the idea based on 
  [personal experience][Parsafood motivation].
 - Made during the 24-hour [Platterz	Hackathon][Platterz Hackathon event] in
  a group with two other members. Came in 2nd place and won an 
  [Oculus Rift][Oculus Rift Amazon].
 - **Android** app that reads ingredient labels and detects any dietary 
  restrictions/allergies. 
 - Made during a 24-hour [food-themed hackathon][Platterz Hackathon event]
  in a group with two other members. Came in 2<sup>nd</sup> place and won
  an [Oculus Rift][Oculus Rift Amazon].
 - Came up with the idea based on [personal experience][Parsafood motivation].
 [Parsafood repo]: https://github.com/Kevin-Mok/ParsaFood
 [Parsafood motivation]: https://github.com/Kevin-Mok/ParsaFood#motivation
 [Platterz Hackathon event]: https://www.eventbrite.com/e/platterz-hackathon-tickets-42682237722
 [Oculus Rift Amazon]: https://www.amazon.ca/Oculus-Rift-Windows-VR-Headset/dp/B00VF0IXEY/ref=sr_1_1_sspa?ie=UTF8&qid=1520422949&sr=8-1-spons&keywords=oculus+rift&psc=1
 {{% /resume/project-details %}}
 {{% /resume/project %}}
 <!--- ParsaFood }}} -->
 <!--- Grocery Finder {{{ -->
 {{< resume/project-header name="Grocery Finder" url="https://github.com/Kevin-Mok/grocery-finder" date="April 2019" >}}
 {{% resume/project-details %}}
 - Proof of concept for a web app that finds the best supermarket for your needs.
 - Took on role as project leader to prioritize and delegate tasks while
 {{% resume/project name="Grocery Finder" 
 url="https://github.com/Kevin-Mok/grocery-finder" date="April 2019" 
 show="true" %}}
 - Proof of concept for a web app that finds the best supermarket for 
  your needs based on the total price of your cart items and distance 
  form you.
 - Responsive front-end using **Bootstrap**. Uses **Node.js** and 
  **MongoDB** for back-end.
 - Currently deployed on [**Heroku**][Grocery Finder Heroku].
 - Took on role as project leader to prioritize and delegate tasks 
  while
  also implementing a majority of the core features.
 - Responsive front-end using Bootstrap. Uses Node.js and MongoDB for back-end.
 - Currently deployed on [Heroku][Grocery Finder Heroku].
 [Grocery Finder Heroku]: http://www.grocery-finder.ml
 {{% /resume/project-details %}}
 {{% /resume/project %}}
 <!--- Grocery Finder }}} -->
 <!--- TrapBot {{{ -->
 {{% resume/project name="TrapBot"
 url="https://github.com/Kevin-Mok/TrapBot" date="March 2018" %}}
 - reddit bot that looks for comments with song names and responds with 
  their respective SoundCloud links.
 - Received positive feedback from users who saw the bot's posts.
 - Uses __Python__ API wrappers for SoundCloud and reddit.
 {{% /resume/project %}}
 <!--- Grocery Finder }}} -->
 <!--- Super ADA Bros. {{{ -->
 {{% resume/project name="Super ADA Bros"
 url="https://github.com/Kevin-Mok/SuperADABros" date="May 2019" %}}
 - Clone of Super Mario Bros 1-1, but Mario is mobility-impaired and
  uses ramps to get through the level.
 - Able to played using only head movement by getting input from a
  face-tracking script (**OpenCV**).
 - Implemented in [**Godot**][Godot site], an open-source game engine.
 - Made during a 24-hour [accessibility-themed hackathon][PC Hacks event].
 [PC Hacks event]: https://pchacks19.devpost.com/
 [Godot site]: https://godotengine.org
 {{% /resume/project %}}
 <!--- Grocery Finder }}} -->
@ -74,6 +114,6 @@ jumpstart my career with a solid foundation.
 {{% resume/section education %}}<!--- {{{ -->
 - **University of Toronto**: Computer Science Specialist <div style="float:right">2017-2021</div>
 - **University of Toronto**: Computer Science Specialist <div class="date">2017-2021</div>
 {{% /resume/section %}}<!--- }}} -->
--- a/content/resume/archived.txt
+++ b/content/resume/archived.txt
@ -0,0 +1,20 @@
 <!--- Super ADA Bros. {{{ -->
 {{% resume/project name="Super ADA Bros"
 url="https://github.com/Kevin-Mok/SuperADABros" date="May 2019" %}}
 - Clone of Super Mario Bros 1-1, but Mario is mobility-impaired and
  uses ramps to get through the level.
 - Able to played using only head movement by getting input from a
  face-tracking script (**OpenCV**).
 - Implemented in [**Godot**][Godot site], an open-source game engine.
 - Made during a 24-hour [accessibility-themed hackathon][PC Hacks event].
 [PC Hacks event]: https://pchacks19.devpost.com/
 [Godot site]: https://godotengine.org
 {{% /resume/project %}}
 <!--- Grocery Finder }}} -->
--- a/content/resume/printable.txt
+++ b/content/resume/printable.txt
@ -0,0 +1,4 @@
 - bg colors
 - site title max width
 - switch project shortcode
 - rm details top margin
--- a/ideas.md
+++ b/ideas.md
@ -1,31 +1,25 @@
 # Large
 - resume
  - expand some projects by default
  - repo link (GitHub icon) beside each section
    - make links open in new tab
    - picture/video links?
  - printable white version
    - upload PDF
    - JS to change CSS?
  - make old proj's displayable
    - spv
      - screenshots
      - setup instructions
    - see if SoundCloud API still bad (TrapBot)
    - open SoundCloud issue about API
    - ADA vid/pics
    - lc setup
    - image tagger?
    - image tagger
      - executable
  - date on same line as project
  - collapsible sections
    - link to each section beside it
  - fix title
  - collapsible sections
    - more
  - printable version
    - JS to change CSS
  - list of things done with diff. langs.
 - add CSS grid layout
  - add tooltip saying responsive 
 - articles (ideas)
 - screenshots gallery
  - infinite scroll
 - loop through URL sections
 - ask about most efficient way for custom layout for each section
 - JS snippets?
 - rewrite CSS in Sass
  - push to base16 repo
@ -35,6 +29,8 @@
 # Medium
 - socials in footer
  - icons
    - GitHub
    - Fosstodon
  - email
    - tooltip pop-up with email and clipboard button/link
    - [Pure CSS Tooltips](https://www.youtube.com/watch?v=hAeQ8CqrGDY)
@ -57,9 +53,6 @@
 - create different size images for SVG
  - https://www.sitepoint.com/svg-good-for-website-performance/ 
 Break> {{{
 > }}}
 ## Archived
 - about/homepage
  - typing animation
--- a/layouts/partials/base/header.html
+++ b/layouts/partials/base/header.html
@ -13,10 +13,14 @@
 <meta name="google-site-verification" content="3aZhrY5bFgQY0HY2DNNUhbkuIfVEcwkrQHnbJd8jCCQ" />
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <script src="http://livejs.com/live.js" charset="utf-8"></script>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700" type="text/css"> -->
 <link rel='stylesheet' href='//cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/hack-subset.css'>
 <!-- <link rel="stylesheet" href="https://meyerweb.com/eric/tools/css/reset/reset.css" type="text/css" media="all" /> -->
 <!-- <link rel="stylesheet" href="{{ "css/style.css" | relURL }}" type="text/css"> -->
 <link rel="stylesheet" href="{{ "css/style.css" | relURL }}" type="text/css">
 {{ $main_sass := resources.Get "sass/main.scss" }}
 {{ $main_style := $main_sass | resources.ToCSS }}
 <link rel="stylesheet" href="{{ $main_style.RelPermalink }}" type="text/css">
--- a/layouts/partials/resume/contact-info.html
+++ b/layouts/partials/resume/contact-info.html
@ -0,0 +1,15 @@
 <div id="contact-info">
  <div id="phone-number">
    <img src="{{ "img/smartphone.svg" | relURL }}"
    alt="smartphone-icon">:
    <a href="tel:647-685-2500" target="_blank">647-685-2500</a>
  </div>
  <div id="email">
    <img src="{{ "img/envelope.svg" | relURL }}" alt="envelope-icon">:
    <a href="mailto:me@kevin-mok.com">me@kevin-mok.com</a>
  </div>
  <div id="website">
    <img src="{{ "img/link.svg" | relURL }}" alt="link-icon">:
    <a href="https://kevin-mok.com/">kevin-mok.com</a>
  </div>
 </div>
--- a/layouts/partials/resume/print-icon.html
+++ b/layouts/partials/resume/print-icon.html
@ -0,0 +1,5 @@
 <div id="print-icon">
  <a href="{{ "resume.pdf" | relURL }}" target="_blank">
    <img src="{{ "img/printer.svg" | relURL }}" alt="printer-icon">
  </a>
 </div>
--- a/layouts/resume/section.html
+++ b/layouts/resume/section.html
@ -1,7 +1,11 @@
 {{ partial "base/header.html" . }}
 {{ partial "resume/print-icon.html" . }}
 {{ partial "base/site-title.html" . }}
 {{ partial "resume/contact-info.html" . }}
 {{ partial "base/base16-logo.html" . }}
 <div id="resume">
--- a/layouts/shortcodes/resume/project-details.html
+++ b/layouts/shortcodes/resume/project-details.html
@ -1,4 +1,4 @@
 {{ $_hugo_config := `{ "version": 1 }` }}
 <div class="project-details">
  {{ .Inner | markdownify }}
  {{ .Inner }}
 </div>
--- a/layouts/shortcodes/resume/project-print.html
+++ b/layouts/shortcodes/resume/project-print.html
@ -0,0 +1,13 @@
 <div class="project">
  <h2 class="project-title">
    <a href="{{ .Get "url" }}" target="_blank">
      {{ .Get "name" }}
    </a>
  </h2>
  <div class="date">{{ .Get "date" }}</div>
  <div class="collapse show" id="details-{{ .Get "name" | lower | urlize }}">
    <div>
      {{ .Inner }}
    </div>
  </div>
 </div>
--- a/layouts/shortcodes/resume/project.html
+++ b/layouts/shortcodes/resume/project.html
@ -0,0 +1,16 @@
 <div class="project">
  <a class="project-link" href="{{ .Get "url" }}" target="_blank">
    <img src="{{ "img/link.svg" | relURL }}" alt="link-icon">
  </a>
  <button class="btn" type="button" data-toggle="collapse"
    data-target="#{{ .Get "name" | lower | urlize }}-details"
    aria-expanded="false" aria-controls="{{ .Get "name" | lower | urlize }}-details">
    <h2 class="project-title">{{ .Get "name" }} ⏷</h2>
  </button>
  <div class="date">{{ .Get "date" }}</div>
  <div class="collapse{{ with .Get "show" }} show{{ end }}" id="{{ .Get "name" | lower | urlize }}-details">
    <div>
      {{ .Inner }}
    </div>
  </div>
 </div>
--- a/layouts/shortcodes/resume/section.html
+++ b/layouts/shortcodes/resume/section.html
@ -1,4 +1,4 @@
 <div id="{{ .Get 0 }}">
 <h1 class="section-header">{{ .Get 0 | title }}</h1>
  {{ .Inner }}
  {{ .Inner | markdownify }}
 </div>
--- a/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
+++ b/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
@ -1,790 +0,0 @@
 /* Base16 Eighties Colorscheme by Chris Kempson (http://chriskempson.com) */
 /* .base00 { color: #2d2d2d; }
 .base01 { color: #393939; }
 .base02 { color: #515151; }
 .base03 { color: #747369; }
 .base04 { color: #a09f93; }
 .base06 { color: #e8e6df; }
 .base07 { color: #f2f0ec; } */
 .base08 {
  color: #f2777a; }
 .base09 {
  color: #f99157; }
 .base0a {
  color: #ffcc66; }
 .base0b {
  color: #99cc99; }
 .base0c {
  color: #66cccc; }
 .base0d {
  color: #6699cc; }
 .base0e {
  color: #cc99cc; }
 .base0f {
  color: #d27b53; }
 body {
  margin: 0;
  background-color: #2d2d2d;
  color: #f2f0ec;
  line-height: 1.5;
  font-size: 100%;
  /* font-family: 'Source Code Pro', monospace; */
  font-family: 'Hack', monospace;
  display: flex;
  flex-direction: column;
  min-height: 100vh; }
  body a {
    color: #66cccc; }
    body a:visited {
      color: #66cccc; }
    body a:active {
      color: #66cccc; }
 .container {
  max-width: 52em;
  margin-left: auto;
  margin-right: auto;
  flex: 1; }
  .container .copyright a {
    color: #747369; }
    .container .copyright a:visited {
      color: #747369; }
    .container .copyright a:active {
      color: #747369; }
  @media (max-width: 52em) {
    .container {
      width: 100%; } }
 div .right {
  float: right; }
 div .clearfix {
  overflow: auto; }
 article .single section {
  /* background-color: #e6e6fa; */
  background-color: #cbbeb5;
  color: #2d2d2d;
  padding-left: 8rem;
  padding-right: 8rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  /* min-height: 50%; */
  /* min-height: 30em; */ }
  @media (max-width: 52em) {
    article .single section {
      padding-left: 2rem;
      padding-right: 2rem; } }
 .article-list article {
  /* background-color: #e6e6fa; */
  background-color: #cbbeb5;
  color: #2d2d2d;
  padding-left: 8rem;
  padding-right: 8rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  /* min-height: 50%; */
  /* min-height: 30em; */ }
  @media (max-width: 52em) {
    .article-list article {
      padding-left: 2rem;
      padding-right: 2rem; } }
 header {
  margin-top: 1.5rem;
  margin-bottom: 1rem; }
  @media (max-width: 52em) {
    header {
      margin-top: 0;
      padding-left: 2rem;
      padding-right: 2rem; } }
 footer {
  margin-top: 2rem;
  margin-bottom: 1rem;
  text-align: center;
  font-size: 0.9em;
  color: #747369; }
  footer .container {
    background-color: #393939;
    max-width: 62em;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem; }
  @media (max-width: 52em) {
    footer {
      margin-top: 0;
      margin-bottom: 0; } }
  @media (max-width: 800px) {
    footer {
      font-size: 0.8em; } }
 /* Typography */
 h1 {
  font-weight: bold;
  line-height: 1.25;
  margin-top: 1em;
  margin-bottom: .5em; }
 h2 {
  font-weight: bold;
  line-height: 1.25;
  margin-top: 1em;
  margin-bottom: .5em; }
 h3 {
  font-weight: bold;
  line-height: 1.25;
  margin-top: 1em;
  margin-bottom: .5em; }
 h4 {
  font-weight: bold;
  line-height: 1.25;
  margin-top: 1em;
  margin-bottom: .5em; }
 h5 {
  font-weight: bold;
  line-height: 1.25;
  margin-top: 1em;
  margin-bottom: .5em; }
 p {
  margin-top: 0;
  margin-bottom: 1rem; }
 h1 {
  font-size: 2rem; }
 h2 {
  font-size: 1.5rem; }
 h3 {
  font-size: 1.25rem; }
 h4 {
  font-size: 1rem; }
 h5 {
  font-size: .875rem; }
 h6 {
  font-size: .75rem; }
 pre, code {
  font-family: inherit;
  font-size: inherit; }
 header a .path .path:visited {
  color: #6699cc; }
 header span caret {
  color: #f2f0ec; }
 footer a {
  color: #747369; }
  footer a:visited {
    color: #747369; }
  footer a:active {
    color: #747369; }
 .page-not-found h1 {
  text-align: center;
  font-size: 5em; }
 .page-not-found h2 {
  text-align: center;
  font-size: 3em;
  color: #a09f93;
  margin-bottom: 4rem; }
@media (max-width: 52em) {
  .page-not-found h1 {
    font-size: 3em; }
  .page-not-found h2 {
    font-size: 2em; } }
 #homepage #about {
  font-size: 1.25rem; }
  #homepage #about h2 {
    margin-top: 1.25rem;
    font-size: 2rem;
    color: #ffcc66;
    text-align: center; }
  #homepage #about .me-equation {
    margin-top: 3em;
    text-align: center;
    display: flex;
    justify-content: center;
    /* align horizontal */
    align-items: center;
    /* align vertical */ }
    #homepage #about .me-equation .equation-part {
      display: flex;
      flex: 1;
      justify-content: center;
      /* align horizontal */
      align-items: center;
      /* align vertical */ }
      #homepage #about .me-equation .equation-part a {
        text-decoration: none;
        width: 70%; }
      #homepage #about .me-equation .equation-part img {
        width: 70%;
        height: 100%;
        border-radius: 1.1em;
        display: inline; }
        #homepage #about .me-equation .equation-part img#gnu {
          background-color: #a09f93; }
      #homepage #about .me-equation .equation-part p {
        font-size: 3vw;
        display: inline-block;
        padding-left: 0.2rem;
        padding-right: 0.2rem; }
    @media (max-width: 800px) {
      #homepage #about .me-equation {
        flex-wrap: wrap;
        margin-top: 2em;
        justify-content: space-around;
        /* align horizontal */ }
        #homepage #about .me-equation .equation-part {
          min-width: 33%; }
          #homepage #about .me-equation .equation-part img {
            flex: 1.5; }
            #homepage #about .me-equation .equation-part img#hexatar {
              max-width: 20%;
              margin-top: 1.75rem; }
          #homepage #about .me-equation .equation-part p {
            font-size: 6vw;
            flex: 1; }
          #homepage #about .me-equation .equation-part#uoft-part {
            justify-content: flex-end; } }
  @media (max-width: 800px) {
    #homepage #about {
      font-size: .9em; }
      #homepage #about h1 {
        font-size: 1.4rem; } }
@media (max-width: 52em) {
  #homepage {
    margin-bottom: 2rem; } }
 /* .homepage section.categories,
 .homepage section.tags {
  padding-left: 2rem;
  padding-right: 2rem;
 }
 .homepage .category,
 .homepage .category a,
 .homepage .tag,
 .homepage .tag a {
  color: #cc99cc;
 }
 .homepage .tag {
  margin-right: 2em;
 } */
 #resume a {
  text-decoration: none; }
  #resume a:hover {
    text-decoration: underline; }
 #resume h1 {
  color: #f99157; }
 #resume h2 {
  color: #ffcc66;
  display: inline; }
 #resume p.project-date {
  float: right; }
 h1.site-title {
  text-align: center;
  /* font-size: 3.5em; */
  font-size: 4.8em;
  color: #d3d0c8;
  margin-top: 1rem;
  margin-bottom: 0.5rem; }
  h1.site-title a {
    color: #66cccc; }
    h1.site-title a:visited {
      color: #66cccc; }
    h1.site-title a:active {
      color: #66cccc; }
  h1.site-title a {
    text-decoration: none; }
  @media (max-width: 52em) {
    h1.site-title {
      font-size: 3em; } }
  @media (max-width: 800px) {
    h1.site-title {
      font-size: 2em; } }
 .hero-logo img {
  margin-top: 0.5rem;
  width: 100%; }
 .nav-bar {
  margin-left: .5em;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem; }
  .nav-bar .caret {
    color: #f2f0ec;
    margin-right: .75rem; }
  .nav-bar .nav-bar-links {
    display: inline; }
    .nav-bar .nav-bar-links .nav-bar-link {
      padding-right: .5em; }
  @media (max-width: 800px) {
    .nav-bar {
      font-size: .8em; } }
 .hero-tagline {
  margin-top: .3em;
  font-size: .8rem;
  text-align: center; }
  .hero-tagline .icon {
    width: 1.25rem; }
 .article-list h1.list-title {
  font-size: 3em;
  color: #ffcc66; }
 .article-list article {
  padding-top: 4rem;
  padding-bottom: 4rem;
  margin-bottom: 4rem; }
 .article-list article h2.headline,
 .article-list article h2.headline a {
  margin-top: 0;
  color: #6699cc; }
 .article-list article .meta {
  margin-bottom: 1rem; }
 .article-list article .meta .key {
  color: #747369; }
 .article-list article .meta .val,
 .article-list article .meta .val a {
  color: #cc99cc; }
 .article-list article section.summary a {
  color: #d27b53; }
 article.single .meta {
  font-size: 0.9em;
  text-align: right;
  margin-top: .5rem;
  margin-bottom: .5rem; }
  article.single .meta .key {
    color: #747369; }
  article.single .meta .val {
    color: #cc99cc; }
    article.single .meta .val a {
      color: #cc99cc; }
 article.single .body {
  padding-top: 1rem;
  padding-bottom: 3rem; }
@media (max-width: 52em) {
  article.single .meta {
    padding-left: 2rem;
    padding-right: 2rem; }
  article.single .body {
    padding-top: .5rem;
    padding-bottom: 1rem; } }
 article.single h1.headline {
  margin-top: 0;
  font-size: 3em;
  color: #ffcc66; }
@media (max-width: 52em) {
  article.single h1.headline {
    padding-left: 2rem;
    padding-right: 2rem; } }
 /* Highlight Colors */
 article.single section.body h1 {
  color: #6699cc; }
 article.single section.body h2 {
  color: #99cc99; }
 article.single section.body h3 {
  color: #f99157; }
 article.single section.body h4 {
  color: #f2777a; }
 article.single section.body h5 {
  color: #515151; }
 article.single section.body h6 {
  color: #747369; }
 article.single section.body a, a:visited {
  color: #a06700; }
 /* Article Elements */
 article.single * {
  max-width: 100%; }
 article.single pre {
  margin-top: 0;
  margin-bottom: 1rem;
  border-radius: 3px;
  padding: 2rem; }
 article.single p code {
  padding: 0.2em 0.5em;
  border-radius: 3px;
  background: #747369;
  color: #f2f0ec; }
 article.single figure, article.single div.highlight {
  box-sizing: border-box;
  max-width: 52rem;
  width: 52rem;
  margin-bottom: 1rem;
  padding: 1em;
  background-color: #393939; }
@media (max-width: 52em) {
  article.single figure, article.single div.highlight {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    border-radius: 3px; } }
 article.single figure img {
  max-width: 100%;
  width: 100%;
  border-radius: 3px; }
 article.single figure figcaption {
  margin-top: 1rem; }
 article.single figure figcaption h4 {
  margin-top: 0;
  text-align: center;
  font-style: italic;
  font-weight: normal;
  color: #f2f0ec; }
 article.single table {
  border-collapse: separate;
  border-spacing: 0;
  max-width: 100%;
  width: 100%; }
 article.single th,
 article.single td {
  padding: .25rem 1rem;
  line-height: inherit;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #a09f93; }
 article.single tr:last-child td {
  border-bottom: 0; }
 article.single th {
  text-align: left;
  font-weight: bold;
  vertical-align: bottom; }
 article.single td {
  vertical-align: top; }
 article.single blockquote {
  margin-left: 2rem;
  margin-right: 3rem;
  padding-left: 1rem;
  border-left: 5px solid #66cccc; }
 article.single hr {
  border: 0;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #a09f93; }
 pre {
  background: #2d2d2d;
  color: #f2f0ec; }
 .highlight .hll {
  background-color: #515151; }
 .highlight .c {
  color: #747369; }
 /* Comment */
 .highlight .err {
  color: #f2777a; }
 /* Error */
 .highlight .k {
  color: #cc99cc; }
 /* Keyword */
 .highlight .l {
  color: #f99157; }
 /* Literal */
 .highlight .n {
  color: #f2f0ec; }
 /* Name */
 .highlight .o {
  color: #66cccc; }
 /* Operator */
 .highlight .p {
  color: #f2f0ec; }
 /* Punctuation */
 .highlight .cm {
  color: #747369; }
 /* Comment.Multiline */
 .highlight .cp {
  color: #747369; }
 /* Comment.Preproc */
 .highlight .c1 {
  color: #747369; }
 /* Comment.Single */
 .highlight .cs {
  color: #747369; }
 /* Comment.Special */
 .highlight .gd {
  color: #f2777a; }
 /* Generic.Deleted */
 .highlight .ge {
  font-style: italic; }
 /* Generic.Emph */
 .highlight .gh {
  color: #f2f0ec;
  font-weight: bold; }
 /* Generic.Heading */
 .highlight .gi {
  color: #99cc99; }
 /* Generic.Inserted */
 .highlight .gp {
  color: #747369;
  font-weight: bold; }
 /* Generic.Prompt */
 .highlight .gs {
  font-weight: bold; }
 /* Generic.Strong */
 .highlight .gu {
  color: #66cccc;
  font-weight: bold; }
 /* Generic.Subheading */
 .highlight .kc {
  color: #cc99cc; }
 /* Keyword.Constant */
 .highlight .kd {
  color: #cc99cc; }
 /* Keyword.Declaration */
 .highlight .kn {
  color: #66cccc; }
 /* Keyword.Namespace */
 .highlight .kp {
  color: #cc99cc; }
 /* Keyword.Pseudo */
 .highlight .kr {
  color: #cc99cc; }
 /* Keyword.Reserved */
 .highlight .kt {
  color: #ffcc66; }
 /* Keyword.Type */
 .highlight .ld {
  color: #99cc99; }
 /* Literal.Date */
 .highlight .m {
  color: #f99157; }
 /* Literal.Number */
 .highlight .s {
  color: #99cc99; }
 /* Literal.String */
 .highlight .na {
  color: #6699cc; }
 /* Name.Attribute */
 .highlight .nb {
  color: #f2f0ec; }
 /* Name.Builtin */
 .highlight .nc {
  color: #ffcc66; }
 /* Name.Class */
 .highlight .no {
  color: #f2777a; }
 /* Name.Constant */
 .highlight .nd {
  color: #66cccc; }
 /* Name.Decorator */
 .highlight .ni {
  color: #f2f0ec; }
 /* Name.Entity */
 .highlight .ne {
  color: #f2777a; }
 /* Name.Exception */
 .highlight .nf {
  color: #6699cc; }
 /* Name.Function */
 .highlight .nl {
  color: #f2f0ec; }
 /* Name.Label */
 .highlight .nn {
  color: #ffcc66; }
 /* Name.Namespace */
 .highlight .nx {
  color: #6699cc; }
 /* Name.Other */
 .highlight .py {
  color: #f2f0ec; }
 /* Name.Property */
 .highlight .nt {
  color: #66cccc; }
 /* Name.Tag */
 .highlight .nv {
  color: #f2777a; }
 /* Name.Variable */
 .highlight .ow {
  color: #66cccc; }
 /* Operator.Word */
 .highlight .w {
  color: #f2f0ec; }
 /* Text.Whitespace */
 .highlight .mf {
  color: #f99157; }
 /* Literal.Number.Float */
 .highlight .mh {
  color: #f99157; }
 /* Literal.Number.Hex */
 .highlight .mi {
  color: #f99157; }
 /* Literal.Number.Integer */
 .highlight .mo {
  color: #f99157; }
 /* Literal.Number.Oct */
 .highlight .sb {
  color: #99cc99; }
 /* Literal.String.Backtick */
 .highlight .sc {
  color: #f2f0ec; }
 /* Literal.String.Char */
 .highlight .sd {
  color: #747369; }
 /* Literal.String.Doc */
 .highlight .s2 {
  color: #99cc99; }
 /* Literal.String.Double */
 .highlight .se {
  color: #f99157; }
 /* Literal.String.Escape */
 .highlight .sh {
  color: #99cc99; }
 /* Literal.String.Heredoc */
 .highlight .si {
  color: #f99157; }
 /* Literal.String.Interpol */
 .highlight .sx {
  color: #99cc99; }
 /* Literal.String.Other */
 .highlight .sr {
  color: #99cc99; }
 /* Literal.String.Regex */
 .highlight .s1 {
  color: #99cc99; }
 /* Literal.String.Single */
 .highlight .ss {
  color: #99cc99; }
 /* Literal.String.Symbol */
 .highlight .bp {
  color: #f2f0ec; }
 /* Name.Builtin.Pseudo */
 .highlight .vc {
  color: #f2777a; }
 /* Name.Variable.Class */
 .highlight .vg {
  color: #f2777a; }
 /* Name.Variable.Global */
 .highlight .vi {
  color: #f2777a; }
 /* Name.Variable.Instance */
 .highlight .il {
  color: #f99157; }
 /* Literal.Number.Integer.Long */
 /*# sourceMappingURL=style.css.map */
--- a/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.json
+++ b/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.json
@ -1 +0,0 @@
 {"Target":"sass/main.css","MediaType":"text/css","Data":{}}
--- a/static/img/envelope.svg
+++ b/static/img/envelope.svg
@ -0,0 +1,45 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 58 58" style="enable-background:new 0 0 58 58;" xml:space="preserve">
 <g>
 	<polygon style="fill:#E5E5DA;" points="0,8.5 0,8.604 0,49.371 0,49.5 0.129,49.5 57.541,49.5 57.871,49.5 58,49.5 58,49.371 
 		58,8.604 58,8.5 	"/>
 	<path style="fill:#D1D0BF;" d="M0,8.501l27.139,27.267c1.049,0.976,2.674,0.976,3.723,0L58,8.5L0,8.501z"/>
 	<path style="fill:#C4C2A5;" d="M0,48.209V9.791c0-0.529,0.606-0.829,1.027-0.508L21,29.5L1.027,48.718
 		C0.606,49.038,0,48.738,0,48.209z"/>
 	<path style="fill:#C4C2A5;" d="M58,48.209V9.791c0-0.529-0.606-0.829-1.027-0.508L37,29.5l19.973,19.218
 		C57.394,49.038,58,48.738,58,48.209z"/>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 </svg>
--- a/static/img/link.svg
+++ b/static/img/link.svg
@ -0,0 +1,46 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 503.118 503.118" style="enable-background:new 0 0 503.118 503.118;" xml:space="preserve">
 <path style="fill:#FFD15C;" d="M335.151,167.967c10.449,10.449,18.808,22.988,25.078,35.527
 	c22.988,48.065,15.673,108.669-25.078,148.375L223.347,464.718c-51.2,51.2-133.747,51.2-183.902,0
 	c-51.2-51.2-51.2-133.747,0-183.902l79.412-79.412c-9.404,31.347-8.359,64.784,3.135,95.086l-33.437,33.437
 	c-22.988,22.988-22.988,61.649,0,85.682c24.033,24.033,61.649,24.033,85.682,0l111.804-111.804
 	c11.494-11.494,17.763-27.167,17.763-42.841s-6.269-31.347-17.763-42.841c-11.494-11.494-27.167-17.763-42.841-17.763l56.424-56.424
 	C312.163,149.159,323.657,157.518,335.151,167.967z"/>
 <path style="fill:#FF7058;" d="M167.967,335.151c-10.449-10.449-18.808-22.988-25.078-35.527
 	c-22.988-48.065-15.673-108.669,25.078-148.376L279.771,38.4c51.2-51.2,133.747-51.2,183.902,0c51.2,51.2,51.2,133.747,0,183.902
 	l-79.412,79.412c9.404-31.347,8.359-64.784-3.135-95.086l33.437-33.437c22.988-22.988,22.988-61.649,0-85.682
 	c-24.033-24.033-61.649-24.033-85.682,0L218.122,200.359c-11.494,11.494-17.763,27.167-17.763,42.841s6.269,31.347,17.763,42.841
 	c11.494,11.494,27.167,17.763,42.841,17.763l-56.424,56.424C190.955,353.959,179.461,345.6,167.967,335.151z"/>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 </svg>
--- a/static/img/printer.svg
+++ b/static/img/printer.svg
@ -0,0 +1,43 @@
 <?xml version="1.0" encoding="iso-8859-1"?>
 <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 58 58" style="enable-background:new 0 0 58 58;" xml:space="preserve">
 <polygon style="fill:#C7CAC7;" points="49,35 49,52 52,52 52,49 58,49 58,17 0,17 0,49 6,49 6,52 9,52 9,35 "/>
 <polygon style="fill:#556080;" points="58,35 58,17 0,17 0,35 9,35 49,35 "/>
 <rect x="6" y="35" style="fill:#7383BF;" width="46" height="17"/>
 <polygon style="fill:#EDEADA;" points="49,0 49,7 49,17 9,17 9,0 "/>
 <polyline style="fill:#EDEADA;" points="49,35 49,58 9,58 9,35 "/>
 <path style="fill:#CEC9AE;" d="M41,44H17c-0.553,0-1-0.447-1-1s0.447-1,1-1h24c0.553,0,1,0.447,1,1S41.553,44,41,44z"/>
 <path style="fill:#CEC9AE;" d="M41,49H17c-0.553,0-1-0.447-1-1s0.447-1,1-1h24c0.553,0,1,0.447,1,1S41.553,49,41,49z"/>
 <circle style="fill:#A4E869;" cx="49" cy="26" r="4"/>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 <g>
 </g>
 </svg>
--- a/static/img/smartphone.svg
+++ b/static/img/smartphone.svg
@ -0,0 +1 @@
 <svg height="512pt" viewBox="-97 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m44.136719 0h229.519531c24.375 0 44.136719 19.761719 44.136719 44.136719v423.726562c0 24.375-19.761719 44.136719-44.136719 44.136719h-229.519531c-24.375 0-44.136719-19.761719-44.136719-44.136719v-423.726562c0-24.375 19.761719-44.136719 44.136719-44.136719zm0 0" fill="#5e5f62"/><path d="m0 70.621094h317.792969v370.757812h-317.792969zm0 0" fill="#90bae1"/><path d="m317.792969 70.621094v170.460937c-177.609375-27.542969-272.507813 36.898438-317.792969 86.863281v-257.324218zm0 0" fill="#b0d3f0"/><path d="m185.378906 485.515625h-52.964844c-4.875 0-8.828124-3.949219-8.828124-8.824219 0-4.878906 3.953124-8.828125 8.828124-8.828125h52.964844c4.875 0 8.828125 3.949219 8.828125 8.828125 0 4.875-3.953125 8.824219-8.828125 8.824219zm0 0" fill="#2c2f38"/><path d="m167.722656 0v26.484375c0 4.875-3.949218 8.824219-8.824218 8.824219-4.878907 0-8.828126-3.949219-8.828126-8.824219v-26.484375zm0 0" fill="#2c2f38"/><g fill="#fff"><path d="m44.136719 247.171875c-3.511719 0-6.691407-2.085937-8.089844-5.308594-1.402344-3.222656-.757813-6.96875 1.636719-9.539062l123.585937-132.414063c2.132813-2.390625 5.390625-3.4375 8.515625-2.742187 3.125.699219 5.625 3.03125 6.539063 6.101562.910156 3.070313.089843 6.390625-2.148438 8.683594l-123.585937 132.414063c-1.664063 1.792968-4.003906 2.8125-6.453125 2.804687zm0 0"/><path d="m52.964844 308.964844c-3.496094 0-6.660156-2.058594-8.074219-5.257813-1.414063-3.195312-.808594-6.925781 1.542969-9.511719l176.550781-194.207031c3.28125-3.605469 8.867187-3.871093 12.472656-.589843 3.609375 3.28125 3.875 8.867187.59375 12.472656l-176.554687 194.207031c-1.671875 1.839844-4.042969 2.886719-6.53125 2.886719zm0 0"/><path d="m141.242188 282.484375c-3.480469 0-6.632813-2.042969-8.054688-5.214844-1.425781-3.175781-.851562-6.886719 1.460938-9.484375l70.621093-79.449218c2.09375-2.355469 5.289063-3.414063 8.378907-2.773438 3.089843.636719 5.601562 2.875 6.59375 5.867188.992187 2.996093.3125 6.292968-1.785157 8.648437l-70.621093 79.449219c-1.675782 1.878906-4.074219 2.957031-6.59375 2.957031zm0 0"/></g></svg>
--- a/static/resume.pdf
+++ b/static/resume.pdf