Setup blog formatting, started on resume

assets/sass/main.scss

@@ -407,6 +407,31 @@ footer {// {{{
   margin-right: 2em;
 } */// }}}
 
+#resume {
+  a {
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  h1 {
+    color: $base-orange;
+  }
+
+  h2 {
+    color: $base-yellow;
+    display: inline;
+  }
+
+  p {
+    &.project-date {
+      float: right;
+    }
+  }
+
+}
+
 // TODO: converted up to here
 
 //  hero {{{ // 
@@ -517,24 +542,44 @@ h1.site-title {// {{{
 
 //  article.single {{{ // 
 
-article.single .meta {
+article.single {
+    .meta {
       font-size: 0.9em;
       text-align: right;
-}
+      margin-top: .5rem;
+      margin-bottom: .5rem;
 
-article.single .meta .key {
+      .key {
         color: #747369;
       }
 
-article.single .meta .val, article.single .meta .val a {
+      .val {
+        color: #cc99cc;
+
+        a {
           color: #cc99cc;
         }
+      }
+
+    }
+
+    .body {
+      padding-top: 1rem;
+      padding-bottom: 3rem;
+    }
 
     @media (max-width: $max-page-width) {
-  article.single .meta {
+      .meta {
         padding-left: 2rem;
         padding-right: 2rem;
       }
+
+      .body {
+        padding-top: .5rem;
+        padding-bottom: 1rem;
+      }
+
+  }
 }
 
 article.single h1.headline {
@@ -550,18 +595,6 @@ article.single h1.headline {
   }
 }
 
-article.single section.body {
-  padding-top: 4rem;
-  padding-bottom: 3rem;
-}
-
-@media (max-width: $max-page-width) {
-  article.single section.body {
-    padding-top: 2rem;
-    padding-bottom: 1rem;
-  }
-}
-
 /* Highlight Colors */
 
 article.single section.body h1 { color: #6699cc; }

config.yaml

@@ -13,9 +13,9 @@ params:
 
 menu:
   main:
-  - name: resume
-    url: /resume
-    weight: 5
+  # - name: resume
+    # url: /resume
+    # weight: 5
   - name: posts/
     url: /posts
     weight: 6

content/posts/wallpaper-playlist.md

@@ -3,7 +3,33 @@ title: Wallpaper Playlist for pywal
 date: 2019-02-16T11:42:33-05:00
 draft: false
 ---
+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
+vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+no sea takimata sanctus est Lorem ipsum dolor sit amet.
+
+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
+vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+no sea takimata sanctus est Lorem ipsum dolor sit amet.
+
+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
+vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+no sea takimata sanctus est Lorem ipsum dolor sit amet.
+
+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
+vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+no sea takimata sanctus est Lorem ipsum dolor sit amet.
+
+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
+vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+no sea takimata sanctus est Lorem ipsum dolor sit amet.
+
 {{< highlight sh >}}
+
 #!/bin/bash
 
 shuffle_cache="shuffle.txt"
@@ -18,6 +44,7 @@ function usage_msg() {
 	EOF
 }
 
+# parse for regen_flag{{{
 while getopts ":r" opt; do
   case $opt in
 	r)
@@ -31,6 +58,9 @@ while getopts ":r" opt; do
 	  ;;
   esac
 done
+#}}}
+
+# set dir {{{ #
 
 shift $((OPTIND-1))
 # if no dir, use pwd
@@ -43,12 +73,16 @@ else
 	dir="$1"
 fi
 
+# }}} set dir #
+
 # rebuild shuffle cache if regen_flag, doesn't exist or file empty
 if [[ "$regen_flag" -eq 1 ]] || [[ ! -f "$dir"/"$shuffle_cache" ]] || \
-  [[ $(wc -l "$dir"/"$shuffle_cache" | awk '{print $1}') -eq 0 ]]; then
-  find "$dir"/* ! -name "$shuffle_cache" -type f | shuf > \
-  "$dir"/"$shuffle_cache"
+  [[ "$(head -n 1 "$dir"/"$shuffle_cache")" = "" ]]; then
+	find "$dir"/* ! -name "$shuffle_cache" -type f | shuf > "$dir"/"$shuffle_cache"
 fi
 head -n 1 "$dir"/"$shuffle_cache"
 printf '%s\n\n' "$(sed '1d' "$dir"/"$shuffle_cache")" > "$dir"/"$shuffle_cache"
+
+# vim: set tabstop=2 shiftwidth=2 expandtab:
+
 {{< /highlight >}}

content/resume/_index.md

@@ -3,4 +3,27 @@ title: "Resume"
 date: 2019-02-11T07:50:51-05:00
 draft: true
 ---
-Test
+# Goal
+To find a company and internship to fully dedicate myself to to push my limits,
+gain valuable knowledge and experience and jumpstart my career with a solid
+foundation.
+
+{{% md-div projects %}}
+
+# Projects
+{{< project-header name="Spotify Visualizer" url="https://github.com/Kevin-Mok/spotify-lib-vis" date="Nov. 2018" >}}
+- Web app
+
+{{< project-header name="ParsaFood" url="https://github.com/Kevin-Mok/ParsaFood" date="Feb. 2018" >}}
+- Android app that reads ingredients labels and detects any dietary
+  restrictions/allergies. Came up with the idea based on
+  [personal experience](https://github.com/Kevin\-Mok/ParsaFood\#motivation).
+- Made during the 24-hour [Platterz Hackathon]
+(https://www.eventbrite.com/e/platterz-hackathon-tickets-42682237722)
+  in a group with two other members. Came in 2nd place and won an
+  [Oculus Rift](https://www.amazon.ca/dp/B00VF0IXEY/ref=cm_sw_r_tw_dp_U_x_I7kBCbX50DAB2).
+- Was in-charge of the front-end of the app and designed all the layouts/pages.
+ 
+{{< project-header name="TrapBot" url="https://github.com/Kevin-Mok/TrapBot" date="Feb. 2018" >}}
+
+{{% /md-div %}}

ideas.md

@@ -1,5 +1,9 @@
 # Large
 - resume
+  - upload screenshots for spv
+  - date on same line as project
+  - collapsible sections
+    - link to each section beside it
   - fix title
   - printable version
     - JS to change CSS
@@ -38,6 +42,8 @@
 - SEO
   - add/redirect aliases
   - be more specific with robots.txt when have content
+- create different size images for SVG
+  - https://www.sitepoint.com/svg-good-for-website-performance/ 
 
 Break> {{{
 > }}}

layouts/partials/article.html

@@ -5,7 +5,7 @@
 
 {{ if not .Page.Date.IsZero }}
     <!-- <span class="key">published </span> -->
-    <span class="val" id="content"><time itemprop="datePublished" datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "January 02, 2006" }}</time></span>
+    <span class="val" id="content"><time id="publish-date" itemprop="datePublished" datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "January 02, 2006" }}</time></span>
 {{ end }}
 
 {{ with .Params.categories }}

layouts/resume/section.html

@@ -4,5 +4,12 @@
 
 {{ partial "base16-logo.html" . }}
 
+<div id="resume">
+  
 {{ .Content }}
 
+</div>
+
+</div>
+</body>
+</html>

layouts/shortcodes/md-div.html

@@ -0,0 +1,3 @@
+<div id="{{ .Get 0 }}">
+  {{ .Inner }}
+</div>

layouts/shortcodes/project-header.html

@@ -0,0 +1,2 @@
+<h2 class="project-title"><a href="{{ .Get "url" }}" target="_blank">{{ .Get "name" }}</a></h2>
+<p class="project-date">{{ .Get "date" }}</p>

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

@@ -296,6 +296,21 @@ footer a {
 .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; */
@@ -373,18 +388,27 @@ h1.site-title {
 
 article.single .meta {
   font-size: 0.9em;
-  text-align: right; }
-
+  text-align: right;
+  margin-top: .5rem;
+  margin-bottom: .5rem; }
   article.single .meta .key {
     color: #747369; }
-
-article.single .meta .val, article.single .meta .val a {
+  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; } }
+    padding-right: 2rem; }
+  article.single .body {
+    padding-top: .5rem;
+    padding-bottom: 1rem; } }
 
 article.single h1.headline {
   margin-top: 0;
@@ -396,15 +420,6 @@ article.single h1.headline {
     padding-left: 2rem;
     padding-right: 2rem; } }
 
-article.single section.body {
-  padding-top: 4rem;
-  padding-bottom: 3rem; }
-
-@media (max-width: 52em) {
-  article.single section.body {
-    padding-top: 2rem;
-    padding-bottom: 1rem; } }
-
 /* Highlight Colors */
 article.single section.body h1 {
   color: #6699cc; }