Resume: collapsable project sections

.gitignore

@@ -1,5 +1,6 @@
-public/*
+public/
-/* resources/_gen/* */
+/* _gen files required by Netlify */
+/* resources/_gen/ */
 themes/base16*
 
 commit-msg.txt

assets/sass/main.scss

@@ -2,6 +2,7 @@
 
 //  base colors {{{ // 
 
+$base03: #747369;
 $base04: #a09f93;
 $base05: #d3d0c8; 
 $base-red: #f2777a;
@@ -81,9 +82,11 @@ $phone-width: 800px;
 
 //  general elements {{{ // 
 
+$background-color: #2d2d2d;
+
 body {
   margin: 0;
-  background-color: #2d2d2d;
+  background-color: $background-color;
   color: #f2f0ec;
   line-height: 1.5;
   font-size: 100%;
@@ -407,7 +410,7 @@ footer {// {{{
   margin-right: 2em;
 } */// }}}
 
-#resume {
+#resume {// {{{
   a {
     text-decoration: none;
     &:hover {
@@ -420,17 +423,27 @@ footer {// {{{
   }
 
   h2 {
-    color: $base-yellow;
+    color: $base-sky-blue;
     display: inline;
   }
 
-  p {
+  .btn {
-    &.project-date {
+    display: inline;
-      float: right;
+    background-color: transparent;
+    margin-bottom: 5px;
+
+    &:focus, &:active {
+      outline: none !important;
+      box-shadow: none;
     }
   }
 
-}
+  .date {
+    float: right;
+    color: $base03;
+  }
+
+}// }}}
 
 // TODO: converted up to here
 

content/resume/_index.md

@@ -3,69 +3,87 @@ title: "Resume"
 date: 2019-02-11T07:50:51-05:00
 draft: true
 ---
-{{% 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" %}}
 
-{{% 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" %}}
 
-{{% 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" %}}
 
-{{% resume/project-details %}}
 - 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.
+- Responsive front-end using **Bootstrap**. Uses **Node.js** and **MongoDB** for back-end.
-- Currently deployed on [Heroku][Grocery Finder Heroku].
+- Currently deployed on [**Heroku**][Grocery Finder Heroku].
 
 [Grocery Finder Heroku]: http://www.grocery-finder.ml
 
-{{% /resume/project-details %}}
+{{% /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 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 +92,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 %}}<!--- }}} -->

ideas.md

@@ -1,31 +1,25 @@
 # Large
 - resume
+  - expand some projects by default
+  - repo link (GitHub icon) beside each section
+    - picture/video links?
+    - make links open in new tab
+  - printable white version
+    - upload PDF
+    - JS to change CSS?
   - make old proj's displayable
     - 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
@@ -57,9 +51,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/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/about.html

@@ -1,8 +1,8 @@
 <div id="about">
 <h2>Welcome to my site!</h2>
 <p>
-  I'm Kevin Mok - a 2<sup>nd</sup> year Computer Science
+  I'm Kevin Mok - a 3<sup>rd</sup> year Computer Science student at the
-  student at the University of Toronto, and I'm greatly interested in all things Linux and 
+  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>.
 </p>

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

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

layouts/shortcodes/resume/project.html

@@ -0,0 +1,14 @@
+<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>
+  <div class="date">{{ .Get "date" }}</div>
+  <div class="collapse" 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

@@ -305,11 +305,20 @@ footer a {
   color: #f99157; }
 
 #resume h2 {
-  color: #ffcc66;
+  color: #66cccc;
   display: inline; }
 
-#resume p.project-date {
+#resume .btn {
-  float: right; }
+  display: inline;
+  background-color: transparent;
+  margin-bottom: 5px; }
+  #resume .btn:focus, #resume .btn:active {
+    outline: none !important;
+    box-shadow: none; }
+
+#resume .date {
+  float: right;
+  color: #747369; }
 
 h1.site-title {
   text-align: center;