Compare commits

..

2 Commits

Author SHA1 Message Date
2bedc77f1b Add skills, improve project descriptions 2019-10-05 04:53:06 -04:00
6553a1bfa1 Reduce font size across site
- add LinkedIn to resume
- fix Unicode expand icon not showing on mobile
- change footer background to line above
2019-10-05 03:13:44 -04:00
27 changed files with 94 additions and 448 deletions

7
.gitmodules vendored
View File

@@ -1,7 +0,0 @@
[submodule "content/letter"]
path = content/letter
url = ssh://git@git.kevin-mok.com:399/Kevin-Mok/cover-letters.git
branch = master
[submodule "static/pdf"]
path = static/pdf
url = ssh://git@git.kevin-mok.com:399/Kevin-Mok/resume-pdf.git

View File

@@ -2,14 +2,10 @@
// base colors {{{ //
$base00: #2d2d2d;
$base01: #393939;
$base02: #515151;
$base03: #747369;
$base04: #a09f93;
$base05: #d3d0c8;
$base06: #e8e6df;
$base07: #f2f0ec;
$base-red: #f2777a;
$base-orange: #f99157;
$base-yellow: #ffcc66;
@@ -19,6 +15,13 @@ $base-blue: #6699cc;
$base-violet: #cc99cc;
$base-dark-orange: #d27b53;
/* .base00 { color: #2d2d2d; }
.base01 { color: #393939; }
.base02 { color: #515151; }
.base03 { color: #747369; }
.base04 { color: #a09f93; }
.base06 { color: #e8e6df; }
.base07 { color: #f2f0ec; } */
.base08 { color: $base-red; }
.base09 { color: $base-orange; }
.base0a { color: $base-yellow; }
@@ -35,7 +38,6 @@ $base-dark-orange: #d27b53;
// $max-page-width: 52em;
$max-page-width: 45em;
$phone-width: 800px;
$vert-phone-width: 500px;
@mixin side-padding-rem($n) {// {{{
padding-left: $n * 1rem;
@@ -88,15 +90,6 @@ $vert-phone-width: 500px;
}
}// }}}
@mixin a-no-underline() {// {{{
a {
text-decoration: none;
&:hover {
text-decoration: none;
}
}
}// }}}
// }}} mixins //
// general elements {{{ //
@@ -113,8 +106,7 @@ body {
line-height: 1.5;
// font-size: 100%;
font-size: 15px;
// font-size: 25px;
// font-family: 'Hack Nerd Font Mono', monospace;
/* font-family: 'Source Code Pro', monospace; */
font-family: 'Hack', monospace;
display: flex;
flex-direction: column;
@@ -215,17 +207,12 @@ footer {
position: relative;
padding-right: $side-padding;
// padding-right: .9em;
@include a-no-underline();
img {
height: 1.5em;
@include vert-margin-rem(.2);
padding-left: .5em;
opacity: .6;
&:hover {
opacity: 1;
}
}
}
}
@@ -489,23 +476,22 @@ header {// {{{
float: right;
img {
height: 2em !important;
position: absolute;
height: 1.75em;
position: relative;
top: 1em;
}
}// }}}
#contact-info {// {{{
@include side-margin-em(0);
@include side-padding-rem(0);
// @include vert-padding-rem(0.5);
@include a-color($base-sky-blue);
width: 100%;
// @media (min-width: 1200px) {
// .container{
// min-width: $max-page-width;
// }
// }
// min-width: $max-page-width;
@media (min-width: 1200px) {
.container{
min-width: $max-page-width;
}
}
font-size: .9em;
@@ -659,45 +645,6 @@ header {// {{{
// font-size: 1em;
}
&.letter {
margin-top: 2em;
// font-size: 21px;
img {
height: 4.5em;
}
h2 {
color: $base-red;
// font-size: 30px;
// margin-top: 0em;
// margin-top: .5em;
// margin-top: 1.25em;
// margin-bottom: 1em;
}
p {
margin-bottom: 1.5em;
// margin-bottom: 1em;
}
ul {
// margin-bottom: 1.5em;
margin-bottom: 2em;
}
.no-line-spacing {
line-height: .5em;
margin-bottom: 2.15em;
p {
margin-bottom: 1em;
}
strong {
line-height: 1.25em;
}
}
}
}// }}}
#server {// {{{
@@ -750,168 +697,6 @@ header {// {{{
}
}// }}}
#card {// {{{
@include vert-margin-rem(2);
align-items: center;
justify-content: center;
font-family: 'Oxygen Mono', monospace;
.container {// {{{
padding-left: 0;
padding-right: 0;
.row {
padding-top: 6rem;
padding-bottom: 8rem;
@media (max-width: $phone-width) {
padding-top: 5rem;
padding-bottom: 6rem;
}
}
}// }}}
// $card-bg: #e8e6df;
$card-bg: $base07;
#presentational-container {// {{{
margin-top: 3em;
margin-bottom: 1em;
max-width: $max-page-width;
box-shadow: 2px 2px 10px 5px black;
// card bg
// background-color: #fff;
// background-color: #e5e5e5;
background-color: $card-bg;
}// }}}
#email-full {// {{{
font-size: 50px;
@media (max-width: $phone-width) {
font-size: 40px;
}
@media (max-width: $vert-phone-width) {
font-size: 33px;
}
@include vert-margin-rem(2);
height: 7em;
img {
height: .5em;
position: absolute;
left: -.8em;
bottom: -.15em;
}
p { // {{{
position: relative;
// color: grey;
color: #151515;
// color: #133337;
div {
display: inline;
}
.social {// {{{
// display: none;
display: inline;
white-space: nowrap;
position: absolute;
// left: 5.5rem;
left: 0rem;
.safari {
display: none;
}
@supports (-webkit-backdrop-filter: blur(1px)) {
left: .65rem;
.safari {
display: inline;
}
}
.link-text {
position: relative;
width: 100%;
}
$border-thickness: 8px;
@media (max-width: $vert-phone-width) {
$border-thickness: 5px;
}
.link {
position: absolute;
border-color: black;
border-style: solid;
border-width: 0 $border-thickness $border-thickness $border-thickness;
height: .45em;
width: 100%;
left: 0;
img {
position: absolute;
left: -1em;
}
&.link-top {
border-width: $border-thickness $border-thickness 0 $border-thickness;
img {
position: absolute;
top: -.2em;
}
}
&:hover {
opacity: .6;
}
}
$line-spacing: .65em;
#mastodon {
top: -$line-spacing * 1.1;
border-color: #3088d4;
}
.linkedin {
bottom: -$line-spacing * 1.1;
border-color: #0077b7;
&.linkedin-middle {
border-style: dotted;
border-width: 0 0 3.5px 0;
}
}
#github {
bottom: -$line-spacing * 2.7;
}
#site {
bottom: -$line-spacing * 4.25;
border-color: #ff7058;
}
#email {
top: -$line-spacing * 2.65;
border-color: #d1d0bf;
}
}// }}}
.spacing {
opacity: 0;
}
}// }}}
}// }}}
}// }}}
#letter-home {// {{{
#letter-instr {
text-align: center;
margin-top: 1.5em;
// margin-top: 25vh;
font-size: 1.4em;
}
}// }}}
// TODO: converted up to here
// hero {{{ //
@@ -934,16 +719,16 @@ h1.site-title {// {{{
font-size: 3em;
}
// @media (max-width: $phone-width) {
// font-size: 3.5em;
// @include vert-margin-rem(.3);
// // font-size: 2.5em;
// // font-size: 2em;
@media (max-width: $phone-width) {
font-size: 3.5em;
@include vert-margin-rem(.3);
// font-size: 2.5em;
// font-size: 2em;
// .surrounding {
// display: none;
// }
// }
.surrounding {
display: none;
}
}
}// }}}
.hero-logo img {

View File

@@ -16,7 +16,7 @@ menu:
main:
- name: resume
url: /resume
weight: 1
weight: 5
# - name: posts/
# url: /posts
# weight: 6
@@ -26,23 +26,11 @@ menu:
- name: config
url: /config
weight: 10
- name: card
url: /card
weight: 15
# - name: letter
# url: /letter
# weight: 17
# - name: credits
# url: /credits
# weight: 20
# blackfriday:
# plainIDAnchors: true
# hrefTargetBlank: true
blackfriday:
plainIDAnchors: true
hrefTargetBlank: true
disableKinds: ["RSS"]
markup:
goldmark:
renderer:
unsafe: true

View File

@@ -1,5 +0,0 @@
---
title: "Digital Card"
date: 2019-02-11T07:50:51-05:00
draft: false
---

View File

@@ -39,4 +39,5 @@ a single branch.
[chezmoi]: https://github.com/twpayne/chezmoi
<!--- }}} Setup -->

