Add skills, improve project descriptions

- add LinkedIn to resume
- fix Unicode expand icon not showing on mobile
- change footer background to line above

assets/sass/main.scss

@@ -2,6 +2,7 @@
 
 //  base colors {{{ // 
 
+$base02: #515151;
 $base03: #747369;
 $base04: #a09f93;
 $base05: #d3d0c8; 
@@ -34,30 +35,36 @@ $base-dark-orange: #d27b53;
 
 //  mixins {{{ // 
 
-$max-page-width: 52em;
+// $max-page-width: 52em;
+$max-page-width: 45em;
 $phone-width: 800px;
 
-@mixin side-padding-rem($n) {
+@mixin side-padding-rem($n) {// {{{
   padding-left: $n * 1rem;
   padding-right: $n * 1rem;
-}
+}// }}}
 
-@mixin vert-padding-rem($n) {
+@mixin side-margin-em($n) {// {{{
+  margin-left: $n * 1em;
+  margin-right: $n * 1em;
+}// }}}
+
+@mixin vert-padding-rem($n) {// {{{
   padding-top: $n * 1rem;
   padding-bottom: $n * 1rem;
-}
+}// }}}
 
-@mixin vert-margin-em($n) {
-  margin-top: $n * 1em;
-  margin-bottom: $n * 1em;
-}
+@mixin vert-margin-rem($n) {// {{{
+  margin-top: $n * 1rem;
+  margin-bottom: $n * 1rem;
+}// }}}
 
-@mixin auto-center() {
+@mixin auto-center() {// {{{
   margin-left: auto;
   margin-right: auto;
-}
+}// }}}
 
-@mixin article-body() {
+@mixin article-body() {// {{{
   /* background-color: #e6e6fa; */
   background-color: #cbbeb5;
   color: #2d2d2d;
@@ -69,9 +76,9 @@ $phone-width: 800px;
   @media (max-width: $max-page-width) {
     @include side-padding-rem(2);
   }
-}
+}// }}}
 
-@mixin a-color($color) {
+@mixin a-color($color) {// {{{
   a {
     color: $color;
     &:visited {
@@ -81,7 +88,7 @@ $phone-width: 800px;
       color: $color;
     }
   }
-}
+}// }}}
 
 //  }}} mixins // 
 
@@ -97,7 +104,8 @@ body {
   background-color: $background-color;
   color: $color;
   line-height: 1.5;
-  font-size: 100%;
+  // font-size: 100%;
+  font-size: 15px;
   /* font-family: 'Source Code Pro', monospace; */
   font-family: 'Hack', monospace;
   display: flex;
@@ -153,41 +161,62 @@ header {
 }
 
 footer {
+  //  base {{{ // 
+  
+  @include a-color(#747369);
+  // background-color: #393939;
+  // max-width: $max-page-width;
   margin-top: 2rem;
-  margin-bottom: 1rem;
+  $vertical-margin: .2em;
   text-align: center;
-  font-size: 0.9em;
+  font-size: 0.8em;
   color: #747369;
   // bottom: 0;
   // position: absolute;
   // width: 100%;
+  
+  //  }}} base // 
 
-  .container {
-    background-color: #393939;
-    max-width: 62em;
+  .container {// {{{
+    // max-width: $max-page-width;
+    // min-width: $max-page-width;
     @include auto-center();
-    @include vert-padding-rem(.1);
-  }
+    // @include vert-padding-rem(.1);
+    @include side-padding-rem(0);
 
-  $vertical-margin: .2em;
-
-  #copyright {
-    position: relative;
-    top: 2px;
-    @include a-color(#747369);
-  }
-
-  #social-icons {
-    position: relative;
-    padding-left: 3px;
-
-    img {
-      height: 1.5em;
-      @include vert-margin-em(.2);
-      padding-left: .5em;
-      opacity: .6;
+    #footer-row {
+      // background-color: #393939;
     }
-  }
+
+    #footer-content {
+      $side-padding: 2.5em;
+      @include vert-padding-rem(.35);
+      border-style: solid;
+      border-width: 1px 0 0 0;
+      border-color: rgba(81, 81, 81, .75);
+
+      #copyright {
+        // padding-left: .85em;
+        padding-left: $side-padding;
+        position: relative;
+        top: 2px;
+        @include a-color(#747369);
+      }
+
+      #social-icons {
+        position: relative;
+        padding-right: $side-padding;
+        // padding-right: .9em;
+
+        img {
+          height: 1.5em;
+          @include vert-margin-rem(.2);
+          padding-left: .5em;
+          opacity: .6;
+        }
+      }
+    }
+  }// }}}
 
   @media (max-width: $max-page-width) {
     margin-top: 0;
@@ -215,8 +244,20 @@ p {
   margin-bottom: 1rem;
 }
 
-h1 { font-size: 2rem }
-h2 { font-size: 1.5rem }
+h1 {
+  font-size: 2rem;
+
+  @media (max-width: $phone-width) {
+    font-size: 1.75rem;
+  }
+}
+h2 {
+  font-size: 1.5rem;
+
+  @media (max-width: $phone-width) {
+    font-size: 1.4rem;
+  }
+}
 h3 { font-size: 1.25rem }
 h4 { font-size: 1rem }
 h5 { font-size: .875rem }
@@ -243,10 +284,6 @@ header {// {{{
   }
 }// }}}
 
