Resume: add ref section

https://github.com/gohugoio/hugo/issues/6759#issuecomment-592015342

.gitignore

@@ -4,4 +4,5 @@ resources/_gen/
 themes/base16*
 
 commit-msg.txt
+.hugo_build.lock
 static/server-apps.json

.gitmodules

@@ -1,4 +1,7 @@
 [submodule "content/letter"]
 	path = content/letter
 	url = ssh://git@git.kevin-mok.com:399/Kevin-Mok/cover-letters.git
-	branch = drafts
+	branch = master
+[submodule "static/pdf"]
+	path = static/pdf
+	url = ssh://git@git.kevin-mok.com:399/Kevin-Mok/resume-pdf.git

assets/sass/main.scss

@@ -2,10 +2,14 @@
 
 //  base colors {{{ // 
 
+$base00: #2d2d2d;
+$base01: #393939;
 $base02: #515151;
 $base03: #747369;
 $base04: #a09f93;
 $base05: #d3d0c8; 
+$base06: #e8e6df;
+$base07: #f2f0ec;
 $base-red: #f2777a;
 $base-orange: #f99157;
 $base-yellow: #ffcc66;
@@ -15,13 +19,6 @@ $base-blue: #6699cc;
 $base-violet: #cc99cc;
 $base-dark-orange: #d27b53;
 
-/* .base00 { color: #2d2d2d; }
-.base01 { color: #393939; }
-.base02 { color: #515151; }
-.base03 { color: #747369; }
-.base04 { color: #a09f93; }
-.base06 { color: #e8e6df; }
-.base07 { color: #f2f0ec; } */
 .base08 { color: $base-red; }
 .base09 { color: $base-orange; }
 .base0a { color: $base-yellow; }
@@ -38,6 +35,7 @@ $base-dark-orange: #d27b53;
 // $max-page-width: 52em;
 $max-page-width: 45em;
 $phone-width: 800px;
+$vert-phone-width: 500px;
 
 @mixin side-padding-rem($n) {// {{{
   padding-left: $n * 1rem;
@@ -90,6 +88,15 @@ $phone-width: 800px;
   }
 }// }}}
 
+@mixin a-no-underline() {// {{{
+  a {
+    text-decoration: none;
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}// }}}
+
 //  }}} mixins // 
 
 //  general elements {{{ // 
@@ -105,8 +112,7 @@ body {
   color: $color;
   line-height: 1.5;
   // font-size: 100%;
-  // font-size: 15px;
+  font-size: 15px;
-  font-size: 20px;
   /* font-family: 'Source Code Pro', monospace; */
   font-family: 'Hack', monospace;
   display: flex;
@@ -208,12 +214,17 @@ footer {
         position: relative;
         padding-right: $side-padding;
         // padding-right: .9em;
+        @include a-no-underline();
 
         img {
           height: 1.5em;
           @include vert-margin-rem(.2);
           padding-left: .5em;
           opacity: .6;
+
+          &:hover {
+            opacity: 1;
+          }
         }
       }
     }
@@ -245,22 +256,22 @@ p {
   margin-bottom: 1rem;
 }
 
-// h1 {
+h1 {
-  // font-size: 2rem;
+  font-size: 2rem;
 
-  // @media (max-width: $phone-width) {
+  @media (max-width: $phone-width) {
-    // font-size: 1.75rem;
+    font-size: 1.75rem;
-  // }
+  }
-// }
+}
-// h2 {
+h2 {
-  // font-size: 1.5rem;
+  font-size: 1.5rem;
 
-  // @media (max-width: $phone-width) {
+  @media (max-width: $phone-width) {
-    // font-size: 1.4rem;
+    font-size: 1.4rem;
-  // }
+  }
-// }
+}
 h3 { font-size: 1.25rem }
-// h4 { font-size: 1rem }
+h4 { font-size: 1rem }
 h5 { font-size: .875rem }
 h6 { font-size: .75rem }
 
@@ -475,31 +486,25 @@ header {// {{{
 
 #print-icon {// {{{
   float: right;
-  display: none;
 
   img {
-    height: 1.75em;
+    height: 2em !important;
-    position: relative;
+    position: absolute;
     top: 1em;
   }
 }// }}}
 
 #contact-info {// {{{
   @include side-margin-em(0);
+  @include side-padding-rem(0);
   // @include vert-padding-rem(0.5);
   @include a-color($base-sky-blue);
+  width: 100%;
+  // @media (min-width: 1200px) {
+      // .container{
         // min-width: $max-page-width;
-  @media (min-width: 1200px) {
+      // }
-      .container{
+  // }
-        min-width: $max-page-width;
-      }
-  }
-  a {// {{{
-    text-decoration: none;
-    &:hover {
-      text-decoration: none;
-    }
-  }// }}}
 
   font-size: .9em;
 
@@ -526,11 +531,11 @@ header {// {{{
     margin-left: 5px;
     // position: relative;
     // left: -8px;
-    // @media (max-width: $phone-width) {
+    @media (max-width: $phone-width) {
-      // // display: none;
+      // display: none;
-      // // font-size: 10px;
+      // font-size: 10px;
-      // font-size: .8em;
+      font-size: .8em;
-    // }
+    }
   }
 
 }// }}}
