Gatsby Jodie

by Lennart

Image-heavy photography portfolio with colorful accents & great typography

Gatsby Jodie

A portfolio starter for Gatsby. The target audience are designers and photographers.

Demo Website

Deploy to Netlify Edit gatsby-starter-portfolio-jodie

Netlify Status CircleCI

  • CSS-Grid powered layout with Sidebar
  • Large images & Instagram integration
  • Themeable pages & automatically adapting sidebar

Why?

If you want to quickly bootstrap a design/photography portfolio or use it as a foundation for your personal site, the starters in gatsby-starter-portfolio are a perfect fit for you! The project's goal is to offer minimalistic and fast websites.

I hope you like my starters and create something awesome! To see some of my work, you can visit my website or support me on Patreon to get some neat rewards (4K images, project files, tutorial insights). Every pledge on Patreon helps me create more free starters!

Also, check out the other starters for gatsby-starter-portfolio:

Check out the Gatsby Starter Portfolio Overview!

Features

  • Configurable
    • Use the config to easily change the most important information
    • Change the theming for styled-components
    • Navigation powered by a .yaml file
    • Layout driven by CSS-Grid
  • Create your projects by creating a folder full of images and adding an entry to a .yaml file
  • Shows your Instagram posts
  • TypeScript
  • Cypress for End-to-End testing
  • react-spring animations
  • Uses styled-components + styled-system for styling
  • Google Analytics support
  • SEO
    • Sitemap
    • Schema.org JSONLD
    • OpenGraph Tags
    • Twitter Tags
  • Offline Support
  • WebApp Manifest Support
  • Responsive Images
    • Right image sizes
    • Blurred loading animation
    • WebP support

Getting Started

Check your development environment! You'll need Node.js, the Gatsby CLI and node-gyp installed. The official Gatsby website also lists two articles regarding this topic:

To copy and install this starter run this command (with "project-name" being the name of your folder you wish to install it in):

gatsby new project-name https://github.com/LekoArts/gatsby-starter-portfolio-jodie
cd project-name
npm run develop

Configuring the Instagram source plugin

  1. You need to have a Facebook page (I know... :/)
  2. Go to your site settings -> Instagram -> Login into your Instagram account
  3. Create a app
  4. Go to the Graph API Explorer
    1. Select your App from the top right dropdown menu
    2. Select "Get User Access Token" from dropdown (right of access token field) and select needed permissions (manage_pages, pages_show_list, instagram_basic)
    3. Copy user access token
  5. Access Token Debugger:
    1. Paste copied token and press "Debug"
    2. Press "Extend Access Token" and copy the generated long-lived user access token
  6. Graph API Explorer:
    1. Paste copied token into the "Access Token" field
    2. Make a GET request with "PAGE_ID?fields=access_token"
    3. Find the permanent page access token in the response (node "access_token")
  7. Access Token Debugger:
    1. Paste the permanent token and press "Debug"
    2. "Expires" should be "Never"
    3. Copy the access token
  8. Graph API Explorer:

    1. Make a GET request with "PAGE_ID?fields=instagram_business_account" to get your Business ID

Now create a .env file at the root of the project with the following content:

BUSINESS_ID=YOUR_ID
ACCESS_TOKEN=YOUR_TOKEN

You can paste your access token and Business ID there.

Adding a new project

  1. Create a new folder in content/projects and place your images there
  2. Add your project to the content/projects/projects.yaml file

Adding a new page

Create a new .tsx file in the src/pages directory

Adding new features/plugins

You can add other features by having a look at the official plugins page

Building your site

npm run build

Copy the content of the public folder to your webhost or use a website like Netlify which automates that for you.

Configuration

You can configure your setup in config/index.js:

module.exports = {
pathPrefix: '/', // Prefix for all links. If you deploy your site to example.com/portfolio your pathPrefix should be "portfolio"
siteTitle: 'Jodie', // Navigation and Site Title
siteTitleAlt: 'Jodie - Gatsby Starter Portfolio', // Alternative Site title for SEO
siteTitleShort: 'Jodie', // short_name for manifest
siteHeadline: 'Come & Enjoy our excellent photos', // Headline for schema.org JSONLD
siteUrl: 'https://jodie.lekoarts.de', // Domain of your site. No trailing slash!
siteLanguage: 'en', // Language Tag on <html> element
siteLogo: '/logos/logo.png', // Used for SEO and manifest
siteDescription: 'Image-heavy photography portfolio with colorful accents & great typography',
author: 'LekoArts', // Author for schema.org JSONLD
// siteFBAppID: '123456789', // Facebook App ID - Optional
userTwitter: '@jodie', // Twitter Username
ogSiteName: 'jodie', // Facebook Site Name
ogLanguage: 'en_US', // og:language
googleAnalyticsID: 'UA-XXXXXX-X',
// Manifest and Progress color
themeColor: '#db7436',
backgroundColor: '#3b3c4f',
}

You can also configure the styling of the site by editing the theme variables in config/theme.ts.

interface ThemeShape {
breakpoints: string[]
fontSizes: string[]
colors: {
[key: string]: string
}
space: string[]
fontWeights: {
[key: string]: number
}
sidebarWidth: {
[key: string]: string
}
}
const theme: ThemeShape = {
breakpoints: ['480px', '650px', '1000px', '1200px', '1400px'],
fontSizes: ['1rem', '1.2rem', '1.44rem', '1.728rem', '2.074rem', '2.488rem'],
colors: {
primary: '#c66131',
secondary: '#494992',
grey: '#646066',
shade: '#f5f5f5',
},
space: [
'0',
'0.25rem',
'0.5rem',
'0.75rem',
'1rem',
'1.25rem',
'1.5rem',
'2rem',
'2.5rem',
'3rem',
'4rem',
'6rem',
'8rem',
'12rem',
'16rem',
],
fontWeights: {
normal: 400,
bold: 700,
},
sidebarWidth: {
big: '375px',
normal: '320px',
},
}
export default theme

Attention: You also need to edit static/robots.txt to include your domain!

MIT License
Free
PreviewGet

Deploy theme in one click

Deploy to netlify
Gatsby

Gatsby template

  • Compatible with Gatsby v2
  • It is a Gatsby starter
Markdown

Compatible with Markdown

  • This template uses only local files