Gatsby Theme for your personal site

This is a Gatsby theme that I built to participate in Gatsby Theme Jam.

See the live demo

Installation

To use this theme in your Gatsby sites, follow these instructions:

1. Install the theme

npm install --save @rennehir/gatsby-theme-personal-site

2. Add the theme to your gatsby-config.js:

module.exports = {
  plugins: ["@rennehir/gatsby-theme-personal-site"],
}

3. Add content to the /content directory

4. Start your site

gatsby develop

Adding content to your site

This theme follows a content directory structure like this:

content
  +- assets
  +- blog
  +- general
      +- footer
          +- index.yml
      +- hero
          +- index.yml
  +- portfolio
  +- references
  +- services

Add all your assets to the assets directory and you can reference them from other documents.

The general directory holds information that is used for example in hero or footer

content/general/hero/index.yml

greeting: "Hello, I am"
name: "Name"
subtitle: "– a web developer"
image: "../../assets/{your-image}.svg"
imageAltText: "Web Developer"

content/general/footer/index.yml

Add urls to your social media profiles

facebook: ""
github: ""
linkedin: ""
twitter: ""

content/blog/{post}.mdx

Put .mdx files in this directory to turn them into blog posts. Use these fields in the frontmatter:

---
title: Hello World
date: 2019-07-23
cover: "../assets/{your-image}.jpg"
---

content/portfolio/{item}.mdx

Put .mdx files in this directory to turn them into your portfolio items. Use these fields in the frontmatter:

---
title: "title"
publishedDate: 2019-02-12
screenshot: "../assets/{your-image}.png"
---

content/references/{ref}.mdx

Put .mdx files in this directory to turn them into references. Use these fields in the frontmatter:

---
name: Company or person name
publishedDate: 2019-06-15
image: "../assets/{your-image}.png"
---

content/services/{service}.mdx

Put .mdx files in this directory to turn them into services. Use these fields in the frontmatter:

---
title: Application Development
illustration: "../assets/undraw_Mobile_application_mr4r.svg"
---