🔀 Merge branch 'release/1.0.7'

.env.example

@@ -1,2 +1,2 @@
-spaceId = xxxxxxxxxxxx
-accessToken = xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+SPACE_ID = xxxxxxxxxxxx
+ACCESS_TOKEN = xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm test

.husky/pre-push

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm test

gatsby-config.js

@@ -1,9 +1,6 @@
 require('dotenv').config();
 
 module.exports = {
-  siteMetadata: {
-    siteUrl: 'https://lorisbettazza.com',
-  },
   plugins: [
     'gatsby-plugin-react-helmet',
     {
@@ -30,13 +27,12 @@ module.exports = {
         },
       },
     },
-    'gatsby-plugin-eslint',
     'gatsby-plugin-styled-components',
     {
       resolve: 'gatsby-source-contentful',
       options: {
-        spaceId: process.env.spaceId,
-        accessToken: process.env.accessToken,
+        spaceId: process.env.SPACE_ID,
+        accessToken: process.env.ACCESS_TOKEN,
       },
     },
     'gatsby-plugin-netlify',

package.json

@@ -2,54 +2,53 @@
   "name": "loris-portfolio",
   "private": true,
   "description": "My personal portfolio website showcasing my projects",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "author": "Loris Bettazza <[email protected]>",
   "dependencies": {
-    "babel-plugin-styled-components": "1.11.1",
+    "babel-plugin-styled-components": "1.12.0",
     "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",
+    "gatsby": "2.32.3",
+    "gatsby-image": "2.11.0",
+    "gatsby-plugin-manifest": "2.12.0",
+    "gatsby-plugin-netlify": "2.11.0",
+    "gatsby-plugin-offline": "3.10.0",
+    "gatsby-plugin-react-helmet": "3.10.0",
+    "gatsby-plugin-sharp": "2.14.1",
+    "gatsby-plugin-sitemap": "2.12.0",
+    "gatsby-plugin-styled-components": "3.10.0",
+    "gatsby-source-contentful": "4.6.1",
+    "gatsby-source-filesystem": "2.11.0",
+    "gatsby-transformer-sharp": "2.12.0",
+    "intersection-observer": "0.12.0",
+    "marked": "2.0.0",
     "prop-types": "15.7.2",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-helmet": "6.1.0",
-    "react-intersection-observer": "8.28.5",
+    "react-intersection-observer": "8.31.0",
     "react-scrollchor": "6.0.0",
-    "slugify": "1.4.5",
-    "styled-components": "5.2.0"
+    "styled-components": "5.2.1"
   },
   "license": "MIT",
   "scripts": {
     "build": "gatsby build",
     "develop": "gatsby develop",
     "start": "npm run develop",
+    "postinstall": "husky install",
     "format": "prettier --write \"src/**/*.js\"",
     "lint": "eslint \"src/**/*.js\"",
     "test": "npm run format && npm run lint"
   },
   "devDependencies": {
-    "eslint": "7.9.0",
-    "eslint-config-airbnb": "18.2.0",
-    "eslint-config-prettier": "6.11.0",
+    "eslint": "7.19.0",
+    "eslint-config-airbnb": "18.2.1",
+    "eslint-config-prettier": "7.2.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"
+    "eslint-plugin-import": "2.22.1",
+    "eslint-plugin-jsx-a11y": "6.4.1",
+    "eslint-plugin-react": "7.22.0",
+    "husky": "5.0.9",
+    "prettier": "2.2.1"
   },
   "repository": {
     "type": "git",
@@ -63,11 +62,5 @@
     "last 2 versions",
     "not dead",
     "not ie > 0"
-  ],
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm test",
-      "pre-push": "npm test"
-    }
-  }
+  ]
 }

src/components/AboutMe/AboutMe.js

@@ -6,13 +6,13 @@ import { StaticQuery, graphql } from 'gatsby';
 import Container from '../Container/Container';
 import Separator from '../Separator/Separator';
 