@@ -545,44 +550,45 @@ header {// {{{
 
   h1 {// {{{
     color: $base-orange;
-    margin-top: 1.3rem;
+    margin-top: 1rem;
 
-    // @media (max-width: $phone-width) {
+    @media (max-width: $phone-width) {
-      // margin-top: .75rem;
+      margin-top: .75rem;
-    // }
+    }
   }// }}}
   h2 {// {{{
     color: $base-orange;
     margin-top: .5rem;
 
-    // @media (max-width: $phone-width) {
+    @media (max-width: $phone-width) {
-      // font-size: 1.2em;
+      font-size: 1.2em;
-      // margin-top: .75rem;
+      margin-top: .75rem;
-    // }
+    }
   }// }}}
   h4 {// {{{
     color: $base-yellow;
     margin-top: .5rem;
 
-    // @media (max-width: $phone-width) {
+    @media (max-width: $phone-width) {
-      // font-size: 1.2em;
+      font-size: 1.2em;
-      // margin-top: .75rem;
+      margin-top: .75rem;
-    // }
+    }
   }// }}}
 
   .date {// {{{
+    padding-top: .8em;
     float: right;
     color: $base03;
     
-    // @media (max-width: $phone-width) {
+    @media (max-width: $phone-width) {
-      // padding-top: 0em;
+      padding-top: 0em;
-    // }
+    }
   }// }}}
 
   #projects {// {{{
-    // // h1 {
+    h1 {
-      // // margin-bottom: 3px;
+      margin-bottom: 3px;
-    // // }
+    }
 
     .project {// {{{
       @include vert-padding-rem(.2);
@@ -596,10 +602,6 @@ header {// {{{
         height: 1.2em;
       }
 
-      .project-header {
-        margin-bottom: .6em;
-      }
-
       .project-link {
         &:hover {
           text-decoration: none;
@@ -651,10 +653,10 @@ header {// {{{
     }
   }// }}}
 
-  // @media (max-width: $phone-width) {
+  @media (max-width: $phone-width) {
-    // font-size: 14px;
+    font-size: 14px;
-    // // font-size: 1em;
+    // font-size: 1em;
-  // }
+  }
 
   &.letter {
     margin-top: 2em;
@@ -669,15 +671,18 @@ header {// {{{
     }
 
     p {
-      margin-bottom: 1.25em;
+      margin-bottom: 1.5em;
     }
     
     .no-line-spacing {
       line-height: .5em;
-      margin-bottom: 2em;
+      margin-bottom: 2.15em;
       p {
         margin-bottom: 1em;
       }
+      strong {
+        line-height: 1.25em;
+      }
     }
   }
 }// }}}
@@ -732,6 +737,168 @@ header {// {{{
   }
 }// }}}
 
+#card {// {{{
+  @include vert-margin-rem(2);
+  align-items: center;
+  justify-content: center;
+  font-family: 'Oxygen Mono', monospace;
+
+  .container {// {{{
+    padding-left: 0;
+    padding-right: 0;
+
+    .row {
+      padding-top: 6rem;
+      padding-bottom: 8rem;
+      
+      @media (max-width: $phone-width) {
+        padding-top: 5rem;
+        padding-bottom: 6rem;
+      }
+    }
+  }// }}}
+
+  // $card-bg: #e8e6df;
+  $card-bg: $base07;
+  #presentational-container {// {{{
+    margin-top: 3em;
+    margin-bottom: 1em;
+    max-width: $max-page-width;
+    box-shadow: 2px 2px 10px 5px black;
+    // card bg
+    // background-color: #fff;
+    // background-color: #e5e5e5;
+    background-color: $card-bg;
+  }// }}}
+
+  #email-full {// {{{
+    font-size: 50px;
+    @media (max-width: $phone-width) {
+      font-size: 40px;
+    }
+    @media (max-width: $vert-phone-width) {
+      font-size: 33px;
+    }
+
+    @include vert-margin-rem(2);
+    height: 7em;
+
+    img {
+      height: .5em;
+      position: absolute;
+      left: -.8em;
+      bottom: -.15em;
+    }
+
+    p { // {{{
+      position: relative;
+      // color: grey;
+      color: #151515;
+      // color: #133337;
+
+      div {
+        display: inline;
+      }
+
+      .social {// {{{
+        // display: none;
+        display: inline;
+        white-space: nowrap;
+        position: absolute;
+        // left: 5.5rem;
+        left: 0rem;
+
+        .safari {
+          display: none;
+        }
+
+        @supports (-webkit-backdrop-filter: blur(1px)) {
+          left: .65rem;
+          .safari {
+            display: inline;
+          }
+        }
+
+        .link-text {
+          position: relative;
+          width: 100%;
+        }
+
+        $border-thickness: 8px;
+        @media (max-width: $vert-phone-width) {
+          $border-thickness: 5px;
+        }
+        .link {
+          position: absolute;
+          border-color: black;
+          border-style: solid;
+          border-width: 0 $border-thickness $border-thickness $border-thickness;
+          height: .45em;
+          width: 100%;
+          left: 0;
+          img {
+            position: absolute;
+            left: -1em;
+          }
+
+          &.link-top {
+            border-width: $border-thickness $border-thickness 0 $border-thickness;
+
+            img {
+              position: absolute;
+              top: -.2em;
+            }
+          }
+
+          &:hover {
+            opacity: .6;
+          }
+        }
+
+        $line-spacing: .65em;
+        #mastodon {
+          top: -$line-spacing * 1.1;
+          border-color: #3088d4;
+        }
+        .linkedin {
+          bottom: -$line-spacing * 1.1;
+          border-color: #0077b7;
+
+          &.linkedin-middle {
+            border-style: dotted;
+            border-width: 0 0 3.5px 0;
+          }
+        }
+        #github {
+          bottom: -$line-spacing * 2.7;
+        }
+        #site {
+          bottom: -$line-spacing * 4.25;
+          border-color: #ff7058;
+        }
+        #email {
+          top: -$line-spacing * 2.65;
+          border-color: #d1d0bf;
+        }
+      }// }}}
+
+      .spacing {
+        opacity: 0;
+      }
+    }// }}}
+  }// }}}
+}// }}}
+
+#letter-home {// {{{
+
+  #letter-instr {
+    text-align: center;
+    margin-top: 1.5em;
+    // margin-top: 25vh;
+    font-size: 1.4em;
+  }
+}// }}}
+
 // TODO: converted up to here
 
 //  hero {{{ // 
