Server: fix duration string, add verbose option

Organized image files.

.gitignore

@@ -1,5 +1,7 @@
-public/*
+public/
-/* resources/_gen/* */
+/* _gen files required by Netlify */
+resources/_gen/
 themes/base16*
 
 commit-msg.txt
+static/server-apps.json

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;
+  background-color: $background-color;
-  color: #f2f0ec;
+  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,97 @@ footer {// {{{
     color: $base-orange;
   }
 
-  h2 {
+  .date {
-    color: $base-yellow;
+    float: right;
-    display: inline;
+    color: $base03;
   }
 
-  p {
+  .project {
-    &.project-date {
+    @include vert-padding-rem(.2);
-      float: right;
+
+    h2 {
+      color: $base-sky-blue;
+      display: inline;
+    }
+
+    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;
+    // }
+  }
+
+}// }}}
+
+#server {// {{{
+  .body {
+    @include vert-padding-rem(.5);
+  }
+
+  h1 {
+    margin-bottom: .25em;
+  }
+
+  // table {
+    // margin-top: 1.75em;
+  // }
+
+  th, td {
+    @include vert-padding-rem(.4);
+    @include side-padding-rem(.5);
+    border: 1px solid rgba(160, 159, 147, .5);
+  }
+
+  th {
+    color: $base-orange;
+    text-align: center;
+    font-size: 1.3em;
+  }
+
+  td {
+    font-size: .9em;
+
+  }
+
+  .description {
+    font-size: .85em;
+  }
+
+  .status {
+    text-align: center;
+
+    img {
+      height: 2em;
     }
   }
 
-}
+  #time-info {
+    padding-top: 1em;
+    font-size: .75em;
+    font-style: italic;
+    color: $base03;
+  }
+}// }}}
 
 // TODO: converted up to here
 
