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:
- Install the theme
npm install --save @rennehir/gatsby-theme-personal-site
- Add the theme to your
gatsby-config.js
:
module.exports = {
plugins: ["@rennehir/gatsby-theme-personal-site"],
}
-
Add content to the
/content
directory -
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"
---