@@ -750,20 +917,20 @@ h1.site-title {// {{{
     text-decoration: none;
   }
 
-  // @media (max-width: $phone-width) {
+  @media (max-width: $max-page-width) {
-    // font-size: 3em;
+    font-size: 3em;
-  // }
+  }
 
-  // @media (max-width: $phone-width) {
+  @media (max-width: $phone-width) {
-    // font-size: 3.5em;
+    font-size: 3.5em;
-    // @include vert-margin-rem(.3);
+    @include vert-margin-rem(.3);
-    // // font-size: 2.5em;
+    // font-size: 2.5em;
-    // // font-size: 2em;
+    // font-size: 2em;
 
-    // .surrounding {
+    .surrounding {
-      // display: none;
+      display: none;
-    // }
+    }
-  // }
+  }
 }// }}}
 
 .hero-logo img {

config.yaml

@@ -1,5 +1,5 @@
-# baseURL: http://localhost:1313/
+baseURL: http://localhost:1313/
-baseURL: https://kevin-mok.com/
+# baseURL: https://kevin-mok.com/
 # baseURL: /home/kevin/coding/mf-site/public
 languageCode: en-us
 # title: Kevin Mok's Website
@@ -29,16 +29,20 @@ menu:
   - name: card
     url: /card
     weight: 15
-  - name: letter
+  # - name: letter
-    url: /letter
+    # url: /letter
-    weight: 17
+    # weight: 17
   # - name: credits
     # url: /credits
     # weight: 20
     
-blackfriday:
+# blackfriday:
-  plainIDAnchors: true
+  # plainIDAnchors: true
-  hrefTargetBlank: true
+  # hrefTargetBlank: true
 
 disableKinds: ["RSS"]
 
+markup:
+  goldmark:
+    renderer:
+      unsafe: true

content/card/_index.md

@@ -1,5 +1,5 @@
 ---
 title: "Digital Card"
 date: 2019-02-11T07:50:51-05:00
-draft: true
+draft: false
 ---

content/config/_index.md

@@ -39,5 +39,4 @@ a single branch.
 
 [chezmoi]: https://github.com/twpayne/chezmoi
 
-
 <!---  }}} Setup --> 