@@ -543,42 +661,42 @@ h1.site-title {// {{{
 //  article.single {{{ // 
 
 article.single {
-    .meta {
+  .meta {
-      font-size: 0.9em;
+    font-size: 0.9em;
-      text-align: right;
+    text-align: right;
-      margin-top: .5rem;
+    margin-top: .5rem;
-      margin-bottom: .5rem;
+    margin-bottom: .5rem;
 
-      .key {
+    .key {
-        color: #747369;
+      color: #747369;
-      }
+    }
 
-      .val {
+    .val {
+      color: #cc99cc;
+
+      a {
         color: #cc99cc;
-
-        a {
-          color: #cc99cc;
-        }
       }
+    }
 
+  }
+
+  .body {
+    padding-top: 1rem;
+    padding-bottom: 3rem;
+  }
+
+  @media (max-width: $max-page-width) {
+    .meta {
+      padding-left: 2rem;
+      padding-right: 2rem;
     }
 
     .body {
-      padding-top: 1rem;
+      padding-top: .5rem;
-      padding-bottom: 3rem;
+      padding-bottom: 1rem;
     }
 
-    @media (max-width: $max-page-width) {
-      .meta {
-        padding-left: 2rem;
-        padding-right: 2rem;
-      }
-
-      .body {
-        padding-top: .5rem;
-        padding-bottom: 1rem;
-      }
-
   }
 }
 

config.yaml

@@ -20,9 +20,17 @@ menu:
   # - name: posts/
     # url: /posts
     # weight: 6
+  - name: server
+    url: /server
+    weight: 7
+  - name: config
+    url: /config
+    weight: 10
   # - name: credits
     # url: /credits
-    # weight: 10
+    # weight: 20
-  # - name: config
+    
-    # url: /config
+blackfriday:
+  plainIDAnchors: true
+  hrefTargetBlank: true
 

content/config/_index.md

@@ -1,27 +1,29 @@
 ---
-title: "Config"
+title: "Linux Config"
-date: 2019-02-07T05:05:11-05:00
+date: 2019-04-26
-draft: true
+draft: false
+layout: single 
 ---
 <!---  Intro {{{ --> 
-# Kevin's Linux Setup
 
 ![desktop-screenshot](https://i.imgur.com/Fpsr8Fc.png)
 *Screenshot from my dual-monitor setup.*
 
-This repository contains the dotfiles to increase my workflow efficiency. They
+This [repository][lc-repo] contains the dotfiles to increase my workflow 
-are also for my Linux
+efficiency. They are also for my Linux [rice][ricing_explanation].
-[rice](https://www.reddit.com/r/unixporn/comments/3iy3wd/stupid_question_what_is_ricing/cukxwog/).
+
+[lc-repo]: https://git.kevin-mok.com/Kevin-Mok/linux-config
+[ricing_explanation]: https://www.reddit.com/r/unixporn/comments/3iy3wd/stupid_question_what_is_ricing/cukxwog/
 <!---  }}} Intro -->
 
 <!---  Main Programs {{{ --> 
 ## Main Programs
 * **OS**: [Arch Linux](https://www.archlinux.org/) ([packages](txt/nzxt-pkgs.txt))
-```
+    ```
-> systemd-analyze
+    $ systemd-analyze
-Startup finished in 2.341s (kernel) + 1.085s (userspace) = 3.426s 
+    Startup finished in 2.341s (kernel) + 1.085s (userspace) = 3.426s 
-graphical.target reached after 1.085s in userspace
+    graphical.target reached after 1.085s in userspace
-```
+    ```
 * **Terminal**: [rxvt-unicode-pixbuf](https://www.wikiwand.com/en/Rxvt) 
 * **Shell**: [Zsh](http://zsh.sourceforge.net/) + [oh-my-zsh](https://github.com/robbyrussell/oh-my-zsh)
 * **Window Manager**: [i3-gaps](https://github.com/Airblader/i3)

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

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

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,
+I am a 3<sup>rd</sup> year CS student and enthusiast of all things Linux
-provide the opportunity to gain valuable knowledge and experience and
+and FOSS. I am looking for an internship to fully dedicate myself to that
-jumpstart my career with a solid foundation.
+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 name="Spotify Visualizer" 
+url="https://github.com/Kevin-Mok/spotify-lib-vis" date="July 2018" show="true" %}}
 
-{{% resume/project-details %}}
+- Web app that scans your Spotify library using their API to produce
-
+  [**d3** graphs][d3 graph examples] to visualize the artists, genres and
-- Web app that scans your Spotify library using their API to produce [d3
+  features of tracks in your library.
-  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 ingredient labels and detects any dietary 
-- Android app that reads ingredients labels and detects any dietary			
+  restrictions/allergies. 
-  restrictions/allergies. Came up with the idea based on 
+- Made during a 24-hour [food-themed hackathon][Platterz Hackathon event]
-  [personal experience][Parsafood motivation].
+  in a group with two other members. Came in 2<sup>nd</sup> place and won
-- Made during the 24-hour [Platterz	Hackathon][Platterz Hackathon event] in
+  an [Oculus Rift][Oculus Rift Amazon].
-  a group with two other members. Came in 2nd place and won an 
+- Came up with the idea based on [personal experience][Parsafood motivation].
-  [Oculus Rift][Oculus Rift Amazon].
 
 [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 name="Grocery Finder" 
+url="https://github.com/Kevin-Mok/grocery-finder" date="April 2019" 
+show="true" %}}
 
-{{% resume/project-details %}}
+- Proof of concept for a web app that finds the best supermarket for 
-- Proof of concept for a web app that finds the best supermarket for your needs.
+  your needs based on the total price of your cart items and distance 
-- Took on role as project leader to prioritize and delegate tasks while
+  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.
-- 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 be 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 %}}<!--- }}} -->

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 }}} -->
+

content/resume/printable.txt

@@ -0,0 +1,4 @@
+- bg colors
+- site title max width
+- switch project shortcode
+- rm details top margin

content/server/_index.md

@@ -0,0 +1,15 @@
+---
+title: "Server Apps"
+date: 2019-09-22
+draft: false
+layout: single
+js: ["server-table"]
+---
+Here is a list of apps that I am running a my [DigitalOcean 
+droplet][do-droplet]. Their statuses are updated every hour using a 
+[Node.js script][update-script] and a [systemd service]/[timer].
+
+[do-droplet]: https://www.digitalocean.com/products/droplets/
+[update-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

ideas.md

@@ -4,28 +4,15 @@
     - 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
@@ -33,19 +20,20 @@
   - cd/ls diff. pages
 
 # Medium
-- socials in footer
+- contact page
   - icons
-  - email
+    - Gitea
-    - tooltip pop-up with email and clipboard button/link
+    - GitHub
-    - [Pure CSS Tooltips](https://www.youtube.com/watch?v=hAeQ8CqrGDY)
+    - email
-    - use position element
+      - copy button
-    - [Copying Text to Clipboard in HTML & JavaScript](https://www.youtube.com/watch?v=NHg6jQajaMs)
+        - [Copying Text to Clipboard in HTML & JavaScript](https://www.youtube.com/watch?v=NHg6jQajaMs)
-    - [Native Browser Copy To Clipboard](https://css-tricks.com/native-browser-copy-clipboard/)
+        - [Native Browser Copy To Clipboard](https://css-tricks.com/native-browser-copy-clipboard/)
+    - Fosstodon
 - pages
   - fav. apps
   - linux config 
+    - neofetch on all devices
   - credits
-  - contact?
 - site stats
   - size
   - load time
@@ -57,9 +45,6 @@
 - create different size images for SVG
   - https://www.sitepoint.com/svg-good-for-website-performance/ 
 
-Break> {{{
-> }}}
-
 ## Archived
 - about/homepage
   - typing animation

layouts/partials/base/footer.html

@@ -1,5 +1,9 @@
 </div>
 
+{{- range .Params.js }}
+<script src="/{{ . }}.js"></script>
+{{- end }}
+
 <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> -->

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">

layouts/partials/home/me-equation.html

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

layouts/partials/resume/contact-info.html

@@ -0,0 +1,15 @@
+<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>
+  <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>
+</div>

layouts/partials/resume/print-icon.html

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

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">

layouts/server/single.html

@@ -0,0 +1,20 @@
+{{ partial "base/header.html" . }}
+
+{{ partial "base/site-title.html" . }}
+
+{{ partial "base/nav-bar.html" . }}
+
+{{ partial "base/base16-logo.html" . }}
+
+<main role="main" id="server">
+  {{ partial "base/article.html" . }}
+  <table>
+  </table>
+  <div id="time-info">
+    <!-- <p id="last-updated">Last updated: <span id="last-updated-time"></span></p> -->
+    <!-- <p id="server-uptime">Server Uptime: <span id="server-uptime-time"></span></p> -->
+    Last updated: <span id="last-updated-time"></span> Server Uptime: <span id="server-uptime-time">
+  </div>
+</main>
+
+{{ partial "base/footer.html" . }}

layouts/shortcodes/resume/project-details.html

@@ -1,4 +1,4 @@
 {{ $_hugo_config := `{ "version": 1 }` }}
 <div class="project-details">
-  {{ .Inner | markdownify }}
+  {{ .Inner }}
 </div>

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>

layouts/shortcodes/resume/project.html

@@ -0,0 +1,16 @@
+<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="collapse{{ with .Get "show" }} show{{ end }}" id="{{ .Get "name" | lower | urlize }}-details">
+    <div>
+      {{ .Inner }}
+    </div>
+  </div>
+</div>

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>

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 */

resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.json

@@ -1 +0,0 @@
-{"Target":"sass/main.css","MediaType":"text/css","Data":{}}

static/img/linux-icon.svg

@@ -1,116 +0,0 @@
-<?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 512.002 512.002" style="enable-background:new 0 0 512.002 512.002;" xml:space="preserve">
-<g>
-	<path style="fill:#FFFFFF;" d="M259.345,110.181c-0.076-0.789-0.112-1.578-0.112-2.369c0-11.578,7.584-20.997,16.903-20.997
-		c9.537,0,17.007,9.223,17.007,20.997c0,2.666-0.401,5.236-1.148,7.61c2.795-4.442,4.412-10.032,4.412-15.892
-		c0-14.079-9-25.535-20.06-25.535c-11.063,0-20.06,11.455-20.06,25.535c0,3.461,0.542,6.849,1.615,10.099
-		C258.369,109.807,258.851,109.992,259.345,110.181z"/>
-	<path style="fill:#FFFFFF;" d="M209.407,87.924c0.604-0.092,1.157-0.134,1.707-0.134c7.418,0,14.069,7.281,15.812,17.311
-		c0.175,1.1,0.285,2.196,0.334,3.277c0.482-0.245,0.972-0.475,1.471-0.688c0.245-1.739,0.364-3.369,0.364-5.006
-		c0-12.986-6.879-23.957-15.019-23.957c-6.933,0-12.775,7.636-14.44,17.95C201.532,91.973,204.993,88.657,209.407,87.924z"/>
-	<path style="fill:#FFFFFF;" d="M349.093,349.859c1.865-7.908,5.575-28.1,2.063-52.525c-4.438-30.87-47.875-126.994-55.35-137.727
-		c-4.36,0.609-15.946,7.304-25.342,12.733c-10.896,6.295-22.166,12.807-29.829,15.019c-1.6,0.453-3.273,0.677-4.997,0.677
-		c-11.199,0-23.32-9.468-31.135-16.926c-1.365,14.472-9.078,32.835-17.423,42.273c-5.271,6.045-9.982,19.854-14.538,33.21
-		c-4.22,12.367-8.583,25.157-13.925,33.592c-10.809,16.842-17.009,49.555-9.144,68.159c3.806,9.018,17.62,19.668,29.807,29.062
-		c14.905,11.491,27.776,21.413,29.196,31.419c1.657,11.831-4.635,18.388-10.927,21.497l15.961,18.263
-		c2.466,0.374,8.405,1.091,17.712,1.091c10.886,0,22.97-0.952,35.907-2.834c31.763-4.705,53.886-30.88,58.261-36.438
-		c0.023-7.363,0.248-40.123,2.396-50.366c0.834-3.945,4.037-10.547,16.136-10.547C345.803,349.488,347.594,349.653,349.093,349.859z
-		"/>
-</g>
-<g>
-	<path style="fill:#E69629;" d="M210.488,147.081c0.623,2.422,6.136,8.617,14.71,14.242c1.217,0.781,2.359,1.558,3.431,2.286
-		c4.756,3.232,6.871,4.559,10.29,4.098c5.034-0.66,23.579-11.904,31.499-16.706l1.971-1.194c2.949-1.796,5.306-3.023,7.2-4.009
-		c3.75-1.951,4.089-2.266,4.249-2.978c-0.425-1.103-3.926-4.056-10.641-6.364c-2.134-0.764-5.162-1.974-8.67-3.374
-		c-7.589-3.03-17.984-7.176-22.197-7.922c-0.18-0.034-0.349-0.045-0.539-0.045c-3.586,0-10.831,4.499-18.031,11.194
-		C220.211,139.513,213.283,144.92,210.488,147.081z"/>
-	<path style="fill:#E69629;" d="M147.149,395.532c-3.119-5.222-5.815-9.735-7.27-11.984c-5.738-8.931-15.696-18.907-20.442-18.907
-		c-0.416,0-0.635,0.097-0.777,0.181c-2.533,1.442-4.662,5.837-6.723,10.084c-2.847,5.875-6.075,12.535-12.036,16.146
-		c-4.41,2.676-11.152,4.138-17.668,5.555c-4.637,1.007-15.493,3.362-16.003,5.562c-0.703,2.968-0.049,6.033,0.781,9.913
-		c0.977,4.578,2.196,10.274,1.158,17.267c-0.732,4.386-2.063,8.575-3.354,12.627c-1.793,5.637-3.826,12.03-2.073,13.995
-		c2.162,1.909,15.207,4.019,24.731,5.562c11.972,1.937,24.351,3.942,31.932,7.118l2.009,0.846
-		c13.579,5.706,38.854,16.329,51.622,16.329c1.162,0,2.152-0.094,2.951-0.274c2.202-1.482,11.531-8.184,13.284-16.424
-		c2.394-10.619-7.338-23.005-13.349-29.444C169.25,432.519,156.477,411.14,147.149,395.532z"/>
-	<path style="fill:#E69629;" d="M435.761,420.974l-1.556-0.819c-10.688-5.65-16.307-20.984-15.563-32.542
-		c0.139-2.129-0.126-3.78-0.557-5.045c-1.974,3.247-4.793,7.348-8.143,10.697c-5.691,5.692-19.584,11.833-32.105,11.833
-		c-4.67,0-8.927-0.823-12.652-2.448c-12.498-5.451-14.202-21.081-14.234-28.917c-0.185,0.052-0.354,0.112-0.505,0.183
-		c-0.764,2.701-0.024,11.806,0.475,17.935c0.267,3.279,0.542,6.669,0.705,9.78c0.708,13.708-3.658,36.958-7.447,54.049
-		c-3.597,16.732,3.097,28.464,11.224,30.997c0.73,0.232,1.551,0.346,2.453,0.346c7.487,0,19.886-7.749,30.848-19.285
-		c7.788-8.189,25.122-17.04,40.416-24.85c8.622-4.402,17.537-8.956,20.071-11.271c0.564-0.525,0.648-0.819,0.65-0.821
-		C449.681,428.282,439.568,422.972,435.761,420.974z"/>
-</g>
-<path d="M461.071,411.093c-15.014-6.147-21.437-14.308-20.816-26.485c0.64-14.212-7.423-24.62-11.252-28.733
-	c2.313-8.837,9.073-39.406,0.007-65.959c-9.743-28.42-39.49-71.825-70.183-114.492c-12.565-17.522-13.159-36.57-13.846-58.625
-	c-0.658-21.036-1.4-44.88-13.131-71.387C319.095,16.55,293.501,0,261.628,0c-18.961,0-38.424,5.926-53.401,16.257
-	c-30.67,21.167-26.616,67.316-23.933,97.851c0.368,4.182,0.713,8.132,0.915,11.504c1.786,29.908,0.161,45.672-1.964,50.463
-	c-1.375,3.131-8.143,12.041-15.306,21.476c-7.408,9.758-15.807,20.816-22.691,31.121c-8.214,12.401-14.845,31.355-21.257,49.684
-	c-4.692,13.411-9.124,26.08-13.438,33.655c-8.177,14.564-6.142,28.145-4.444,34.422c-3.096,2.15-7.568,6.386-11.343,14.366
-	c-4.563,9.736-13.821,14.967-33.072,18.669c-8.847,1.81-14.947,5.53-18.137,11.056c-4.642,8.043-2.113,18.148,0.193,25.056
-	c3.408,10.151,1.284,16.577-2.577,28.246c-0.89,2.691-1.899,5.741-2.921,9.102c-1.61,5.308-1.029,10.131,1.722,14.341
-	c7.27,11.113,28.486,15.033,50.326,17.613c13.04,1.548,27.312,6.763,41.116,11.808c13.525,4.942,27.511,10.054,40.223,11.605
-	c1.932,0.243,3.846,0.364,5.691,0.364c19.194,0,27.866-12.735,30.616-17.967c6.894-1.407,30.673-5.912,55.181-6.518
-	c24.469-0.697,48.143,4.135,54.85,5.635c2.108,4.036,7.667,13.253,16.527,18.004c4.87,2.662,11.647,4.188,18.588,4.188
-	c0.002,0,0,0,0.002,0c7.413,0,21.516-1.753,32.678-13.497c11.133-11.796,38.949-26.859,59.261-37.856
-	c4.533-2.454,8.773-4.751,12.491-6.822c11.41-6.325,17.636-15.362,17.081-24.794C474.141,421.194,468.955,414.322,461.071,411.093z
-	 M276.345,73.995c11.061,0,20.06,11.455,20.06,25.535c0,5.859-1.617,11.449-4.412,15.892c0.745-2.374,1.148-4.944,1.148-7.61
-	c0-11.774-7.47-20.997-17.007-20.997c-9.32,0-16.903,9.419-16.903,20.997c0,0.791,0.039,1.58,0.112,2.369
-	c-0.494-0.188-0.975-0.374-1.445-0.552c-1.073-3.25-1.615-6.638-1.615-10.099C256.284,85.451,265.282,73.995,276.345,73.995z
-	 M242.329,125.164c4.214,0.744,14.606,4.892,22.197,7.922c3.508,1.4,6.539,2.61,8.67,3.374c6.715,2.308,10.217,5.261,10.641,6.364
-	c-0.159,0.713-0.499,1.027-4.249,2.978c-1.894,0.985-4.25,2.211-7.2,4.009l-1.971,1.194c-7.92,4.803-26.465,16.048-31.499,16.706
-	c-3.42,0.46-5.535-0.868-10.29-4.098c-1.073-0.73-2.214-1.506-3.431-2.286c-8.573-5.627-14.088-11.82-14.71-14.242
-	c2.795-2.16,9.723-7.568,13.27-10.771c7.2-6.695,14.445-11.194,18.031-11.194C241.978,125.117,242.15,125.13,242.329,125.164z
-	 M214.073,78.724c8.142,0,15.019,10.97,15.019,23.957c0,1.638-0.118,3.267-0.364,5.006c-0.499,0.213-0.989,0.445-1.471,0.688
-	c-0.049-1.083-0.161-2.177-0.334-3.277c-1.742-10.03-8.394-17.311-15.812-17.311c-0.549,0-1.101,0.042-1.707,0.134
-	c-4.413,0.735-7.875,4.049-9.772,8.751C201.299,86.359,207.142,78.724,214.073,78.724z M189.271,469.128
-	c-1.753,8.241-11.083,14.942-13.284,16.424c-0.799,0.18-1.788,0.274-2.951,0.274c-12.768,0-38.043-10.623-51.622-16.329
-	l-2.009-0.846c-7.583-3.178-19.961-5.18-31.932-7.118c-9.525-1.543-22.568-3.653-24.731-5.562c-1.753-1.966,0.28-8.358,2.073-13.995
-	c1.291-4.052,2.624-8.241,3.354-12.627c1.036-6.993-0.181-12.691-1.158-17.267c-0.829-3.881-1.484-6.945-0.781-9.913
-	c0.51-2.199,11.366-4.554,16.003-5.562c6.518-1.417,13.26-2.879,17.668-5.555c5.961-3.611,9.189-10.27,12.036-16.146
-	c2.061-4.247,4.19-8.642,6.723-10.084c0.143-0.086,0.361-0.181,0.777-0.181c4.746,0,14.704,9.975,20.442,18.907
-	c1.455,2.249,4.151,6.76,7.27,11.984c9.329,15.609,22.102,36.987,28.773,44.151C181.933,446.123,191.664,458.508,189.271,469.128z
-	 M327.787,360.037c-2.145,10.243-2.372,43.003-2.396,50.366c-4.375,5.558-26.498,31.732-58.261,36.438
-	c-12.938,1.88-25.019,2.834-35.907,2.834c-9.307,0-15.246-0.719-17.712-1.091l-15.961-18.263
-	c6.292-3.109,12.584-9.666,10.927-21.497c-1.42-10.005-14.291-19.928-29.196-31.419c-12.187-9.394-26.001-20.042-29.807-29.062
-	c-7.865-18.602-1.665-51.315,9.144-68.159c5.342-8.434,9.705-21.225,13.925-33.592c4.556-13.356,9.268-27.166,14.538-33.21
-	c8.345-9.438,16.057-27.801,17.423-42.273c7.814,7.458,19.936,16.926,31.135,16.926c1.724,0,3.398-0.225,4.997-0.677
-	c7.662-2.213,18.931-8.724,29.829-15.019c9.396-5.429,20.982-12.124,25.342-12.733c7.475,10.734,50.912,106.858,55.35,137.727
-	c3.512,24.425-0.198,44.616-2.063,52.525c-1.501-0.206-3.29-0.371-5.17-0.371C331.824,349.488,328.621,356.092,327.787,360.037z
-	 M449.194,431.621c-2.533,2.315-11.449,6.869-20.071,11.271c-15.295,7.808-32.631,16.661-40.416,24.85
-	c-10.962,11.536-23.361,19.285-30.848,19.285c-0.901,0-1.722-0.114-2.453-0.346c-8.128-2.533-14.821-14.266-11.224-30.997
-	c3.789-17.093,8.153-40.341,7.447-54.049c-0.163-3.112-0.438-6.502-0.705-9.78c-0.499-6.127-1.239-15.233-0.475-17.935
-	c0.151-0.071,0.319-0.131,0.505-0.183c0.032,7.836,1.734,23.467,14.234,28.917c3.725,1.625,7.982,2.448,12.652,2.448
-	c12.521,0,26.414-6.141,32.105-11.833c3.351-3.349,6.169-7.45,8.143-10.697c0.431,1.264,0.697,2.916,0.557,5.044
-	c-0.744,11.558,4.873,26.891,15.563,32.542l1.556,0.819c3.807,1.996,13.92,7.307,14.083,9.824
-	C449.842,430.801,449.758,431.097,449.194,431.621z"/>
-<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>

static/img/resume/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>

static/img/resume/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>

static/img/resume/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>

static/img/resume/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>

static/img/server/check.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="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 507.2 507.2" style="enable-background:new 0 0 507.2 507.2;" xml:space="preserve">
+<circle style="fill:#32BA7C;" cx="253.6" cy="253.6" r="253.6"/>
+<path style="fill:#0AA06E;" d="M188.8,368l130.4,130.4c108-28.8,188-127.2,188-244.8c0-2.4,0-4.8,0-7.2L404.8,152L188.8,368z"/>
+<g>
+	<path style="fill:#FFFFFF;" d="M260,310.4c11.2,11.2,11.2,30.4,0,41.6l-23.2,23.2c-11.2,11.2-30.4,11.2-41.6,0L93.6,272.8
+		c-11.2-11.2-11.2-30.4,0-41.6l23.2-23.2c11.2-11.2,30.4-11.2,41.6,0L260,310.4z"/>
+	<path style="fill:#FFFFFF;" d="M348.8,133.6c11.2-11.2,30.4-11.2,41.6,0l23.2,23.2c11.2,11.2,11.2,30.4,0,41.6l-176,175.2
+		c-11.2,11.2-30.4,11.2-41.6,0l-23.2-23.2c-11.2-11.2-11.2-30.4,0-41.6L348.8,133.6z"/>
+</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>

static/img/server/x.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 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<circle style="fill:#E21B1B;" cx="256" cy="256" r="256"/>
+<path style="fill:#C40606;" d="M510.28,285.304L367.912,142.936L150.248,368.608l140.928,140.928
+	C406.352,493.696,497.056,401.288,510.28,285.304z"/>
+<g>
+	<path style="fill:#FFFFFF;" d="M354.376,371.536c-5.12,0-10.232-1.952-14.144-5.856L146.408,171.848
+		c-7.816-7.816-7.816-20.472,0-28.28s20.472-7.816,28.28,0L368.52,337.4c7.816,7.816,7.816,20.472,0,28.28
+		C364.608,369.584,359.496,371.536,354.376,371.536z"/>
+	<path style="fill:#FFFFFF;" d="M160.544,371.536c-5.12,0-10.232-1.952-14.144-5.856c-7.816-7.816-7.816-20.472,0-28.28
+		l193.832-193.832c7.816-7.816,20.472-7.816,28.28,0s7.816,20.472,0,28.28L174.688,365.68
+		C170.784,369.584,165.664,371.536,160.544,371.536z"/>
+</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>

static/server-table.js

@@ -0,0 +1,101 @@
+const log = console.log
+
+const headerKeys = {
+  "status": "Status",
+  "url": "URL",
+  "description": "Description",
+  "repo": "Repository"
+}
+const keyOrder = ["status", "url", "description", "repo"]
+
+const generateTableHead = table => {
+  let thead = table.createTHead();
+  let row = thead.insertRow();
+  keyOrder.forEach(key => {
+    let th = document.createElement("th");
+    th.textContent = headerKeys[key];
+    row.appendChild(th);
+  })
+}
+
+const generateTable = (table, data) => {
+  data.forEach(elem => {
+    let row = table.insertRow();
+    keyOrder.forEach(key => {
+      const cell = row.insertCell();
+      cell.className = key;
+      const aElem = document.createElement('a')
+      aElem.target = '_blank'
+      switch (key) {
+        case 'status':
+          // cell.textContent = ((elem[key] == 'up') ? '🗸' : '✗')
+          const statusIcon = document.createElement('img')
+          statusIcon.src = '/img/server/' + ((elem[key] == 'up') ? 'check' : 'x') + '.svg'
+          cell.appendChild(statusIcon)
+          break
+        case 'url':
+          aElem.href = elem[key]
+          aElem.textContent = elem['shortUrl']
+          cell.appendChild(aElem)
+          break
+        case 'repo':
+          aElem.href = elem['repoUrl']
+          aElem.textContent = elem[key]
+          cell.appendChild(aElem)
+          break
+        default:
+          cell.textContent = elem[key]
+      }
+    })
+  })
+}
+
+const getDurationSince = (date, verbose) => { 
+  const milli = Math.abs(Date.now() - date)
+  let mins = Math.floor(milli/1000/60)
+  const days = Math.floor(mins/60/24)
+  mins %= 60*24
+  const hours = Math.floor(mins/60)
+  mins %= 60
+
+  let dayString = ''
+  let hourString = ''
+  let minString = ''
+  if (days > 0) {
+    dayString += days
+    if (!verbose) {
+      dayString += 'd '
+    } else {
+      dayString += (days == 1) ? ' day' : ' days'
+      dayString += ', '
+    }
+  }
+  if (hours > 0) {
+    hourString += hours
+    if (!verbose) {
+      hourString += 'h '
+    } else {
+      hourString += (hours == 1) ? ' hour' : ' hours'
+      hourString += ', '
+    }
+  }
+  minString += (mins > 0) ? mins: '0' 
+  if (!verbose) {
+    minString += 'm'
+  } else {
+    minString += (mins == 1) ? ' minute' : ' minutes'
+  }
+  return dayString + hourString + minString
+}
+
+fetch("/server-apps.json")
+  .then(response => response.json())
+  .then(json => {
+    let table = document.querySelector("table");
+    generateTable(table, json['sites']);
+    generateTableHead(table);
+    document.querySelector('#last-updated-time').textContent =
+      getDurationSince(new Date(json['updateTime']), false) + ' ago.'
+    document.querySelector('#server-uptime-time').textContent = 
+      getDurationSince(new Date(json['upSince']), true) + '.'
+  });