DEV Community: Dan Norris

How To Build A Portfolio Using Gatsby - Part 2

Dan Norris — Sun, 06 Sep 2020 17:11:24 +0000

This article was originally posted on www.danielnorris.co.uk. Follow me on Twitter at @danielpnorris.

Welcome to the second part of this two-part series on how to build your portfolio using Gatsby. Part 2 assumes you've gone through part 1, have built your portfolio and are now interested in taking a bit of a deeper dive into one way you could choose to build a blog with Gatsby using MDX.

If not, then take a look at part 1 here.

Who is this for?

This isn't a Gatsby starter, although you are welcome to use the GitHub repository as a starter for your own use.

If you do, please star the repository. This series is aimed at people who are interested in how to build their own Gatsby portfolio and blog from scratch without the aid of a starter.

What will this cover?

We'll cover the following:

Part 2

Why MDX?
What are you going to build?
Create a blog page
Configure the Gatsby filesystem plugin
Create your first MDX blog articles
Create slugs for your MDX blog posts
Programmatically create your MDX pages using the createPages API
Create a blog post template
Dynamically show article read times
Make an index of blog posts
Create a featured posts section
Customise your MDX components
Add syntax highlighting for code blocks
Add a featured image to blog posts
Add Google Analytics
Summary

Why MDX?

One of the major features about Gatsby is your ability to source content from nearly anywhere. The combination of GraphQL and Gatsby's source plugin ecosystem means that you could pull data from a headless CMS, database, API, JSON or without GraphQL at all. All with minimal configuration needed.

MDX enables you to write JSX into your Markdown. This allows you to write long-form content and re-use your React components like charts for instance to create some really engaging content for your users.

What are you going to build?

There are a lot of starter templates that are accessible from the Gatsby website which enable you to get off the ground running with a ready-made blog or portfolio in a couple clicks. What that doesn't do is break down how it works and how you could make one yourself. If you're more interested in getting stuff done than how it works, then I recommend taking a look at the starters here.

You will have already created a basic portfolio in part 1 similar to the demo site available above. We're now going to create a blog for our portfolio that is programmatically created from MDX using GraphQL. We'll separate our blog into components; one section to display our featured articles and another to display an index of all of our articles. Then we'll add syntax highlighting for code blocks, read times for our users, a cover image for each post and Google Analytics.

Create a blog page

Gatsby makes it incredibly easy to implement routing into your site. Any .js file found within src/pages will automatically generate its own page and the path for that page will match the file structure it's found in.

We're going to create a new blog.js page that will display a list of featured blog articles and a complete list of all of our blog articles.

touch src/pages/blog.js

Let's now import our Layout.js component we created in part 1 and enter some placeholder content for now.

import React from "react"
import Layout from "../components/Layout"

export default ({ data }) => {
  return (
    <Layout>
      <h1>Blog</h1>
      <p>Our blog articles will go here!</p>
    </Layout>
  )
}

If you now navigate to http://localhost:9090/blog you'll be able to see your new blog page.

Configure the Gatsby `filesystem` plugin

We want to colocate all of our long-form content together with their own assets, e.g. images, then we want to place them into a folder like src/content/posts. This isn't the src/pages directory we used early so we'll need to do a bit of extra work in order to dynamically generate our blog pages. We'll use Gatsby's createPages API to do this shortly.

Firstly, we need to configure the gatsby-source-filesystem plugin so that Gatsby knows where to source our MDX blog articles from. You should already have the plugin installed so let's configure it now. We'll add the location to our gatsby-config.js file.

...

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

...

Your full file should look something like this:

