Card: initial commit

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; }
@@ -697,6 +694,139 @@ 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;
+    }
+    @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;
+
+        .link-text {
+          position: relative;
+          width: 100%;
+        }
+
+        $border-thickness: 8px;
+        .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;
+      }
+      .social {
+        position: absolute;
+        // left: 5.5rem;
+        left: 0rem;
+      }
+    }
+  }
+}
+
 // TODO: converted up to here
 
 //  hero {{{ // 

config.yaml

@@ -26,6 +26,9 @@ menu:
   - name: config
     url: /config
     weight: 10
+  - name: card
+    url: /card
+    weight: 15
   # - name: credits
     # url: /credits
     # weight: 20

content/card/_index.md

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

content/credits/_index.md

@@ -1,5 +0,0 @@
----
-title: "Credits"
-date: 2019-02-11T03:10:25-05:00
-draft: true
----

content/resume/_index.md

@@ -39,16 +39,14 @@ full-stack web dev, DevOps or system administration.
 url="https://github.com/Kevin-Mok/spotify-lib-vis" date="June 2018 — July 2018" 
 show="true" %}}
 
-- Scans tracks from user's library using Spotify API and organize data 
-  into database.
-- Created and tested various __PostgreSQL__ schemas to increase efficiency for 
-  use cases.
+- Implemented base functionality of scanning tracks and listening 
+  history from user's library using Spotify API and organized data 
+  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**]
 [d3 graph examples] to visualize the artists, genres and features of 
 tracks in library.
-- Implemented functionality to keep track of user's listening history.  
-  - Set up `cron` job on my local machine to keep track of my own.
-- Uses __Django__ for backend.
 
 [d3 graph examples]: https://github.com/d3/d3/wiki/Gallery
 
@@ -62,8 +60,7 @@ tracks in library.
 url="https://github.com/Kevin-Mok/grocery-finder" date="Feb. 2019 — Apr. 2019" 
 show="true" %}}
 
-- Proof of concept for web app that finds the ideal supermarket based 
-  on your cart.
+- Proof of concept for web app that finds the ideal supermarket based on your cart.
 - Designed responsive front-end layout using **Bootstrap**.
 - Implemented REST API functionality on backend using **Node.js** and 
   **MongoDB**.

layouts/card/section.html

@@ -0,0 +1,63 @@
+{{ partial "base/header.html" . }}
+
+{{ partial "base/site-title.html" . }}
+
+{{ partial "base/nav-bar.html" . }}
+
+{{ partial "base/base16-logo.html" . }}
+
+<main role="main" id="card">
+  <div id="presentational-container" class="container">
+      <div class="row text-center h-100 my-auto">
+        <div id="email-full" class="h-100 mx-auto">
+          <p class="text-center">
+            <nobr>
+              me@kevin-mok.com
+              <span class="social"><span class="spacing">
+                  me</span><span class="link-text">@kevi
+                  <a href="https://fosstodon.org/@Kevin"
+                    target="_blank" id="mastodon" class="link link-top">
+                    <img src="https://kevin-mok.com/img/social/mastodon.svg" alt=""/>
+                  </a></span>
+              </span>
+              <span class="social"><span class="spacing">
+                  me@</span><span class="link-text">ke
+                  <a href="https://www.linkedin.com/in/Kev-Mok" target="_blank" 
+                    target="_blank" class="link linkedin linkedin-left">
+                    <img src="https://kevin-mok.com/img/social/linkedin.svg" alt=""/>
+                  </a></span>
+              </span>
+              <span class="social"><span class="spacing">
+                  me@kevin</span><span class="link-text">-mo
+                  <a href="https://www.linkedin.com/in/Kev-Mok" target="_blank" class="link linkedin linkedin-left"></a></span>
+              </span>
+              <span class="social"><span class="spacing">
+                  me@kev</span><span class="link-text">i
+                  <a href="https://www.linkedin.com/in/Kev-Mok" target="_blank" 
+                    class="link linkedin linkedin-middle"></a></span>
+              </span>
+              <span class="social"><span class="spacing">
+                  me@</span><span class="link-text">kevin-mo
+                  <a href="https://github.com/Kevin-Mok" target="_blank" id="github" class="link">
+                    <img src="https://kevin-mok.com/img/social/github.svg" alt=""/>
+                  </a></span>
+              </span>
+              <span class="social"><span class="spacing">
+                  me@</span><span class="link-text">kevin-mok.co
+                  <a href="https://kevin-mok.com/" target="_blank" id="site" class="link">
+                    <img src="https://kevin-mok.com/img/resume/link.svg" alt=""/>
+                  </a></span>
+              </span>
+              <span class="social"><span class="link-text">me@kevin-mok.co
+                  <a href="mailto:me@kevin-mok.com" target="_blank" id="email" class="link link-top">
+                    <img src="https://kevin-mok.com/img/resume/envelope.svg" alt=""/>
+                  </a></span>
+              </span>
+            </nobr>
+          </p>
+        </div>
+      </div>
+  </div>
+</main>
+
+{{ partial "base/footer.html" . }}

layouts/partials/base/footer.html

@@ -29,7 +29,7 @@
             <img src="{{ "img/social/email.svg" | relURL }}"
             alt="envelope">
           </a>
-          <a href="https://fosstodon.org/web/accounts/93113" target="_blank">
+          <a href="https://fosstodon.org/@Kevin" target="_blank">
             <img src="{{ "img/social/mastodon.svg" | relURL }}"
             alt="mastodon-logo">
           </a>