Compare commits

...

5 Commits

Author SHA1 Message Date
Kevin Mok 162d3d7c25
Merge branch 'master' into resume-pdf-2 5 years ago
Kevin Mok 7f6743f8d9
Sample cover letter, letter submodule 5 years ago
Kevin Mok e9ce8bd5d1
Resume: PDF, update printable 5 years ago
Kevin Mok 2bedc77f1b
Add skills, improve project descriptions 5 years ago
Kevin Mok 6553a1bfa1
Reduce font size across site 5 years ago
  1. 4
      .gitmodules
  2. 307
      assets/sass/main.scss
  3. 7
      config.yaml
  4. 1
      content/letter
  5. 21
      content/resume/_index.md
  6. 15
      content/resume/printable.txt
  7. 22
      layouts/letter/section.html
  8. 15
      layouts/letter/single.html
  9. 2
      layouts/partials/base/header.html
  10. 4
      layouts/partials/resume/contact-info.html
  11. 4
      layouts/shortcodes/resume/no-spacing.html
  12. 15
      layouts/shortcodes/resume/project.html
  13. 21
      layouts/sitemap.xml
  14. BIN
      static/img/resume/signature-white.png
  15. BIN
      static/img/resume/signature.png

4
.gitmodules

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

307
assets/sass/main.scss

@ -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;
@ -103,7 +105,8 @@ body {
color: $color;
line-height: 1.5;
// font-size: 100%;
font-size: 15px;
// font-size: 15px;
font-size: 20px;
/* font-family: 'Source Code Pro', monospace; */
font-family: 'Hack', monospace;
display: flex;
@ -242,22 +245,22 @@ p {
margin-bottom: 1rem;
}
h1 {
font-size: 2rem;
// h1 {
// font-size: 2rem;
@media (max-width: $phone-width) {
font-size: 1.75rem;
}
}
h2 {
font-size: 1.5rem;
// @media (max-width: $phone-width) {
// font-size: 1.75rem;
// }
// }
// h2 {
// font-size: 1.5rem;
@media (max-width: $phone-width) {
font-size: 1.4rem;
}
}
// @media (max-width: $phone-width) {
// font-size: 1.4rem;
// }
// }
h3 { font-size: 1.25rem }
h4 { font-size: 1rem }
// h4 { font-size: 1rem }
h5 { font-size: .875rem }
h6 { font-size: .75rem }
@ -472,6 +475,7 @@ header {// {{{
#print-icon {// {{{
float: right;
display: none;
img {
height: 1.75em;
@ -490,6 +494,12 @@ header {// {{{
min-width: $max-page-width;
}
}
a {// {{{
text-decoration: none;
&:hover {
text-decoration: none;
}
}// }}}
font-size: .9em;
@ -516,11 +526,11 @@ header {// {{{
margin-left: 5px;
// position: relative;
// left: -8px;
@media (max-width: $phone-width) {
// display: none;
// font-size: 10px;
font-size: .8em;
}
// @media (max-width: $phone-width) {
// // display: none;
// // font-size: 10px;
// font-size: .8em;
// }
}
}// }}}
@ -535,45 +545,44 @@ header {// {{{
h1 {// {{{
color: $base-orange;
margin-top: 1rem;
margin-top: 1.3rem;
@media (max-width: $phone-width) {
margin-top: .75rem;
}
// @media (max-width: $phone-width) {
// margin-top: .75rem;
// }
}// }}}
h2 {// {{{
color: $base-orange;
margin-top: .5rem;
@media (max-width: $phone-width) {
font-size: 1.2em;
margin-top: .75rem;
}
// @media (max-width: $phone-width) {
// font-size: 1.2em;
// margin-top: .75rem;
// }
}// }}}
h4 {// {{{
color: $base-yellow;
margin-top: .5rem;
@media (max-width: $phone-width) {
font-size: 1.2em;
margin-top: .75rem;
}
// @media (max-width: $phone-width) {
// font-size: 1.2em;
// margin-top: .75rem;
// }
}// }}}
.date {// {{{
padding-top: .8em;
float: right;
color: $base03;
@media (max-width: $phone-width) {
padding-top: 0em;
}
// @media (max-width: $phone-width) {
// padding-top: 0em;
// }
}// }}}
#projects {// {{{
h1 {
margin-bottom: 3px;
}
// // h1 {
// // margin-bottom: 3px;
// // }
.project {// {{{
@include vert-padding-rem(.2);
@ -587,6 +596,10 @@ header {// {{{
height: 1.2em;
}
.project-header {
margin-bottom: .6em;
}
.project-link {
&:hover {
text-decoration: none;
@ -638,11 +651,35 @@ header {// {{{
}
}// }}}
@media (max-width: $phone-width) {
font-size: 14px;
// font-size: 1em;
}
// @media (max-width: $phone-width) {
// font-size: 14px;
// // font-size: 1em;
// }
&.letter {
margin-top: 2em;
img {
height: 4.5em;
}
h2 {
color: $base-red;
margin-top: 0em;
}
p {
margin-bottom: 1.25em;
}
.no-line-spacing {
line-height: .5em;
margin-bottom: 2em;
p {
margin-bottom: 1em;
}
}
}
}// }}}
#server {// {{{
@ -695,158 +732,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;
}
}// }}}
}// }}}
}// }}}
// TODO: converted up to here
// hero {{{ //
@ -865,20 +750,20 @@ h1.site-title {// {{{
text-decoration: none;
}
@media (max-width: $max-page-width) {
font-size: 3em;
}
// @media (max-width: $phone-width) {
// 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 {