module.exports = {
  plugins: [
    `gatsby-plugin-postcss`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-mdx`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `content`,
        path: `${__dirname}/src/content`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `posts`,
        path: `${__dirname}/src/content/posts`,
      },
    },
  ],
}

Create your first MDX blog articles

Let's create several dummy articles for now. We'll create quite a few so that we can differentiate some of them into featured articles to display on our home page. There's a quick way to do that:

mkdir -p src/content/posts
touch src/content/posts/blog-{1,2,3}.mdx

We're adding a lot of additional frontmatter now which we will use at a later date. For the time being, leave the cover property empty.

Frontmatter is just metadata for your MDX. You can inject them later into your components using a GraphQL query and are just basic YAML. They need to be at the top of the file and between triple dashes.

---
title: "Blog 1"
subtitle: "Blogging with MDX and Gatsby"
date: 2020-08-18
published: true
featured: true
cover: ""
---
Sail ho rope's end bilge rat Chain Shot tack scuppers cutlass fathom case shot bilge jolly boat quarter ahoy gangplank coffer. Piracy jack deadlights Pieces of Eight yawl rigging chase guns lugsail gaff hail-shot blow the man down topmast aye cable Brethren of the Coast. Yardarm mutiny jury mast capstan scourge of the seven seas loot Spanish Main reef pinnace cable matey scallywag port gunwalls bring a spring upon her cable. Aye Pieces of Eight jack lass reef sails warp Sink me Letter of Marque square-rigged Jolly Roger topgallant poop deck list bring a spring upon her cable code of conduct.

Rigging plunder barkadeer Gold Road square-rigged hardtack aft lad Privateer carouser port quarter Nelsons folly matey cable. Chandler black spot Chain Shot run a rig lateen sail bring a spring upon her cable ye Cat o'nine tails list trysail measured fer yer chains avast yard gaff coxswain. Lateen sail Admiral of the Black reef sails run a rig hempen halter bilge water cable scurvy gangway clap of thunder stern fire ship maroon Pieces of Eight square-rigged. Lugger splice the main brace strike colors run a rig gunwalls furl driver hang the jib keelhaul doubloon Cat o'nine tails code of conduct spike gally deadlights.

Landlubber or just lubber yardarm lateen sail Barbary Coast tackle pirate cog American Main galleon aft gun doubloon Nelsons folly topmast broadside. Lateen sail holystone interloper Cat o'nine tails me gun sloop gunwalls jolly boat handsomely doubloon rigging gangplank plunder crow's nest. Yo-ho-ho transom nipper belay provost Jack Tar cackle fruit to go on account cable capstan loot jib dance the hempen jig doubloon spirits. Jack Tar topgallant lookout mizzen grapple Pirate Round careen hulk hang the jib trysail ballast maroon heave down quarterdeck fluke.

Now do the same thing for the other two blog articles we've created.

Create slugs for your MDX blog posts

We now need to create slugs for each of our blog posts. We could do this manually by including a URL or path property to each of our blog posts frontmatter but we're going to set up our blog so that the paths are generated dynamically for us. We'll be using Gatsby's onCreateNode API for this.

Create a gatsby-node.js file in your root directory. This file is one of four main files that you can optionally choose to include in a Gatsby root directory that enables you to configure your site and control its behaviour. We've already used the gatsby-browser.js file to import Tailwind CSS directives and gatsby-config.js to control what plugins we are importing.

touch gatsby-node.js

Now copy the following into your gatsby-node.js file. This uses a helper function called createFilePath from the gatsby-source-filesystem plugin to provide the value of each of your .mdx blog post's file paths. The Gatsby onCreateNode API is then used to create a new GraphQL node with the key of slug and value of blog posts path, prefixed with anything you like - in this case its /blog.

const { createFilePath } = require("gatsby-source-filesystem")

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions

  // only applies to mdx nodes
  if (node.internal.type === "Mdx") {
    const value = createFilePath({ node, getNode })

    createNodeField({
      // we're called the new node field 'slug'
      name: "slug",
      node,
      // you don't need a trailing / after blog as createFilePath will do this for you
      value: `/blog${value}`,
    })
  }
}

If you want to find out more about the gatsby-source-filesystem plugin then take a look at this. Further information the onCreateNode API can be found here.

Programmatically create your MDX pages using the `createPages` API

We're going to re-use some boilerplate from the Gatsby docs now and add the following code below to what we have already included in the previous section. This gets added to all of the existing node in the gatsby-node.js file. This uses the slug we created in the earlier section and Gatsby's createPages API to create pages for all of your .mdx files and wraps it in a template.

const path = require("path")

exports.createPages = async ({ graphql, actions, reporter }) => {
  // Destructure the createPage function from the actions object
  const { createPage } = actions

  const result = await graphql(`
    query {
      allMdx {
        edges {
          node {
            id
            fields {
              slug
            }
          }
        }
      }
    }
  `)

  // Create blog post pages.
  const posts = result.data.allMdx.edges

  // you'll call `createPage` for each result
  posts.forEach(({ node }, index) => {
    createPage({
      // This is the slug you created before
      path: node.fields.slug,
      // This component will wrap our MDX content
      component: path.resolve(`./src/templates/blogPost.js`),
      // You can use the values in this context in
      // our page layout component
      context: { id: node.id },
    })
  })
}

If you try and restart your development server, you'll receive an error to stay that your blogPost.js component doesn't exist. Let's create a template now to display all your blog posts.

Create a blog post template

Let's firstly create a new blogPost.js template file.

touch src/templates/blogPost.js

Let's populate the template with some basic data such as title, date and body. We'll be dynamically adding read time, cover images and syntax highlighting shortly.

import { MDXRenderer } from "gatsby-plugin-mdx"
import React from "react"
import Layout from "../components/layout"

export default ({ data }) => {
  const { frontmatter, body } = data.mdx

  return (
    <Layout>
      <section
        className="w-2/4 my-8 mx-auto container"
        style={{ minHeight: "80vh" }}
      >
        <h1 className="text-3xl sm:text-5xl font-bold">{frontmatter.title}</h1>
        <div className="flex justify-between">
          <p className="text-base text-gray-600">{frontmatter.date}</p>
        </div>

        <div className="mt-8 text-base font-light">
          <MDXRenderer>{body}</MDXRenderer>
        </div>
      </section>
    </Layout>
  )
}

Now we need to create a GraphQL query to populate the fields above.

export const pageQuery = graphql`
  query BlogPostQuery($id: String) {
    mdx(id: { eq: $id }) {
      id
      body
      timeToRead
      frontmatter {
        title
        date(formatString: "Do MMM YYYY")
      }
    }
  }
`

We're passing an argument to this GraphQL query called $id here where we have made a type declaration that it is a String. We've passed this from the context object after using the createPage API in gatsby-node.js in the earlier section. Then we have filtered our GraphQL query to only return results that equal that $id variable.

If you now navigate to the url's below, each of your blog posts should now be working:

Blog 1 ⇒ http://localhost:9090/blog/posts/blog-1/
Blog 2 ⇒ http://localhost:9090/blog/posts/blog-2/
Blog 3 ⇒ http://localhost:9090/blog/posts/blog-3/

Dynamically show article read times

Let's start to add a few more features to our blog post template. Something that you may regularly see on technical posts is the estimated time it takes to read the article. A great example of this on Dan Abramov's blog overreacted.io.

There's an incredibly easy way to add this feature to your blog using Gatsby and GraphQL and it doesn't require you to write a function to calculate the length of your blog post. Let's add it now. Go back to your blogPost.js file and update your GraphQL query to also include the timeToRead property.

export const pageQuery = graphql`
  query BlogPostQuery($id: String) {
    mdx(id: { eq: $id }) {
      id
      body
      timeToRead
      frontmatter {
        title
        date(formatString: "Do MMM YYYY")
      }
    }
  }
`

Now pass it as a prop and include it as an expression in your blogPost.js template.

export default ({ data }) => {
    const { frontmatter, body, timeToRead } = data.mdx
    ...
    <p className="text-base text-gray-600">{timeToRead} min read</p>
    ...
}

If you refresh your development server, the read time for each particular blog post should now appear. Unless you included your own blog text, they should all read "1 min read" but try experimenting with longer articles and see it dynamically change.

Make an index of blog posts

Our blog page is still looking a bit bare. Let's now populate it with a full list of all our blog posts. Let's firstly create a heading.

import React from "react"
import Layout from "../components/Layout"

const Blog = ({ data }) => {
  return (
    <Layout>
      <section
        className="w-3/5 mx-auto container mt-6 flex flex-col justify-center"
        style={{ minHeight: "60vh" }}
      >
        <h1 className="text-3xl sm:text-5xl font-bold mb-6">Blog</h1>
        <p className="font-light text-base sm:text-lg">
          Arr aft topsail deadlights ho snow mutiny bowsprit long boat draft
          crow's nest strike colors bounty lad ballast.
        </p>
      </section>
      <p>List of blog articles goes here.</p>
    </Layout>
  )
}

export default Blog

Now let's create a GraphQL query that will return all .mdx files that have a file path that includes posts/ and has a frontmatter property where the published value equals true.

We then want to sort the query in descending order so that the most recent article is displayed first. We can the pass this as a prop to a Post sub component we will create shortly, similar to what we have done with the Hero, About and other sub components we made in part 1.

export const query = graphql`
  {
    posts: allMdx(
      filter: {
        fileAbsolutePath: { regex: "/posts/" }
        frontmatter: { published: { eq: true } }
      }
      sort: { order: DESC, fields: frontmatter___date }
    ) {
      edges {
        node {
          fields {
            slug
          }
          body
          timeToRead
          frontmatter {
            title
            date(formatString: "Do MMM")
          }
          id
          excerpt(pruneLength: 100)
        }
      }
    }
  }
`

Let's now create a new Post.js sub component.

touch src/components/Post.js

We can now iterate over the content prop in Post.js and create a list of all of our blog articles.

import React from 'react'
import { Link } from 'gatsby'

const Posts = ({ content }) => {
    return (
        <section
            id="blog"
            className="mt-6 flex flex-col mx-auto container w-3/5"
            style={{ marginBottom: '10rem' }}
        >
            <h3 className="text-3xl sm:text-5xl font-bold mb-6">All Posts</h3>

            {content.map((posts, key) => {
                const {
                    excerpt,
                    id,
                    body,
                    frontmatter,
                    timeToRead,
                    fields,
                } = posts.node

                return (
                    <Link to={fields.slug}>
                        <section
                            className="flex items-center justify-between mt-8"
                            key={id}
                        >
                            <div>
                                <p className="text-xs sm:text-sm font-bold text-gray-500">
                                    {frontmatter.date}
                                    <span className="sm:hidden">
                                        {' '}
                                        &bull; {timeToRead} min read
                                    </span>
                                </p>
                                <h1 className="text-lg sm:text-2xl font-bold">
                                    {frontmatter.title}
                                </h1>
                                <p className="text-sm sm:text-lg font-light">
                                    {excerpt}
                                </p>
                            </div>
                            <p className="hidden sm:block text-sm font-bold text-gray-500">
                                {timeToRead} min read
                            </p>
                        </section>
                    </Link>
                )
            })}
        </section>
    )
}

export default Posts

Let's now go back to blog.js and replace the <p> element with the Post.js sub component and pass it the data object.

import React from "react"
import { graphql, Link } from "gatsby"
import Layout from "../components/Layout"
import Post from "../components/Post"

const Blog = ({ data }) => {
  return (
    <Layout>
      <section
        className="w-3/5 mx-auto container mt-6 flex flex-col justify-center"
        style={{ minHeight: "60vh" }}
      >
        <h1 className="text-3xl sm:text-5xl font-bold mb-6">Blog</h1>
        <p className="font-light text-base sm:text-lg">
          Arr aft topsail deadlights ho snow mutiny bowsprit long boat draft
          crow's nest strike colors bounty lad ballast.
        </p>
      </section>
      <Post content={data.posts.edges} />
    </Layout>
  )
}

export default Blog

export const query = graphql`
  {
    posts: allMdx(
      filter: {
        fileAbsolutePath: { regex: "/posts/" }
        frontmatter: { published: { eq: true } }
      }
      sort: { order: DESC, fields: frontmatter___date }
    ) {
      edges {
        node {
          fields {
            slug
          }
          body
          timeToRead
          frontmatter {
            title
            date(formatString: "Do MMM")
          }
          id
          excerpt(pruneLength: 100)
        }
      }
    }
  }
`

If you navigate to http://localhost:9090/blog you should now see a list of all your available blog articles in descending order. Choosing whether you want to publicly display a blog article is as easy as changing the boolean value of published to false on that particular article's frontmatter.

Create a featured posts section

We're going to create a featured posts section. Firstly, we'll create a new GraphQL query that enables us to filter only the posts that have a truthy featured frontmatter value.

Let's create that now and add it to our blog.js file.

...
    featured: allMdx(
                filter: {
                    fileAbsolutePath: { regex: "/posts/" }
                    frontmatter: { published: { eq: true }, featured: { eq: true } }
                }
                sort: { order: DESC, fields: frontmatter___date }
            ) {
                edges {
                    node {
                        fields {
                            slug
                        }
                        frontmatter {
                            date(formatString: "Do MMM")
                            title
                        }
                        excerpt(pruneLength: 100)
                        id
                        body
                        timeToRead
                    }
                }
            }
...

Now, let's create a FeaturedPosts.js component.

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

const FeaturedPosts = ({ content }) => {
  return (
    <section className="my-6 flex flex-col mx-auto container w-3/5">
      <h3 className="text-3xl sm:text-5xl font-bold mb-6">Featured Posts</h3>

      {content.map((featured, key) => {
        const {
          excerpt,
          id,
          body,
          frontmatter,
          timeToRead,
          fields,
        } = featured.node

        return (
          <Link to={fields.slug}>
            <section
              className="flex items-center justify-between mt-8"
              key={id}
            >
              <div>
                <p className="text-xs sm:text-sm font-bold text-gray-500">
                  {frontmatter.date}
                  <span className="sm:hidden">
                    {" "}
                    &bull; {timeToRead} min read
                  </span>
                </p>
                <h1 className="text-lg sm:text-2xl font-bold">
                  {frontmatter.title}
                </h1>
                <p className="text-sm sm:text-lg font-light">{excerpt}</p>
              </div>
              <p className="hidden sm:block text-sm font-bold text-gray-500">
                {timeToRead} min read
              </p>
            </section>
          </Link>
        )
      })}
    </section>
  )
}

export default FeaturedPosts

Let's now import the new component into blog.js.

...
    const Blog = ({ data }) => {
        return (
            <Layout>
                <section
                    className="w-3/5 mx-auto container mt-6 flex flex-col justify-center"
                    style={{ minHeight: '60vh' }}
                >
                    <h1 className="text-3xl sm:text-5xl font-bold mb-6">Blog</h1>
                    <p className="font-light text-base sm:text-lg">
                        Arr aft topsail deadlights ho snow mutiny bowsprit long boat
                        draft crow's nest strike colors bounty lad ballast.
                    </p>
                </section>
                <FeaturedPost cta={false} content={data.featured.edges} />
                <Post content={data.posts.edges} />
            </Layout>
        )
    }
...

Let's now re-use the FeaturedPosts.js component in our index.js page. You'll need to use the same GraphQL query again and pass it as a prop.

...
    export default ({ data }) => {
        return (
            <Layout>
                <Hero content={data.hero.edges} />
                <About content={data.about.edges} />
                <Project content={data.project.edges} />
                <FeaturedPosts content={data.featured.edges} />
                <Contact content={data.contact.edges} />
            </Layout>
        )
    }
...

    featured: allMdx(
                filter: {
                    fileAbsolutePath: { regex: "/posts/" }
                    frontmatter: { published: { eq: true }, featured: { eq: true } }
                }
                sort: { order: DESC, fields: frontmatter___date }
            ) {
                edges {
                    node {
                        fields {
                            slug
                        }
                        frontmatter {
                            date(formatString: "Do MMM")
                            title
                        }
                        excerpt(pruneLength: 100)
                        id
                        body
                        timeToRead
                    }
                }
            }
...

Let's add a call to action button for users who want to see the rest of our blog articles. We'll include this in our FeaturedPosts.js component and pass in a boolean prop to determine if we want to display the button or not.

import React from 'react'
import { Link } from 'gatsby'

const FeaturedPosts = ({ content, cta = true }) => {
    return (
       ...
            {!cta ? null : (
                <Link to="/blog" className="flex justify-center">
                    <button className="bg-red-500 hover:bg-red-400 text-white font-bold py-2 px-4 border-b-4 border-red-700 hover:border-red-500 rounded mt-6">
                        See More
                    </button>
                </Link>
            )}
                ...
    )
}

export default FeaturedPosts

Why don't we also double-check our GraphQL query is correctly displaying only the articles with a truthy featured frontmatter value. So, let's edit one of our blog articles, so that it does not display. Let's edit blog-1.mdx.

---
title: Blog 1
subtitle: Blogging with MDX and Gatsby
date: 2020-08-18
published: true
featured: false
cover: ''
---

...

If you now navigate to http://localhost:9090/ you'll see a featured posts section with just two articles displaying. When you navigate to http://localhost:9090/blog you should now see a header, featured posts with two articles and all posts component displaying an index of all articles.

Customise your MDX components

You may have noticed that we are having the same problem we encountered in part 1 with the markdown we are writing in our .mdx files. No styling is being applied. We could fix this by introducing some markup and include inline styles or Tailwind class names but we want to minimise the amount of time we need to spend writing a blog post.

So we'll re-iterate the process we used in part 1 and use the MDXProvider component to define styling manually for each markdown component.

import { MDXRenderer } from "gatsby-plugin-mdx"
import { MDXProvider } from "@mdx-js/react"
import React from "react"
import Layout from "../components/Layout"

export default ({ data }) => {
  const { frontmatter, body, timeToRead } = data.mdx

  return (
    <MDXProvider
      components={{
        p: props => <p {...props} className="text-sm font-light mb-4" />,
        h1: props => (
          <h1 {...props} className="text-2xl font-bold mb-4 mt-10" />
        ),
        h2: props => <h2 {...props} className="text-xl font-bold mb-4 mt-8" />,
        h3: props => <h3 {...props} className="text-lg font-bold mb-4 mt-8" />,
        strong: props => (
          <strong
            {...props}
            className="font-bold"
            style={{ display: "inline" }}
          />
        ),
        a: props => (
          <a
            {...props}
            className="font-bold text-red-500 hover:underline cursor-pointer"
            style={{ display: "inline" }}
          />
        ),
        ul: props => (
          <ul {...props} className="list-disc font-light ml-8 mb-4" />
        ),
        blockquote: props => (
          <div
            {...props}
            role="alert"
            className="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 ml-4 mb-4"
          />
        ),
      }}
    >
      <Layout>
        <section
          className="w-2/4 my-8 mx-auto container"
          style={{ minHeight: "80vh" }}
        >
          <h1 className="text-3xl sm:text-5xl font-bold">
            {frontmatter.title}
          </h1>
          <div className="flex justify-between">
            <p className="text-base text-gray-600">{frontmatter.date}</p>
            <p className="text-base text-gray-600">{timeToRead} min read</p>
          </div>
          <div className="mt-8 text-base font-light">
            <MDXRenderer>{body}</MDXRenderer>
          </div>
        </section>
      </Layout>
    </MDXProvider>
  )
}

export const pageQuery = graphql`
  query BlogPostQuery($id: String) {
    mdx(id: { eq: $id }) {
      id
      body
      timeToRead
      frontmatter {
        title
        date(formatString: "Do MMM YYYY")
      }
    }
  }
`

Now when you create a new blog post and write the long-form content using Markdown, the elements you've used will now display appropriately.

Add syntax highlighting for code blocks

I'm trying to regularly use my blog to write technical articles and so I found adding syntax highlighting to code blocks made reading my articles a better experience for my users.

The process is a little involved but we'll try and break it down as best as possible. Firstly, we need to use the gatsby-browser.js API file to wrap our entire site with a plugin called prism-react-renderer that will enable us to use syntax highlighting on our code blocks in MDX.

Let's install the plugin firstly.

npm i prism-react-renderer

Now let's add in some boilerplate for the gatsby-browser.js file, for more information check out the API docs here.

...

import React from 'react'
import { MDXProvider } from '@mdx-js/react'
import Highlight, { defaultProps } from 'prism-react-renderer'

const components = {
        ...
}

export const wrapRootElement = ({ element }) => {
    return <MDXProvider components={components}>{element}</MDXProvider>
}

We've called the wrapRootElement function and returned our Gatsby site wrapped by MDXProvider. We're using the components prop and will be shortly passing a variable called components which will define a Highlight component imported form prism-react-renderer. This MDXProvider pattern is commonly known as a shortcode, you can find out more in the Gatsby docs here.

If we navigate to the GitHub repository for the plugin, we're going to copy some of the example code and then make it fit for purpose for our blog. You can find the repository here.

...

import React from 'react'
import { MDXProvider } from '@mdx-js/react'
import Highlight, { defaultProps } from 'prism-react-renderer'

const components = {
        pre: (props) => {
                return (
                        <Highlight {...defaultProps} code={exampleCode} language="jsx">
                        {({ className, style, tokens, getLineProps, getTokenProps }) => (
                          <pre className={className} style={style}>
                            {tokens.map((line, i) => (
                              <div {...getLineProps({ line, key: i })}>
                                {line.map((token, key) => (
                                  <span {...getTokenProps({ token, key })} />
                                ))}
                              </div>
                            ))}
                          </pre>
                        )}
                      </Highlight>,
                )
        }
}

export const wrapRootElement = ({ element }) => {
    return <MDXProvider components={components}>{element}</MDXProvider>
}

At the moment, the code block language is hard coded and we need to replace the exampleCode variable with the actual code we want to be highlighted. Let's do that now.

...
        const components = {
        pre: (props) => {
            const className = props.children.props.className || ''
            const matches = className.match(/language-(?<lang>.*)/)

            return (
                <Highlight
                    {...defaultProps}
                    code={props.children.props.children.trim()}
                    language={
                        matches && matches.groups && matches.groups.lang
                            ? matches.groups.lang
                            : ''
                    }
                >
                    {({
                        className,
                        style,
                        tokens,
                        getLineProps,
                        getTokenProps,
                    }) => (
                        <pre className={className} style={style}>
                            {tokens.map((line, i) => (
                                <div {...getLineProps({ line, key: i })}>
                                    {line.map((token, key) => (
                                        <span {...getTokenProps({ token, key })} />
                                    ))}
                                </div>
                            ))}
                        </pre>
                    )}
                </Highlight>
            )
        },
    }
...

If you now edit one of your .mdx blog posts and include a code block using Markdown syntax, it should now be highlighted using prism-react-renderer's default theme.

The padding is a little off, so let's fix that now.

...
    <pre className={`${className} p-4 rounded`} style={style}>
        {tokens.map((line, i) => (
            <div {...getLineProps({ line, key: i })}>
                {line.map((token, key) => (
                    <span {...getTokenProps({ token, key })} />
                ))}
            </div>
        ))}
    </pre>
...

If you want to change the default theme, you can import it from prism-react-renderer and pass it as a prop to the Highlight component. You can find more themes here. I've decided to use the vsDark theme in our example. Your final gatsby-browser.js should look something like this.

import "./src/css/index.css"
import React from "react"
import { MDXProvider } from "@mdx-js/react"
import theme from "prism-react-renderer/themes/vsDark"
import Highlight, { defaultProps } from "prism-react-renderer"

const components = {
  pre: props => {
    const className = props.children.props.className || ""
    const matches = className.match(/language-(?<lang>.*)/)

    return (
      <Highlight
        {...defaultProps}
        code={props.children.props.children.trim()}
        language={
          matches && matches.groups && matches.groups.lang
            ? matches.groups.lang
            : ""
        }
        theme={theme}
      >
        {({ className, style, tokens, getLineProps, getTokenProps }) => (
          <pre className={`${className} p-4 rounded`} style={style}>
            {tokens.map((line, i) => (
              <div {...getLineProps({ line, key: i })}>
                {line.map((token, key) => (
                  <span {...getTokenProps({ token, key })} />
                ))}
              </div>
            ))}
          </pre>
        )}
      </Highlight>
    )
  },
}

export const wrapRootElement = ({ element }) => {
  return <MDXProvider components={components}>{element}</MDXProvider>
}

Add a featured image to blog posts

One of the last things we're going to do is provide the opportunity to add a featured image to each of our blog posts.

Let's firstly install a number of packages we're going to need.

npm i gatsby-transformer-sharp gatsby-plugin-sharp gatsby-remark-images gatsby-image

Now we need to configure the plugins, let's update our gatsby-config.js file with the following:

...
    {
        resolve: `gatsby-plugin-mdx`,
        options: {
            extensions: [`.mdx`, `.md`],
            gatsbyRemarkPlugins: [
                {
                    resolve: `gatsby-remark-images`,
                },
            ],
            plugins: [
                {
                    resolve: `gatsby-remark-images`,
                },
            ],
        },
    },
...

We now need to update our GraphQL query on blogPost.js so that it returns the image we'll be including in our blog posts frontmatter shortly. We're using a query fragment here to return a traced SVG image while our image is lazy-loading. More information on query fragment's and the Gatsby image API can be found here.

export const pageQuery = graphql`
  query BlogPostQuery($id: String) {
    mdx(id: { eq: $id }) {
      id
      body
      timeToRead
      frontmatter {
        title
        date(formatString: "Do MMM YYYY")
        cover {
          childImageSharp {
            fluid(traceSVG: { color: "#F56565" }) {
              ...GatsbyImageSharpFluid_tracedSVG
            }
          }
        }
      }
    }
  }
`

Let's now add an image to our src/content/posts folder. I've included one in the GitHub repository for this project but you can access a lot of open licence images from places like https://unsplash.com/.

Include the location of the image into your blog posts frontmatter.

---
title: Blog 3
subtitle: Blogging with MDX and Gatsby
date: 2020-08-31
published: true
featured: true
cover: './splash.jpg'
---

Now let's add it to the blogPost.js template. You'll need to import the Img component from gatsby-image.

...
import Img from 'gatsby-image'

export default ({ data }) => {
    const { frontmatter, body, timeToRead } = data.mdx

    return (
        <MDXProvider
            components={{
                p: (props) => (
                    <p {...props} className="text-sm font-light mb-4" />
                ),
                h1: (props) => (
                    <h1 {...props} className="text-2xl font-bold mb-4 mt-10" />
                ),
                h2: (props) => (
                    <h2 {...props} className="text-xl font-bold mb-4 mt-8" />
                ),
                h3: (props) => (
                    <h3 {...props} className="text-lg font-bold mb-4 mt-8" />
                ),
                strong: (props) => (
                    <strong
                        {...props}
                        className="font-bold"
                        style={{ display: 'inline' }}
                    />
                ),

                a: (props) => (
                    <a
                        {...props}
                        className="font-bold text-blue-500 hover:underline cursor-pointer"
                        style={{ display: 'inline' }}
                    />
                ),
                ul: (props) => (
                    <ul {...props} className="list-disc font-light ml-8 mb-4" />
                ),
                blockquote: (props) => (
                    <div
                        {...props}
                        role="alert"
                        className="bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 ml-4 mb-4"
                    />
                ),
            }}
        >
            <Layout>
                <section
                    className="w-2/4 my-8 mx-auto container"
                    style={{ minHeight: '80vh' }}
                >
                    <h1 className="text-3xl sm:text-5xl font-bold">
                        {frontmatter.title}
                    </h1>
                    <div className="flex justify-between">
                        <p className="text-base text-gray-600">
                            {frontmatter.date}
                        </p>
                        <p className="text-base text-gray-600">
                            {timeToRead} min read
                        </p>
                    </div>
                    {frontmatter.cover && frontmatter.cover ? (
                        <div className="my-8 shadow-md">
                            <Img
                                style={{ height: '30vh' }}
                                fluid={frontmatter.cover.childImageSharp.fluid}
                            />
                        </div>
                    ) : null}
                    <div className="mt-8 text-base font-light">
                        <MDXRenderer>{body}</MDXRenderer>
                    </div>
                </section>
            </Layout>
        </MDXProvider>
    )
}

...

Your blog post's should now display a cover image on every page.

Add Google Analytics

This is a great way to monitor traffic to your site and on your blog posts. It also enables to you see where your traffic is coming from. Google Analytics is free up to c. 10 million hits per month per ID. I don't know about you but I'm not expecting that kind of traffic on my site, if you are then you may want to consider looking at the pricing options to avoid your service getting suspended.

First of all you want to sign up and get a Google Analytics account. You can do that with your normal Google account here.

Once you've set up an account, you'll be prompted to create a new property which is equivalent to your new website. You'll need to include your site's name and URL at this point which means you will have had to already deployed your site in part 1 - if you haven't you can follow the steps to do that here.

Once you have created a new "property" you can access your tracking code by navigating to Admin > Tracking Info > Tracking Code. The code will be a number similar to UA-XXXXXXXXX-X.

Now that you have your tracking code, let's install the Google Analytics plugin for Gatsby.

npm i gatsby-plugin-google-analytics

Now, all you need to do it update your gatsby-config.js file.

...
    {
            resolve: `gatsby-plugin-google-analytics`,
            options: {
            // replace "UA-XXXXXXXXX-X" with your own Tracking ID
            trackingId: "UA-XXXXXXXXX-X",
            },
    },
...

It can occasionally take a bit of time for statistics on Google Analytics to populate but you should start to see user data shortly after following the instructions above and deploying your site.

Summary

That's it! 🎉

You should now have a fully functioning portfolio and blog that you have created from scratch using Gatsby, Tailwind CSS and Framer.

The site should be set up a way that enables you to update project work you have created, create a new blog post or update your social media links all from a single .mdx or config file. Making the time and effort required for you to now update your portfolio as minimal as possible.

If you've found this series helpful, let me know and connect with me on Twitter at @danielpnorris for more content related to technology.

How To Build A Portfolio Using Gatsby - Part 1

Dan Norris — Mon, 24 Aug 2020 16:27:52 +0000

This article was originally posted on www.danielnorris.co.uk. Follow me on Twitter at @danielpnorris.

[Live Demo]

Hey, welcome to this two part series where I'll walk you through how to build your first portfolio with Gatsby, Tailwind CSS and Framer Motion.

This is broken down into two parts; the first covers everything you need to know to get going on building your basic portfolio and projects overview; the second part takes a bit of a deeper dive into one particular way you could choose to build a blog with Gatsby using MDX.

Like with most things in tech, there is a lot of existing content out there on similar topics but on my travels I couldn't find a complete joined up tutorial covering the two or with the technology stack I wanted to use. This was especially true when I was trying to add additional functionality to my blog such as code blocks, syntax highlighting and other features.

A small caveat; I'm no expert but I have just gone through this very process building my own portfolio, which you can take a look at here, and blog and a large part of the writing process for me is improving my own understanding of a topic.

Who is this for?

This isn't a Gatsby starter, although you are welcome to use the GitHub repository as a starter for your own use. If you do, please star the repository. This tutorial is aimed at people who are interested in how to build their own Gatsby portfolio from scratch without the aid of a starter.

What will this cover?

We'll cover the following:

Part 1

Setting up
Configuring Tailwind CSS
Create site config file
Create layout component
Create header component
Create icon component and helper function
Create footer component
Create a hero component
Implement MDX into your site
Make your first GraphQL query
Set up image plugins
Create an about component
Create projects component
Create a contact me component
Making your portfolio responsive
Using Framer Motion to animate your components
Deployment using Netlify
Summary

Part 2

Why a blog?
What are you going to build?
Set up file system plugin
Set up MDX plugin
Create a new blog page
Create your first blog article
Create slugs for MDX blog posts
Create a featured posts section
Dynamically show article read times
Configure MDX styles
Add syntax highlighting for code blocks
Add a copy to clipboard hook
Add cover images to blog posts
Add Google analytics
Summary

Why Gatsby?

There were three main reasons for me why I ended up choosing Gatsby compared to many of the other Static Site Generators out there like Jekyll, Next.js, Hugo or even a SSG at all.

It's built on React

You can leverage all the existing capability around component development React provides and bundle it with the added functionality that Gatsby provides.

A lot of configuration and tooling comes free

This was a huge draw for me. I wanted a solution for my portfolio that was quick to get off the ground and once completed, I could spent as little time as possible updating it or including a new blog post. The Developer experience is rather good and you get things like hot reloading and code splitting for free so you can spend less time on configuration and more on development.

The Gatsby ecosystem is really mature

There's a lot of useful information available to get you started which helps as a beginner. On top of that, the Gatsby plugin system makes common tasks like lazy-loading and image optimisation a quick and straight-forward process.

I migrated my blog from Jekyll originally and haven't looked back. If you're wondering how Gatsby compares to other JAMstack solutions available and whether you should migrate, then you can find out more here.

What are you going to build?

We're going to build a basic portfolio site that looks like the one below above in the demo. We'll go through how to setup and configure your project to use Tailwind CSS, query and present MDX data sources using GraphQL, add transitions and animations using Framer and later deploy to Netlify.

Setting up

Firstly, we're going to need to install npm and initialise a repository. The -y flag automatically accepts all the prompts during the npm wizard.

npm init -y && git init

You'll want to exclude some of the project files from being commited to git. Include these files in the .gitignore file.

// .gitignore

.cache
node_modules
public

Now you'll need to install the dependencies you'll need.

npm i gatsby react react-dom

Part of Gatsby's magic is that you are provided with routing for free. Any .js file that is created within src/pages is automatically generated with it's own url path.

Lets go and create your first page. Create a src/pages/index.js file in your root directory.

Create a basic component for now.

// index.js

import React from "react";

export default () => {
    return <div>My Portfolio</div>;
};

This isn't strictly necessary but it's a small quality of life improvement. Let's create a script in your package.json to run your project locally. The -p specifies the port and helps to avoid conflicts if you are running multiple projects simultaneously.

You can specify any port you want here or choose to omit this. I've chosen port 9090. The -o opens a new browser tab automatically for you.

// package.json

"scripts": {
    "run": "gatsby develop -p 9090 -o"
}

You can run your project locally on your machine now from http://localhost:8000 with hot-reloading already baked in.

npm run-script run

ESLint, Webpack and Babel are all automatically configured and setup for you as part of Gatsby. This next part is optional but we are going to install Prettier which is a code formatter and will help to keep your code consistent with what we are doing in the tutorial, plus it's prettier. The -D flag installs the package as a developer dependency only.

npm i -D prettier

Create a .prettierignore and prettier.config.js file in your root directory.

// .prettierignore

.cache
package.json
package-lock.json
public

// prettier.config.js

module.exports = {
  tabWidth: 4,
  semi: false,
  singleQuote: true,
}

The ignore file selects which files to ignore and not format. The second config file imports an options object with settings including the width of tabs in spaces (tabWidth), whether to include semi-colons or not (semi) and whether to convert all quotes to single quotes (singleQuote).

Configuring Tailwind CSS

Let's now install and configure Tailwind. The second command initialises a configuration file which we'll talk about shortly.

npm i -D tailwindcss && npx tailwindcss init

Now open the new tailwind.config.js file in your root directory and include the following options object.

// tailwind.config.js

module.exports = {
  purge: ["./src/**/*.js"],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

The config file uses a glob and a Tailwind dependency called PurgeCSS to remove any unused CSS classes from files located in .src/**/*.js . PurgeCSS only performs this on build but will help to make your project more performant. For more info, check out the Tailwind CSS docs here.

Install the PostCSS plugin.

npm i gatsby-plugin-postcss

Create a postcss.config.js file in root and include the following.

touch postcss.config.js

// postcss.config.js

module.exports = () => ({
  plugins: [require("tailwindcss")],
})

Create a gatsby-config.js file and include the plugin. This is where all of your plugins will go including any config needed for those plugins.

touch gatsby.config.js

// gatsby-config.js

module.exports = {
  plugins: [`gatsby-plugin-postcss`],
}

You need to create an index.css file to import Tailwind's directives.

mkdir -p src/css
touch src/css/index.css

Then import the directives and include PurgeCSS's whitelist selectors in index.css for best practice.

/* purgecss start ignore */
@tailwind base;
@tailwind components;
/* purgecss end ignore */

@tailwind utilities;

Finally, create a gatsby-browser.js file in your root and import the styles.

// gatsby-browser.js

import "./src/css/index.css"

Let's check it works. Open up your index.js file and add the following styles. Now restart your development server. The div tag should have styles applied to it.

// index.js

export default () => {
  return <div class="bg-blue-300 text-3xl p-4">My Portfolio</div>
}

Create site config file

We're going to create a site config file. This isn't specific to Gatsby but enables us to create a single source of truth for all of the sites metadata and will help to minimise the amount of time you need to spend updating the site in the future.

mkdir -p src/config/
touch src/config/index.js

Now copy the object below into your file. You can substitute the data for your own.

// config/index.js

module.exports = {
  author: "Dan Norris",
  siteTitle: "Dan Norris - Portfolio",
  siteShortTitle: "DN",
  siteDescription:
    "v2 personal portfolio. Dan is a Software Engineer and based in Bristol, UK",
  siteLanguage: "en_UK",
  socialMedia: [
    {
      name: "Twitter",
      url: "https://twitter.com/danielpnorris",
    },
    {
      name: "LinkedIn",
      url: "https://www.linkedin.com/in/danielpnorris/",
    },
    {
      name: "Medium",
      url: "https://medium.com/@dan.norris",
    },
    {
      name: "GitHub",
      url: "https://github.com/daniel-norris",
    },
    {
      name: "Dev",
      url: "https://dev.to/danielnorris",
    },
  ],
  navLinks: {
    menu: [
      {
        name: "About",
        url: "/#about",
      },
      {
        name: "Projects",
        url: "/#projects",
      },
      {
        name: "Contact",
        url: "/#contact",
      },
    ],
    button: {
      name: "Get In Touch",
      url: "/#contact",
    },
  },
}

Create layout component

We're now going to create a layout component which will act as a wrapper for any further page content to the site.

Create a new component at src/components/Layout.js and add the following:

import React from "react"
import PropTypes from "prop-types"

const Layout = ({ children }) => {
  return (
    <div
      className="min-h-full grid"
      style={{
        gridTemplateRows: "auto 1fr auto auto",
      }}
    >
      <header>My Portfolio</header>
      <main>{children}</main>
      <footer>Footer</footer>
    </div>
  )
}

Layout.propTypes = {
  children: PropTypes.any,
}

export default Layout

Tailwind provides us a utility based CSS framework which is easily extensible and you don't have to fight to override. We've created a wrapper div here that has a min height of 100% and created a grid with three rows for our header, footer and the rest of our content.

This will ensure our footer stays at the bottom of the page once we start adding content. We'll break this into smaller sub-components shortly.

Now let's import this component into our main index.js page and pass some text as a child prop to our Layout component for now.

import React from "react"
import Layout from "../components/Layout"

export default () => {
  return (
    <Layout>
      <main>This is the hero section.</main>
    </Layout>
  )
}

Create a header component

Let's now create a sub component for the header at src/components/Header.js and some navigation links using our site config.

// Header.js

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

import { navLinks, siteShortTitle } from "../config"

const Header = () => {
  const { menu } = navLinks

  return (
    <header className="flex items-center justify-between py-6 px-12 border-t-4 border-red-500">
      <Link to="/" aria-label="home">
        <h1 className="text-3xl font-bold">
          {siteShortTitle}
          <span className="text-red-500">.</span>
        </h1>
      </Link>
      <nav className="flex items-center">
        {menu.map(({ name, url }, key) => {
          return (
            <Link
              className="text-lg font-bold px-3 py-2 rounded hover:bg-red-100 "
              key={key}
              to={url}
            >
              {name}
            </Link>
          )
        })}
      </nav>
    </header>
  )
}

export default Header

We've used the Gatsby Link component to route internally and then iterated over our destructured config file to create our nav links and paths.

Import your new Header component into Layout.

// Layout.js

import Header from "../components/Header"

Create icon component and helper function

Before we start on the footer, we're going to create an Icon component and helper function that will enable you to use a single class that accepts a name and color prop for all your svg icons.

Create src/components/icons/index.js and src/components/icons/Github.js. We'll use a switch for our helper function.

// index.js

import React from "react"

import IconGithub from "./Github"

const Icon = ({ name, color }) => {
  switch (name.toLowerCase()) {
    case "github":
      return <IconGithub color={color} />
    default:
      return null
  }
}

export default Icon

We're using svg icons from https://simpleicons.org/. Copy the svg tag for a Github icon and include it in your Github icon sub component. Then do the same for the remaining social media accounts you set up in your site config file.

import React from "react"
import PropTypes from "prop-types"

const Github = ({ color }) => {
  return (
    <svg role="img" viewBox="0 0 24 24" fill={color}>
      <title>GitHub icon</title>
      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
    </svg>
  )
}

Github.propTypes = {
  color: PropTypes.string,
}

Github.defaultProps = {
  color: "#000000",
}

export default Github

Your final index.js should look something like this:

// index.js

import React from "react"

import IconGithub from "./Github"
import IconLinkedin from "./Linkedin"
import IconMedium from "./Medium"
import IconDev from "./Dev"
import IconTwitter from "./Twitter"

const Icon = ({ name, color }) => {
  switch (name.toLowerCase()) {
    case "github":
      return <IconGithub color={color} />
    case "linkedin":
      return <IconLinkedin color={color} />
    case "dev":
      return <IconDev color={color} />
    case "medium":
      return <IconMedium color={color} />
    case "twitter":
      return <IconTwitter color={color} />
    default:
      return null
  }
}

export default Icon

Create footer component

Lets now create our footer sub component. Create src/components/Footer.js and copy across:

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

import { siteShortTitle } from "../config/index"

const Footer = () => {
  return (
    <footer className="flex items-center justify-between bg-red-500 py-6 px-12">
      <Link to="/" aria-label="home">
        <h1 className="text-3xl font-bold text-white">{siteShortTitle}</h1>
      </Link>
    </footer>
  )
}

export default Footer

Let's now iterate over our social media icons and use our new Icon component. Add the following:

import Icon from "../components/icons/index"
import { socialMedia, siteShortTitle } from "../config/index"

...

<div className="flex">
  {socialMedia.map(({ name, url }, key) => {
    return (
      <a className="ml-8 w-6 h-6" href={url} key={key} alt={`${name} icon`}>
        <Icon name={name} color="white" />
      </a>
    )
  })}
</div>

...

Create a hero component

We're going to create a hero for your portfolio site now. In order to inject a bit of personality into this site, we're going to use a svg background from http://www.heropatterns.com/ called "Diagonal Lines". Feel free to choose anything you like.

Let's extend our Tailwind CSS styles and add a new class.

.bg-pattern {
  background-color: #fff5f5;
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f56565' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}

Create a new Hero.js component and let's start to build out our hero section.

import React from "react"
import { Link } from "gatsby"
import { navLinks } from "../config/index"

const Hero = ({ content }) => {
  const { button } = navLinks

  return (
    <div className="flex items-center bg-pattern shadow-inner min-h-screen">
      <div className="bg-white w-full py-6 shadow-lg">
        <section class="mx-auto container w-3/5">
          <h1 className="uppercase font-bold text-lg text-red-500">
            Hi, my name is
          </h1>
          <h2 className="font-bold text-6xl">Dan Norris</h2>
          <p className=" text-2xl w-3/5">
            I’m a Software Engineer based in Bristol, UK specialising in
            building incredible websites and applications.
          </p>

          <Link to={button.url}>
            <button className="bg-red-500 hover:bg-red-400 text-white font-bold py-2 px-4 border-b-4 border-red-700 hover:border-red-500 rounded mt-6">
              {button.name}
            </button>
          </Link>
        </section>
      </div>
    </div>
  )
}

export default Hero

Implement MDX into your site

Thanks to Gatsby's use of GraphQL as a data management layer, you can incorporate a lot of different data sources into your site including various headless CMS's. We're going to use MDX for our portfolio.

It enables us to put all of our text content and images together into a single query, provides the ability to extend the functionality of your content with React and JSX and for that reason is a great solution for long-form content like blog posts. We're going to start by installing:

npm install gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react gatsby-source-filesystem

We'll put all of our .mdx content into its own file.

mkdir -p src/content/hero
touch src/content/hero/hero.mdx

Let's add some content to the hero.mdx file.

---
intro: "Hi, my name is"
title: "Dan Norris"
---

I’m a Software Engineer based in Bristol, UK specialising in building incredible websites and applications.

We'll need to configure these new plugins in our gatsby-config.js file. Add the following.

// gatsby-config.js

module.exports = {
  plugins: [
    `gatsby-plugin-postcss`,
    `gatsby-plugin-mdx`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `content`,
        path: `${__dirname}/src/content`,
      },
    },
  ],
}

Make your first GraphQL query

Now that we are able to use .mdx files, we need to create a query to access the data. Run your development server and go to http://localhost:9090/___graphql. Gatsby has a GUI that enables you to construct your data queries in the browser.

Once we've created our query, we'll pass this into a template literal which will pass the whole data object as a prop to our component. Your index.js should now look like this:

// index.js

import React from "react"
import Layout from "../components/Layout"
import Hero from "../components/Hero"
import { graphql } from "gatsby"

export default ({ data }) => {
  return (
    <Layout>
      <Hero content={data.hero.edges} />
    </Layout>
  )
}

export const pageQuery = graphql`
  {
    hero: allMdx(filter: { fileAbsolutePath: { regex: "/hero/" } }) {
      edges {
        node {
          body
          frontmatter {
            intro
            title
          }
        }
      }
    }
  }
`

We'll need to import MDXRenderer from gatsby-plugin-mdx to render the body text from the mdx file. Your Hero.js should now look like this:

import React from "react"
import { Link } from "gatsby"
import { MDXRenderer } from "gatsby-plugin-mdx"
import { navLinks } from "../config/index"

const Hero = ({ content }) => {
  const { frontmatter, body } = content[0].node
  const { button } = navLinks

  return (
    <div className="flex items-center bg-pattern shadow-inner min-h-screen">
      <div className="bg-white w-full py-6 shadow-lg">
        <section class="mx-auto container w-4/5">
          <h1 className="uppercase font-bold text-lg text-red-500">
            {frontmatter.intro}
          </h1>
          <h2 className="font-bold text-6xl">{frontmatter.title}</h2>
          <p className="font-thin text-2xl w-3/5">
            <MDXRenderer>{body}</MDXRenderer>
          </p>

          <Link to={button.url}>
            <button className="bg-red-500 hover:bg-red-400 text-white font-bold py-2 px-4 border-b-4 border-red-700 hover:border-red-500 rounded mt-6">
              {button.name}
            </button>
          </Link>
        </section>
      </div>
    </div>
  )
}

export default Hero

Set up image plugins

We're going to need to load an image for our about page, so we'll use the gatsby-image to achieve this. It provides lazy-loading, image optimisation and additional processing features like blur-up and svg outlining with minimal effort.

npm install gatsby-transformer-sharp gatsby-plugin-sharp gatsby-image

We need to include these new plugins into our config file.

// gatsby-config.js

module.exports = {
  plugins: [`gatsby-plugin-sharp`, `gatsby-transformer-sharp`],
}

We should now be able to query and import images using gatsby-image that are located in the src/content/ folder that gatsby-source-filesystem is pointing at in your gatsby-config.js file. Let's try by making our about section.

Create an about component

Let's start by creating a new mdx file for our content in src/content/about/about.mdx. I've used one of my images for the demo but you can use your own or download one here from https://unsplash.com/. It needs to be placed into the same directory as your about.mdx file.

---
title: About Me
image: avatar.jpeg
caption: Avon Gorge, Bristol, UK
---

Hey, I’m Dan. I live in Bristol, UK and I’m a Software Engineer at LexisNexis, a FTSE100 tech company that helps companies make better decisions by building applications powered by big data.

I have a background and over 5 years experience as a Principal Technical Recruiter and Manager. Some of my clients have included FTSE100 and S&amp;P500 organisations including Marsh, Chubb and Hiscox.

After deciding that I wanted to shift away from helping companies sell their tech enabled products and services and start building them myself, I graduating from a tech accelerator called DevelopMe\_ in 2020 and requalified as a Software Engineer. I enjoy creating seamless end-to-end user experiences and applications that add value.

In my free time you can find me rock climbing around local crags here in the UK and trying to tick off all the 4,000m peaks in the Alps.

Now, let's extend our GraphQL query on our index.js page to include data for our about page. You'll also need to import and use the new About component. Make these changes to your index.js file.

// index.js

import About from '../components/About'

...

<About content={data.about.edges} />

...

export const pageQuery = graphql`
    {
        hero: allMdx(filter: { fileAbsolutePath: { regex: "/hero/" } }) {
            edges {
                node {
                    body
                    frontmatter {
                        intro
                        title
                    }
                }
            }
        }
        about: allMdx(filter: { fileAbsolutePath: { regex: "/about/" } }) {
            edges {
                node {
                    body
                    frontmatter {
                        title
                                                caption
                        image {
                            childImageSharp {
                                fluid(maxWidth: 800) {
                                    ...GatsbyImageSharpFluid
                                }
                            }
                        }
                    }
                }
            }
        }
    }
`

Let's go make our About component now. You'll need to import MDXRenderer again for the body of your mdx file. You'll also need to import an Img component from gatsby-image.

import React from "react"
import { MDXRenderer } from "gatsby-plugin-mdx"
import Img from "gatsby-image"

const About = ({ content }) => {
  const { frontmatter, body } = content[0].node

  return (
    <section id="about" className="my-6 mx-auto container w-3/5">
      <h3 className="text-3xl font-bold mb-6">{frontmatter.title}</h3>
      <div className=" font-light text-lg flex justify-between">
        <div className="w-1/2">
          <MDXRenderer>{body}</MDXRenderer>
        </div>
        <div className="w-1/2">
          <figure className="w-2/3 mx-auto">
            <Img fluid={frontmatter.image.childImageSharp.fluid} />
            <figurecaption className="text-sm">
              {frontmatter.caption}
            </figurecaption>
          </figure>
        </div>
      </div>
    </section>
  )
}

export default About

You might have noticed that your body text isn't displaying properly and doesn't have any line breaks. If you used the default syntax for Markdown for things like ## Headings then the same thing would happen; no styling would occur.

Let's fix that now and import a component called MDXProvider which will allow us to define styling for markdown elements. You could choose to link this up to already defined React components but we're just going to do it inline. Your Layout.js file should now look like this.

import React from "react"
import PropTypes from "prop-types"
import { MDXProvider } from "@mdx-js/react"
import Header from "../components/Header"
import Footer from "../components/Footer"

const Layout = ({ children }) => {
  return (
    <MDXProvider
      components={{
        p: props => <p {...props} className="mt-4" />,
      }}
    >
      <div
        className="min-h-full grid"
        style={{
          gridTemplateRows: "auto 1fr auto",
        }}
      >
        <Header />
        <main>{children}</main>
        <Footer />
      </div>
    </MDXProvider>
  )
}

Layout.propTypes = {
  children: PropTypes.any,
}

export default Layout

Create projects component

Alrite, alrite, alrite. We are about halfway through.

Most of the configuration is now done for the basic portfolio, so let's go ahead and create the last two sections. Let's create some example projects that we want to feature on the front page of our portfolio.

Create a new file src/content/project/<your-project>/<your-project>.mdx for instance and an accompanying image for your project. I'm calling mine "Project Uno".

---
title: 'Project Uno'
category: 'Featured Project'
screenshot: './project-uno.jpg'
github: 'https://github.com/daniel-norris'
external: 'https://www.danielnorris.co.uk'
tags:
    - React
    - Redux
    - Sass
    - Jest
visible: 'true'
position: 0
---

Example project, designed to solve customer's X, Y and Z problems. Built with Foo and Bar in mind and achieved over 100% increase in key metric.

Now do the same for two other projects.

Once you're done, we'll need to create an additional GraphQL query for the project component. We'll want to filter out any other files in the content directory that are not associated with projects and only display projects that have a visible frontmatter attribute equal to true. Let's all sort the data by their position frontmatter value in ascending order.

Add this query to your index.js page.

project: allMdx(
            filter: {
                fileAbsolutePath: { regex: "/project/" }
                frontmatter: { visible: { eq: "true" } }
            }
            sort: { fields: [frontmatter___position], order: ASC }
        ) {
            edges {
                node {
                    body
                    frontmatter {
                        title
                        visible
                        tags
                        position
                        github
                        external
                        category
                        screenshot {
                            childImageSharp {
                                fluid {
                                    ...GatsbyImageSharpFluid
                                }
                            }
                        }
                    }
                }
            }
        }

Let's now create our Project component. You'll need to iterate over the content object to display all of the projects you have just created.

import React from "react"
import { MDXRenderer } from "gatsby-plugin-mdx"
import Icon from "../components/icons/index"
import Img from "gatsby-image"

const Project = ({ content }) => {
  return (
    <section id="projects" className="my-8 w-3/5 mx-auto">
      {content.map((project, key) => {
        const { body, frontmatter } = project.node

        return (
          <div className="py-8 flex" key={frontmatter.position}>
            <div className="w-1/3">
              <h1 className="text-xs font-bold uppercase text-red-500">
                {frontmatter.category}
              </h1>
              <h2 className="text-3xl font-bold mb-6">{frontmatter.title}</h2>
              <div className=" font-light text-lg flex justify-between">
                <div>
                  <MDXRenderer>{body}</MDXRenderer>
                  <div className="flex text-sm font-bold text-red-500 ">
                    {frontmatter.tags.map((tag, key) => {
                      return <p className="mr-2 mt-6">{tag}</p>
                    })}
                  </div>
                  <div className="flex mt-4">
                    <a href={frontmatter.github} className="w-8 h-8 mr-4">
                      <Icon name="github" />
                    </a>
                    <a href={frontmatter.external} className="w-8 h-8">
                      <Icon name="external" />
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div className="w-full py-6">
              <Img fluid={frontmatter.screenshot.childImageSharp.fluid} />
            </div>
          </div>
        )
      })}
    </section>
  )
}

export default Project

I've created an additional External.js icon component for the external project links. You can find additional svg icons at https://heroicons.dev/.

Let's now import this into our index.js file and pass it the data object as a prop.

import Project from "../components/Project"

export default ({ data }) => {
  return (
    <Layout>
      ...
      <Project content={data.project.edges} />
      ...
    </Layout>
  )
}

Create a contact me component

The final section requires us to build out a contact component. You could do this in a few ways but we're just going to include a button with a mailto link for now.

Let's start by creating a contact.mdx file.

---
title: Get In Touch
callToAction: Say Hello
---

Thanks for working through this tutorial.

It's always great to hear feedback on what people think of your content and or even how you may have used this tutorial to build your own portfolio using Gatsby.

Ways you could show your appreciation 🙏 include: dropping me an email below and let me know what you think, leave a star ⭐ on the GitHub repository or send me a message on Twitter 🐤.

Create a new GraphQL query for the contact component.

contact: allMdx(filter: { fileAbsolutePath: { regex: "/contact/" } }) {
edges {
node {
frontmatter {
title
callToAction
}
body
}
}
}

Let's now create a Contact.js component.

import React from "react"
import { MDXRenderer } from "gatsby-plugin-mdx"

const Contact = ({ content }) => {
  const { frontmatter, body } = content[0].node

  return (
    <section
      id="contact"
      className="mt-6 flex flex-col items-center justify-center w-3/5 mx-auto min-h-screen"
    >
      <div className="w-1/2">
        <h3 className="text-5xl font-bold mb-6 text-center">
          {frontmatter.title}
        </h3>
        <div className="text-lg font-thin">
          <MDXRenderer>{body}</MDXRenderer>
        </div>
      </div>
      <a href="mailto:dan.norris@hotmail.com">
        <button className="bg-red-500 hover:bg-red-400 text-white font-bold py-2 px-4 border-b-4 border-red-700 hover:border-red-500 rounded mt-6">
          {frontmatter.callToAction}
        </button>
      </a>
    </section>
  )
}

export default Contact

The last thing to do is import it into the index.js file.

import Contact from "../components/Contact"

export default ({ data }) => {
  return (
    <Layout>
      ...
      <Contact content={data.contact.edges} />
      ...
    </Layout>
  )
}

Making your portfolio responsive

If we inspect our site using Chrome F12 then we can see that not all the content is optimised for mobile. The biggest problems appear to be images and spacing around the main sections. Luckily with Tailwind, setting styles for particular breakpoints takes little to no time at all. Let's do that now.

If we take a look at the Header.js component we can see that the nav bar is looking a bit cluttered. Ideally what we would do here is add a hamburger menu button but we're going to keep this simple and add some breakpoints and change the padding.

Tailwind CSS has a number of default breakpoints that you can prefix before classes. They include sm (640px), md (768px), lg (1024px) and xl (1280px). It's a mobile-first framework and so if we set a base style, e.g. sm:p-8 then it will apply padding to all breakpoints over 640px.

Let's improve the header by applying some breakpoints.

// Header.js

<header className="flex items-center justify-between py-2 px-1 sm:py-6 sm:px-12 border-t-4 border-red-500">
  ...
</header>

Let's do the same for the hero component.

// Hero.js

<div className="flex items-center bg-pattern shadow-inner min-h-screen">
  ...
  <section class="mx-auto container w-4/5 sm:w-3/5">
    ...
    <p className="font-thin text-2xl sm:w-4/5">
      <MDXRenderer>{body}</MDXRenderer>
    </p>
    ...
  </section>
  ...
</div>

Your projects component will now look like this.

import React from "react"
import { MDXRenderer } from "gatsby-plugin-mdx"
import Icon from "../components/icons/index"
import Img from "gatsby-image"

const Project = ({ content }) => {
  return (
    <section id="projects" className="my-8 w-4/5 md:w-3/5 mx-auto">
      {content.map((project, key) => {
        const { body, frontmatter } = project.node

        return (
          <div className="py-8 md:flex" key={frontmatter.position}>
            <div className="md:w-1/3 mr-4">
              <h1 className="text-xs font-bold uppercase text-red-500">
                {frontmatter.category}
              </h1>
              <h2 className="text-3xl font-bold mb-6">{frontmatter.title}</h2>
              <div className="md:hidden">
                <Img fluid={frontmatter.screenshot.childImageSharp.fluid} />
              </div>
              <div className=" font-light text-lg flex justify-between">
                <div>
                  <MDXRenderer>{body}</MDXRenderer>
                  <div className="flex text-sm font-bold text-red-500 ">
                    {frontmatter.tags.map((tag, key) => {
                      return <p className="mr-2 mt-6">{tag}</p>
                    })}
                  </div>
                  <div className="flex mt-4">
                    <a href={frontmatter.github} className="w-8 h-8 mr-4">
                      <Icon name="github" />
                    </a>
                    <a href={frontmatter.external} className="w-8 h-8">
                      <Icon name="external" />
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div className="hidden md:block w-full py-6">
              <Img fluid={frontmatter.screenshot.childImageSharp.fluid} />
            </div>
          </div>
        )
      })}
    </section>
  )
}

export default Project

Finally, your contact component should look something like this.

import React from "react"
import { MDXRenderer } from "gatsby-plugin-mdx"

const Contact = ({ content }) => {
  const { frontmatter, body } = content[0].node

  return (
    <section
      id="contact"
      className="mt-6 flex flex-col items-center justify-center w-4/5 sm:w-3/5 mx-auto min-h-screen"
    >
      <div className="sm:w-1/2">
        <h3 className="text-5xl font-bold mb-6 text-center">
          {frontmatter.title}
        </h3>
        <div className="text-lg font-thin">
          <MDXRenderer>{body}</MDXRenderer>
        </div>
      </div>
      <a href="mailto:dan.norris@hotmail.com">
        <button className="bg-red-500 hover:bg-red-400 text-white font-bold py-2 px-4 border-b-4 border-red-700 hover:border-red-500 rounded mt-6">
          {frontmatter.callToAction}
        </button>
      </a>
    </section>
  )
}

export default Contact

Using Framer Motion to animate your components

Framer is an incredibly simple and straight forward way to animate your React projects. It's API is well documented and can be found here. Motion enables you to declaratively add animations and gestures to any html or svg element.

For simple use cases, all you need to do is import the motion component and pass it a variants object with your start and end state values. Let's do that now and stagger transition animations for the header and hero components. Add this to your Header.js component and swap our the header element for your new motion.header component.

// Header.js

import { motion } from 'framer-motion'

...

const headerVariants = {
    hidden: {
        opacity: 0,
        y: -10,
    },
    display: {
        opacity: 1,
        y: 0,
    },
}

...

<motion.header
    className="flex items-center justify-between py-2 px-1 sm:py-6 sm:px-12 border-t-4 border-red-500"
    variants={headerVariants}
    initial="hidden"
    animate="display">
   ...
</motion.header>

Let's do the same with the Hero.js component. Except this time, we'll add an additional transition prop to each element with an incremental delay to make the animation stagger. Your final Hero.js component should look like this.

import React from "react"
import { Link } from "gatsby"
import { MDXRenderer } from "gatsby-plugin-mdx"
import { navLinks } from "../config/index"
import { motion } from "framer-motion"

const Hero = ({ content }) => {
  const { frontmatter, body } = content[0].node
  const { button } = navLinks

  const variants = {
    hidden: {
      opacity: 0,
      x: -10,
    },
    display: {
      opacity: 1,
      x: 0,
    },
  }

  return (
    <div className="flex items-center bg-pattern shadow-inner min-h-screen">
      <div className="bg-white w-full py-6 shadow-lg">
        <section class="mx-auto container w-4/5 sm:w-3/5">
          <motion.h1
            className="uppercase font-bold text-lg text-red-500"
            variants={variants}
            initial="hidden"
            animate="display"
            transition={{ delay: 0.6 }}
          >
            {frontmatter.intro}
          </motion.h1>
          <motion.h2
            className="font-bold text-6xl"
            variants={variants}
            initial="hidden"
            animate="display"
            transition={{ delay: 0.8 }}
          >
            {frontmatter.title}
          </motion.h2>
          <motion.p
            className="font-thin text-2xl sm:w-4/5"
            variants={variants}
            initial="hidden"
            animate="display"
            transition={{ delay: 1 }}
          >
            <MDXRenderer>{body}</MDXRenderer>
          </motion.p>

          <Link to={button.url}>
            <motion.button
              className="bg-red-500 hover:bg-red-400 text-white font-bold py-2 px-4 border-b-4 border-red-700 hover:border-red-500 rounded mt-6"
              variants={variants}
              initial="hidden"
              animate="display"
              transition={{ delay: 1.2 }}
            >
              {button.name}
            </motion.button>
          </Link>
        </section>
      </div>
    </div>
  )
}

export default Hero

Deployment using Netlify

We're nearly there. All that is left to do is push your finished project to GitHub, GitLab or BitBucket and deploy it. We're going to use Netlify to deploy our site. One of the advantages of using a Static Site Generator for your portfolio is that you can use a service like Netlify to host it.

This brings a lot of benefits; not only is it extremely easy to use but it has continuous deployment setup automatically. So, if you ever make any changes to your site and push to your master branch - it will automatically update the production version for you.

If you head over to https://app.netlify.com/ and choose "New site from git" you'll be asked to choose your git provider.

The next page should be automatically populated with the correct information but just in case, it should read as:

Branch to deploy: "master"
Build command: "gatsby build"
Publish directory: public/

Once you've done that click deploy and voila!

Summary

Well congratulations for making it this far. You should now have made, completely from scratch, your very own portfolio site using Gatsby. You have covered all of the following functionality using Gatsby:

Installation and setting up
Configuring Tailwind CSS using PostCSS and Purge CSS
Building layouts
Creating helper functions
Querying with GraphQL and using the Gatsby GUI
Implementing MDX
Working with images in Gatsby
Making your site responsive using Tailwind CSS
Deploying using Netlify

You have a basic scaffold from which you can go ahead and extend as you see fit. The full repository and source code for this project is available here.

If you've found this tutorial helpful, then please let me know. You can connect with me on Twitter at @danielpnorris.

How I Secured My First Software Engineer Job In 4 Weeks

Dan Norris — Wed, 12 Aug 2020 16:20:51 +0000

…after graduating from a bootcamp, with no CS degree and during the worst economic contraction on record within the UK.

2020 in many ways, hasn’t lived up to my expectations and I’m sure it’s probably true for you too. Here in the UK alone, we’ve seen the economy shrink more than ever recorded in history and a 48.9% drop in job opportunities compared to the same time last year.

When I originally chose to make a career change in late December 2019, I wasn’t expecting to face such tough market conditions in the pursuit for my first job as a Junior Developer.

Since graduating from the bootcamp, I’ve had a lot of people approach me asking how I approached the job search and whether I could provide any advice. I’ve shared the same information with other students from my bootcamp cohort who have reported good results and now I’m sharing it here with you in the hope that it helps you to find your next role.

About Me

Firstly, just a bit about me and why what I have to say might be of use to you. I’ve been a Technical Recruiter for the past 5 years here in the UK. For those of you reading this from across the pond, or with no prior knowledge of the UK recruitment market, and wondering how that is dissimilar to an internal recruiter at say, Google, then let me explain.

Unlike an internal recruiter, I worked with not just one but a large number of organisations from early seed to FTSE100 and helped them to find professionals with a technology background to join their business. That also included the business development, acquisition, and later retention of these relationships.

It’s this last part, that’s particularly relevant to what I’m going share with you because how I approached business development as a Technical Recruiter is not too dissimilar to how I approached job searching as a Software Engineer.

You might be wondering, well if “he worked as a Recruiter for 5 years, then it’s no wonder he managed to find a job in 4 weeks” but I worked specifically around Data and with companies based in London, not Bristol. None of the companies I approached were prior clients.

Get Organised

This is important and something that I would regularly see professionals fail to do in my time working as a Recruiter. Keep a log of what you have applied to; not only for your own reference but because it serves as a great list to follow up on at the end of a week and can become quite a useful tool for you to analyse how your job search is going.

I’ve included a basic spreadsheet that I used as part of my job search that is a bit rough and ready but served as a great tool to enable me to keep track of everything. It includes things like:
company

job description URL
technology stack
equity
pay
location
hiring manager
interview dates
feedback

Download it here. Feel free to amend it and use it how you see fit.

Know Your USP

How are you different?

You’ll re-use the answer to these questions time and time again, while networking, connecting on LinkedIn and during your interview. It’s your elevator pitch. It doesn’t need to be an essay it can be literally 30 seconds but you need to have this nailed and you need to be able to tailor this to your audience on demand.

Let me give you an example. I have an unorthodox journey to becoming a Software Engineer. I graduated from university with a Law degree, did a year and a half as a Paralegal within Financial Services, then 5 years in sales as a Technical Recruiter, then did a web development bootcamp which included React and Laravel among other things.

However, whenever I applied to something I would think of a way of making some part of that journey relevant to the person I was speaking to at the time. E.g. if it was a startup digital agency that built e-commerce web solutions for clients using React and X technology, I would highlight how my experience working with lots of clients including startups was transferable to a digital agency, that my React experience would enable me to hit the ground running and that I had previously set up an e-commerce “side hustle” in my free time.

Find your USP. It will help you to stand out.

Level Up Your Digital Footprint

By “digital footprint”, I’m also talking about your resume here. It’s all digital these days, right?

A lot of this may sound fairly obvious but as a Recruiter, I’ve noticed in the past how many people do not do this particularly well. You should have at a bare minimum the following:

portfolio page
LinkedIn profile
GitHub or equivalent profile
resume

You could also consider investing time into:

blog
Twitter presence
open-source contributions

When I went through this process, I did everything. I started building my Twitter account, a blog, and an open-source project during the bootcamp so that I could leverage all of it but didn’t overwhelm myself when the time came to start looking for jobs.

How to write effective content for a blog, how to grow your Twitter following, and how to create your first open-source contribution are all large enough topics for their own articles, so I won’t cover them here.

It’s A Full-Time Job

Finding a job is a full-time job in its own right, that’s probably never been more true than now in this current climate. Make sure you plan each day or week and set yourself goals for what you want to achieve in terms of output during that time. This is where the spreadsheet included above will help and enable you to stay accountable to yourself about your own productivity.

Some things that worked for me included getting myself into a routine as if I was going to work, streamlining repetitive tasks as much as possible and setting up a workflow that automated a lot of the “searching” part of job searching.

Curating a list of sources and using alerts, e.g. job boards, LinkedIn, platforms like HackerRank were great ways to set up automated job notifications so I could focus on chasing up applications, liaising with recruiters and preparing for interviews.

Constantly Build Your Portfolio

As a Junior Developer or someone with zero commercial experience, your portfolio will be one of the single most important things you show to a prospective employer.

If you have just finished at a bootcamp, as I had, then you’ll no doubt have graduated with a portfolio of work but so will everyone else.

Continue to build on your portfolio and each time you build a new project, challenge yourself further than the last time. This is where you could even blog about the new challenging project you are building, tweet about it, post it on LinkedIn, connect with other like-minded developers, and gain some additional support and a wider professional network.

Building independently demonstrates multiple things to prospective employers:

you can learn on your own;
you’re passionate about what you are doing;
you can problem solve technical challenges independently;

I’m convinced the open-source project I started during the bootcamp and later finished immediately after graduating was pivotal to me securing a job in this economic climate. It wasn't strictly speaking unique and I never even fully completed it but it was a focal point during all my interviews.

Apply, Apply, Apply…

This is incredibly important. There are two points to make here; (1) as a former Recruiter, I can tell you that there is a significant shortage of Software Developers, at least in the UK. Demand far outweighs supply. This is good for you but only if you leverage it.

There have been too many times to remember where I have previously worked with an organisation and they have considered someone who applied for a role but was less experienced than the job description originally specified. The job I eventually was offered was for a Software Engineer position.

I originally applied for a Senior Software Engineer role, knowing that there was absolutely no way I would be able to secure a Senior role but hoping that they may be open to considering someone more junior.

Too many people I speak to are reluctant to apply to jobs that they feel they don’t completely match. Don’t fall into that trap, just apply.

Secondly, (2) it’s people who are reviewing your resume and deciding whether to progress you to interview or offer you the job. People in my experience are inherently subjective. I’ve seen hiring managers discard a person’s resume in a matter of seconds because of a typo but seen the very same candidates secure an almost identical role with a similar company using the same resume.

Apply, to a lot of places. Having multiple options and multiple conversations happening is not only motivational during the process but it puts you in a better position to negotiate salary and package when you eventually do receive an offer.

Networking 2.0.

In a pre-pandemic world, this point would be a lot easier to achieve but social distancing makes meeting people particularly difficult at the moment.

The good news is that many development communities appear to have rapidly adapted to the new norm and you can find a lot of meetups are now available remotely.

A great to start is https://www.meetup.com/. Find a local meetup that’s relevant to you and start to engage with the local community, make some connections and network. You never know, your next interview or job offer may come from someone you met at a meetup.

Twitter and LinkedIn are great tools for this and you can start with absolutely no following and still make it work for you. I had, and still currently have less than 300 followers on Twitter at the time of writing, but managed to receive a job interview at a FTSE100 company simply by engaging with other Developers on there. You can too, you just have to start.

Skipping Gatekeepers

If you’ve made it this far, then thanks for reading!

This last point is probably the single most important piece of information I can share with you. A common challenge you’ll find is that determining if your resume and technical experience is up to par is quite commonly left to someone with little to no technical experience.

Removing the middleman from the equation brings a lot of benefits. I used the same technique as a Recruiter to develop relationships with new clients and I used it again as a job seeker looking for my first Developer role.

Here’s the process I would follow after submitting an application for every job role:

identify the hiring manager online using Twitter or LinkedIn
follow or send a connection request
send them a DM or message expressing my interest in the role
follow up in a few days

This might seem rather eager but using this process helped me to increase my response rate in the second week of searching to over 60% compared to the ~5% response I was receiving in the first week. I’ve included an example LinkedIn message below that resulted in an interview:

“Hi …,
I’ve applied on … for a senior role to send my CV across to you but I’m actually speculatively applying for a Developer role in the team. I’ve graduated from a bootcamp and have been working on full stack applications using PHP and React.

I’m keen to discuss further if of interest.”

The benefits I noticed using this approach included things like:

significantly faster response (sometimes the same morning)
direct dialogue with decision makes which helped me influence things more
ability to ask for constructive feedback when rejected
increased response rate
increased interview percentage

I hope the information above was helpful to you and helps you to find your next role. If this does help you, then it would be great to hear about it so send me a message on Twitter (@danielpnorris) or leave a comment below.

DEV Community: Dan Norris

How To Build A Portfolio Using Gatsby - Part 2

Who is this for?

What will this cover?

Why MDX?

What are you going to build?

Create a blog page

Configure the Gatsby filesystem plugin

Create your first MDX blog articles

Create slugs for your MDX blog posts

Programmatically create your MDX pages using the createPages API

Create a blog post template

Dynamically show article read times

Make an index of blog posts

Create a featured posts section

Customise your MDX components

Add syntax highlighting for code blocks

Add a featured image to blog posts

Add Google Analytics

Summary

How To Build A Portfolio Using Gatsby - Part 1

Who is this for?

What will this cover?

Why Gatsby?

What are you going to build?

Setting up

Configuring Tailwind CSS

Create site config file

Create layout component

Create a header component

Create icon component and helper function

Create footer component

Create a hero component

Implement MDX into your site

Make your first GraphQL query

Set up image plugins

Create an about component

Create projects component

Create a contact me component

Making your portfolio responsive

Using Framer Motion to animate your components

Deployment using Netlify

Summary

How I Secured My First Software Engineer Job In 4 Weeks

About Me

Get Organised

Know Your USP

Level Up Your Digital Footprint

It’s A Full-Time Job

Constantly Build Your Portfolio

Apply, Apply, Apply…

Networking 2.0.

Skipping Gatekeepers

Configure the Gatsby `filesystem` plugin

Programmatically create your MDX pages using the `createPages` API