View File

@@ -0,0 +1,5 @@
---
title: "Credits"
date: 2019-02-11T03:10:25-05:00
draft: true
---

Submodule content/letter deleted from 42716f4487

View File

@@ -3,11 +3,20 @@ title: "Resume"
date: 2019-02-11T07:50:51-05:00
draft: false
---
{{% resume/section overview %}}<!--- {{{ -->
3<sup>rd</sup> year CS student. Enthusiast of all things
Linux and FOSS. Seeking 16-month internship for my PEY
co-op program. Looking to gain industry-relevant experience in
full-stack web dev, DevOps or system administration.
{{% /resume/section %}}<!--- }}} -->
{{% resume/section skills %}}<!--- {{{ -->
#### Languages
- **Bash**, **C**, **CSS**, C++, **Fish** (shell), Godot, **HTML5**,
**Python**, Java, **Javascript** (ES6), **Sass**
- **Bash**, C, **CSS**, C++, **Fish**, Godot, **HTML5**, **Python**,
Java, **Javascript (ES6)**, **Sass**
#### Frameworks
- **Bootstrap**, **Django**, **Node.js**, **PostgreSQL**
@@ -17,8 +26,8 @@ draft: false
#### Tools
- **Arch Linux**, Android Studio, **Debian**, **Command Line**,
**Git**, IntelliJ IDEA, **Pycharm**, **NGINX**, npm/yarn, **SFTP**,
**SSH**, **Vim**
**Git**, IntelliJ IDEA, **Pycharm**, **NGINX**, **SFTP**, **SSH**,
**Vim**
{{% /resume/section %}}<!--- }}} -->
@@ -30,15 +39,15 @@ draft: false
url="https://github.com/Kevin-Mok/spotify-lib-vis" date="June 2018 — July 2018"
show="true" %}}
- Implemented base functionality of scanning tracks and listening
history from user's library using Spotify API and organized data
into **PostgreSQL** database with **Django** backend.
- Created and tested various relational database schemas to maximize
efficiency for use cases.
- Produced bubble chart and (stacked) bar chart using
[**d3**][d3 graph examples] to visualize the artists,
genres and features of
tracks in library.
- Scan tracks from user's library using Spotify API and organize data into
database.
- Created and tested various __PostgreSQL__ schemas to increase efficiency for
use cases.
- Produce bubble chart and (stacked) bar chart in [**d3** graphs][d3 graph examples]
to visualize the artists, genres and features of tracks in library.
- Implement functionality to keep track of user's listening history. Set up
`cron` job on my local machine to keep track of my own.
- Uses __Django__ for backend.
[d3 graph examples]: https://github.com/d3/d3/wiki/Gallery
@@ -52,14 +61,14 @@ tracks in library.
url="https://github.com/Kevin-Mok/grocery-finder" date="Feb. 2019 — Apr. 2019"
show="true" %}}
- Proof of concept for web app that finds the ideal supermarket based on your cart.
- PoC for web app that finds the ideal supermarket based on your cart.
- Designed responsive front-end layout using **Bootstrap**.
- Implemented REST API functionality on backend using **Node.js** and
**MongoDB**.
- Setup deployment on [**Heroku**][Grocery Finder Heroku].
- Led team of 4 as project leader to prioritize and delegate tasks while
also implementing a majority of the core features.
- Performed code review for team members' pull requests.
- Performed code review for team member's pull requests.
[Grocery Finder Heroku]: http://www.grocery-finder.ml
@@ -108,7 +117,7 @@ url="https://github.com/Kevin-Mok/TrapBot" date="March 2018" %}}
<!--- DigitalOcean {{{ -->
{{% resume/project name="Personal Server"
url="https://kevin-mok.com/server/" date="Aug. 2019present" %}}
url="https://kevin-mok.com/server/" date="Aug. 2019present" %}}
- Deployed various web apps with backends such as Node, PHP and Python using
**NGINX** on a **Debian** server.
@@ -149,8 +158,7 @@ url="https://github.com/Kevin-Mok/SuperADABros" date="May 2019" %}}
{{% resume/section "Work Experience" %}}<!--- {{{ -->
{{% resume/education name="Philpott Children's Tennis"
title="Head Instructor" date="2013 — 2015" %}}
{{% resume/education name="Philpott Children's Tennis" title="Head Instructor" date="2013—2015" %}}
- Ran 8-week summer camp for inner-city youth with assistant coach.
- Prepared daily lesson plans for 4 different age groups of children
with varying skill levels and needs.
@@ -160,8 +168,7 @@ title="Head Instructor" date="2013 — 2015" %}}
{{% resume/section education %}}<!--- {{{ -->
{{% resume/education name="University of Toronto"
title="Computer Science Specialist" date="2017 — 2021" %}}
{{% resume/education name="University of Toronto" title="Computer Science Specialist" date="2017-2021" %}}
{{% /resume/section %}}<!--- }}} -->

View File

@@ -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 }}} -->

