🔀 Merge branch 'release/1.0.6' into master

.prettierrc → .prettierrc.json

@@ -1,4 +1,5 @@
 {
+  "arrowParens": "avoid",
   "semi": true,
   "singleQuote": true,
   "trailingComma": "all"

gatsby-config.js

@@ -25,12 +25,15 @@ module.exports = {
         theme_color: '#1c1c2e',
         display: 'minimal-ui',
         icon: 'src/images/favicon.png', // This path is relative to the root of the site.
+        icon_options: {
+          purpose: 'maskable',
+        },
       },
     },
     'gatsby-plugin-eslint',
     'gatsby-plugin-styled-components',
     {
-      resolve: `gatsby-source-contentful`,
+      resolve: 'gatsby-source-contentful',
       options: {
         spaceId: process.env.spaceId,
         accessToken: process.env.accessToken,

package.json

@@ -2,33 +2,33 @@
   "name": "loris-portfolio",
   "private": true,
   "description": "My personal portfolio website showcasing my projects",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "author": "Loris Bettazza <[email protected]>",
   "dependencies": {
-    "babel-plugin-styled-components": "1.10.6",
-    "dotenv": "8.0.0",
-    "gatsby": "2.13.32",
-    "gatsby-image": "2.2.6",
-    "gatsby-plugin-manifest": "2.2.3",
-    "gatsby-plugin-netlify": "2.1.3",
-    "gatsby-plugin-offline": "2.2.4",
-    "gatsby-plugin-react-helmet": "3.1.2",
-    "gatsby-plugin-sharp": "2.2.8",
-    "gatsby-plugin-sitemap": "2.2.3",
-    "gatsby-plugin-styled-components": "3.1.2",
-    "gatsby-source-contentful": "2.1.14",
-    "gatsby-source-filesystem": "2.1.5",
-    "gatsby-transformer-sharp": "2.2.4",
-    "intersection-observer": "0.7.0",
-    "marked": "0.7.0",
+    "babel-plugin-styled-components": "1.11.1",
+    "dotenv": "8.2.0",
+    "gatsby": "2.24.58",
+    "gatsby-image": "2.4.17",
+    "gatsby-plugin-manifest": "2.4.28",
+    "gatsby-plugin-netlify": "2.3.14",
+    "gatsby-plugin-offline": "3.2.27",
+    "gatsby-plugin-react-helmet": "3.3.10",
+    "gatsby-plugin-sharp": "2.6.35",
+    "gatsby-plugin-sitemap": "2.4.12",
+    "gatsby-plugin-styled-components": "3.3.10",
+    "gatsby-source-contentful": "2.3.45",
+    "gatsby-source-filesystem": "2.3.29",
+    "gatsby-transformer-sharp": "2.5.14",
+    "intersection-observer": "0.11.0",
+    "marked": "1.1.1",
     "prop-types": "15.7.2",
-    "react": "16.7.0",
-    "react-dom": "16.7.0",
-    "react-helmet": "5.2.1",
-    "react-intersection-observer": "8.24.1",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-helmet": "6.1.0",
+    "react-intersection-observer": "8.28.5",
     "react-scrollchor": "6.0.0",
-    "slugify": "1.3.4",
-    "styled-components": "4.3.2"
+    "slugify": "1.4.5",
+    "styled-components": "5.2.0"
   },
   "license": "MIT",
   "scripts": {
@@ -40,16 +40,16 @@
     "test": "npm run format && npm run lint"
   },
   "devDependencies": {
-    "eslint": "6.1.0",
-    "eslint-config-airbnb": "17.1.1",
-    "eslint-config-prettier": "6.0.0",
-    "eslint-loader": "2.2.1",
-    "eslint-plugin-import": "2.18.2",
-    "eslint-plugin-jsx-a11y": "6.2.3",
-    "eslint-plugin-react": "7.14.2",
-    "gatsby-plugin-eslint": "2.0.5",
-    "husky": "3.0.1",
-    "prettier": "1.18.2"
+    "eslint": "7.9.0",
+    "eslint-config-airbnb": "18.2.0",
+    "eslint-config-prettier": "6.11.0",
+    "eslint-loader": "4.0.2",
+    "eslint-plugin-import": "2.22.0",
+    "eslint-plugin-jsx-a11y": "6.3.1",
+    "eslint-plugin-react": "7.20.6",
+    "gatsby-plugin-eslint": "2.0.8",
+    "husky": "4.3.0",
+    "prettier": "2.1.1"
   },
   "repository": {
     "type": "git",
@@ -58,6 +58,12 @@
   "bugs": {
     "url": "https://github.com/Pustur/loris-portfolio/issues"
   },
+  "browserslist": [
+    "> 2%",
+    "last 2 versions",
+    "not dead",
+    "not ie > 0"
+  ],
   "husky": {
     "hooks": {
       "pre-commit": "npm test",

src/components/Technology/Technology.js

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import TechnologyIcon from '../TechnologyIcon/TechnologyIcon';
 
 import { slug } from '../../utils/utils';
-import { colors } from '../../utils/variables';
+import { colors, sizes, mediaQueries } from '../../utils/variables';
 
 const arrowSize = 8;
 
@@ -35,6 +35,14 @@ const Label = styled.span`
     transform: translate3d(-50%, 50%, 0) rotate(45deg);
     background-color: ${colors.accent};
   }
+
+  @media (${mediaQueries.smMax}) {
+    transform: translate3d(-${sizes.technologyIcon / 2}px, -100%, 0);
+
+    &::after {
+      left: ${sizes.technologyIcon / 2}px;
+    }
+  }
 `;
 
 const Container = styled.div`
@@ -44,6 +52,16 @@ const Container = styled.div`
     opacity: 1;
     transform: translate3d(-50%, calc(-100% - ${arrowSize * 1.5}px), 0);
   }
+
+  @media (${mediaQueries.smMax}) {
+    &:hover ${Label} {
+      transform: translate3d(
+        -${sizes.technologyIcon / 2}px,
+        calc(-100% - ${arrowSize * 1.5}px),
+        0
+      );
+    }
+  }
 `;
 
 const Technology = ({ technology }) => (

src/components/TechnologyIcon/TechnologyIcon.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { colors } from '../../utils/variables';
+import { colors, sizes } from '../../utils/variables';
 
-const size = 32;
+const size = sizes.technologyIcon;
 const icons = {
   atom: (
     <svg width={size} height={size} viewBox="0 0 256 256">

src/utils/variables.js

@@ -15,6 +15,7 @@ const fonts = {
 };
 
 const sizes = {
+  technologyIcon: 32,
   section: '10vw',
   header: {
     height: {