Resume: collapsable project sections

2019-07-30 05:07:00 -04:00
parent 38ca0829f6
commit 3a6462c1d7
11 changed files with 113 additions and 65 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
-public/*
-/* resources/_gen/* */
+public/
+/* _gen files required by Netlify */
+/* resources/_gen/ */
 themes/base16*

 commit-msg.txt
--- a/assets/sass/main.scss
+++ b/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 {
-    &.project-date {
-      float: right;
+  .btn {
+    display: inline;
+    background-color: transparent;
+    margin-bottom: 5px;
+
+    &:focus, &:active {
+      outline: none !important;
+      box-shadow: none;
    }
  }

-}
+  .date {
+    float: right;
+    color: $base03;
+  }
+
+}// }}}

 // TODO: converted up to here

--- a/content/resume/_index.md
+++ b/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,
-provide the opportunity to gain valuable knowledge and experience and
-jumpstart my career with a solid foundation.
+I am a 3<sup>rd</sup> year CS student and enthusiast of all things Linux
+and FOSS. I am looking for an internship to fully dedicate myself to that
+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 features
-  of tracks in your library.
+- Web app that scans your Spotify library using their API to produce
+  [**d3** 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 ingredients labels and detects any dietary			
-  restrictions/allergies. Came up with the idea based on 
-  [personal experience][Parsafood motivation].
- Made during the 24-hour [Platterz	Hackathon][Platterz Hackathon event] in
-  a group with two other members. Came in 2nd place and won an 
-  [Oculus Rift][Oculus Rift Amazon].
+- **Android** app that reads ingredient labels and detects any dietary
+  restrictions/allergies. 
+- Made during a 24-hour [food-themed hackathon][Platterz Hackathon event]
+  in a group with two other members. Came in 2<sup>nd</sup> place and won
+  an [Oculus Rift][Oculus Rift Amazon].
+- Came up with the idea based on [personal experience][Parsafood motivation].

 [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.
- Currently deployed on [Heroku][Grocery Finder Heroku].
+- 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 }}} -->
+
+<!--- 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 %}}<!--- }}} -->
--- a/ideas.md
+++ b/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
--- a/layouts/partials/base/header.html
+++ b/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">
--- a/layouts/partials/home/about.html
+++ b/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
-  student at the University of Toronto, and I'm greatly interested in all things Linux and 
+  I'm Kevin Mok - a 3<sup>rd</sup> year Computer Science student at the
+  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>
--- a/layouts/shortcodes/resume/project-details.html
+++ b/layouts/shortcodes/resume/project-details.html
@@ -1,4 +1,4 @@
 {{ $_hugo_config := `{ "version": 1 }` }}
 <div class="project-details">
-  {{ .Inner | markdownify }}
+  {{ .Inner }}
 </div>
--- a/layouts/shortcodes/resume/project-header.html
+++ b/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>
--- a/layouts/shortcodes/resume/project.html
+++ b/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>
--- a/layouts/shortcodes/resume/section.html
+++ b/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>
--- a/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
+++ b/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 {
-  float: right; }
+#resume .btn {
+  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;