From 5b9b14344dd627c4e7a23cd0b70d7322f04fe52f Mon Sep 17 00:00:00 2001
From: mishamyrt <misha@myrt.co>
Date: Fri, 13 Sep 2019 21:47:29 +0300
Subject: [PATCH 01/13] Added dark theme

---
 src/colors/colors.css | 19 ++++++++++++++++++-
 src/index.css         |  1 +
 src/resume/resume.css |  6 +++---
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/colors/colors.css b/src/colors/colors.css
index 6ebfc50..4fa63ab 100644
--- a/src/colors/colors.css
+++ b/src/colors/colors.css
@@ -1,8 +1,25 @@
 :root {
+  --color-background: white;
   --color-link: black;
   --color-link-background: #d8d8d8;
   --color-heading: black;
   --color-text: #6c6c6c;
   --color-icon: #a8a8a8;
-  --color-line: #d8d8d8;
+  --color-line: var(--color-link-background);
+  --color-technology-bg: var(--color-icon);
+  --color-technology-fg: var(--color-background);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-link: white;
+    --color-heading: white;
+    --color-background: #282c2f;
+    --color-text: hsl(0, 0%, 58%);
+    --color-icon: hsl(0, 0%, 66%);
+    --color-line: hsl(0, 0%, 85%);
+    --color-link-background: hsl(0, 0%, 30%);
+    --color-technology-fg: var(--color-line);
+    --color-technology-bg: var(--color-link-background);
+  }
 }
