diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index b544372e..95d2aade 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -21,7 +21,7 @@ deploy: script: # build site - rm -rf public - - hugo --gc + - hugo --gc --enableGitInfo # upload all files - aws s3 sync ./public s3://$S3_BUCKET_NAME --delete --region us-east-1 --cache-control "max-age=3600, public" --metadata-directive "REPLACE" diff --git a/config.toml b/config.toml index e13d8375..41246eac 100644 --- a/config.toml +++ b/config.toml @@ -8,6 +8,8 @@ disableFastRender = true disableHugoGeneratorInject = true # don't worry, inserted manually :) disableKinds = ["taxonomy", "taxonomyTerm"] +enableGitInfo = true + [taxonomies] tag = "" category = "" diff --git a/content/_index.md b/content/_index.md index 923290d9..1b8d610f 100644 --- a/content/_index.md +++ b/content/_index.md @@ -2,5 +2,5 @@ title = "Jake Jarvis – Web & Mobile Developer in Boston, MA" description = "I'm a full-stack web engineer and mobile developer based in Boston, Massachusetts specializing in modern JavaScript frameworks and iOS apps." type = "home" -date = "2019-03-31" +date = "2019-04-12" +++ diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 1e9997de..81c33989 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,21 +1,19 @@ {{ partial "header.html" . }} {{ partial "blog-header.html" . }} - -
+
{{ range .Data.Pages.GroupByDate "2006" }} -
+

{{ .Key }}

    - {{ range .Pages }} -
  • + {{ range .Pages }} +
  • {{ .Date.Format "Jan 2" }}
    {{ .Title }}
    • - {{ end }} + {{ end }}
-
+ {{ end }} -
- + {{ partial "blog-footer.html" . }} {{ partial "footer.html" . }} \ No newline at end of file diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 634bc5fb..52969aeb 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,26 +1,26 @@ {{ partial "header.html" . }} {{ partial "blog-header.html" . }} - -
-
-

{{ .Title }}

-
- by Jake Jarvis · - {{ .Date.Format "January 2, 2006" }} · - - {{ .ReadingTime }} minute read -
- {{ with .Params.tags }}{{ if ge (len .) 1 }} - {{ range . }}{{ . }} {{ end }} - {{ end }}{{ end }} +
+
-
+
{{ .Content }} -
-
-
- +
+
+ + {{ partial "blog-footer.html" . }} {{ partial "footer.html" . }} \ No newline at end of file diff --git a/layouts/index.html b/layouts/index.html index 8ba0cf52..278d98f7 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,12 +1,14 @@ {{ partial "header.html" . }} -
- Photo of Jake Jarvis -

Hi! I'm Jake Jarvis. 👋

-

I'm a web and mobile developer based in Boston.

+
+
+ Photo of Jake Jarvis +

Hi! I'm Jake Jarvis. 👋

+

I'm a web and mobile developer based in Boston.

+

My recent focus has been on Node, Express, and MongoDB stacks behind modern JavaScript frameworks like React, Angular, and Vue...

...but I'm fluent in classics like PHP, Ruby, Java, C++, and Python as well.

Whenever possible, I also prioritize my experience with information security, server(less) architecture, efficient DevOps & CI, and the containerization of everything.

-

