konstantinmuenster

import React from "react"

import Layout from "../components/layout"
import Hero from "../components/hero"

const IndexPage = () => {
  return (
    <Layout>
      <Hero />
    </Layout>

konstantinmuenster

greetings	emoji	title	subtitlePrefix	subtitleHighlight
Hello	👋	I'm Konstantin Münster	I build and design	things for the web.

Product Manager and Freelance Web Developer. Based in Hamburg.

konstantinmuenster

{
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `content`,
        path: `${__dirname}/src/content`,
      },
},

konstantinmuenster

plugins: [
    ...
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `content`,
        path: `${__dirname}/src/content`,
      },
    },
    `gatsby-transformer-remark`,

konstantinmuenster

export const pageQuery = graphql`
  {
    hero: allMarkdownRemark {
      edges {
        node {
          frontmatter {
            title
            greetings
            emoji
            subtitlePrefix

konstantinmuenster

import React from "react"
import { graphql } from "gatsby"

import Layout from "../components/layout"
import Hero from "../components/hero"

const IndexPage = ({ data }) => {
  return (
    <Layout>
      <Hero content={data.hero.edges[0].node} />

konstantinmuenster

...
const Hero = ({ content }) => {
  const { frontmatter, rawMarkdownBody } = content
  return (
    <StyledSection id="hero">
      <h1 className="title">
        {frontmatter.greetings}{" "}
        <span role="img" aria-label="emoji">
          {frontmatter.emoji}
        </span>

konstantinmuenster

module.exports = {
  ...
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,

konstantinmuenster

<Image
  src={image.srcUrl}
  alt="Image"
  width={600} // If you import the image locally, you can omit this
  height={600} // If you import the image locally, you can omit this
/>

konstantinmuenster

<div style={{ position: 'relative', overflow: 'hidden', height: '600px' }}>
  <Image
    src={image.srcUrl}
    alt="Image"
    fill={true}
    style={{ objectFit: 'cover' }}
  />
</div>