Browse Source

Card: initial commit

tr-letter
Kevin Mok 3 years ago
parent
commit
d1d191e413
Signed by: Kevin-Mok GPG Key ID: AEA75288DC135CF5
  1. 144
      assets/sass/main.scss
  2. 3
      config.yaml
  3. 5
      content/card/_index.md
  4. 5
      content/credits/_index.md
  5. 15
      content/resume/_index.md
  6. 63
      layouts/card/section.html
  7. 2
      layouts/partials/base/footer.html

144
assets/sass/main.scss

@ -2,10 +2,14 @@
// 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;
@ -15,13 +19,6 @@ $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; }
@ -697,6 +694,139 @@ 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;
}
@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;
.link-text {
position: relative;
width: 100%;
}
$border-thickness: 8px;
.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;
}
.social {
position: absolute;
// left: 5.5rem;
left: 0rem;
}
}
}
}
// TODO: converted up to here
// hero {{{ //

3
config.yaml

@ -26,6 +26,9 @@ menu:
- name: config
url: /config
weight: 10
- name: card
url: /card
weight: 15
# - name: credits
# url: /credits
# weight: 20

5
content/card/_index.md

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

5
content/credits/_index.md

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

15
content/resume/_index.md

@ -39,16 +39,14 @@ full-stack web dev, DevOps or system administration.
url="https://github.com/Kevin-Mok/spotify-lib-vis" date="June 2018 — July 2018"
show="true" %}}
- Scans 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.
- 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.
- Implemented 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
@ -62,8 +60,7 @@ 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.
- Proof of concept 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**.

63
layouts/card/section.html

@ -0,0 +1,63 @@
{{ 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
<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
<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
<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
<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
<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
<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
<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" . }}

2
layouts/partials/base/footer.html

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

Loading…
Cancel
Save