-import { slug } from '../../utils/utils';
 import { mediaQueries } from '../../utils/variables';
 
 const query = graphql`
   {
     contentfulAboutMe {
       title
+      slug
       body {
         body
       }
@@ -37,7 +37,7 @@ const AboutMe = () => (
   <StaticQuery
     query={query}
     render={({ contentfulAboutMe }) => (
-      <AboutMeSection id={slug(contentfulAboutMe.title)}>
+      <AboutMeSection id={contentfulAboutMe.slug}>
         <Container>
           <h2>{contentfulAboutMe.title}</h2>
           <Separator />

src/components/Contact/Contact.js

@@ -6,13 +6,13 @@ import { StaticQuery, graphql } from 'gatsby';
 import Container from '../Container/Container';
 import Separator from '../Separator/Separator';
 
-import { slug } from '../../utils/utils';
 import { mediaQueries } from '../../utils/variables';
 
 const query = graphql`
   {
     contentfulContact {
       title
+      slug
       body {
         body
       }
@@ -35,7 +35,7 @@ const Contact = () => (
   <StaticQuery
     query={query}
     render={({ contentfulContact }) => (
-      <ContactSection id={slug(contentfulContact.title)}>
+      <ContactSection id={contentfulContact.slug}>
         <Container>
           <h2>{contentfulContact.title}</h2>
           <Separator />

src/components/Menu/Menu.js

@@ -4,22 +4,25 @@ import { StaticQuery, graphql } from 'gatsby';
 
 import Scrollchor from 'react-scrollchor';
 
-import { slug } from '../../utils/utils';
 import { colors, mediaQueries } from '../../utils/variables';
 
 const query = graphql`
   {
     contentfulAboutMe {
       title
+      slug
     }
     contentfulProjects {
       title
+      slug
     }
     contentfulSocial {
       title
+      slug
     }
     contentfulContact {
       title
+      slug
     }
   }
 `;
@@ -67,15 +70,15 @@ const Menu = () => (
     render={data => (
       <List>
         {[
-          data.contentfulAboutMe.title,
-          data.contentfulProjects.title,
-          data.contentfulContact.title,
-          data.contentfulSocial.title,
+          data.contentfulAboutMe,
+          data.contentfulProjects,
+          data.contentfulContact,
+          data.contentfulSocial,
         ].map(item => {
-          const targetId = `#${slug(item)}`;
+          const targetId = `#${item.slug}`;
 
           return (
-            <Item key={item}>
+            <Item key={item.slug}>
               <Link
                 to={targetId}
                 animate={{ offset: -100, duration: 600 }}
@@ -93,7 +96,7 @@ const Menu = () => (
                   }
                 }}
               >
-                {item}
+                {item.title}
               </Link>
             </Item>
           );

src/components/Projects/Projects.js

@@ -7,13 +7,13 @@ import Container from '../Container/Container';
 import Separator from '../Separator/Separator';
 import Project from '../Project/Project';
 
-import { slug } from '../../utils/utils';
 import { mediaQueries } from '../../utils/variables';
 
 const query = graphql`
   {
     contentfulProjects {
       title
+      slug
       projects {
         id
         title
@@ -63,7 +63,7 @@ const Projects = () => (
   <StaticQuery
     query={query}
     render={({ contentfulProjects }) => (
-      <section id={slug(contentfulProjects.title)}>
+      <section id={contentfulProjects.slug}>
         <Container>
           <Title>{contentfulProjects.title}</Title>
           <Separator />

src/components/Seo/Seo.js

@@ -8,23 +8,18 @@ import shareImage from '../../images/share-image.jpg';
 
 const query = graphql`
   {
-    site {
-      siteMetadata {
-        siteUrl
-      }
-    }
-
     contentfulMetadata {
       title
       description
+      siteUrl
     }
   }
 `;
 
 const Seo = ({ description, lang, meta, title }) => (
   <StaticQuery
     query={query}
-    render={({ site, contentfulMetadata }) => {
+    render={({ contentfulMetadata }) => {
       const page = title ? `${title} | ` : '';
       const metaTitle = `${page}${contentfulMetadata.title}`;
       const metaDescription = description || contentfulMetadata.description;
@@ -52,11 +47,11 @@ const Seo = ({ description, lang, meta, title }) => (
             },
             {
               property: 'og:url',
-              content: site.siteMetadata.siteUrl,
+              content: contentfulMetadata.siteUrl,
             },
             {
               property: 'og:image',
-              content: `${site.siteMetadata.siteUrl}${shareImage}`,
+              content: `${contentfulMetadata.siteUrl}${shareImage}`,
             },
             {
               name: 'twitter:card',

src/components/Social/Social.js

@@ -6,13 +6,13 @@ import { StaticQuery, graphql } from 'gatsby';
 import Container from '../Container/Container';
 import Separator from '../Separator/Separator';
 
-import { slug } from '../../utils/utils';
 import { colors, mediaQueries } from '../../utils/variables';
 
 const query = graphql`
   {
     contentfulSocial {
       title
+      slug
       body {
         body
       }
@@ -90,7 +90,7 @@ const Social = () => (
   <StaticQuery
     query={query}
     render={({ contentfulSocial }) => (
-      <SocialSection id={slug(contentfulSocial.title)}>
+      <SocialSection id={contentfulSocial.slug}>
         <Container>
           <h2>{contentfulSocial.title}</h2>
           <Separator />

src/components/Technology/Technology.js

@@ -4,7 +4,6 @@ import styled from 'styled-components';
 
 import TechnologyIcon from '../TechnologyIcon/TechnologyIcon';
 
-import { slug } from '../../utils/utils';
 import { colors, sizes, mediaQueries } from '../../utils/variables';
 
 const arrowSize = 8;
@@ -67,7 +66,7 @@ const Container = styled.div`
 const Technology = ({ technology }) => (
   <Container>
     <Label>{technology}</Label>
-    <TechnologyIcon icon={slug(technology)} aria-hidden />
+    <TechnologyIcon icon={technology.toLowerCase()} aria-hidden />
   </Container>
 );
 

src/components/TechnologyIcon/TechnologyIcon.js

@@ -185,7 +185,7 @@ const icons = {
     </svg>
   ),
 
-  'sublime-text': (
+  'sublime text': (
     <svg width={size} height={size} viewBox="0 0 256 256">
       <g fill="none">
         <rect fill={colors.accent} height="256" rx="28" width="256" />
@@ -197,7 +197,17 @@ const icons = {
     </svg>
   ),
 
-  'visual-studio-code': (
+  typescript: (
+    <svg width={size} height={size} viewBox="0 0 64 64">
+      <path d="m0 32v32h64v-64h-64z" fill={colors.accent} />
+      <path
+        d="m51.6 29.5c1.6.4 2.8 1.1 4 2.3.6.6 1.4 1.7 1.5 2 0 .1-2.7 2-4.4 3-.1 0-.3-.2-.6-.6-.8-1.2-1.7-1.7-3-1.8-2-.2-3.2.9-3.2 2.5 0 .5.1.8.3 1.2.4.9 1.2 1.5 3.7 2.5 4.6 2 6.5 3.3 7.7 5.2 1.4 2 1.7 5.3.8 7.8-1 2.6-3.6 4.4-7.1 5-1.1.2-3.7.2-4.9 0-2.5-.5-5-1.7-6.5-3.4-.6-.7-1.7-2.4-1.7-2.5.1 0 .3-.2.6-.4l2.4-1.3 1.9-1.1.3.6c.6.8 1.8 1.9 2.5 2.3 2 1.1 4.8.9 6.2-.3.6-.6.8-1.1.8-1.9s-.1-1.1-.4-1.7c-.5-.7-1.6-1.3-4.4-2.5-3.4-1.4-4.8-2.3-6.1-3.7-.7-.8-1.4-2.1-1.7-3.2-.3-.9-.3-3.2-.1-4.1.6-3.2 3-5.4 6.5-6.1 1.1-.2 3.8-.1 4.9.2zm-15 2.6v2.6h-8.4v23.7h-5.8v-23.7h-8.4v-2.5l.1-2.7h11.2 11.2z"
+        fill="#fff"
+      />
+    </svg>
+  ),
+
+  'visual studio code': (
     <svg width={size} height={size} viewBox="0 0 256 256">
       <path
         d="m192 0v219.9l-192-28.5 192 64.6 64-26.6v-198.8-.1-3.9zm-67.2 37.5-58.8 58.1-35.4-26.7-14.6 4.9 36 35.6-36 35.6 14.6 4.9 35.4-26.7 58.8 58.1 35.2-14.9v-114zm0 41.4v61l-40.5-30.5z"