Revert print team ranking letter

Custom sitemap layout to hide letters.

.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,9 +112,9 @@ body {
   color: $color;
   line-height: 1.5;
   // font-size: 100%;
-  // font-size: 15px;
+  font-size: 15px;
-  font-size: 20px;
+  // font-size: 25px;
-  /* font-family: 'Source Code Pro', monospace; */
+  // font-family: 'Hack Nerd Font Mono', monospace;
   font-family: 'Hack', monospace;
   display: flex;
   flex-direction: column;
@@ -208,12 +215,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 +257,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 +487,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);
-  // min-width: $max-page-width;
+  width: 100%;
-  @media (min-width: 1200px) {
+  // @media (min-width: 1200px) {
-      .container{
+      // .container{
-        min-width: $max-page-width;
+        // min-width: $max-page-width;
-      }
+      // }
-  }
+  // }
-  a {// {{{
-    text-decoration: none;
-    &:hover {
-      text-decoration: none;
-    }
-  }// }}}
 
   font-size: .9em;
 
@@ -526,11 +532,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 +551,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 +603,6 @@ header {// {{{
         height: 1.2em;
       }
 
-      .project-header {
-        margin-bottom: .6em;
-      }
-
       .project-link {
         &:hover {
           text-decoration: none;
@@ -651,13 +654,14 @@ 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;
+    // font-size: 21px;
 
     img {
       height: 4.5em;
@@ -665,19 +669,33 @@ header {// {{{
 
     h2 {
       color: $base-red;
-      margin-top: 0em;
+      // font-size: 30px;
+      // margin-top: 0em;
+      // margin-top: .5em;
+      // margin-top: 1.25em;
+      // margin-bottom: 1em;
     }
 
+
     p {
-      margin-bottom: 1.25em;
+      margin-bottom: 1.5em;
+      // margin-bottom: 1em;
+    }
+    
+    ul {
+      // margin-bottom: 1.5em;
+      margin-bottom: 2em;
     }
     
     .no-line-spacing {
       line-height: .5em;
-      margin-bottom: 2em;
+      margin-bottom: 2.15em;
       p {
         margin-bottom: 1em;
       }
+      strong {
+        line-height: 1.25em;
+      }
     }
   }
 }// }}}
@@ -732,6 +750,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,9 +930,9 @@ 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) {
     // font-size: 3.5em;

config.yaml

@@ -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,19 +3,10 @@ title: "Resume"
 date: 2019-02-11T07:50:51-05:00
 draft: false
 ---
-{{% resume/section overview %}}<!--- {{{ -->
-
-3<sup>rd</sup> year CS student. Enthusiast of all things
-Linux and FOSS. Seeking 16-month internship for my PEY
-co-op program. Looking to gain industry-relevant experience in 
-full-stack web dev, DevOps or system administration.
-
-{{% /resume/section %}}<!--- }}} -->
-
 {{% resume/section skills %}}<!--- {{{ -->
 
 #### Languages
-- **Bash**, C, **CSS**, C++, **Fish** (shell), Godot, **HTML5**, 
+- **Bash**, **C**, **CSS**, C++, **Fish** (shell), Godot, **HTML5**, 
   **Python**, Java, **Javascript** (ES6), **Sass**
 
 #### Frameworks
@@ -26,8 +17,8 @@ full-stack web dev, DevOps or system administration.
 
 #### Tools
 - **Arch Linux**, Android Studio, **Debian**, **Command Line**, 
-  **Git**, IntelliJ IDEA, **Pycharm**, **NGINX**, **SFTP**, **SSH**, 
+  **Git**, IntelliJ IDEA, **Pycharm**, **NGINX**, npm/yarn, **SFTP**, 
-  **Vim**
+  **SSH**, **Vim**
 
 {{% /resume/section %}}<!--- }}} -->
 
@@ -44,8 +35,9 @@ show="true" %}}
   into **PostgreSQL** database with **Django** backend.
 - Created and tested various relational database schemas to maximize 
   efficiency for use cases.
-- Produced bubble chart and (stacked) bar chart using [**d3**]
+- Produced bubble chart and (stacked) bar chart using 
-[d3 graph examples] to visualize the artists, genres and features of 
+  [**d3**][d3 graph examples] to visualize the artists, 
+  genres and features of 
 tracks in library.
 
 [d3 graph examples]: https://github.com/d3/d3/wiki/Gallery
@@ -132,6 +124,27 @@ url="https://kevin-mok.com/server/" date="Aug. 2019 — present" %}}
 
 <!--- DigitalOcean Droplet }}} -->
 
+<!--- Super ADA Bros. {{{ -->
+
+{{% resume/project name="Super ADA Bros"
+url="https://github.com/Kevin-Mok/SuperADABros" date="May 2019" %}}
+
+- Designed clone of Super Mario Bros 1-1, but Mario is mobility-impaired and
+  uses ramps to get through the level.
+- 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 %}}
+
+
+<!--- Grocery Finder }}} -->
+
 {{% /resume/section %}}<!--- }}} -->
 
 {{% resume/section "Work Experience" %}}<!--- {{{ -->

content/resume/printable.txt

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

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/header.html

@@ -18,7 +18,7 @@
 <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,7 +1,7 @@
 <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 - a 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/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>

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]