View File

@@ -1,12 +1,4 @@
// vim: ft=markdown
- bg colors
# Resume
- site title max width
- switch project shortcode
- rm details top margin
# Letter
- letter font size
- h2

View File

@@ -1,69 +0,0 @@
{{ partial "base/header.html" . }}
{{ partial "base/site-title.html" . }}
{{ partial "base/nav-bar.html" . }}
{{ partial "base/base16-logo.html" . }}
<main role="main" id="card">
<div id="presentational-container" class="container">
<div class="row text-center h-100 my-auto">
<div id="email-full" class="h-100 mx-auto">
<p class="text-center">
<nobr>
me@kevin-mok.com
<span class="social"><span class="spacing">
me</span><span class="link-text">@kevi<span
class="safari">n</span>
<a href="https://fosstodon.org/@Kevin"
target="_blank" id="mastodon" class="link link-top">
<img src="https://kevin-mok.com/img/social/mastodon.svg" alt=""/>
</a></span>
</span>
<span class="social"><span class="spacing">
me@</span><span class="link-text">ke<span
class="safari">v</span>
<a href="https://www.linkedin.com/in/Kev-Mok" target="_blank"
target="_blank" class="link linkedin linkedin-left">
<img src="https://kevin-mok.com/img/social/linkedin.svg" alt=""/>
</a></span>
</span>
<span class="social"><span class="spacing">
me@kevin</span><span class="link-text">-mo<span
class="safari">k</span>
<a href="https://www.linkedin.com/in/Kev-Mok" target="_blank" class="link linkedin linkedin-left"></a></span>
</span>
<span class="social"><span class="spacing">
me@kev</span><span class="link-text">i<span
class="safari">n</span>
<a href="https://www.linkedin.com/in/Kev-Mok" target="_blank"
class="link linkedin linkedin-middle"></a></span>
</span>
<span class="social"><span class="spacing">
me@</span><span class="link-text">kevin-mo<span
class="safari">k</span>
<a href="https://github.com/Kevin-Mok" target="_blank" id="github" class="link">
<img src="https://kevin-mok.com/img/social/github.svg" alt=""/>
</a></span>
</span>
<span class="social"><span class="spacing">
me@</span><span class="link-text">kevin-mok.co<span
class="safari">m</span>
<a href="https://kevin-mok.com/" target="_blank" id="site" class="link">
<img src="https://kevin-mok.com/img/resume/link.svg" alt=""/>
</a></span>
</span>
<span class="social"><span class="link-text">me@kevin-mok.co<span class="safari">&nbsp;</span>
<a href="mailto:me@kevin-mok.com" target="_blank" id="email" class="link link-top">
<img src="https://kevin-mok.com/img/resume/envelope.svg" alt=""/>
</a></span>
</span>
</nobr>
</p>
</div>
</div>
</div>
</main>
{{ partial "base/footer.html" . }}

