Browse Source

Resume: collapsable project sections

resume-pdf
Kevin Mok 5 years ago
parent
commit
3a6462c1d7
Signed by: Kevin-Mok GPG Key ID: AEA75288DC135CF5
  1. 5
      .gitignore
  2. 25
      assets/sass/main.scss
  3. 74
      content/resume/_index.md
  4. 27
      ideas.md
  5. 6
      layouts/partials/base/header.html
  6. 4
      layouts/partials/home/about.html
  7. 2
      layouts/shortcodes/resume/project-details.html
  8. 2
      layouts/shortcodes/resume/project-header.html
  9. 14
      layouts/shortcodes/resume/project.html
  10. 2
      layouts/shortcodes/resume/section.html
  11. 15
      resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content

5
.gitignore

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

25
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,18 +423,28 @@ 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
// hero {{{ //

74
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-details %}}
{{% resume/project name="Spotify Visualizer" url="https://github.com/Kevin-Mok/spotify-lib-vis" date="July 2018" %}}
- 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 %}}<!--- }}} -->

27
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

6
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">

4
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>

2
layouts/shortcodes/resume/project-details.html

@ -1,4 +1,4 @@
{{ $_hugo_config := `{ "version": 1 }` }}
<div class="project-details">
{{ .Inner | markdownify }}
{{ .Inner }}
</div>

2
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>

14
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>

2
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>

15
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;

Loading…
Cancel
Save