Resume: add skills, improve project descriptions

assets/sass/main.scss

@@ -552,6 +552,15 @@ header {// {{{
       margin-top: .75rem;
     }
   }// }}}
+  h4 {// {{{
+    color: $base-yellow;
+    margin-top: .5rem;
+
+    @media (max-width: $phone-width) {
+      font-size: 1.2em;
+      margin-top: .75rem;
+    }
+  }// }}}
 
   .date {// {{{
     padding-top: .8em;
@@ -614,13 +623,18 @@ header {// {{{
     }
   }// }}}
 
-  #education {// {{{
   .institution {
+    color: $base-yellow;
     font-weight: bold;
     font-size: 1.1em;
     margin-bottom: 5px;
   }
 
+  .title {
+    font-style: italic;
+  }
+
+  #education {// {{{
     .date {
       padding-top: 0;
     }

content/resume/_index.md

@@ -12,19 +12,42 @@ full-stack web dev, DevOps or system administration.
 
 {{% /resume/section %}}<!--- }}} -->
 
+{{% resume/section skills %}}<!--- {{{ -->
+
+#### Languages
+- **Bash**, C, **CSS**, C++, **Fish**, Godot, **HTML5**, **Python**, 
+  Java, **Javascript (ES6)**, **Sass**
+
+#### Frameworks
+- **Bootstrap**, **Django**, **Node.js**, **PostgreSQL**
+
+#### Services
+- **DigitalOcean**, **Linux**, Heroku, **REST/Web API's**
+
+#### Tools
+- **Arch Linux**, Android Studio, **Debian**, **Command Line**, 
+  **Git**, IntelliJ IDEA, **Pycharm**, **NGINX**, **SFTP**, **SSH**, 
+  **Vim**
+
+{{% /resume/section %}}<!--- }}} -->
+
 {{% resume/section projects %}}<!--- {{{ -->
 
 <!--- Spotify Graphs {{{ -->
 
-{{% resume/project name="Spotify Visualizer" 
+{{% resume/project name="Spotify Graphs" 
-url="https://github.com/Kevin-Mok/spotify-lib-vis" date="July 2018" show="true" %}}
+url="https://github.com/Kevin-Mok/spotify-lib-vis" date="June 2018 — July 2018" 
+show="true" %}}
 
-- Web app that scans your Spotify library using their API to produce
+- Scan tracks from user's library using Spotify API and organize data into 
-  [**d3** graphs][d3 graph examples] to visualize the artists, genres and
+  database.
-  features of tracks in your library.
+- Created and tested various __PostgreSQL__ schemas to increase efficiency for 
-- Can also keep track of your listening history. Currently runs as a `cron`
+  use cases.
-  job on my local machine to keep track of my own.
+- Produce bubble chart and (stacked) bar chart in [**d3** graphs][d3 graph examples]
-- Uses __Django__ and __PostgreSQL__ for back-end.
+  to visualize the artists, genres and features of tracks in library.
+- Implement functionality to keep track of user's listening history. Set up 
+  `cron` job on my local machine to keep track of my own.
+- Uses __Django__ for backend.
 
 [d3 graph examples]: https://github.com/d3/d3/wiki/Gallery
 
@@ -32,6 +55,27 @@ url="https://github.com/Kevin-Mok/spotify-lib-vis" date="July 2018" show="true"
 
 <!--- Spotify Graphs }}} -->
 
+<!--- Grocery Finder {{{ -->
+
+{{% resume/project name="Grocery Finder" 
+url="https://github.com/Kevin-Mok/grocery-finder" date="Feb. 2019 — Apr. 2019" 
+show="true" %}}
+
+- PoC for web app that finds the ideal supermarket based on your cart.
+- Designed responsive front-end layout using **Bootstrap**.
+- Implemented REST API functionality on backend using **Node.js** and 
+  **MongoDB**.
+- Setup deployment on [**Heroku**][Grocery Finder Heroku].
+- Led team of 4 as project leader to prioritize and delegate tasks while
+  also implementing a majority of the core features.
+- Performed code review for team member's pull requests.
+
+[Grocery Finder Heroku]: http://www.grocery-finder.ml
+
+{{% /resume/project %}}
+
+<!--- Grocery Finder }}} -->
+
 <!--- ParsaFood {{{ -->
 
 {{% resume/project name="ParsaFood" 
@@ -40,70 +84,70 @@ show="true" %}}
 
 - **Android** app that reads ingredient labels and detects any dietary 
   restrictions/allergies. 
+- Designed user interface and linked various functionality together.
 - 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]: 
-[Platterz Hackathon event]: https://www.eventbrite.com/e/platterz-hackathon-tickets-42682237722
+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 %}}
 
 <!--- ParsaFood }}} -->
  