View File

@@ -1,22 +0,0 @@
{{ partial "base/header.html" . }}
{{ partial "base/site-title.html" . }}
{{ partial "base/nav-bar.html" . }}
{{ partial "base/base16-logo.html" . }}
<main role="main" id="letter-home">
<!-- <h1 class="list-title">{{ .Title }}</h1> -->
<h4 id="letter-instr">Please enter the full URL that I provided
for your personalized cover letter. :)</h4>
<div id="resume" class="letter">
{{ .Content }}
</div>
</main>
{{ partial "base/footer.html" . }}
</div>
</body>
</html>

View File

@@ -1,13 +0,0 @@
{{ partial "base/header.html" . }}
{{ partial "base/site-title.html" . }}
{{ partial "resume/contact-info.html" . }}
<div id="resume" class="letter">
{{ .Content }}
</div>
</div>
</body>
</html>

View File

@@ -29,7 +29,7 @@
<img src="{{ "img/social/email.svg" | relURL }}"
alt="envelope">
</a>
<a href="https://fosstodon.org/@Kevin" target="_blank">
<a href="https://fosstodon.org/web/accounts/93113" target="_blank">
<img src="{{ "img/social/mastodon.svg" | relURL }}"
alt="mastodon-logo">
</a>

View File

@@ -12,7 +12,7 @@
{{ .Hugo.Generator }}
<meta name="google-site-verification" content="3aZhrY5bFgQY0HY2DNNUhbkuIfVEcwkrQHnbJd8jCCQ" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.khkm.tk/live.js" charset="utf-8"></script>
<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>

