diff --git a/data/meta.json b/data/meta.json index 57bc670..34308b4 100644 --- a/data/meta.json +++ b/data/meta.json @@ -10,6 +10,7 @@ "GitHub": "https://github.com/kremalicious", "Dribbble": "https://dribbble.com/kremalicious" }, - "available": false, + "availability": false, + "typekit": "dtg3zui", "googleanalytics": "UA-1441794-4" } diff --git a/gatsby-config.js b/gatsby-config.js index 3529a0d..06f61d5 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -1,8 +1,9 @@ const meta = require('./data/meta.json') +const { url, googleanalytics } = meta module.exports = { siteMetadata: { - siteUrl: `${meta.url}`, + siteUrl: `${url}`, }, plugins: [ 'gatsby-plugin-react-next', @@ -37,7 +38,7 @@ module.exports = { { resolve: 'gatsby-plugin-google-analytics', options: { - trackingId: `${meta.googleanalytics}`, + trackingId: `${googleanalytics}`, head: false, anonymize: true, respectDNT: true, diff --git a/gatsby-node.js b/gatsby-node.js index 36e918d..ee6643b 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -72,3 +72,13 @@ exports.createPages = ({ boundActionCreators, graphql }) => { })) }) } + +// https://github.com/gatsbyjs/gatsby/issues/2285#issuecomment-333343938 +exports.modifyWebpackConfig = ({ config, stage }) => { + if (stage === 'build-html') { + config.loader('null', { + test: /webfontloader/, + loader: 'null-loader', + }) + } +} diff --git a/package.json b/package.json index c06f4ce..b66e1d3 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,8 @@ "gatsby-transformer-sharp": "^1.6.23", "react-helmet": "^5.2.0", "react-markdown": "^3.3.0", - "react-transition-group": "^2.3.1" + "react-transition-group": "^2.3.1", + "webfontloader": "^1.6.28" }, "devDependencies": { "babel-eslint": "^8.2.3", diff --git a/src/components/atoms/Head.js b/src/components/atoms/Head.js index bf14b4d..4fceb68 100644 --- a/src/components/atoms/Head.js +++ b/src/components/atoms/Head.js @@ -1,9 +1,12 @@ import React from 'react' import PropTypes from 'prop-types' import Helmet from 'react-helmet' +import WebFont from 'webfontloader' const Head = ({ meta }) => { - const { title, tagline, description } = meta + const { title, tagline, description, url, typekit } = meta + + WebFont.load({ typekit: { id: typekit } }) return ( { titleTemplate={`%s // ${title.toLowerCase()} { ${tagline.toLowerCase()} }`} > - + + {window.location.protocol + '//' + window.location.hostname !== + `${url}` && } ) } diff --git a/src/components/molecules/Availability.js b/src/components/molecules/Availability.js new file mode 100644 index 0000000..e5da2bc --- /dev/null +++ b/src/components/molecules/Availability.js @@ -0,0 +1,33 @@ +import React, { Fragment } from 'react' +import PropTypes from 'prop-types' +import FadeIn from '../atoms/FadeIn' +import './Availability.scss' + +const Availability = ({ meta, hide }) => { + const { availability, social } = meta + + const available = `👔 Available for new projects. Let’s talk!` + const unavailable = 'Not available for new projects.' + + return ( + + {!hide && ( + + + + )} + + ) +} + +Availability.propTypes = { + meta: PropTypes.object, + hide: PropTypes.bool, +} + +export default Availability diff --git a/src/components/molecules/Availability.scss b/src/components/molecules/Availability.scss new file mode 100644 index 0000000..5822f79 --- /dev/null +++ b/src/components/molecules/Availability.scss @@ -0,0 +1,19 @@ +@import 'variables'; + +.availability { + position: absolute; + bottom: 0; + background: rgba($brand-light, .8); + border-radius: .25rem; + color: $brand-grey-light; + z-index: 1; + padding: $spacer / 2; + + p { margin-bottom: 0; } + + &.available { + color: $brand-main; + position: fixed; + bottom: $spacer; + } +} diff --git a/src/components/molecules/Footer.scss b/src/components/molecules/Footer.scss index 1da38f3..40b2461 100644 --- a/src/components/molecules/Footer.scss +++ b/src/components/molecules/Footer.scss @@ -1,7 +1,6 @@ @import 'variables'; .footer { - margin-top: $spacer; padding: $spacer * 2; text-align: center; color: $brand-grey-light; diff --git a/src/components/molecules/Header.js b/src/components/molecules/Header.js index 17335dd..ad251c6 100644 --- a/src/components/molecules/Header.js +++ b/src/components/molecules/Header.js @@ -1,9 +1,10 @@ -import React, { Fragment } from 'react' +import React from 'react' import Link from 'gatsby-link' import PropTypes from 'prop-types' import FadeIn from '../atoms/FadeIn' import { Logo } from '../atoms/Icons' import Social from './Social' +import Availability from './Availability' import './Header.scss' const Header = ({ meta, isHomepage }) => { @@ -12,18 +13,19 @@ const Header = ({ meta, isHomepage }) => { return (
- - - -

{meta.title.toLowerCase()}