content/resume/_index.md

@@ -3,126 +3,73 @@ title: "Resume"
 date: 2019-02-11T07:50:51-05:00
 draft: false
 ---
-{{% resume/section overview %}}<!--- {{{ -->
+{{% resume/section "Work Experience" %}}<!--- {{{ -->
 
-3<sup>rd</sup> year CS student. Enthusiast of all things
+{{% resume/education name="Red Hat" 
-Linux and FOSS. Seeking 16-month internship for my PEY
+title="Cloud/Software Engineer Intern" date="May 2020 — Aug 2021" %}}
-co-op program. Looking to gain industry-relevant experience in 
+- Reduced deployment time by **66%** by implementing ability to 
-full-stack web dev, DevOps or system administration.
+  deploy locally-compiled binaries onto **Kubernetes**/**OpenShift**
-
+  using only command-line. 
-{{% /resume/section %}}<!--- }}} -->
+- Implemented ability for Kubernetes operator to fetch data 
-
+  from a deployed service and update config with data.
-{{% resume/section skills %}}<!--- {{{ -->
+- Refactored probes to have default values assigned based on 
-
+  deployed YAML while also fixing reconciliation issues.
-#### Languages
+- Automated the promotion and release process 
-- **Bash**, C, **CSS**, C++, **Fish** (shell), Godot, **HTML5**, 
+  as part of the **Jenkins** release pipeline.
-  **Python**, Java, **Javascript** (ES6), **Sass**
+- Wrote documentation on how to get started with the project to onboard new 
-
+  developers and mentored the incoming intern.
-#### Frameworks
+- Presented a talk based on my experience called "8 Things I 
-- **Bootstrap**, **Django**, **Node.js**, **PostgreSQL**
+  Learned About Software Engineering" to an audience of 75+ 
-
+  in a conference for internship seekers.
-#### 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 {{{ -->
+<!--- Astronofty {{{ -->
 
-{{% resume/project name="Spotify Graphs" 
+{{% resume/project name="Astronofty" 
-url="https://github.com/Kevin-Mok/spotify-lib-vis" date="June 2018 — July 2018" 
+url="https://github.com/Kevin-Mok/astronofty" date="Jan 2023" 
 show="true" %}}
 
-- Implemented base functionality of scanning tracks and listening 
+- Created for a 36 hour hackathon (UofTHacks X) where it **came 2nd overall**.
-  history from user's library using Spotify API and organized data 
+- Created and deployed a smart contract with **Solidity** on 
-  into **PostgreSQL** database with **Django** backend.
+  the Ethereum blockchain to create/buy/sell NFT's 
-- Created and tested various relational database schemas to maximize 
+  using MetaMask.
-  efficiency for use cases.
+- Wrote a **React** hook to fetch and show listed NFT's, NFT details and owned NFT's.
-- Produced bubble chart and (stacked) bar chart using [**d3**]
+- Used API to synchronously upload images and metadata to IPFS.
-[d3 graph examples] to visualize the artists, genres and features of 
-tracks in library.
-
-[d3 graph examples]: https://github.com/d3/d3/wiki/Gallery
 
 {{% /resume/project %}}
 
-<!--- Spotify Graphs }}} -->
+<!--- Astronofty }}} -->
 
-<!--- Grocery Finder {{{ -->
+<!--- Rarity Surf {{{ -->
 
-{{% resume/project name="Grocery Finder" 
+{{% resume/project name="Rarity Surf" 
-url="https://github.com/Kevin-Mok/grocery-finder" date="Feb. 2019 — Apr. 2019" 
+date="Oct 2021" show="true" %}}
-show="true" %}}
 
-- Proof of concept for web app that finds the ideal supermarket based on your cart.
+- Web app to give rarity rankings to NFT's within minutes of their metadata being revealed and check which are listed (based on rarity and price filters) on the OpenSea marketplace using their API.
-- Designed responsive front-end layout using **Bootstrap**.
+- Reverse engineered the ranking algorithm to match the 
-- Implemented REST API functionality on backend using **Node.js** and 
+  leading rarity ranking site's rankings (scraped using 
-  **MongoDB**.
+  Selenium) with a **discrepancy of <0.25%**. 
-- Setup deployment on [**Heroku**][Grocery Finder Heroku].
+- Used app to frontrun purchases of **top 5%** rarity NFT's 
-- Led team of 4 as project leader to prioritize and delegate tasks while
+  against competing buyers.
-  also implementing a majority of the core features.
+- Wrote **Django** backend to fetch metadata from IPFS, store rarity rankings in PostgreSQL and serve rarity data using GraphQL.
-- Performed code review for team members' pull requests.
+- Wrote **React** frontend with hooks to dynamically load rarity data. Styled with Tailwind.
-
-[Grocery Finder Heroku]: http://www.grocery-finder.ml
 
 {{% /resume/project %}}
 
-<!--- Grocery Finder }}} -->
+<!--- Rarity Surf }}} -->
-
-<!--- ParsaFood {{{ -->
-
-{{% resume/project name="ParsaFood" 
-url="https://github.com/Kevin-Mok/ParsaFood" date="Feb. 2018" 
-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].
-
-[Parsafood repo]: https://github.com/Kevin-Mok/ParsaFood
-[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 }}} -->
- 
-<!--- TrapBot {{{ -->
-
-{{% resume/project name="TrapBot"
-url="https://github.com/Kevin-Mok/TrapBot" date="March 2018" %}}
-
-- 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" %}}
+url="https://kevin-mok.com/server/" date="Aug. 2019 — present" show="true" %}}
 
-- Deployed various web apps with backends such as Node, PHP and Python using 
+- Deployed various web apps with backends using NGINX on a Debian/**Linux** server.
-  **NGINX** on a **Debian** server.
+- Wrote a [**JavaScript** script][server script] and [systemd service][systemd service]/[timer]
-- Monitor system resources and perform system maintenance using tmux.
+  to display the uptime of my pages every hour.
-- Wrote [**Node.js** script][server script] and [**systemd** service][systemd service]/[timer]
+- Monitored system resources and performed system maintenance using tmux.
-  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
@@ -134,21 +81,22 @@ url="https://kevin-mok.com/server/" date="Aug. 2019 — present" %}}
 
 {{% /resume/section %}}<!--- }}} -->
 
-{{% resume/section "Work Experience" %}}<!--- {{{ -->
+{{% resume/section skills %}}<!--- {{{ -->
 
-{{% resume/education name="Philpott Children's Tennis" 
+- **JavaScript**, **React**,**Python**, Go, Bash, Solidity, C, **Django**, Node.js, PostgreSQL, **Linux**, **Git**, **Command Line**
-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" %}}
+title="Computer Science Specialist — 3.84 GPA (CS)" date="2018 — 2023" %}}
+
+{{% /resume/section %}}<!--- }}} -->
+
+{{% resume/section "References" %}}<!--- {{{ -->
+
+{{% resume/references title="See my LinkedIn (Kev-Mok) for references from my Red Hat managers/mentee and a startup client." %}}
 
 {{% /resume/section %}}<!--- }}} -->
 

content/resume/printable.txt

@@ -1,13 +1,4 @@
-# Base
 - bg colors
-- increase font size
+- site title max width
-- all phone width blocks
+- switch project shortcode
-- reset header sizes
+- rm details top margin
-- comment out font CSS stylesheet
-- hide print icon
-- right margin for social icons
-
-# Project
-- remove expand icon and link
-- rm ADA Bros.
-- show all sections by default 

layouts/letter/single.html

@@ -1,7 +1,5 @@
 {{ partial "base/header.html" . }}
 
-{{ partial "resume/print-icon.html" . }}
-
 {{ partial "base/site-title.html" . }}
 
 {{ partial "resume/contact-info.html" . }}

layouts/partials/base/footer.html

@@ -19,20 +19,30 @@
             <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="https://twitter.com/Kev_Mok" target="_blank">
+            <img src="{{ "img/social/twitter.svg" | relURL }}"
+            alt="twitter-logo">
+          </a>
+          <a rel="me" href="https://fosstodon.org/@Kevin" target="_blank">
+            <img src="{{ "img/social/mastodon.svg" | relURL }}"
+            alt="mastodon-logo">
+          </a>
+          <a href="https://www.reddit.com/u/Kevin-Mok" target="_blank">
+            <img src="{{ "img/social/reddit.svg" | relURL }}"
+            alt="reddit-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="mailto:me@kevin-mok.com" target="_blank">
             <img src="{{ "img/social/email.svg" | relURL }}"
             alt="envelope">
           </a>
-          <a href="https://fosstodon.org/@Kevin" target="_blank">
-            <img src="{{ "img/social/mastodon.svg" | relURL }}"
-            alt="mastodon-logo">
-          </a>
         </span>
         <span class="col-xs-2">
         </span>

layouts/partials/base/header.html

@@ -9,16 +9,16 @@
 {{- with $.Param "author" }}
 <meta name="author" content="{{ . }}">
 {{- end }}
-{{ .Hugo.Generator }}
+{{ hugo.Generator }}
 <meta name="google-site-verification" content="3aZhrY5bFgQY0HY2DNNUhbkuIfVEcwkrQHnbJd8jCCQ" />
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<script src="https://cdn.khkm.tk/live.js" charset="utf-8"></script>
+<!-- <script src="https://cdn.khkm.gq/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='//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">
 {{ $main_sass := resources.Get "sass/main.scss" }}

layouts/partials/home/about.html

@@ -1,10 +1,22 @@
 <div id="about">
 <h2>Welcome to my site!</h2>
 <p>
-  I'm Kevin Mok - a 3<sup>rd</sup> year Computer Science
+  I'm Kevin Mok. Here are a few things about myself!
-  student at the University of Toronto, and I'm greatly interested in all things Linux and 
+  <ul>
+    <li>I'm an Ex-Cloud Engineer Intern at 
+      <a href="https://www.redhat.com/" target="_blank">Red Hat</a>.
+    </li>
+    <li>
+      I'm a Computer Science student at the University of
+      Toronto, graduating at the end of 2023 (currently
+      looking for a full-time position!).
+    </li>
+    <li>
+      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>.
+    </li>
+  </ul>
 </p>
 
 {{ partial "home/me-equation.html" . }}

layouts/partials/home/me-equation.html

@@ -1,14 +1,8 @@
 <div class="me-equation">
   <div class="equation-part">
-    <a href="https://www.gnu.org/" target="_blank">
+    <a href="https://www.redhat.com/" target="_blank">
-      <img src="{{ "img/home/gnu.svg" | relURL }}" id="gnu" alt="gnu-logo">
+      <img src="{{ "img/home/red-hat.svg" | relURL }}"
-    </a>
+      alt="red-hat-logo">
-    <p>+</p>
-  </div>
-  <div class="equation-part">
-    <a href="https://www.wikiwand.com/en/Arch_Linux" target="_blank">
-      <img src="{{ "img/home/arch.svg" | relURL }}" alt="linux-logo">
-      <!-- <img src="{{ "img/home/larbs.png" | relURL }}" alt="linux-logo"> -->
     </a>
   <p>+</p>
   </div>
@@ -16,8 +10,14 @@
     <a href="https://www.utoronto.ca/" target="_blank">
       <img src="{{ "img/home/uoft-logo.svg" | relURL }}" alt="uoft-logo">
     </a>
-  <p>=</p>
+    <p>+</p>
   </div>
+  <div class="equation-part">
+    <a href="https://www.gnu.org/" target="_blank">
+      <img src="{{ "img/home/gnu.svg" | relURL }}" id="gnu" alt="gnu-logo">
+    </a>
+  </div>
+  <p>=</p>
   <div class="equation-part">
   <img src="{{ "img/home/hexatar.png" | relURL }}" id="hexatar" alt="my-avatar">
   </div>

layouts/partials/resume/print-icon.html

@@ -1,5 +1,5 @@
 <div id="print-icon">
-  <a href="{{ "kevin-mok-resume.pdf" | relURL }}" target="_blank">
+  <a href="{{ "pdf/kevin-mok-resume.pdf" | relURL }}" target="_blank">
     <img src="{{ "img/resume/printer.svg" | relURL }}" alt="printer-icon">
   </a>
 </div>

layouts/shortcodes/resume/letter-print.html

@@ -0,0 +1,8 @@
+<div id="print-icon">
+  {{ $type := .Get "type"  }}
+  {{ $code := .Get "code"  }}
+  {{ $pdfName := print "pdf/kevin-mok-" $type "-" $code ".pdf"  }}
+  <a href="{{ $pdfName | relURL }}" target="_blank">
+    <img src="{{ "img/resume/printer.svg" | relURL }}" alt="printer-icon">
+  </a>
+</div>

layouts/shortcodes/resume/project.html

@@ -1,22 +1,23 @@
 <div class="project">
   <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> -->
       <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">
-          <!-- <img class="down-triangle" src="{{ "img/resume/down-triangle.png" | relURL }}" alt="link-icon"> -->
         </h2>
-      </a>
+      </button>
     </div>
     <div class="col-4 text-right date">{{ .Get "date" }}</div>
   </div>
-  <div class="show" id="{{ .Get "name" | lower | urlize }}-details">
+  <div class="collapse{{ with .Get "show" }} show{{ end }}" id="{{ .Get "name" | lower | urlize }}-details">
     <div>
       {{ .Inner }}
-    </div>
+</div>
   </div>
 </div>

layouts/shortcodes/resume/references.html

@@ -0,0 +1,5 @@
+<div class="references">
+  <span>
+    {{ .Get "title" }}
+  </span>
+</div>

static/img/home/red-hat.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="b6bdd2b4-52ab-488a-9a30-1e6d1d7dd2d4" data-name="Layer 1" viewBox="0 0 192.30001 146" version="1.1" sodipodi:docname="logo.svg" width="192.3" height="146" inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
+  <metadata id="metadata15">
+    <rdf:RDF>
+      <cc:Work rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+        <dc:title/>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1920" inkscape:window-height="1007" id="namedview13" showgrid="false" fit-margin-top="1" fit-margin-right="1" fit-margin-bottom="1" fit-margin-left="1" inkscape:zoom="0.45930043" inkscape:cx="306.89999" inkscape:cy="73" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" inkscape:current-layer="b6bdd2b4-52ab-488a-9a30-1e6d1d7dd2d4"/>
+  <defs id="defs4">
+    <style id="style2">.a737459c-e8c7-4afa-8008-f6cfd15ccda2{fill:#e00;}</style>
+  </defs>
+  <path class="a737459c-e8c7-4afa-8008-f6cfd15ccda2" d="m 128,84 c 12.5,0 30.6,-2.6 30.6,-17.5 a 19.53,19.53 0 0 0 -0.3,-3.4 L 150.9,30.7 C 149.2,23.6 147.7,20.3 135.2,14.1 125.5,9.1 104.4,1 98.1,1 92.2,1 90.5,8.5 83.6,8.5 76.9,8.5 72,2.9 65.7,2.9 c -6,0 -9.9,4.1 -12.9,12.5 0,0 -8.4,23.7 -9.5,27.2 a 6.15,6.15 0 0 0 -0.2,1.9 C 43,53.7 79.3,83.9 128,84 m 32.5,-11.4 c 1.7,8.2 1.7,9.1 1.7,10.1 0,14 -15.7,21.8 -36.4,21.8 C 79,104.5 38.1,77.1 38.1,59 a 18.35,18.35 0 0 1 1.5,-7.3 C 22.8,52.5 1,55.5 1,74.7 1,106.2 75.6,145 134.6,145 c 45.3,0 56.7,-20.5 56.7,-36.7 0,-12.7 -11,-27.1 -30.8,-35.7" id="path8" inkscape:connector-curvature="0" style="fill:#ee0000"/>
+  <path d="m 160.5,72.6 c 1.7,8.2 1.7,9.1 1.7,10.1 0,14 -15.7,21.8 -36.4,21.8 C 79,104.5 38.1,77.1 38.1,59 a 18.35,18.35 0 0 1 1.5,-7.3 l 3.7,-9.1 a 6.15,6.15 0 0 0 -0.2,1.9 c 0,9.2 36.3,39.4 84.9,39.4 12.5,0 30.6,-2.6 30.6,-17.5 A 19.53,19.53 0 0 0 158.3,63 Z" id="path10" inkscape:connector-curvature="0"/>
+</svg>

static/img/social/reddit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px"><path fill="#FFF" d="M12.193 19.555c-1.94-1.741-4.79-1.727-6.365.029-1.576 1.756-1.301 5.023.926 6.632L12.193 19.555zM35.807 19.555c1.939-1.741 4.789-1.727 6.365.029 1.575 1.756 1.302 5.023-.927 6.632L35.807 19.555zM38.32 6.975A3.5 3.5 0 1 0 38.32 13.975 3.5 3.5 0 1 0 38.32 6.975z"/><path fill="#FFF" d="M24.085 15.665000000000001A18.085 12.946 0 1 0 24.085 41.557A18.085 12.946 0 1 0 24.085 15.665000000000001Z"/><g><path fill="#D84315" d="M30.365 23.506A2.884 2.884 0 1 0 30.365 29.274 2.884 2.884 0 1 0 30.365 23.506zM17.635 23.506A2.884 2.884 0 1 0 17.635 29.274 2.884 2.884 0 1 0 17.635 23.506z"/></g><g><path fill="#37474F" d="M24.002 34.902c-3.252 0-6.14-.745-8.002-1.902 1.024 2.044 4.196 4 8.002 4 3.802 0 6.976-1.956 7.998-4C30.143 34.157 27.254 34.902 24.002 34.902zM41.83 27.026l-1.17-1.621c.831-.6 1.373-1.556 1.488-2.623.105-.98-.157-1.903-.721-2.531-.571-.637-1.391-.99-2.307-.994-.927.013-1.894.365-2.646 1.041l-1.336-1.488c1.123-1.008 2.545-1.523 3.991-1.553 1.488.007 2.833.596 3.786 1.658.942 1.05 1.387 2.537 1.221 4.081C43.961 24.626 43.121 26.096 41.83 27.026zM6.169 27.026c-1.29-.932-2.131-2.401-2.306-4.031-.166-1.543.279-3.03 1.221-4.079.953-1.062 2.297-1.651 3.785-1.658.009 0 .018 0 .027 0 1.441 0 2.849.551 3.965 1.553l-1.336 1.488c-.753-.676-1.689-1.005-2.646-1.041-.916.004-1.735.357-2.306.994-.563.628-.826 1.55-.721 2.53.115 1.067.657 2.023 1.488 2.624L6.169 27.026zM25 16.84h-2c0-2.885 0-10.548 4.979-10.548 2.154 0 3.193 1.211 3.952 2.096.629.734.961 1.086 1.616 1.086h1.37v2h-1.37c-1.604 0-2.453-.99-3.135-1.785-.67-.781-1.198-1.398-2.434-1.398C25.975 8.292 25 11.088 25 16.84z"/><path fill="#37474F" d="M24.085 16.95c9.421 0 17.085 5.231 17.085 11.661 0 6.431-7.664 11.662-17.085 11.662S7 35.042 7 28.611C7 22.181 14.664 16.95 24.085 16.95M24.085 14.95C13.544 14.95 5 21.066 5 28.611c0 7.546 8.545 13.662 19.085 13.662 10.54 0 19.085-6.116 19.085-13.662C43.17 21.066 34.625 14.95 24.085 14.95L24.085 14.95zM38.32 7.975c1.379 0 2.5 1.122 2.5 2.5s-1.121 2.5-2.5 2.5-2.5-1.122-2.5-2.5S36.941 7.975 38.32 7.975M38.32 5.975c-2.484 0-4.5 2.015-4.5 4.5s2.016 4.5 4.5 4.5c2.486 0 4.5-2.015 4.5-4.5S40.807 5.975 38.32 5.975L38.32 5.975z"/></g></svg>

static/img/social/twitter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="240px" height="240px"><linearGradient id="_osn9zIN2f6RhTsY8WhY4a" x1="10.341" x2="40.798" y1="8.312" y2="38.769" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2aa4f4"/><stop offset="1" stop-color="#007ad9"/></linearGradient><path fill="url(#_osn9zIN2f6RhTsY8WhY4a)" d="M46.105,11.02c-1.551,0.687-3.219,1.145-4.979,1.362c1.789-1.062,3.166-2.756,3.812-4.758	c-1.674,0.981-3.529,1.702-5.502,2.082C37.86,8.036,35.612,7,33.122,7c-4.783,0-8.661,3.843-8.661,8.582	c0,0.671,0.079,1.324,0.226,1.958c-7.196-0.361-13.579-3.782-17.849-8.974c-0.75,1.269-1.172,2.754-1.172,4.322	c0,2.979,1.525,5.602,3.851,7.147c-1.42-0.043-2.756-0.438-3.926-1.072c0,0.026,0,0.064,0,0.101c0,4.163,2.986,7.63,6.944,8.419	c-0.723,0.198-1.488,0.308-2.276,0.308c-0.559,0-1.104-0.063-1.632-0.158c1.102,3.402,4.299,5.889,8.087,5.963	c-2.964,2.298-6.697,3.674-10.756,3.674c-0.701,0-1.387-0.04-2.065-0.122C7.73,39.577,12.283,41,17.171,41	c15.927,0,24.641-13.079,24.641-24.426c0-0.372-0.012-0.742-0.029-1.108C43.483,14.265,44.948,12.751,46.105,11.02"/></svg>

static/server-table.js

@@ -38,6 +38,9 @@ const generateTable = (table, data) => {
           aElem.textContent = elem['shortUrl']
           cell.appendChild(aElem)
           break
+        case 'description':
+          cell.innerHTML = elem[key]
+          break
         case 'repo':
           aElem.href = elem['repoUrl']
           aElem.textContent = elem[key]