View File

@@ -1,7 +1,7 @@
<div id="about">
<h2>Welcome to my site!</h2>
<p>
I'm Kevin Mok - a Computer Science
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>.

View File

@@ -1,5 +1,5 @@
<div id="contact-info" class="container">
<div class="row row-top justify-content-center mx-auto">
<div class="row row-top justify-content-center">
<div id="phone-number" class="col text-left">
<a href="tel:647-685-2500" target="_blank">
<img src="{{ "img/resume/smartphone.svg" | relURL }}"
@@ -10,7 +10,7 @@
</a>
</div>
<div id="linkedin" class="col text-right">
<a href="https://www.linkedin.com/in/Kev-Mok" target="_blank">
<a href="https://www.linkedin.com/in/Kev-Mok">
<span class="url-info">
Kev-Mok
</span>
@@ -18,9 +18,9 @@
</a>
</div>
</div>
<div class="row mx-auto">
<div class="row justify-content-center">
<div id="email" class="col col-left">
<a href="mailto:me@kevin-mok.com" target="_blank">
<a href="mailto:me@kevin-mok.com">
<img src="{{ "img/resume/envelope.svg" | relURL }}" alt="envelope-icon">
<span class="url-info">
me@kevin-mok.com
@@ -28,7 +28,7 @@
</a>
</div>
<div id="website" class="col text-right">
<a href="https://kevin-mok.com/" target="_blank">
<a href="https://kevin-mok.com/">
<span class="url-info">
kevin-mok.com
</span>

