tweaks

gatsby-config.js

@@ -1,4 +1,4 @@
-const meta = require('./src/data/meta.json')
+const meta = require('./data/meta.json')
 
 module.exports = {
   siteMetadata: {
@@ -18,7 +18,7 @@ module.exports = {
       resolve: 'gatsby-source-filesystem',
       options: {
         name: 'data',
-        path: `${__dirname}/src/data/`,
+        path: `${__dirname}/data/`,
       },
     },
     'gatsby-transformer-json',

src/components/molecules/Header.js

@@ -12,11 +12,11 @@ const Header = ({ meta, isHomepage }) => {
     <header className={classes}>
       <Link className="header__name" to={'/'}>
         <Logo className="header__logo" />
-        <h1 className="header__title">{meta.title}</h1>
-        <p className="header__description">{meta.tagline}</p>
+        <h1 className="header__title">{meta.title.toLowerCase()}</h1>
+        <p className="header__description"><span>{'{ '}</span> {meta.tagline.toLowerCase()} <span>{' }'}</span></p>
       </Link>
 
-      <Social meta={meta} minimal={!isHomepage} />
+      <Social meta={meta} minimal={!isHomepage} hide={!isHomepage} />
     </header>
   )
 }

src/components/molecules/Header.scss

@@ -2,11 +2,11 @@
 
 .header {
     padding: $spacer;
-    min-height: calc(100vh - #{$spacer * 3});
+    min-height: calc(100vh - #{$spacer});
     display: flex;
-    align-content: center;
     flex-wrap: wrap;
-    text-align: center;
+    align-content: center;
+    justify-content: center;
 }
 
 .header__logo {
@@ -14,7 +14,6 @@
     width: 1.5rem;
     height: 1.5rem;
     fill: $brand-grey-light;
-    margin-top: -3rem;
     margin-bottom: $spacer;
     margin-left: auto;
     margin-right: auto;
@@ -28,29 +27,30 @@
 
 .header__title {
     font-size: $font-size-h3;
-    margin-right: $spacer / 2;
+    margin-right: $spacer / 4;
     color: $brand-main;
 }
 
 .header__description {
     font-size: $font-size-large;
     color: $brand-grey;
+
+    span {
+        opacity: .4;
+    }
 }
 
 .header__name {
-    width: 100%;
+    height: 100%;
     pointer-events: none;
 }
 
 .header--minimal {
     min-height: 0;
-    text-align: left;
-    flex-wrap: nowrap;
-    align-content: flex-start;
-    justify-content: space-between;
 
     @media (min-width: 30rem) {
-        margin-bottom: $spacer;
+        margin-top: $spacer / 2;
+        margin-bottom: $spacer / 2;
     }
 
     .header__title,
@@ -68,13 +68,9 @@
     }
 
     .header__logo {
-        display: inline-block;
         width: 1rem;
         height: 1rem;
-        margin-top: -2rem;
-        margin-bottom: 0;
-        margin-right: $spacer / 3;
-        margin-left: 0;
+        margin-bottom: $spacer / 3;
     }
 
     .header__name {
@@ -95,10 +91,4 @@
             }
         }
     }
-
-    .social {
-        margin-top: 0;
-        text-align: right;
-        justify-content: flex-end;
-    }
 }

src/components/molecules/ProjectLinks.scss

@@ -3,16 +3,13 @@
 .project__links {
     ul {
         padding: 0;
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        width: 100%;
+        margin-left: -($spacer / 2);
     }
 
     li {
-        display: block;
-        flex: 0 0 48%;
-        margin-bottom: 2%;
+        display: inline-block;
+        margin-left: $spacer / 2;
+        margin-bottom: $spacer / 2;
     }
 
     .icon {
@@ -22,22 +19,23 @@
     }
 
     a {
-        display: block;
-        background: darken($brand-light, 5%);
+        display: inline-block;
+        color: $brand-cyan;
         text-align: center;
         border-radius: .25rem;
-        padding: $spacer / 4;
+        padding: $spacer / 4 $spacer;
         transition-property: all;
-        color: $text-color;
+
+        .icon {
+            fill: $brand-cyan;
+            opacity: .85;
+        }
 
         &:hover,
         &:focus {
-            background: $brand-cyan;
-            color: #fff;
-
-            .icon {
-                fill: #fff;
-            }
+            background: $brand-light;
+            transform: translate3d(0, -.2rem, 0);
+            box-shadow: 0 6px 10px rgba($brand-main, .1), 0 10px 25px rgba($brand-main, .1);
         }
 
         &:active {

src/components/molecules/Social.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { OutboundLink } from 'gatsby-plugin-google-analytics'
 import { Email, Blog, Twitter, GitHub, Dribbble } from '../atoms/Icons'
@@ -21,29 +21,34 @@ const SocialIcon = ({ title }) => {
   }
 }
 
-const Social = ({ meta, minimal }) => {
+const Social = ({ meta, minimal, hide }) => {
   const social = meta.social
   const classes = minimal ? 'social social--minimal' : 'social'
 
   return (
-    <aside className={classes}>
-      {Object.keys(social).map((key, i) => (
-        <OutboundLink
-          className="social__link"
-          href={social[key]}
-          key={i}
-          title={key}
-        >
-          <SocialIcon title={key} />
-        </OutboundLink>
-      ))}
-    </aside>
+    <Fragment>
+      {!hide && (
+        <aside className={classes}>
+          {Object.keys(social).map((key, i) => (
+            <OutboundLink
+              className="social__link"
+              href={social[key]}
+              key={i}
+              title={key}
+            >
+              <SocialIcon title={key} />
+            </OutboundLink>
+          ))}
+        </aside>
+      )}
+    </Fragment>
   )
 }
 
 Social.propTypes = {
   meta: PropTypes.object,
   minimal: PropTypes.bool,
+  hide: PropTypes.bool,
 }
 
 export default Social

src/components/molecules/Social.scss

@@ -1,7 +1,7 @@
 @import 'variables';
 
 .social {
-    margin-top: $spacer * $line-height;
+    margin-top: $spacer;
     display: flex;
     justify-content: center;
     width: 100%;
@@ -10,38 +10,36 @@
 .social__link {
     margin-left: $spacer / 2;
     margin-right: $spacer / 2;
-    background: $brand-light;
-    padding: $spacer / 4;
+    padding: $spacer / 2;
     text-align: center;
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 1.35rem;
-    height: 1.35rem;
-    box-shadow: 0 3px 5px rgba($brand-main, .1), 0 5px 16px rgba($brand-main, .1);
     border-radius: .25rem;
     transition-property: transform, background, box-shadow;
 
+    .icon {
+        width: 1rem;
+        height: 1rem;
+    }
+
     &:hover,
     &:focus {
-        background: $brand-grey-dimmed;
+        background: $brand-light;
         transform: translate3d(0, -.2rem, 0);
         box-shadow: 0 6px 10px rgba($brand-main, .1), 0 10px 25px rgba($brand-main, .1);
     }
 
     .social--minimal & {
-        width: 1rem;
-        height: 1rem;
-        padding: $spacer / 8;
-        margin-left: $spacer / 4;
-        margin-right: $spacer / 4;
-        background: transparent;
-        box-shadow: none;
-        transform: none;
+        padding: $spacer / 3;
+        margin-left: $spacer / 3;
+        margin-right: $spacer / 3;
 
         .icon {
             fill: $brand-grey-light;
             transition: .2s ease-out;
+            width: .85rem;
+            height: .85rem;
         }
 
         &:hover,

src/layouts/index.scss

@@ -1,5 +1,11 @@
 @import 'variables';
 
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
 html,
 body {
     margin: 0;
@@ -21,7 +27,6 @@ body {
     text-rendering: optimizeLegibility;
     font-display: swap;
     font-feature-settings: 'liga', 'kern';
-    letter-spacing: -.01rem;
 }
 
 p,
@@ -43,7 +48,6 @@ h6 {
     line-height: $line-height-headings;
     color: $color-headings;
     font-weight: $font-weight-headings;
-    letter-spacing: -.04rem;
     margin: 0 0 $spacer;
 }