7
config.yaml

@ -16,7 +16,7 @@ menu:
main:
- name: resume
url: /resume
weight: 5
weight: 1
# - name: posts/
# url: /posts
# weight: 6
@ -29,6 +29,9 @@ menu:
- name: card
url: /card
weight: 15
- name: letter
url: /letter
weight: 17
# - name: credits
# url: /credits
# weight: 20
@ -37,3 +40,5 @@ blackfriday:
plainIDAnchors: true
hrefTargetBlank: true
disableKinds: ["RSS"]

1
content/letter

@ -0,0 +1 @@
Subproject commit 56c2d30c4ad3bb51055aa448acfd1e00cd1931d1

21
content/resume/_index.md

@ -132,27 +132,6 @@ url="https://kevin-mok.com/server/" date="Aug. 2019 — present" %}}
<!--- DigitalOcean Droplet }}} -->
<!--- Super ADA Bros. {{{ -->
{{% resume/project name="Super ADA Bros"
url="https://github.com/Kevin-Mok/SuperADABros" date="May 2019" %}}
- Designed clone of Super Mario Bros 1-1, but Mario is mobility-impaired and
uses ramps to get through the level.
- Uses **OpenCV** to track player's head movement which is then translated to
in-game movement. [Video Demo]
- 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
[Video Demo]: https://youtu.be/vRdENLGrBqM
{{% /resume/project %}}
<!--- Grocery Finder }}} -->
{{% /resume/section %}}<!--- }}} -->
{{% resume/section "Work Experience" %}}<!--- {{{ -->

15
content/resume/printable.txt

@ -1,4 +1,13 @@
# Base
- bg colors
- site title max width
- switch project shortcode
- rm details top margin
- increase font size
- all phone width blocks
- reset header sizes
- comment out font CSS stylesheet
- hide print icon
- right margin for social icons
# Project
- remove expand icon and link
- rm ADA Bros.
- show all sections by default

22
layouts/letter/section.html

@ -0,0 +1,22 @@
{{ 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>

15
layouts/letter/single.html

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

2
layouts/partials/base/header.html

@ -18,7 +18,7 @@
<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='//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">
{{ $main_sass := resources.Get "sass/main.scss" }}

4
layouts/partials/resume/contact-info.html

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

4
layouts/shortcodes/resume/no-spacing.html

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

15
layouts/shortcodes/resume/project.html

@ -1,23 +1,20 @@
<div class="project">
<div class="row project-header">
<div class="col-8 text-left">
<!-- <a class="project-link" href="{{ .Get "url" }}" target="_blank"> -->
<!-- <img src="{{ "img/resume/link.svg" | relURL }}" alt="link-icon"> -->
<!-- </a> -->
<a class="project-link" href="{{ .Get "url" }}" target="_blank">
<img src="{{ "img/resume/link.svg" | relURL }}" alt="link-icon">
</a>
<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" }}
<!-- <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">
<!-- <img class="down-triangle" src="{{ "img/resume/down-triangle.png" | relURL }}" alt="link-icon"> -->
</h2>
</button>
</a>
</div>
<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 class="show" id="{{ .Get "name" | lower | urlize }}-details">
<div>
{{ .Inner }}
</div>

21
layouts/sitemap.xml

@ -0,0 +1,21 @@
<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>

BIN
static/img/resume/signature-white.png

Before

Width: 300  |  Height: 261  |  Size: 66 KiB

After

Width: 1733  |  Height: 1507  |  Size: 465 KiB

BIN
static/img/resume/signature.png

Before

Width: 1733  |  Height: 1507  |  Size: 467 KiB

After

Width: 1733  |  Height: 1507  |  Size: 467 KiB

Loading…
Cancel
Save