-footer {// {{{
-  @include a-color(#747369);
-}// }}}
-
 .page-not-found {// {{{
   h1 {
     text-align: center;
@@ -273,11 +310,12 @@ footer {// {{{
 
 #homepage {// {{{
   #about {
-    font-size: 1.25rem;
+    font-size: 1.1rem;
 
     h2 {
         margin-top: 1.25rem;
-        font-size: 2rem;
+        // font-size: 2rem;
+        font-size: 1.9rem;
         color: $base-yellow;
         text-align: center;
 
@@ -445,78 +483,166 @@ footer {// {{{
 }// }}}
 
 #contact-info {// {{{
-  @include vert-padding-rem(0.5);
-  display: flex;
-  align-content: center;
+  @include side-margin-em(0);
+  // @include vert-padding-rem(0.5);
+  @include a-color($base-sky-blue);
+  // min-width: $max-page-width;
+  @media (min-width: 1200px) {
+      .container{
+        min-width: $max-page-width;
+      }
+  }
 
-  div {
-    flex-grow: 1;
+  font-size: .9em;
+
+  .row {
+    // flex-grow: 1;
     color: $base05;
 
     img {
       height: 1em;
+      // @media (max-width: $phone-width) {
+        // height: 1.5em;
+      // }
+    }
+
+    div[class^="col"] {
+      @include side-padding-rem(0);
+      // text-align: center;
+
+    }
+
+  }
+
+  .url-info {
+    margin-left: 5px;
+    // position: relative;
+    // left: -8px;
+    @media (max-width: $phone-width) {
+      // display: none;
+      // font-size: 10px;
+      font-size: .8em;
     }
   }
 
-  #email {
-    text-align: center;
-  }
-
-  #website {
-    text-align: right;
-  }
 }// }}}
 
 #resume {// {{{
-  a {
+  a {// {{{
     text-decoration: none;
     &:hover {
       text-decoration: underline;
     }
-  }
+  }// }}}
 
-  h1 {
+  h1 {// {{{
     color: $base-orange;
-  }
+    margin-top: 1rem;
 
-  .date {
+    @media (max-width: $phone-width) {
+      margin-top: .75rem;
+    }
+  }// }}}
+  h2 {// {{{
+    color: $base-orange;
+    margin-top: .5rem;
+
+    @media (max-width: $phone-width) {
+      font-size: 1.2em;
+      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;
     float: right;
     color: $base03;
+    
+    @media (max-width: $phone-width) {
+      padding-top: 0em;
+    }
+  }// }}}
+
+  #projects {// {{{
+    h1 {
+      margin-bottom: 3px;
+    }
+
+    .project {// {{{
+      @include vert-padding-rem(.2);
+
+      h2 {
+        color: $base-sky-blue;
+        display: inline;
+      }
+
+      img {
+        height: 1.2em;
+      }
+
+      .project-link {
+        &:hover {
+          text-decoration: none;
+        }
+      }
+
+      .down-triangle {
+        // fill: blue;
+        height: 1.2em;
+        position: relative;
+        top: -3px;
+        left: -3px;
+      }
+
+      .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;
+      // }
+    }
+  }// }}}
+
+  .institution {
+    color: $base-yellow;
+    font-weight: bold;
+    font-size: 1.1em;
+    margin-bottom: 5px;
   }
 
-  .project {
-    @include vert-padding-rem(.2);
+  .title {
+    font-style: italic;
+  }
 
-    h2 {
-      color: $base-sky-blue;
-      display: inline;
+  #education {// {{{
+    .date {
+      padding-top: 0;
     }
+  }// }}}
 
-    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;
-    // }
+  @media (max-width: $phone-width) {
+    font-size: 14px;
+    // font-size: 1em;
   }
 
 }// }}}
@@ -577,12 +703,12 @@ footer {// {{{
 
 h1.site-title {// {{{
   text-align: center;
-  /* font-size: 3.5em; */
-  font-size: 4.8em;
+  font-size: 4.2em;
   // color: #66cccc;
   color: $base05;
-  margin-top: 1rem;
-  margin-bottom: 0.5rem;
+  // margin-top: 1rem;
+  // margin-bottom: 0.75rem;
+  @include vert-margin-rem(.75);
 
   @include a-color($base-sky-blue);
   a {
@@ -594,15 +720,22 @@ h1.site-title {// {{{
   }
 
   @media (max-width: $phone-width) {
-    // font-size: 3em;
+    font-size: 3.5em;
+    @include vert-margin-rem(.3);
     // font-size: 2.5em;
-    font-size: 2em;
+    // font-size: 2em;
+
+    .surrounding {
+      display: none;
+    }
   }
 }// }}}
 
 .hero-logo img {
   margin-top: 0.5rem;
   width: 100%;
+  // display: none;
+  // width: $max-page-width;
 }
 
 .nav-bar {// {{{

content/config/_index.md

@@ -6,7 +6,7 @@ layout: single
 ---
 <!---  Intro {{{ --> 
 
-![desktop-screenshot](https://i.imgur.com/Fpsr8Fc.png)
+![desktop-screenshot](https://img.khkm.tk/uploads/big/b2bd45e8f436d389ecb787b5c61c951a.png)
 *Screenshot from my dual-monitor setup.*
 
 This [repository][lc-repo] contains the dotfiles to increase my workflow 
@@ -34,8 +34,10 @@ efficiency. They are also for my Linux [rice][ricing_explanation].
 <!---  Setup {{{ --> 
 
 ## Setup
-I use
-[Stow](http://brandon.invergo.net/news/2012-05-26-using-gnu-stow-to-manage-your-dotfiles.html)
-to symbolically link the configs/dotfiles.
+I use [chezmoi] to manage varying configs for different machines with 
+a single branch.                                                         
+
+[chezmoi]: https://github.com/twpayne/chezmoi
+
 
 <!---  }}} Setup --> 

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" 
-url="https://github.com/Kevin-Mok/spotify-lib-vis" date="July 2018" show="true" %}}
+{{% resume/project name="Spotify Graphs" 
+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
-  [**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.
+- Scan tracks from user's library using Spotify API and organize data into 
+  database.
+- Created and tested various __PostgreSQL__ schemas to increase efficiency for 
+  use cases.
+- Produce bubble chart and (stacked) bar chart in [**d3** graphs][d3 graph examples]
+  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]: https://www.eventbrite.com/e/platterz-hackathon-tickets-42682237722
+[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 %}}
 
 <!--- 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 
-  their respective SoundCloud links.
-- Received positive feedback from users who saw the bot's posts.
-- Uses __Python__ API wrappers for SoundCloud and reddit.
+- Use reddit API wrapper in **Python** to scan music subreddits for user 
+  comments containing common track listing formats.
+- Match detected track name and artists to track on SoundCloud using another 
+  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
-  face-tracking script (**OpenCV**).
+- Uses **OpenCV** to track player's head movement which is then translated to 
+  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 education %}}<!--- {{{ -->
+{{% resume/section "Work Experience" %}}<!--- {{{ -->
 
-- **University of Toronto**: Computer Science Specialist <div class="date">2017-2021</div>
+{{% 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/partials/base/footer.html

@@ -7,39 +7,39 @@
 <footer>
   <div class="container">
     <!-- <span class="copyright">&copy; {{ .Site.LastChange.Year }} {{ .Site.Title }} - <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a></span> -->
-    <div class="row justify-content-center">
-      <span id="copyright" class="col-xs-6">
-        &copy; {{ now.Year }} {{ .Site.Title }} · 
-        <!-- <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a> ·  -->
-        <!-- <a href="{{ "credits" | relURL }}">Credits</a> ·  -->
-      </span>
-      <span id="social-icons" class="col-xs-4">
-        <a href="https://github.com/Kevin-Mok" target="_blank">
-          <img src="{{ "img/social/github.svg" | relURL }}"
-          alt="github-logo">
-        </a>
-        <a href="https://www.linkedin.com/in/kevin-kh-mok" target="_blank">
-          <img src="{{ "img/social/linkedin.svg" | relURL }}" alt="linkedin-logo">
-        </a>
-        <a href="https://git.kevin-mok.com/" target="_blank">
-          <img src="{{ "img/social/gitea.svg" | relURL }}" alt="gitea-logo">
-        </a>
-        <a href="mailto:me@kevin-mok.com" target="_blank">
-          <img src="{{ "img/social/email.svg" | relURL }}"
-          alt="envelope">
-        </a>
-        <a href="https://fosstodon.org/web/accounts/93113" target="_blank">
-          <img src="{{ "img/social/mastodon.svg" | relURL }}"
-          alt="mastodon-logo">
-        </a>
-      </span>
-      <span id="social-icons" class="col-xs-2">
+    <div id="footer-row" class="row justify-content-center">
+      <span id="footer-content" class="name">
+        <span id="copyright" class="col-xs-6">
+          &copy; {{ now.Year }} {{ .Site.Title }} · 
+          <!-- <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a> ·  -->
+          <!-- <a href="{{ "credits" | relURL }}">Credits</a> ·  -->
+        </span>
+        <span id="social-icons" class="col-xs-4">
+          <a href="https://github.com/Kevin-Mok" target="_blank">
+            <img src="{{ "img/social/github.svg" | relURL }}"
+            alt="github-logo">
+          </a>
+          <a href="https://www.linkedin.com/in/Kev-Mok" target="_blank">
+            <img src="{{ "img/social/linkedin.svg" | relURL }}" alt="linkedin-logo">
+          </a>
+          <a href="https://git.kevin-mok.com/" target="_blank">
+            <img src="{{ "img/social/gitea.svg" | relURL }}" alt="gitea-logo">
+          </a>
+          <a href="mailto:me@kevin-mok.com" target="_blank">
+            <img src="{{ "img/social/email.svg" | relURL }}"
+            alt="envelope">
+          </a>
+          <a href="https://fosstodon.org/web/accounts/93113" target="_blank">
+            <img src="{{ "img/social/mastodon.svg" | relURL }}"
+            alt="mastodon-logo">
+          </a>
+        </span>
+        <span class="col-xs-2">
+        </span>
       </span>
     </div>
   </div>
-
 </footer>
 
-
 </body>
 </html>

layouts/partials/base/site-title.html

@@ -1,7 +1,7 @@
 <h1 class="site-title">
-  [<a href="{{ .Site.BaseURL }}"><span class="base08">K</span><span
+  <span class="surrounding">[</span><a href="{{ .Site.BaseURL }}"><span class="base08">K</span><span
     class="base0f">e</span><span class="base09">v</span><span
     class="base0a">i</span><span class="base0b">n </span><span
     class="base0c">M</span><span class="base0d">o</span><span
-    class="base0e">k</span></a>] # _
+    class="base0e">k</span></a><span class="surrounding">] # _</span>
 </h1>

layouts/partials/home/about.html

@@ -1,7 +1,7 @@
 <div id="about">
 <h2>Welcome to my site!</h2>
 <p>
-  I'm Kevin Mok - a 2<sup>nd</sup> year Computer Science
+  I'm Kevin Mok - a 3<sup>rd</sup> year Computer Science
   student at the University of Toronto, and I'm greatly interested in all things Linux and 
   <a href="https://www.gnu.org/philosophy/floss-and-foss.en.html"
     target="_blank">FOSS/FLOSS</a>.

layouts/partials/resume/contact-info.html

@@ -1,15 +1,39 @@
-<div id="contact-info">
-  <div id="phone-number">
-    <img src="{{ "img/resume/smartphone.svg" | relURL }}"
-    alt="smartphone-icon">:
-    <a href="tel:647-685-2500" target="_blank">647-685-2500</a>
+<div id="contact-info" class="container">
+  <div class="row row-top justify-content-center">
+    <div id="phone-number" class="col text-left">
+      <a href="tel:647-685-2500" target="_blank">
+        <img src="{{ "img/resume/smartphone.svg" | relURL }}"
+          alt="smartphone-icon">
+        <span class="url-info">
+          647-685-2500
+        </span>
+      </a>
+    </div>
+    <div id="linkedin" class="col text-right">
+      <a href="https://www.linkedin.com/in/Kev-Mok">
+        <span class="url-info">
+          Kev-Mok
+        </span>
+        <img src="{{ "img/social/linkedin.svg" | relURL }}" alt="linkedin-icon">
+      </a>
+    </div>
   </div>
-  <div id="email">
-    <img src="{{ "img/resume/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/resume/link.svg" | relURL }}" alt="link-icon">:
-    <a href="https://kevin-mok.com/">kevin-mok.com</a>
+  <div class="row justify-content-center">
+    <div id="email" class="col col-left">
+      <a href="mailto:me@kevin-mok.com">
+        <img src="{{ "img/resume/envelope.svg" | relURL }}" alt="envelope-icon">
+        <span class="url-info">
+          me@kevin-mok.com
+        </span>
+      </a>
+    </div>
+    <div id="website" class="col text-right">
+      <a href="https://kevin-mok.com/">
+        <span class="url-info">
+          kevin-mok.com
+        </span>
+        <img src="{{ "img/resume/link.svg" | relURL }}" alt="link-icon">
+      </a>
+    </div>
   </div>
 </div>

layouts/resume/section.html

@@ -6,8 +6,6 @@
 
 {{ partial "resume/contact-info.html" . }}
 
-{{ partial "base/base16-logo.html" . }}
-
 <div id="resume">
   
 {{ .Content }}

layouts/shortcodes/resume/education.html

@@ -0,0 +1,13 @@
+<div class="education">
+  <div class="row">
+    <div class="col-8 text-left">
+      <p class="institution">
+        {{ .Get "name" }}
+      </p>
+    </div>
+    <div class="col text-right date">{{ .Get "date" }}</div>
+  </div>
+  <span class="title">
+    {{ .Get "title" }}
+  </span>
+</div>

layouts/shortcodes/resume/project.html

@@ -1,14 +1,23 @@
 <div class="project">
-  <a class="project-link" href="{{ .Get "url" }}" target="_blank">
-    <img src="{{ "img/resume/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="row project-header">
+    <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>
+      <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" }}
+          <!-- <img class="down-triangle" src="{{ "img/resume/down-triangle.svg" | relURL }}" alt="link-icon"> -->
+          <img class="down-triangle" src="{{ "img/resume/down-triangle.png" | relURL }}" alt="link-icon">
+        </h2>
+      </button>
+    </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>