Image-heavy photography portfolio with colorful accents & customizable pages. Includes adaptive image grids powered by CSS grid and automatic image integration into projects.

Read the Source Code.

Also, be sure to check out other Free & Open Source Gatsby Themes and my Personal Website.

Features

• MDX
• Theme UI-based theming
• Create a project by creating an MDX file and dropping the images into the same folder
• Extensible custom pages
• Define colors for each page, and the sidebar & content will adapt while maintaining WCAG 2 AA contrast ratios

Installation

npm install @lekoarts/gatsby-theme-jodie

Install as a starter

This will generate a new site that pre-configures use of the theme.

gatsby new jodie LekoArts/gatsby-starter-portfolio-jodie

View the starter's code

Usage

Theme options

| Key | Default Value | Description | | ---------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------- | | basePath | / | Root url for the theme | | projectsPath | content/projects | Location of projects | | projectsUrl | /projects | url for the projects overview | | projectsPrefix | / | Prefix for all individual projects | | pagesPath | content/pages | Location of pages | | formatString | DD.MM.YYYY | Configure the date format for Date fields | | navigation | [] | Add links to your internal sites to the sidebar | | homepagePageLimit | 9999 | Configure how many pages (defined in pagesPath should be shown on the homepage (/) | | homepageProjectLimit | 3 | Configure how many projects (defined in projectsPath should be shown on the homepage (/) | | mdx | true | Configure gatsby-plugin-mdx (if your website already is using the plugin pass false to turn this off) | | sharp | true | Configure gatsby-plugin-sharp (if your website already is using the plugin pass false to turn this off) |

Example usage

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `@lekoarts/gatsby-theme-jodie`,
      options: {
          navigation: [
            { name: `Projects`, slug: `/projects` },
            { name: `Instagram`, slug: `/instagram` },
            { name: `About`, slug: `/about` },
          ],
        }
      }
    }
  ]
};

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: {
    // Used for the title template on pages other than the index site
    siteTitle: `Jodie`,
    // Default title of the page
    siteTitleAlt: `Jodie - @lekoarts/gatsby-theme-jodie`,
    // Can be used for e.g. JSONLD
    siteHeadline: `Jodie - Gatsby Theme from @lekoarts`,
    // Will be used to generate absolute URLs for og:image etc.
    siteUrl: `https://jodie.lekoarts.de`,
    // Used for SEO
    siteDescription: `Image-heavy photography portfolio with colorful accents & customizable pages. Includes adaptive image grids powered by CSS grid and automatic image integration into projects.`,
    // Will be set on the html tag
    siteLanguage: `en`,
    // Used for og:image and must be placed inside the `static` folder
    siteImage: `/banner.jpg`,
    // Twitter Handle
    author: `@lekoarts_de`,
  },
};

Customizing the homepage

Both your projects and pages are displayed on the homepage (located at / in the live project and src/components/homepage.tsx in the theme itself). Of course, you can always shadow this and other files to customize the theme to your liking.

However, before completely overriding the homepage you should consider the three available options:

1. homepagePageLimit
2. homepageProjectLimit
3. Shadowing modify-grid.ts

The options 1) and 2) are explained in the theme options -- they limit the number of projects and pages that will randomly be distributed on the page.

Option 3) is a really powerful one! The modifyGrid function is wrapping the entire array of projects & pages before passing it to the render function of the React component. Or in other words: As the name suggests you can modify the items that are passed to the grid on the homepage.

You can achieve this by shadowing modify-grid.ts: Create a file at src/@lekoarts/gatsby-theme-jodie/utils/modify-grid.js and define a default export for modifyGrid.

modifyGrid examples

All code snippets are placed inside src/@lekoarts/gatsby-theme-jodie/utils/modify-grid.js

Default behavior:

const modifyGrid = (data) => data;

export default modifyGrid;

I've also created some resolver templates that you can use. They are exported in resolver-templates.ts. They cover the most common use cases and can give you an idea on what to do with the resolver.

Only pages / Only projects:

import {
  onlyPages,
  onlyProjects,
} from "@lekoarts/gatsby-theme-jodie/src/utils/resolver-templates";

const modifyGrid = (data) => onlyPages(data);
// const modifyGrid = (data) => onlyProjects(data)

export default modifyGrid;

Filter by slug:

import { filterBySlug } from "@lekoarts/gatsby-theme-jodie/src/utils/resolver-templates";

const modifyGrid = (data) => filterBySlug(data, ["/about"]);

export default modifyGrid;

Shuffle:

import { shuffle } from "@lekoarts/gatsby-theme-jodie/src/utils/resolver-templates";

const modifyGrid = (data) => shuffle(data);

export default modifyGrid;

Shadowing

Please read the guide Shadowing in Gatsby Themes to understand how to customize this theme! Generally speaking you will want to place your files into src/@lekoarts/gatsby-theme-jodie/ to shadow/override files.

Changelog

You can find the extensive changelog of changes on GitHub. You'll be able to see each patch, minor, and major changes and what pull requests contributed to them.

Questions?

If you have general questions or need help with Gatsby, please go to one of the support platforms mentioned in Gatsby's documentation. If you have a specific question about this theme, you can head to the GitHub Discussions of the repository.

🌟 Supporting me

Thanks for using this project! I'm always interested in seeing what people do with my projects, so don't hesitate to tag me on Twitter and share the project with me.

Please star this project, share it on Social Media or consider supporting me on Patreon or GitHub Sponsor!