I fell in love with front-end web development (don't judge) back when my only source of income was the Tooth Fairy.

+

I fell in love with front-end web development (don't judge!) back when my only source of income was the Tooth Fairy.

Since then, my side projects have been @@ -17,11 +19,11 @@ outlets.

You can find some of my work on GitHub or LinkedIn, my adventures on , Facebook, Instagram, or Mastodon, and my standard PDF resume here.

-

If any of this fits with what you're looking for, I'd love to hear from you via email D36C B66F 4002 B25B, , or text!

- -
+ + {{ partial "footer.html" . }} \ No newline at end of file diff --git a/layouts/partials/blog-footer.html b/layouts/partials/blog-footer.html index 44c7f20a..a432aeab 100644 --- a/layouts/partials/blog-footer.html +++ b/layouts/partials/blog-footer.html @@ -1,6 +1,6 @@ - + {{ if .IsPage }}{{ end }} \ No newline at end of file diff --git a/layouts/partials/blog-header.html b/layouts/partials/blog-header.html index 78b59b17..4ae168f7 100644 --- a/layouts/partials/blog-header.html +++ b/layouts/partials/blog-header.html @@ -1,4 +1,4 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 72f3b9c3..2ee17a8a 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -15,3 +15,6 @@ + +{{ printf "" hugo.BuildDate | safeHTML }} +{{ printf "" .Hugo.CommitHash | safeHTML }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index b243deef..23815a39 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -3,7 +3,7 @@ - {{ .Hugo.Generator }} + {{ hugo.Generator }} {{ .Title }}{{ if not .IsHome }} – {{ .Site.Title }}{{ end }} 👨‍💻 diff --git a/static/style.css b/static/style.css index 4daf1ed3..846a5626 100644 --- a/static/style.css +++ b/static/style.css @@ -4,7 +4,7 @@ body { width: 100%; height: 100%; margin: 0; - color: #000000; + color: #202020; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif, @@ -21,8 +21,8 @@ body { a { background-color: transparent; text-decoration: none; - border-bottom: 1px dashed transparent; - transition: border-color 0.15s linear; + border-bottom: 1px solid transparent; + transition: border-color 0.08s linear; } @@ -41,7 +41,7 @@ body#home img#me { float: right; margin: 0 0 20px 20px; padding: 4px; - border: 1px solid #dddddd; + border: 1px solid #ddd; width: 160px; height: 160px; } @@ -80,6 +80,8 @@ body#home sup { @media screen and (max-width: 800px) { body#home { font-size: 16px; + margin-top: 10px; + margin-bottom: 10px; } body#home img#me { @@ -103,24 +105,24 @@ body#home sup { margin: 12px 0; } - body#home div#footer div#panda { + body#home footer div#panda { display: none; } - body#home div#footer div#blog, body#home div#footer div#info { + body#home footer div#blog, body#home footer div#info { width: 50% !important; line-height: 20px !important; } - body#home div#footer div#info { + body#home footer div#info { font-size: 0.7em !important; } - body#home div#footer div#blog { - font-size: 0.9em !important; + body#home footer div#blog { + font-size: 1em !important; } - body#home div#footer div#info span#copyright::after { + body#home footer div#info span#copyright::after { content: "\A"; white-space: pre; } @@ -133,7 +135,8 @@ body#home a#boston { color: #fb4d42; } body#home a#boston:hover { - border-color: #fb4d42; + border-color: #fb4d42; /* First color for hex alpha (#RRGGBBAA) backwards compatibility: */ + border-color: #fb4d4260; /* https://meyerweb.com/eric/thoughts/2019/04/01/color-me-face1e55/ */ } body#home a#javascript { @@ -141,6 +144,7 @@ body#home a#javascript { } body#home a#javascript:hover { border-color: #f48024; + border-color: #f4802460; } body#home a#node { @@ -148,6 +152,7 @@ body#home a#node { } body#home a#node:hover { border-color: #6fbc4e; + border-color: #6fbc4e60; } body#home a#express { @@ -155,6 +160,7 @@ body#home a#express { } body#home a#express:hover { border-color: #259dff; + border-color: #259dff60; } body#home a#mongo { @@ -162,6 +168,7 @@ body#home a#mongo { } body#home a#mongo:hover { border-color: #13aa52; + border-color: #13aa5260; } body#home a#react { @@ -169,6 +176,7 @@ body#home a#react { } body#home a#react:hover { border-color: #61dafb; + border-color: #61dafb60; } body#home a#angular { @@ -176,6 +184,7 @@ body#home a#angular { } body#home a#angular:hover { border-color: #c3002f; + border-color: #c3002f60; } body#home a#vue { @@ -183,6 +192,7 @@ body#home a#vue { } body#home a#vue:hover { border-color: #486491; + border-color: #48649160; } body#home a#java { @@ -190,6 +200,7 @@ body#home a#java { } body#home a#java:hover { border-color: #ab6311; + border-color: #ab631160; } body#home a#cpp { @@ -197,13 +208,15 @@ body#home a#cpp { } body#home a#cpp:hover { border-color: #865fc5; + border-color: #865fc560; } body#home a#python { - color: #f3bb12; + color: #efb60b; } body#home a#python:hover { - border-color: #f3bb12; + border-color: #efb60b; + border-color: #efb60b60; } body#home a#php { @@ -211,6 +224,7 @@ body#home a#php { } body#home a#php:hover { border-color: #8892bf; + border-color: #8892bf60; } body#home a#ruby { @@ -218,6 +232,7 @@ body#home a#ruby { } body#home a#ruby:hover { border-color: #d34135; + border-color: #d3413560; } body#home a#infosec { @@ -225,6 +240,7 @@ body#home a#infosec { } body#home a#infosec:hover { border-color: #00b81a; + border-color: #00b81a60; } body#home a#server { @@ -232,6 +248,7 @@ body#home a#server { } body#home a#server:hover { border-color: #0098ec; + border-color: #0098ec60; } body#home a#server span#serverless { color: #87cef7; @@ -242,6 +259,7 @@ body#home a#devops { } body#home a#devops:hover { border-color: #ff6200; + border-color: #ff620060; } body#home a#containerization { @@ -249,6 +267,7 @@ body#home a#containerization { } body#home a#containerization:hover { border-color: #c48f49; + border-color: #c48f4960; } body#home a#y2k { @@ -256,13 +275,14 @@ body#home a#y2k { } body#home a#y2k:hover { border-color: #ffa900; + border-color: #ffa90060; } body#home a#y2k span#shh { - color: #aaaaaa; + color: #9e9e9e; } body#home span#fairy { - color: #fd5da8; + color: #f23e93; } body#home span#fairy:hover { cursor: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMiIgc3R5bGU9ImZvbnQtc2l6ZToxNnB4Ij48dGV4dCB5PSIxOCI+8J+nmjwvdGV4dD48L3N2Zz4=), default !important; @@ -273,6 +293,7 @@ body#home a#github { } body#home a#github:hover { border-color: #8d4eff; + border-color: #8d4eff60; } body#home a#linkedin { @@ -280,6 +301,7 @@ body#home a#linkedin { } body#home a#linkedin:hover { border-color: #0073b1; + border-color: #0073b160; } body#home a#facebook { @@ -287,6 +309,7 @@ body#home a#facebook { } body#home a#facebook:hover { border-color: #4267b2; + border-color: #4267b260; } body#home a.twitter { @@ -294,6 +317,7 @@ body#home a.twitter { } body#home a.twitter:hover { border-color: #00acee; + border-color: #00acee60; } body#home a#instagram { @@ -301,6 +325,7 @@ body#home a#instagram { } body#home a#instagram:hover { border-color: #a37754; + border-color: #a3775460; } body#home a#mastodon { @@ -308,6 +333,7 @@ body#home a#mastodon { } body#home a#mastodon:hover { border-color: #6d8ca7; + border-color: #6d8ca760; } body#home a#news-1 { @@ -315,6 +341,7 @@ body#home a#news-1 { } body#home a#news-1:hover { border-color: #ff1b1b; + border-color: #ff1b1b60; } body#home a#news-2 { @@ -322,13 +349,15 @@ body#home a#news-2 { } body#home a#news-2:hover { border-color: #f78200; + border-color: #f7820060; } body#home a#news-3 { - color: #ffc30c; + color: #f2b702; } body#home a#news-3:hover { - border-color: #ffc30c; + border-color: #f2b702; + border-color: #f2b70260; } body#home a#news-4 { @@ -336,6 +365,7 @@ body#home a#news-4 { } body#home a#news-4:hover { border-color: #5ebd3e; + border-color: #5ebd3e60; } body#home a#news-5 { @@ -343,6 +373,7 @@ body#home a#news-5 { } body#home a#news-5:hover { border-color: #009cdf; + border-color: #009cdf60; } body#home a#news-6 { @@ -350,6 +381,7 @@ body#home a#news-6 { } body#home a#news-6:hover { border-color: #3e49bb; + border-color: #3e49bb60; } body#home a#news-7 { @@ -357,6 +389,7 @@ body#home a#news-7 { } body#home a#news-7:hover { border-color: #973999; + border-color: #97399960; } body#home a#resume { @@ -364,6 +397,7 @@ body#home a#resume { } body#home a#resume:hover { border-color: #d54b3d; + border-color: #d54b3d60; } body#home a#email { @@ -371,14 +405,15 @@ body#home a#email { } body#home a#email:hover { border-color: #de0c0c; + border-color: #de0c0c60; } body#home a#pgp { color: #777777; - margin-left: -2px; } body#home a#pgp:hover { border-color: #777777; + border-color: #77777760; } body#home a#sms { @@ -386,60 +421,62 @@ body#home a#sms { } body#home a#sms:hover { border-color: #6fcc01; + border-color: #6fcc0160; } /* Footer */ -body#home div#footer { +body#home footer { margin: 0; height: 40px; } -body#home div#footer div { +body#home footer div { float: left; vertical-align: middle; line-height: 40px; height: 100%; } -body#home div#footer div#blog { +body#home footer div#blog { width: 40%; text-align: left; - font-size: 0.75em; + font-size: 0.9em; } -body#home div#footer div#blog a { +body#home footer div#blog a { color: #0077a7; } -body#home div#footer div#blog a:hover { +body#home footer div#blog a:hover { border-color: #0077a7; + border-color: #0077a760; } -body#home div#footer div#panda { +body#home footer div#panda { width: 20%; text-align: center; font-size: 1em; } -body#home div#footer div#panda span { +body#home footer div#panda span { text-align: center; width: 12px; } -body#home div#footer div#info { +body#home footer div#info { width: 40%; - font-size: 0.5em; - color: #666666; + font-size: 0.55em; + color: #666; text-align: right; } -body#home div#footer div#info a { - color: #666666; +body#home footer div#info a { + color: #666; } -body#home div#footer div#info a#source { - border-bottom: 1px solid #dddddd; +body#home footer div#info a#source { + border-bottom: 1px solid #ddd; } @@ -476,14 +513,11 @@ body#notes { } body#notes a { - color: #0077a7; - background-color: transparent; - text-decoration: none; - border-bottom: 1px dashed transparent; - transition: border-color 0.15s linear; + color: #036e9b; } body#notes a:hover { - border-color: #0077a7; + border-color: #036e9b; + border-color: #036e9b60; } @@ -494,44 +528,44 @@ body#notes a:hover { padding: 20px !important; } - body#notes, body#notes div#single { + body#notes, body#notes main#single article { width: 100%; max-width: 100%; box-sizing: border-box; } - body#notes div#header { + body#notes header { margin-top: 0px !important; margin-bottom: 20px !important; } - body#notes div#header a#logo img, body#notes div#header a#logo svg { + body#notes header a#logo img, body#notes header a#logo svg { height: 75px !important; width: 50px !important; } - body#notes div#footer { + body#notes footer { margin-bottom: 30px !important; } - body#notes div#footer div#panda { + body#notes footer div#panda { display: none; } - body#notes div#footer div#copyright, body#notes div#footer div#poweredby { + body#notes footer div#copyright, body#notes footer div#poweredby { width: 50% !important; line-height: 20px !important; font-size: 14px !important; line-height: 1.8em !important; } - body#notes div#footer div#poweredby a#hugo::after { + body#notes footer div#poweredby a#hugo::after { content: "\A"; white-space: pre; } - body#notes div#single div.meta { - font-size: 15px !important; + body#notes main#single article div.meta { + font-size: 14px !important; } body#notes div#content code { @@ -542,25 +576,25 @@ body#notes a:hover { /* Header */ -body#notes div#header { +body#notes header { font-size: 16px; margin-top: 20px; margin-bottom: 40px; } -body#notes div#header a#more { +body#notes header a#more { border: none; font-size: 18px; font-weight: 400; } -body#notes div#header a#logo { +body#notes header a#logo { border: none; margin: 20px auto; display: block; } -body#notes div#header a#logo img, body#notes div#header a#logo svg { +body#notes header a#logo img, body#notes header a#logo svg { height: 150px; width: 100px; margin: 0 auto; @@ -571,8 +605,8 @@ body#notes div#header a#logo img, body#notes div#header a#logo svg { /* Footer */ -body#notes div#footer { - border-top: 1px solid #cccccc; +body#notes footer { + border-top: 1px solid #ccc; height: 40px; font-size: 24px; padding-top: 16px; @@ -580,43 +614,43 @@ body#notes div#footer { margin-bottom: 20px; } -body#notes div#footer a { - color: #666666; +body#notes footer a { + color: #666; border: none; } -body#notes div#footer div { +body#notes footer div { float: left; vertical-align: middle; line-height: 40px; height: 100%; } -body#notes div#footer div#copyright, body#notes div#footer div#poweredby { +body#notes footer div#copyright, body#notes footer div#poweredby { width: 40%; - font-size: 0.5em; - color: #666666; + font-size: 0.55em; + color: #666; } -body#notes div#footer div#copyright { +body#notes footer div#copyright { text-align: left; } -body#notes div#footer div#poweredby { +body#notes footer div#poweredby { text-align: right; } -body#notes div#footer div#poweredby a#source { - border-bottom: 1px solid #dddddd; +body#notes footer div#poweredby a#source { + border-bottom: 1px solid #ddd; } -body#notes div#footer div#panda { +body#notes footer div#panda { width: 20%; text-align: center; font-size: 1em; } -body#notes div#footer div#panda span { +body#notes footer div#panda span { text-align: center; width: 12px; } @@ -624,16 +658,16 @@ body#notes div#footer div#panda span { /* Single Post */ -body#notes div#single div#content, body#notes div#single div#content p { +body#notes main#single article div#content, body#notes main#single article div#content p { line-height: 1.7; object-fit: contain; } -body#notes div#single div#info { +body#notes main#single article div#info { text-align: center; } -body#notes div#single h1 { +body#notes main#single article h1 { margin-top: 0; margin-bottom: 20px; color: #222; @@ -641,78 +675,78 @@ body#notes div#single h1 { line-height: 1.4em; } -body#notes div#single h1 a { +body#notes main#single article h1 a { color: #222; border: none; } -body#notes div#single h2 { +body#notes main#single article h2 { margin-top: 20px; margin-bottom: 10px; font-weight: normal; font-size: 24px; line-height: 1.5em; - color: #111; + color: #222; } -body#notes div#single div.meta { +body#notes main#single article div.meta { margin: -5px 0 0 0; - color: #666666; + color: #666; font-size: 13px; line-height: 1.5em; letter-spacing: 1px; } -body#notes div#single div.meta a { - color: #666666; +body#notes main#single article div.meta a { + color: #666; border: none; } -body#notes div#single div.meta div.tags { +body#notes main#single article div.meta div.tags { text-transform: uppercase; line-height: 1.5em; letter-spacing: 2px; margin-top: 5px; } -body#notes div#single div.meta div.tags span.tag { - color: #666666; +body#notes main#single article div.meta div.tags span.tag { + color: #666; border: none; margin: 0 7px; } -body#notes div#single div.meta div.tags span.tag a { - color: #666666; +body#notes main#single article div.meta div.tags span.tag a { + color: #666; border: none; } -body#notes div#single div#content img { +body#notes main#single article div#content img { max-width: 100%; margin: 0 auto; display: block; object-fit: scale-down; } -body#notes div#single div#content img + em { +body#notes main#single article div#content img + em { display: block; text-align: center; font-size: 15px; - color: #555555; + color: #555; margin-top: 5px; } -body#notes div#single div#content blockquote { +body#notes main#single article div#content blockquote { border-left: 6px solid #0087be; margin-left: 6px; padding-left: 15px; } -body#notes div#single div#content code { +body#notes main#single article div#content code { font-family: monospace; background: #f4f4f4; padding: 0.2em; - border: 1px solid #cccccc; + border: 1px solid #ccc; font-size: 16px; } -body#notes div#single div#content pre code { +body#notes main#single article div#content pre code { padding: 1em 1.5em; line-height: 1.6; page-break-inside: avoid; @@ -724,20 +758,20 @@ body#notes div#single div#content pre code { object-fit: scale-down; } -body#notes div#single div#content hr { +body#notes main#single article div#content hr { width: 60%; margin: 10px auto; border: 1px solid #ccc; } -body#notes div#single div#content div.embed.video-player { +body#notes main#single article div#content div.embed.video-player { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } -body#notes div#single div#content div.embed.video-player iframe.youtube-player { +body#notes main#single article div#content div.embed.video-player iframe.youtube-player { position: absolute; top: 0; left: 0; @@ -748,22 +782,22 @@ body#notes div#single div#content div.embed.video-player iframe.youtube-player { display: inline-block; } -body#notes div#single div#commento { - border-top: 1px solid #cccccc; +body#notes main#single article div#commento { + border-top: 1px solid #ccc; padding-top: 20px; margin-top: 20px; } -body#notes div#single div#commento a.commento-name { +body#notes main#single article div#commento a.commento-name { max-width: none !important; border: none; } -body#notes div#single div#commento div.commento-logged-container { +body#notes main#single article div#commento div.commento-logged-container { display: block !important; } -body#notes div#single div#commento div#commento-footer { +body#notes main#single article div#commento div#commento-footer { display: none; } @@ -771,34 +805,34 @@ body#notes div#single div#commento div#commento-footer { /* Archive List */ -body#notes div#archive div.year ul { +body#notes main#archive section.year ul { list-style-type: none; padding-left: 0; display: block; } -body#notes div#archive div.year ul li::after { +body#notes main#archive section.year li::after { content: ''; display: block; clear: both; } -body#notes div#archive div.year ul li:last-child { +body#notes main#archive section.year li:last-child { margin-bottom: 20px; } -body#notes div#archive div.year ul li+li { +body#notes main#archive section.year li+li { padding-top: 20px; } -body#notes div#archive div.year div.date { +body#notes main#archive section.year div.date { float: left; - color: #666666; + color: #666; width: 100px; font-weight: 400; } -body#notes div#archive div.year div.title { +body#notes main#archive section.year div.title { float: left; width: calc(100% - 100px); } @@ -815,12 +849,12 @@ body#error { padding: 0; } body#error div#message { - background: #ffffff; + background: #fff; max-width: 400px; margin: 100px auto 16px; padding: 16px 32px; border-radius: 4px; - box-shadow: 0 1px 3px #e0e0e0, 0 1px 2px #888888; + box-shadow: 0 1px 3px #e0e0e0, 0 1px 2px #888; } body#error div#message h1 { margin: 16px 0; @@ -837,7 +871,7 @@ body#error div#message a { } @media (max-width: 600px) { body#error, body#error div#message { - background: #ffffff; + background: #fff; margin-top: 16px; box-shadow: none; }