diff --git a/src/index.css b/src/index.css
index f3c8a0b..dd2c2e7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4,6 +4,7 @@
 @import './resume/resume.css';
 
 body {
+  background-color: var(--color-background);
   color: var(--color-text);
   -webkit-font-smoothing: antialiased;
   min-height: calc(100vh - 74px);
diff --git a/src/resume/resume.css b/src/resume/resume.css
index 848c80b..f35c197 100644
--- a/src/resume/resume.css
+++ b/src/resume/resume.css
@@ -18,7 +18,7 @@
 .resume-position {
   font-size: 19px;
   line-height: 11px;
-  margin: 20px 0 60px;
+  margin: 20px 0 40px;
 }
 
 .resume-links {
@@ -58,8 +58,8 @@ a.resume-link:hover {
 
 .resume-technology {
   display: inline-block;
-  color: white;
-  background-color: var(--color-text);
+  color: var(--color-technology-fg);
+  background-color: var(--color-technology-bg);
   font-family: var(--font-monospace);
   font-size: 14px;
   padding: 2px;

From bdb925498401550558594b21f1a3674453167f8a Mon Sep 17 00:00:00 2001
From: mishamyrt <misha@myrt.co>
Date: Fri, 13 Sep 2019 22:05:40 +0300
Subject: [PATCH 02/13] Added backlink from resume

---
 src/resume/resume.css | 4 ++++
 src/ru/resume.pug     | 6 ++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/resume/resume.css b/src/resume/resume.css
index f35c197..fc0cf5e 100644
--- a/src/resume/resume.css
+++ b/src/resume/resume.css
@@ -67,6 +67,10 @@ a.resume-link:hover {
   margin: 0 4px 8px;
 }
 
+.resume-backLink:hover {
+  background-color: unset;
+}
+
 .resume-date {
   text-align: center;
   position: relative;
diff --git a/src/ru/resume.pug b/src/ru/resume.pug
index de0d3ce..7a53ead 100644
--- a/src/ru/resume.pug
+++ b/src/ru/resume.pug
@@ -7,11 +7,13 @@ html( lang="ru" itemtype="https://schema.org/Person" itemscope )
   body
     .resume
       .resume-header
-        picture.resume-avatar
+        a.resume-backLink(href="./index.pug")
+          picture.resume-avatar
           source( srcset="/photo/avatar.webp" type="image/webp" )
           img.resume-avatar( src="/photo/avatar.jpg" alt="Фотография Миши Хрустика" itemprop="image")
         .resume-iam
-          h1.resume-heading Михаил Хрустик
+          a.resume-backLink(href="./index.pug")
+            h1.resume-heading Михаил Хрустик
           h2.resume-subheading Веб–разработчик и дизайнер
         p.resume-contacts
           | #[a( href='tel:+79992053133' ) +7 999 205–31–33] <br>

From 487cc81918feec784e6d05cdd73fcf19f4430979 Mon Sep 17 00:00:00 2001
From: mishamyrt <misha@myrt.co>
Date: Fri, 13 Sep 2019 23:04:26 +0300
Subject: [PATCH 03/13] Better link, better colors

---
 src/colors/colors.css | 18 +++++++++---------
 src/hero/hero.css     |  7 +++++--
 src/index.css         | 20 ++++++++++++++++++--
 src/resume/resume.css |  9 ++++++---
 4 files changed, 38 insertions(+), 16 deletions(-)

diff --git a/src/colors/colors.css b/src/colors/colors.css
index 4fa63ab..e1f8b9b 100644
--- a/src/colors/colors.css
+++ b/src/colors/colors.css
@@ -12,14 +12,14 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --color-link: white;
-    --color-heading: white;
-    --color-background: #282c2f;
-    --color-text: hsl(0, 0%, 58%);
-    --color-icon: hsl(0, 0%, 66%);
-    --color-line: hsl(0, 0%, 85%);
-    --color-link-background: hsl(0, 0%, 30%);
-    --color-technology-fg: var(--color-line);
-    --color-technology-bg: var(--color-link-background);
+    --color-link: rgba(255, 255, 255, 0.87);
+    --color-heading: rgba(255, 255, 255, 0.87);
+    --color-background: #121212;
+    --color-text: rgba(255, 255, 255, 0.5);
+    --color-icon: rgba(255, 255, 255, 0.5);
+    --color-line: rgba(255, 255, 255, 0.2);
+    --color-link-background: rgba(255, 255, 255, 0.15);
+    --color-technology-fg: rgba(255, 255, 255, 0.32);
+    --color-technology-bg: rgba(255, 255, 255, 0.09);
   }
 }
diff --git a/src/hero/hero.css b/src/hero/hero.css
index 2d13cb7..47f4345 100644
--- a/src/hero/hero.css
+++ b/src/hero/hero.css
@@ -35,7 +35,7 @@
 }
 
 .hero-icon {
-  fill: var(--color-heading);
+  fill: var(--color-icon);
   width: 20px;
   display: block;
   opacity: 0.33;
@@ -51,10 +51,13 @@
 
 a.hero-icon:hover {
   opacity: 1;
-  background-color: transparent;
   transition: opacity 0s;
 }
 
+a.hero-icon:hover::after {
+  background-color: transparent;
+}
+
 @media screen and (max-width: 900px) {
   .hero-heading {
     font-size: calc(7vw + 14px);
diff --git a/src/index.css b/src/index.css
index dd2c2e7..5545e3b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -31,11 +31,27 @@ h3 {
 a {
   color: var(--color-link);
   text-decoration: none;
+  position: relative;
   transition: background-color 0.25s ease-out;
 }
 
-a:hover {
-  background-color: var(--color-link-background);
+a::after {
+  content: '';
+  transform: translateZ(1px);
+  z-index: 1;
+  width: calc(100% + 8px);
+  height: calc(100% + 2px);
+  top: -1px;
+  left: -4px;
+  mix-blend-mode: hue;
+  position: absolute;
+  display: block;
+  background-color: transparent;
   border-radius: 2px;
+  transition: background-color 0.25s;
+}
+
+a:hover::after {
   transition: background-color 0s;
+  background-color: var(--color-link-background);
 }
diff --git a/src/resume/resume.css b/src/resume/resume.css
index fc0cf5e..6330686 100644
--- a/src/resume/resume.css
+++ b/src/resume/resume.css
@@ -30,7 +30,7 @@
 }
 
 .resume-link {
-  fill: var(--color-heading);
+  fill: var(--color-icon);
   width: 20px;
   display: block;
   opacity: 0.33;
@@ -42,10 +42,13 @@
 
 a.resume-link:hover {
   opacity: 1;
-  background-color: transparent;
   transition: opacity 0s;
 }
 
+a.resume-link:hover::after {
+  background-color: transparent;
+}
+
 .resume-link:last-child {
   margin-right: 0;
 }
@@ -67,7 +70,7 @@ a.resume-link:hover {
   margin: 0 4px 8px;
 }
 
-.resume-backLink:hover {
+.resume-backLink:hover::after {
   background-color: unset;
 }
 

From 1f1c54928898535d0511983d8608bafefecbda55 Mon Sep 17 00:00:00 2001
From: mishamyrt <misha@myrt.co>
Date: Fri, 13 Sep 2019 23:17:48 +0300
Subject: [PATCH 04/13] Improved tablet layout

---
 src/resume/resume.css | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/resume/resume.css b/src/resume/resume.css
index 6330686..2d795e7 100644
--- a/src/resume/resume.css
+++ b/src/resume/resume.css
@@ -11,7 +11,7 @@
 .resume-header,
 .resume-job {
   display: grid;
-  grid-template-columns: 92px 5fr 2fr;
+  grid-template-columns: 92px 5fr minmax(190px, 2fr);
   grid-gap: 55px;
 }
 
@@ -101,8 +101,8 @@ a.resume-link:hover::after {
 
 .resume-heading {
   font-size: 57px;
-  line-height: 80px;
-  margin: 0;
+  line-height: 60px;
+  margin: 3px 0 15px;
 }
 
 .resume-subheading {
@@ -117,6 +117,12 @@ a.resume-link:hover::after {
   margin: 17px 0 0;
 }
 
+@media screen and (max-width: 890px) {
+  .resume-heading {
+    margin: -6px 0 15px;
+  }
+}
+
 @media screen and (max-width: 750px) {
   .resume-header {
     display: flex;

From 3ac6d40711ba5f1980e523940d184cf675ae5b30 Mon Sep 17 00:00:00 2001
From: mishamyrt <misha@myrt.co>
Date: Fri, 13 Sep 2019 23:24:22 +0300
Subject: [PATCH 05/13] Improved light color on light theme

---
 src/colors/colors.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/colors/colors.css b/src/colors/colors.css
index e1f8b9b..462a9fb 100644
--- a/src/colors/colors.css
+++ b/src/colors/colors.css
@@ -4,7 +4,7 @@
   --color-link-background: #d8d8d8;
   --color-heading: black;
   --color-text: #6c6c6c;
-  --color-icon: #a8a8a8;
+  --color-icon: #525252;
   --color-line: var(--color-link-background);
   --color-technology-bg: var(--color-icon);
   --color-technology-fg: var(--color-background);

From 9c496290c7b0cd6e20facd4cee68fdfc625d4f88 Mon Sep 17 00:00:00 2001
From: mishamyrt <misha@myrt.co>
Date: Fri, 13 Sep 2019 23:33:35 +0300
Subject: [PATCH 06/13] Added pre-commit hook

---
 .hooks/pre-commit | 2 ++
 1 file changed, 2 insertions(+)
 create mode 100755 .hooks/pre-commit

diff --git a/.hooks/pre-commit b/.hooks/pre-commit
new file mode 100755
index 0000000..a2ab222
--- /dev/null
+++ b/.hooks/pre-commit
@@ -0,0 +1,2 @@
+#!/bin/bash
+npm run lint:fix

From 49cee5b8d898bbd734f4c0f99d9a9ec19c3f9046 Mon Sep 17 00:00:00 2001
From: mishamyrt <misha@myrt.co>
Date: Fri, 13 Sep 2019 23:33:48 +0300
Subject: [PATCH 07/13] Added hook unpack

---
 package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index afd54df..8939959 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,8 @@
     "size-check": "npx size-limit",
     "spell-check": "npx yaspeller dist/**/*.html",
     "lint": "npx stylelint \"src/**/*.css\"",
-    "lint:fix": "npx stylelint \"src/**/*.css\" --fix"
+    "lint:fix": "npx stylelint \"src/**/*.css\" --fix",
+    "postinstall": "chmod +x .hooks/* && cp -r .hooks/ .git/hooks/"
   },
   "repository": {
     "type": "git",

From 45fa0c7322a446edbd7cf4672eac14d4b7f39e62 Mon Sep 17 00:00:00 2001
From: mishamyrt <misha@myrt.co>
Date: Sat, 14 Sep 2019 00:22:43 +0300
Subject: [PATCH 08/13] hooks: Added prepare commit script

---
 .hooks/prepare-commit-msg | 43 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100755 .hooks/prepare-commit-msg

diff --git a/.hooks/prepare-commit-msg b/.hooks/prepare-commit-msg
new file mode 100755
index 0000000..32e8d7a
--- /dev/null
+++ b/.hooks/prepare-commit-msg
@@ -0,0 +1,43 @@
+#!/usr/bin/env node
+const fs = require('fs')
+const path = require('path')
+const { promisify } = require('util')
+
+const readFile = promisify(fs.readFile)
+const writeFile = promisify(fs.writeFile)
+
+const commitFile = path.join(__dirname, '..', 'COMMIT_EDITMSG')
+
+function checkBranchName (branchName) {
+  if (!branchName.includes('/')) return false
+  switch (branchName.split('/')[0]) {
+    case 'feature':
+    case 'hotfix':
+    case 'support':
+    case 'release':
+      return true
+    default:
+      return false
+  }
+}
+
+let branchName
+readFile(path.join(__dirname, '..', 'HEAD'))
+  .then(headContent => {
+    const pathItems = headContent.toString().split('/')
+    pathItems.shift()
+    pathItems.shift()
+    branchName = pathItems.join('/')
+    if (!checkBranchName(branchName)) {
+      console.error('Wrong branch name')
+      console.info('Branch should be in Git Flow format')
+      process.exit(0)
+    }
+  })
+  .then(() => readFile(commitFile))
+  .then(commitMsg => writeFile(
+    commitFile,
+    `${branchName.split('/')[1].trim()}: ${commitMsg.toString()}`
+  ))
+  .then(() => process.exit(1))
+

From d748383f8cb553bca9e91260dcc7b25f9846b5b3 Mon Sep 17 00:00:00 2001
From: mishamyrt <misha@myrt.co>
Date: Sat, 14 Sep 2019 00:22:57 +0300
Subject: [PATCH 09/13] hooks: Removed exit code

---
 .hooks/prepare-commit-msg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.hooks/prepare-commit-msg b/.hooks/prepare-commit-msg
index 32e8d7a..0b418e2 100755
--- a/.hooks/prepare-commit-msg
+++ b/.hooks/prepare-commit-msg
@@ -39,5 +39,5 @@ readFile(path.join(__dirname, '..', 'HEAD'))
     commitFile,
     `${branchName.split('/')[1].trim()}: ${commitMsg.toString()}`
   ))
-  .then(() => process.exit(1))
+  .then(() => process.exit(0))
 

From a27e2fbf9f06c8c35eb5e2a28ae88250e8f24cc8 Mon Sep 17 00:00:00 2001
From: mishamyrt <misha@myrt.co>
Date: Sat, 14 Sep 2019 02:09:26 +0300
Subject: [PATCH 10/13] lighthouse-score: Added GZip

---
 docker/nginx.conf | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/docker/nginx.conf b/docker/nginx.conf
index 75a1073..ccf469b 100644
--- a/docker/nginx.conf
+++ b/docker/nginx.conf
@@ -17,6 +17,17 @@ http {
   server {
     listen 80;
 
+    gzip on;
+    gzip_disable "msie6";
+
+    gzip_vary on;
+    gzip_proxied any;
+    gzip_comp_level 6;
+    gzip_buffers 16 8k;
+    gzip_http_version 1.1;
+    gzip_min_length 256;
+    gzip_types text/plain text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript font/opentype image/svg+xml image/x-icon;
+
     root /usr/share/nginx/html;
     charset UTF-8;
 

From 270f924103054b564153837c47003462bd5ede58 Mon Sep 17 00:00:00 2001
From: mishamyrt <misha@myrt.co>
Date: Sat, 14 Sep 2019 08:29:48 +0300
Subject: [PATCH 11/13] lighthouse-score: Fixed link hover at safari

---
 src/index.css | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/index.css b/src/index.css
index 5545e3b..d8bb169 100644
--- a/src/index.css
+++ b/src/index.css
@@ -43,7 +43,7 @@ a::after {
   height: calc(100% + 2px);
   top: -1px;
   left: -4px;
-  mix-blend-mode: hue;
+  mix-blend-mode: darken;
   position: absolute;
   display: block;
   background-color: transparent;
@@ -51,6 +51,12 @@ a::after {
   transition: background-color 0.25s;
 }
 
+@media (prefers-color-scheme: dark) {
+  a::after {
+    mix-blend-mode: color;
+  }
+}
+
 a:hover::after {
   transition: background-color 0s;
   background-color: var(--color-link-background);

From 6a669dc07fc66db5c3332eb1e929f06072b9090a Mon Sep 17 00:00:00 2001
From: mishamyrt <misha@myrt.co>
Date: Sat, 14 Sep 2019 08:46:00 +0300
Subject: [PATCH 12/13] lighthouse-score: Improved contast ratio

---
 src/colors/colors.css | 4 +++-
 src/hero/hero.css     | 7 +++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/colors/colors.css b/src/colors/colors.css
index 462a9fb..9d2df39 100644
--- a/src/colors/colors.css
+++ b/src/colors/colors.css
@@ -4,7 +4,8 @@
   --color-link-background: #d8d8d8;
   --color-heading: black;
   --color-text: #6c6c6c;
-  --color-icon: #525252;
+  --color-icon: #949494;
+  --color-icon-hover: #525252;
   --color-line: var(--color-link-background);
   --color-technology-bg: var(--color-icon);
   --color-technology-fg: var(--color-background);
@@ -17,6 +18,7 @@
     --color-background: #121212;
     --color-text: rgba(255, 255, 255, 0.5);
     --color-icon: rgba(255, 255, 255, 0.5);
+    --color-icon-hover: rgba(255, 255, 255, 0.5);
     --color-line: rgba(255, 255, 255, 0.2);
     --color-link-background: rgba(255, 255, 255, 0.15);
     --color-technology-fg: rgba(255, 255, 255, 0.32);
diff --git a/src/hero/hero.css b/src/hero/hero.css
index 47f4345..3c2b772 100644
--- a/src/hero/hero.css
+++ b/src/hero/hero.css
@@ -38,10 +38,9 @@
   fill: var(--color-icon);
   width: 20px;
   display: block;
-  opacity: 0.33;
   font-size: 0;
   margin-right: 25px;
-  transition: opacity 0.25s ease-out;
+  transition: fill 0.25s ease-out;
   background-size: contain;
 }
 
@@ -50,8 +49,8 @@
 }
 
 a.hero-icon:hover {
-  opacity: 1;
-  transition: opacity 0s;
+  fill: var(--color-icon-hover);
+  transition: fill 0s;
 }
 
 a.hero-icon:hover::after {

From d1771b814bfa57153ee4478015c12387e1d7e13d Mon Sep 17 00:00:00 2001
From: mishamyrt <misha@myrt.co>
Date: Sat, 14 Sep 2019 08:49:25 +0300
Subject: [PATCH 13/13] lighthouse-score: Optimised font critical path

---
 src/head.pug | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/head.pug b/src/head.pug
index b95a79f..45106a1 100644
--- a/src/head.pug
+++ b/src/head.pug
@@ -7,3 +7,6 @@ link( itemprop="url" href="https://myrt.co" )
 link( rel="icon" type="image/png" href="/favicon.png" )
 
 link( rel="stylesheet" href="/index.css" )
+link( rel="preload" as="font" href="/fonts/GraphikLCG-Semibold.woff2" type="font/woff2" )
+link( rel="preload" as="font" href="/fonts/IBMPlexMono-Regular.woff2" type="font/woff2" )
+