View File

@@ -1,5 +1,5 @@
<div id="print-icon">
<a href="{{ "pdf/kevin-mok-resume.pdf" | relURL }}" target="_blank">
<a href="{{ "kevin-mok-resume.pdf" | relURL }}" target="_blank">
<img src="{{ "img/resume/printer.svg" | relURL }}" alt="printer-icon">
</a>
</div>

View File

@@ -1,8 +0,0 @@
<div id="print-icon">
{{ $type := .Get "type" }}
{{ $code := .Get "code" }}
{{ $pdfName := print "pdf/kevin-mok-" $type "-" $code ".pdf" }}
<a href="{{ $pdfName | relURL }}" target="_blank">
<img src="{{ "img/resume/printer.svg" | relURL }}" alt="printer-icon">
</a>
</div>

View File

@@ -1,4 +0,0 @@
{{ $_hugo_config := `{ "version": 1 }` }}
<div class="no-line-spacing">
{{ .Inner }}
</div>

View File

@@ -9,6 +9,7 @@
aria-expanded="false" aria-controls="{{ .Get "name" | lower | urlize }}-details">
<h2 class="project-title">
{{ .Get "name" }}
<!-- <img class="down-triangle" src="{{ "img/resume/down-triangle.svg" | relURL }}" alt="link-icon"> -->
<img class="down-triangle" src="{{ "img/resume/down-triangle.png" | relURL }}" alt="link-icon">
</h2>
</button>
@@ -16,8 +17,9 @@
<div class="col-4 text-right date">{{ .Get "date" }}</div>
</div>
<div class="collapse{{ with .Get "show" }} show{{ end }}" id="{{ .Get "name" | lower | urlize }}-details">
<!-- <div class="show" id="{{ .Get "name" | lower | urlize }}-details"> -->
<div>
{{ .Inner }}
</div>
</div>
</div>
</div>

View File

@@ -1,21 +0,0 @@
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xhtml="http://www.w3.org/1999/xhtml">
{{ range .Data.Pages }}{{ if ne .Params.sitemap_exclude true }}
<url>
<loc>{{ .Permalink }}</loc>{{ if not .Lastmod.IsZero }}
<lastmod>{{ safeHTML ( .Lastmod.Format "2006-01-02T15:04:05-07:00" ) }}</lastmod>{{ end }}{{ with .Sitemap.ChangeFreq }}
<changefreq>{{ . }}</changefreq>{{ end }}{{ if ge .Sitemap.Priority 0.0 }}
<priority>{{ .Sitemap.Priority }}</priority>{{ end }}{{ if .IsTranslated }}{{ range .Translations }}
<xhtml:link
rel="alternate"
hreflang="{{ .Lang }}"
href="{{ .Permalink }}"
/>{{ end }}
<xhtml:link
rel="alternate"
hreflang="{{ .Lang }}"
href="{{ .Permalink }}"
/>{{ end }}
</url>
{{ end }}{{ end }}
</urlset>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 465 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 467 KiB

BIN
static/kevin-mok-resume.pdf Normal file

Binary file not shown.

Submodule static/pdf deleted from 803aa46cb9

View File

@@ -38,9 +38,6 @@ const generateTable = (table, data) => {
aElem.textContent = elem['shortUrl']
cell.appendChild(aElem)
break
case 'description':
cell.innerHTML = elem[key]
break
case 'repo':
aElem.href = elem['repoUrl']
aElem.textContent = elem[key]