-

- {'{ '} {meta.tagline.toLowerCase()}{' '} - {' }'} -

- - - + + +

{meta.title.toLowerCase()}

+

+ {'{ '} {meta.tagline.toLowerCase()}{' '} + {' }'} +

+ + + + +
) } diff --git a/src/components/molecules/Header.scss b/src/components/molecules/Header.scss index 6b49c8d..477cd14 100644 --- a/src/components/molecules/Header.scss +++ b/src/components/molecules/Header.scss @@ -1,12 +1,15 @@ @import 'variables'; .header { + position: relative; padding: $spacer; - min-height: calc(100vh - #{$spacer}); + height: calc(100vh - #{$spacer}); + max-height: 1000px; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; + text-align: center; } .header__logo { @@ -41,15 +44,14 @@ } .header__name { - height: 100%; pointer-events: none; } .header--minimal { - min-height: 0; + height: auto; @media (min-width: 30rem) { - margin-top: $spacer / 2; + margin-top: $spacer; margin-bottom: $spacer; } diff --git a/src/components/molecules/ProjectLinks.scss b/src/components/molecules/ProjectLinks.scss index df16858..57c28ad 100644 --- a/src/components/molecules/ProjectLinks.scss +++ b/src/components/molecules/ProjectLinks.scss @@ -28,9 +28,7 @@ width: 100%; color: $brand-cyan; text-align: center; - border-top-left-radius: .25rem; - border-top-right-radius: .25rem; - border-bottom: 1px solid $brand-cyan; + border-radius: .25rem; padding: $spacer / 4 $spacer / 2; transition-property: all; background: rgba(#fff, .15); diff --git a/src/components/molecules/ProjectNav.scss b/src/components/molecules/ProjectNav.scss index 073108b..3439e43 100644 --- a/src/components/molecules/ProjectNav.scss +++ b/src/components/molecules/ProjectNav.scss @@ -63,7 +63,27 @@ height: 100%; display: block; align-self: center; - margin-top: -$spacer; + margin-top: $spacer * 8; + transition: .2s ease-out; + + @media (min-width: 45rem) { + margin-top: -$spacer; + } + + .icon { + fill: $brand-grey-light; + width: 1.5rem; + height: 1.5rem; + } + + &:hover, + &:focus { + transform: translate3d(0, -.3rem, 0); + + .icon { + fill: $brand-cyan; + } + } &:first-child { margin-left: 48.5%; @@ -72,10 +92,4 @@ &:last-child { margin-right: auto; } - - .icon { - fill: $brand-grey-light; - width: 1.5rem; - height: 1.5rem; - } } diff --git a/src/components/molecules/Social.js b/src/components/molecules/Social.js index 263d1f6..33f62b0 100644 --- a/src/components/molecules/Social.js +++ b/src/components/molecules/Social.js @@ -2,6 +2,7 @@ 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' +import FadeIn from '../atoms/FadeIn' import './Social.scss' const SocialIcon = ({ title }) => { @@ -28,18 +29,20 @@ const Social = ({ meta, minimal, hide }) => { return ( {!hide && ( - + + + )} ) diff --git a/src/components/organisms/Project.scss b/src/components/organisms/Project.scss index 12a2cbb..18a7349 100644 --- a/src/components/organisms/Project.scss +++ b/src/components/organisms/Project.scss @@ -2,7 +2,11 @@ .project { .project__image { - margin-bottom: $spacer * 6; + margin-bottom: $spacer * 3; + + @media (min-width: 30rem) { + margin-bottom: $spacer * 6; + } } } diff --git a/src/components/organisms/Projects.scss b/src/components/organisms/Projects.scss index 2686bfe..fa1134e 100644 --- a/src/components/organisms/Projects.scss +++ b/src/components/organisms/Projects.scss @@ -4,23 +4,16 @@ display: flex; flex-wrap: wrap; justify-content: space-between; - - .project__image { - @media (min-width: 90rem) { - max-width: 100%; - } - } } .projects__project { + display: block; position: relative; background-color: $brand-grey-light; margin: 0 auto $spacer * 4 auto; - @media (min-width: 90rem) { - flex: 0 0 calc(50% - #{$spacer * 2}); - margin: 0; - margin-bottom: $spacer * 4; + @media (min-width: 30rem) { + margin-bottom: $spacer * 8; } &::after { diff --git a/src/images/portfolio-ezeep-01.png b/src/images/portfolio-ezeep-01.png index 21a2fd5..6c98028 100644 Binary files a/src/images/portfolio-ezeep-01.png and b/src/images/portfolio-ezeep-01.png differ diff --git a/src/images/portfolio-mrreader.png b/src/images/portfolio-mrreader.png index 79c3f6b..65b1387 100644 Binary files a/src/images/portfolio-mrreader.png and b/src/images/portfolio-mrreader.png differ diff --git a/src/layouts/index.js b/src/layouts/index.js index aa677ef..5f98b5d 100644 --- a/src/layouts/index.js +++ b/src/layouts/index.js @@ -44,6 +44,9 @@ export const query = graphql` GitHub Dribbble } + availability + typekit + googleanalytics } } }