Gatsby Theme - Simple Bio

This theme is developed using gatsby. One can use this theme for having a website with brief introduction and social profiles.

See the live demo.

Installation

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

1. Install the theme

   npm install --save gatsby-theme-simple-bio

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

   module.exports = {
     plugins: [
       {
         resolve: 'gatsby-theme-simple-bio',
         options: {
           // See Options section for more details
         }
       }
     ]
   }

3. Start your site

   gatsby develop

Usage

Site setup

• Required directories
  • author

├── author
│   └── john-doe.yml
├── content
│   ├── assets
│   │   ├── profile.png
│   │   └── profile.svg
│   └── home
│       └── index.mdx
├── gatsby-config.js
├── package-lock.json
├── package.json
└── src
    ├── gatsby-theme-simple-bio
    │   ├── components
    │   │   └── bio
    │   │       └── figure.js
    │   └── gatsby-plugin-theme-ui
    │       ├── colors.js
    │       └── index.js
    └── pages
        └── 404.js

• You need to have an author directory which contains a yml file containing author information
• The structure of yml file in author is expected to be

# Author info
name: John Doe
description: A passionate web designer
cover: ../content/assets/profile.png
username:
  linkedin: john-doe
  github: john-doe
  facebook: john.doe
  twitter: john_doe
  email: [email protected]
positions:
  - title: Position 1
    company: XYZ Company
    duration: July YYYY - Present
  :
  :

• The image provided in cover entry of yml is expected to be an image file (other than SVGs) which is locally present (Currently online image links are not supported)

NOTE: This image should be present in the directory specified by assetsPath in theme options.

• If you don't wish to provide any usernames, make the entry an empty string as below

username:
  github: ""

• Description of the person should be provided in the folder specified in homePath option of the theme. The MDX file present in this folder should have type "home-page" in the front matter.

Theme Options

Below are the options available for the theme

// Base url for rendering site
baseUrl: "/", // Default: "/"
// Directory path for images
assetsPath: "content/assets", // Default: "content/assets"
// Directory path for MDX home page content
homePath: "content/home", // Default: "content/home"
// Should the theme have rounded components
rounded: false, // Default: false

| Key | Default | Description | |------------------|----------------------|------------------------------------------| | baseUrl | / | Base url for rendering site | | assetsPath | content/assets | Directory path for images | | homePath | content/home | Directory path for MDX home page content | | rounded | false | Should the theme have rounded components |

Additional configuration

In addition to the theme options, there are a handful of items you can customize via the siteMetadata object in your site's gatsby-config.js

// gatsby-config.js
module.exports = {
  siteMetadata: {
    // Name of the gatsby site
    appName: "Demo of gatsby-theme-simple-bio",
    // Used for the site title and SEO
    title: "Demo of gatsby-theme-simple-bio",
    // Used to provide alt text for your avatar
    author: "John Doe",
    // URL for the website
    siteUrl: "https://www.gatsbyjs.org",
    // Used for SEO
    description:
      "This site is a demonstration for using theme " +
      "gatsby-theme-simple-bio",
    // Used for social links in the root footer
    social: {
      // Facebook
      facebook: "john-doe",
      // Twitter
      twitter: "john-doe",
      // Email
      email: "john-doe",
      // LinkedIn
      linkedin: "john-doe",
      // Github
      github: "john-doe",
    },
  },
}

Features

• Support for theme-ui
• Responsive mobile friendly UI
• Dark/Light modes