Skip to content
A gatsby theme to quickly build about pages for your blog
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
node_modules/.bin
src
.gitignore
README.md
gatsby-config.js
gatsby-node.js
index.js
package.json
yarn.lock

README.md

gatsby-theme-about-me (in beta, so expect frequent changes)

A gatsby theme to quickly build about pages for your blog. While this theme is currently live at https://maecapozzi.com/about-me, it's still in beta, and as such has some kinks to work out!

If you'd like to use this package:

Install it:

yarn add `gatsby-theme-about-me`

Add it to your gatsby-config.js

plugins: [
 {
  resolve: `gatsby-theme-about-me`,
    options: {
      contentPath: `data`,
      imagePath: `images`
    }
 }
]

The contentPath should point to a directory named data in your filesystem. Under /data, add a json file called about.json. For the theme to work, it needs to follow this structure:

{
  "id": "1",
  "name": "About Me",
  "bio": "Hi, I'm Mae Capozzi. Welcome to my corner of the internet. I'm a Brooklyn-based software engineer interested in design systems, component libraries, and the JAMStack.",
  "sections": [
    {
      "id": "1",
      "header": "Find me on the internet",
      "links": [
        {
          "name": "Github",
          "link": "https://github.com/maecapozzi/"
        },
        { "name": "Twitter", "link": "https://twitter.com/MCapoz" },
        { "name": "Email", "link": "mailto:maecapozzi@gmail.com" }
      ]
    },
    {
      "id": "2",
      "header": "Open Source Projects",
      "links": [
        {
          "name": "gatsby-theme-about-me",
          "link": "https://github.com/maecapozzi/gatsby-theme-about-me"
        },
        {
          "name": "react-scroll-activator",
          "link": "https://github.com/maecapozzi/react-scroll-activator"
        }
      ]
    },
    {
      "id": "3",
      "header": "Work",
      "links": [
        {
          "name": "501 Auctions"
        },
        {
          "name": "Thrive Global"
        },
        {
          "name": "InRhythm"
        },
        { "name": "Harry's" }
      ]
    }
  ]
}

The imagePath should point to a directory called images. Add an image under /images called profile-pic.jpg. That should allow you to render an image.

If you find any issues or have any suggestions, feel free to open an issue, and I'll do my best to get back to you!

You can’t perform that action at this time.