Merge branch 'develop' into 'master'

Develop

See merge request mishamyrt/myrt.co!7

.hooks/pre-commit

@@ -0,0 +1,2 @@
+#!/bin/bash
+npm run lint:fix

.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(0))
+

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;
 

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",

src/colors/colors.css

@@ -1,8 +1,27 @@
 :root {
+  --color-background: white;
   --color-link: black;
   --color-link-background: #d8d8d8;
   --color-heading: black;
   --color-text: #6c6c6c;
-  --color-icon: #a8a8a8;
-  --color-line: #d8d8d8;
+  --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);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --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-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);
+    --color-technology-bg: rgba(255, 255, 255, 0.09);
+  }
 }

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" )
+

src/hero/hero.css

@@ -35,13 +35,12 @@
 }
 
 .hero-icon {
-  fill: var(--color-heading);
+  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,9 +49,12 @@
 }
 
 a.hero-icon:hover {
-  opacity: 1;
+  fill: var(--color-icon-hover);
+  transition: fill 0s;
+}
+
+a.hero-icon:hover::after {
   background-color: transparent;
-  transition: opacity 0s;
 }
 
 @media screen and (max-width: 900px) {

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);
@@ -30,11 +31,33 @@ 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: darken;
+  position: absolute;
+  display: block;
+  background-color: transparent;
   border-radius: 2px;
+  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);
 }

src/resume/resume.css

@@ -11,14 +11,14 @@
 .resume-header,
 .resume-job {
   display: grid;
-  grid-template-columns: 92px 5fr 2fr;
+  grid-template-columns: 92px 5fr minmax(190px, 2fr);
   grid-gap: 55px;
 }
 
 .resume-position {
   font-size: 19px;
   line-height: 11px;
-  margin: 20px 0 60px;
+  margin: 20px 0 40px;
 }
 
 .resume-links {
@@ -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;
 }
@@ -58,15 +61,19 @@ 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;
   border-radius: 3px;
   margin: 0 4px 8px;
 }
 
+.resume-backLink:hover::after {
+  background-color: unset;
+}
+
 .resume-date {
   text-align: center;
   position: relative;
@@ -94,8 +101,8 @@ a.resume-link:hover {
 
 .resume-heading {
   font-size: 57px;
-  line-height: 80px;
-  margin: 0;
+  line-height: 60px;
+  margin: 3px 0 15px;
 }
 
 .resume-subheading {
@@ -110,6 +117,12 @@ a.resume-link:hover {
   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;

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>