Resume: contact info section

5 years ago · 1c2ad9d029
15 changed files with 237 additions and 31 deletions
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@ -82,12 +82,15 @@ $phone-width: 800px;

 //  general elements {{{ // 

-$background-color: #2d2d2d;
+// $background-color: #2d2d2d;
+// $color: #f2f0ec;
+$background-color: white;
+$color: black;

 body {
  margin: 0;
  background-color: $background-color;
-  color: #f2f0ec;
+  color: $color;
  line-height: 1.5;
  font-size: 100%;
  /* font-family: 'Source Code Pro', monospace; */
@ -410,6 +413,29 @@ footer {// {{{
  margin-right: 2em;
 } */// }}}

+#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;
@ -463,15 +489,15 @@ h1.site-title {// {{{
    text-decoration: none;
  }

-  @media (max-width: $max-page-width) {
-    font-size: 3em;
-  }
-
-  @media (max-width: $phone-width) {
+  // @media (max-width: $max-page-width) {
    // font-size: 3em;
-    // font-size: 2.5em;
-    font-size: 2em;
-  }
+  // }
+
+  // @media (max-width: $phone-width) {
+    // // font-size: 3em;
+    // // font-size: 2.5em;
+    // font-size: 2em;
+  // }
 }// }}}

 .hero-logo img {
--- a/config.yaml
+++ b/config.yaml
@ -17,9 +17,9 @@ menu:
  - name: resume
    url: /resume
    weight: 5
-  - name: posts/
-    url: /posts
-    weight: 6
+  # - name: posts/
+    # url: /posts
+    # weight: 6
  # - name: credits
    # url: /credits
    # weight: 10
--- a/content/posts/outage-night.md
+++ b/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
--- a/content/posts/server-apps.md
+++ b/content/posts/server-apps.md
@ -0,0 +1,14 @@
+---
+title: "Server Apps"
+date: 2019-09-03T12:31:45-04:00
+draft: true
+---
+- Baikal
+- Gitea
+- Synapse
+- Taskserver
+- haste-server
+- liteshort
+- personal site
+- spv
+- twem
--- a/content/posts/wallpaper-playlist.md
+++ b/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
--- a/content/resume/_index.md
+++ b/content/resume/_index.md
@ -1,7 +1,7 @@
 ---
 title: "Resume"
 date: 2019-02-11T07:50:51-05:00
-draft: true
+draft: false
 ---
 {{% resume/section overview %}}<!--- {{{ -->

@ -55,16 +55,33 @@ and experience and jumpstart my career with a solid foundation.

 {{% resume/project name="Grocery Finder" url="https://github.com/Kevin-Mok/grocery-finder" date="April 2019" %}}

- Proof of concept for a web app that finds the best supermarket for your needs.
- 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.
+- Proof of concept for a web app that finds the best supermarket for 
+  your needs based on the total price of your cart items and distance 
+  form you.
+- Responsive front-end using **Bootstrap**. Uses **Node.js** and 
+  **MongoDB** for back-end.
 - Currently deployed on [**Heroku**][Grocery Finder Heroku].
+- Took on role as project leader to prioritize and delegate tasks 
+  while
+  also implementing a majority of the core features.

 [Grocery Finder Heroku]: http://www.grocery-finder.ml

 {{% /resume/project %}}

+<!--- Grocery Finder }}} -->
+
+<!--- TrapBot {{{ -->
+
+{{% resume/project name="TrapBot"
+url="https://github.com/Kevin-Mok/TrapBot" date="March 2018" %}}
+
+- reddit bot that looks for comments with song names and responds with 
+  their respective SoundCloud links.
+- Received positive feedback from users who saw the bot's posts.
+- Uses __Python__ API wrappers for SoundCloud and reddit.
+
+{{% /resume/project %}}

 <!--- Grocery Finder }}} -->

--- a/content/resume/archived.txt
+++ b/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 }}} -->
+
--- a/ideas.md
+++ b/ideas.md
@ -2,8 +2,8 @@
 - resume
  - expand some projects by default
  - repo link (GitHub icon) beside each section
-    - picture/video links?
    - make links open in new tab
+    - picture/video links?
  - printable white version
    - upload PDF
    - JS to change CSS?
@ -29,6 +29,8 @@
 # Medium
 - socials in footer
  - icons
+    - GitHub
+    - Fosstodon
  - email
    - tooltip pop-up with email and clipboard button/link
    - [Pure CSS Tooltips](https://www.youtube.com/watch?v=hAeQ8CqrGDY)
--- a/layouts/partials/resume/contact-info.html
+++ b/layouts/partials/resume/contact-info.html
@ -0,0 +1,16 @@
+<!-- <div id="contact-info"> -->
+<div id="contact-info">
+  <div id="phone-number">
+    <img src="{{ "img/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/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/link.svg" | relURL }}" alt="link-icon">:
+    <a href="https://kevin-mok.com/">kevin-mok.com</a>
+  </div>
+</div>
--- a/layouts/resume/section.html
+++ b/layouts/resume/section.html
@ -2,6 +2,8 @@

 {{ partial "base/site-title.html" . }}

+{{ partial "resume/contact-info.html" . }}
+
 {{ partial "base/base16-logo.html" . }}

 <div id="resume">
--- a/layouts/shortcodes/resume/project.html
+++ b/layouts/shortcodes/resume/project.html
@ -1,12 +1,17 @@
 <div>
+  <!-- 
  <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>
-  <!-- {{ .Get "name" }} ⏷ -->
+  -->
+  <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>
+    <!-- {{ .Get "name" }} ⏷ -->
  </button>
  <div class="date">{{ .Get "date" }}</div>
-  <div class="collapse" id="{{ .Get "name" | lower | urlize }}-details">
+  <div class="collapse show" id="{{ .Get "name" | lower | urlize }}-details">
    <div>
      {{ .Inner }}
    </div>
--- a/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
+++ b/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
@ -32,8 +32,8 @@

 body {
  margin: 0;
-  background-color: #2d2d2d;
-  color: #f2f0ec;
+  background-color: white;
+  color: black;
  line-height: 1.5;
  font-size: 100%;
  /* font-family: 'Source Code Pro', monospace; */
@ -296,6 +296,21 @@ footer a {
 .homepage .tag {
  margin-right: 2em;
 } */
+#contact-info {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  display: flex;
+  align-content: center; }
+  #contact-info div {
+    flex-grow: 1;
+    color: #d3d0c8; }
+    #contact-info div img {
+      height: 1em; }
+  #contact-info #email {
+    text-align: center; }
+  #contact-info #website {
+    text-align: right; }
+
 #resume a {
  text-decoration: none; }
  #resume a:hover {
@ -335,12 +350,6 @@ h1.site-title {
      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;
--- a/static/img/envelope.svg
+++ b/static/img/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>
--- a/static/img/link.svg
+++ b/static/img/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>
--- a/static/img/smartphone.svg
+++ b/static/img/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>