-<!--- Grocery Finder {{{ -->
-
-{{% 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 
-  from 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.
-
-[Grocery Finder Heroku]: http://www.grocery-finder.ml
-
-{{% /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 
+- Use reddit API wrapper in **Python** to scan music subreddits for user 
-  their respective SoundCloud links.
+  comments containing common track listing formats.
-- Received positive feedback from users who saw the bot's posts.
+- Match detected track name and artists to track on SoundCloud using another 
-- Uses __Python__ API wrappers for SoundCloud and reddit.
+  Python API wrapper.
+- Respond to original poster's comment with formatted list of tracks found.
+- Received positive comment from users who replied to the bot's posts.
 
 {{% /resume/project %}}
 
 <!--- Grocery Finder }}} -->
 
+<!--- DigitalOcean {{{ -->
+
+{{% resume/project name="Personal Server"
+url="https://kevin-mok.com/server/" date="Aug. 2019—present" %}}
+
+- Deployed various web apps with backends such as Node, PHP and Python using 
+  **NGINX** on a **Debian** server.
+- Monitor system resources and perform system maintenance using tmux.
+- Wrote [**Node.js** script][server script] and [**systemd** service][systemd service]/[timer]
+  to check and display the uptime of my pages every hour.
+
+[server script]: https://git.kevin-mok.com/Kevin-Mok/server-pages/src/branch/master/server-status.js
+[systemd service]: https://git.kevin-mok.com/Kevin-Mok/server-pages/src/branch/master/server-pages.service
+[timer]: https://git.kevin-mok.com/Kevin-Mok/server-pages/src/branch/master/server-pages.timer
+
+{{% /resume/project %}}
+
+<!--- DigitalOcean Droplet }}} -->
+
 <!--- 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
+- Designed clone of Super Mario Bros 1-1, but Mario is mobility-impaired and
   uses ramps to get through the level.
-- Able to be played using only head movement by getting input from a
+- Uses **OpenCV** to track player's head movement which is then translated to 
-  face-tracking script (**OpenCV**).
+  in-game movement. [Video Demo]
 - 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
+[Video Demo]: https://youtu.be/vRdENLGrBqM
 
 {{% /resume/project %}}
 
@@ -112,8 +156,20 @@ url="https://github.com/Kevin-Mok/SuperADABros" date="May 2019" %}}
 
 {{% /resume/section %}}<!--- }}} -->
 
+{{% resume/section "Work Experience" %}}<!--- {{{ -->
+
+{{% resume/education name="Philpott Children's Tennis" title="Head Instructor" date="2013—2015" %}}
+- Ran 8-week summer camp for inner-city youth with assistant coach.
+- Prepared daily lesson plans for 4 different age groups of children 
+  with varying skill levels and needs.
+- Supervised and ensured the safety and enjoyment of up to 20 children at once.
+
+{{% /resume/section %}}<!--- }}} -->
+
 {{% resume/section education %}}<!--- {{{ -->
 
 {{% resume/education name="University of Toronto" title="Computer Science Specialist" date="2017-2021" %}}
 
 {{% /resume/section %}}<!--- }}} -->
+
+<!-- vim: fdm=marker -->

layouts/shortcodes/resume/education.html

@@ -7,6 +7,7 @@
     </div>
     <div class="col text-right date">{{ .Get "date" }}</div>
   </div>
+  <span class="title">
     {{ .Get "title" }}
-</div>
+  </span>
 </div>

layouts/shortcodes/resume/project.html

@@ -1,6 +1,6 @@
 <div class="project">
   <div class="row project-header">
-    <div class="col-10 col-md-8 text-left">
+    <div class="col-8 text-left">
       <a class="project-link" href="{{ .Get "url" }}" target="_blank">
         <img src="{{ "img/resume/link.svg" | relURL }}" alt="link-icon">
       </a>
@@ -14,9 +14,10 @@
         </h2>
       </button>
     </div>
-    <div class="col-2 col-md-4 text-right date">{{ .Get "date" }}</div>
+    <div class="col-4 text-right date">{{ .Get "date" }}</div>
   </div>
   <div class="collapse{{ with .Get "show" }} show{{ end }}" id="{{ .Get "name" | lower | urlize }}-details">
+  <!-- <div class="show" id="{{ .Get "name" | lower | urlize }}-details"> -->
     <div>
       {{ .Inner }}
     </div>