diff --git a/src/data/meta.json b/content/meta.json similarity index 60% rename from src/data/meta.json rename to content/meta.json index 988d9a9..45ab713 100644 --- a/src/data/meta.json +++ b/content/meta.json @@ -1,11 +1,14 @@ { "title": "Matthias Kretschmann", "tagline": "Designer & Developer", - "description": "", + "description": "Portfolio of web & ui designer/developer hybrid Matthias Kretschmann.", "url": "https://matthiaskretschmann.com", + "email": "m@kretschmann.io", "social": { "Twitter": "https://twitter.com/kremalicious", "GitHub": "https://github.com/kremalicious", "Facebook": "https://facebook.com/matthiaskretschmann" - } + }, + "available": false, + "googleanalytics": "UA-1441794-4" } diff --git a/src/data/projects.json b/content/projects.json similarity index 95% rename from src/data/projects.json rename to content/projects.json index b0b215a..e17ff78 100644 --- a/src/data/projects.json +++ b/content/projects.json @@ -237,12 +237,6 @@ }, "description": "" }, - { - "title": "Aref Jdey", - "slug": "aref-jdey", - "img": "aref-jdey.jpg", - "description": "" - }, { "title": "Niépce's Camera Obscura", "slug": "camera-obscura", @@ -257,14 +251,5 @@ "slug": "allinnia", "img": "allinnia.jpg", "description": "" - }, - { - "title": "mkretschmann.com v1", - "slug": "mkv1", - "img": "mkv1.jpg", - "links": { - "Info": "http://www.kremalicious.com/2009/02/portal-thingy/" - }, - "description": "" } ] diff --git a/gatsby-config.js b/gatsby-config.js index 354ac6f..a80f7c5 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -1,4 +1,4 @@ -const meta = require('./src/data/meta.json') +const meta = require('./content/meta.json') module.exports = { siteMetadata: { @@ -17,10 +17,19 @@ module.exports = { { resolve: 'gatsby-source-filesystem', options: { - name: 'data', - path: `${__dirname}/src/data/`, + name: 'content', + path: `${__dirname}/content/`, }, }, 'gatsby-transformer-json', + { + resolve: 'gatsby-plugin-google-analytics', + options: { + trackingId: `${meta.googleanalytics}`, + head: false, + anonymize: true, + respectDNT: true, + }, + }, ], } diff --git a/package.json b/package.json index 77f4e86..ce8d8a4 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "dependencies": { "gatsby": "^1.9.241", "gatsby-link": "^1.6.39", + "gatsby-plugin-google-analytics": "^1.0.28", "gatsby-plugin-react-helmet": "^2.0.8", "gatsby-plugin-react-next": "^1.0.11", "gatsby-plugin-sass": "^1.0.25", diff --git a/src/components/atoms/Head.js b/src/components/atoms/Head.js index 886b819..7d3ae70 100644 --- a/src/components/atoms/Head.js +++ b/src/components/atoms/Head.js @@ -4,7 +4,7 @@ import Helmet from 'react-helmet' const Head = ({ meta }) => { return - + } diff --git a/src/components/molecules/Footer.js b/src/components/molecules/Footer.js index 8ab3c7e..87a2ddf 100644 --- a/src/components/molecules/Footer.js +++ b/src/components/molecules/Footer.js @@ -7,7 +7,7 @@ const Footer = ({ meta }) => { return ( ) } diff --git a/src/components/molecules/Header.js b/src/components/molecules/Header.js index 0a94c54..503409f 100644 --- a/src/components/molecules/Header.js +++ b/src/components/molecules/Header.js @@ -1,16 +1,16 @@ import React from 'react' -import Link from 'react-router-dom/Link' +import Link from 'gatsby-link' import PropTypes from 'prop-types' import Social from './Social' import './Header.scss' const Header = ({ meta }) => { - const minimal = location.pathname === '/' ? false : true - const classes = minimal ? 'header header--minimal' : 'header' + const isHomepage = location.pathname === '/' + const classes = isHomepage ? 'header' : 'header header--minimal' return (
- + ␥

{meta.title}

{meta.tagline}

@@ -22,7 +22,6 @@ const Header = ({ meta }) => { } Header.propTypes = { - minimal: PropTypes.bool, meta: PropTypes.object, } diff --git a/src/components/molecules/ProjectLinks.js b/src/components/molecules/ProjectLinks.js index b044724..2db7350 100644 --- a/src/components/molecules/ProjectLinks.js +++ b/src/components/molecules/ProjectLinks.js @@ -1,5 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' +import { OutboundLink } from 'gatsby-plugin-google-analytics' import { Chain, GitHub, Dribbble } from '../atoms/Icons' import './ProjectLinks.scss' @@ -16,19 +17,24 @@ const LinkIcon = ({ title }) => { } const ProjectLinks = ({ links }) => ( - + ) ProjectLinks.propTypes = { diff --git a/src/components/molecules/ProjectLinks.scss b/src/components/molecules/ProjectLinks.scss index ee0fc95..46b2700 100644 --- a/src/components/molecules/ProjectLinks.scss +++ b/src/components/molecules/ProjectLinks.scss @@ -1,11 +1,13 @@ @import 'variables'; -.projectlinks { - padding: 0; - display: flex; - flex-wrap: wrap; - justify-content: space-between; - width: 100%; +.project__links { + ul { + padding: 0; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + width: 100%; + } li { display: block; diff --git a/src/components/molecules/ProjectTechstack.js b/src/components/molecules/ProjectTechstack.js new file mode 100644 index 0000000..5992a1f --- /dev/null +++ b/src/components/molecules/ProjectTechstack.js @@ -0,0 +1,20 @@ +import React from 'react' +import PropTypes from 'prop-types' +import './ProjectTechstack.scss' + +const ProjectTechstack = ({ techstack }) => ( +
+

+ Technologies The tech stack I was involved with. +

+ +
+) + +ProjectTechstack.propTypes = { + techstack: PropTypes.array, +} + +export default ProjectTechstack diff --git a/src/components/molecules/ProjectTechstack.scss b/src/components/molecules/ProjectTechstack.scss new file mode 100644 index 0000000..993c8e3 --- /dev/null +++ b/src/components/molecules/ProjectTechstack.scss @@ -0,0 +1,19 @@ +@import 'variables'; + +.project__techstack { + ul { + padding: 0; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } + + li { + display: inline-block; + padding: 0; + flex: 0 0 (100% / 3); + margin-bottom: $spacer; + border-radius: 4rem; + font-size: $font-size-small; + } +} diff --git a/src/components/molecules/Social.js b/src/components/molecules/Social.js index 7d914cb..b17922b 100644 --- a/src/components/molecules/Social.js +++ b/src/components/molecules/Social.js @@ -1,5 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' +import { OutboundLink } from 'gatsby-plugin-google-analytics' import { Twitter, GitHub, Facebook } from '../atoms/Icons' import './Social.scss' @@ -19,9 +20,9 @@ const Social = ({ meta }) => { return ( ) diff --git a/src/components/molecules/Social.scss b/src/components/molecules/Social.scss index adf904f..3da4291 100644 --- a/src/components/molecules/Social.scss +++ b/src/components/molecules/Social.scss @@ -20,6 +20,7 @@ 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; &:hover, &:focus { diff --git a/src/components/organisms/Project.js b/src/components/organisms/Project.js index 75ae1ec..ef27b4d 100644 --- a/src/components/organisms/Project.js +++ b/src/components/organisms/Project.js @@ -4,6 +4,7 @@ import Helmet from 'react-helmet' import ReactMarkdown from 'react-markdown' import Content from '../atoms/Content' import FullWidth from '../atoms/FullWidth' +import ProjectTechstack from '../molecules/ProjectTechstack' import ProjectLinks from '../molecules/ProjectLinks' import images from '../../images' import './Project.scss' @@ -33,9 +34,9 @@ const Project = props => { {title} - - {!!img_more && - img_more.map(key => ( + {!!img_more && + + {img_more.map(key => ( { alt={title} /> ))} - + + } diff --git a/src/components/organisms/Project.scss b/src/components/organisms/Project.scss index c9a2ef2..66ff586 100644 --- a/src/components/organisms/Project.scss +++ b/src/components/organisms/Project.scss @@ -32,24 +32,6 @@ } } -.project__techstack { - ul { - padding: 0; - display: flex; - flex-wrap: wrap; - justify-content: space-between; - } - - li { - display: inline-block; - padding: 0; - flex: 0 0 (100% / 3); - margin-bottom: $spacer; - border-radius: 4rem; - font-size: $font-size-small; - } -} - .project__meta__title { font-size: $font-size-h3; margin-bottom: $spacer * 1.5; diff --git a/src/components/organisms/Projects.js b/src/components/organisms/Projects.js index e851edd..0e230b5 100644 --- a/src/components/organisms/Projects.js +++ b/src/components/organisms/Projects.js @@ -1,7 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' import Link from 'gatsby-link' -import FadeIn from '../atoms/FadeIn' import images from '../../images' import './Projects.scss' @@ -9,13 +8,15 @@ const Projects = ({ data }) => { const projects = data.allProjectsJson.edges return
- {projects.map(({ node }) => - -

{node.title}

+ {projects.map(({ node }) => + - {node.title} - - )} +

{node.title}

+ {node.title} + )}
} diff --git a/src/layouts/index.js b/src/layouts/index.js index 7a517e0..a4d2c25 100644 --- a/src/layouts/index.js +++ b/src/layouts/index.js @@ -7,7 +7,7 @@ import Footer from '../components/molecules/Footer' import './index.scss' const TemplateWrapper = props => { - const meta = props.data.allDataJson.edges[0].node + const meta = props.data.allContentJson.edges[0].node return
@@ -26,7 +26,7 @@ export default TemplateWrapper export const query = graphql` query metaQuery { - allDataJson { + allContentJson { edges { node { title diff --git a/src/layouts/index.scss b/src/layouts/index.scss index 3bc3864..891dbdd 100644 --- a/src/layouts/index.scss +++ b/src/layouts/index.scss @@ -77,7 +77,7 @@ h6 { a { color: $brand-cyan; text-decoration: none; - transition: .2s ease-out; + transition: color .2s ease-out; &:hover, &:focus {