A portfolio starter for Gatsby (White Theme, Grid Layout). The target audience are designers and photographers.
Switch branches/tags
Nothing to show
Clone or download
Latest commit 124d8d5 Nov 2, 2018
Failed to load latest commit information.
bin General fixes Nov 2, 2018
config Update SEO component Sep 18, 2018
content/projects Update headers Nov 2, 2018
src General fixes Nov 2, 2018
static Update robots.txt Jun 1, 2018
.eslintrc Initial commit Aug 6, 2018
.gitignore Initial commit Aug 6, 2018
LICENSE Initial commit Oct 18, 2017
README.md Add codesandbox Nov 2, 2018
gatsby-config.js Fix weird error Nov 2, 2018
gatsby-node.js Initial commit Aug 6, 2018
package.json Update packages Nov 2, 2018
yarn.lock Update packages Nov 2, 2018


Gatsby Starter Portfolio: Emma

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

Demo Website

Deploy to Netlify Edit gatsby-starter-portfolio-emma

  • Full-width grid-layout
  • Large images
  • Light theme


If you want to quickly bootstrap a design/photography portfolio or use it as a foundation for your personal site the 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 creating more free starters!

Also check out the other gatsby-starter-portfolio:

Check out the Gatsby Starter Portfolio Overview!


  • Gatsby v2.0.0
  • Configurable
    • Use the website.js to easily change the most important information
    • Easily change the font
  • Random colors for your covers and project views
  • Uses Emotion for styling
  • Projects in Markdown
  • Google Analytics Support
  • SEO
    • Sitemap
    • Schema.org JSONLD
    • OpenGraph Tags
    • Twitter Tags
  • Offline Support
  • WebApp Manifest Support
  • Typography.js
  • Responsive images
    • The right image size for every screen size
    • Traced SVG loading (lazy-loading)
    • 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-emma
cd project-name
npm run dev

Adding a new project

  • Create a new folder in content/projects with the current date (Format: YYYY-MM-DD)
  • Create a new markdown file, add the frontmatter (use the same date format)
  • Add an image and reference it in your frontmatter as cover
  • Write your content below the frontmatter

If you're still unsure have a look at the already existing examples.

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.


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

module.exports = {
  pathPrefix: '/', // Prefix for all links. If you deploy your site to example.com/portfolio your pathPrefix should be "portfolio"
  siteTitle: 'Emma', // Navigation and Site Title
  siteTitleAlt: 'Emma - Gatsby Starter Portfolio', // Alternative Site title for SEO
  siteUrl: 'https://portfolio-emma.netlify.com', // Domain of your site. No trailing slash!
  siteLanguage: 'en', // Language Tag on <html> element
  siteLogo: '/logos/logo-1024.png', // Used for SEO and manifest
  siteDescription: 'Minimalistic bright portfolio with full-width grid and large images',
  author: 'LekoArts', // Author for schemaORGJSONLD
  // siteFBAppID: '123456789', // Facebook App ID - Optional
  userTwitter: '@emma', // Twitter Username
  ogSiteName: 'emma', // Facebook Site Name
  ogLanguage: 'en_US',
  googleAnalyticsID: 'UA-12345689-1',
  // Manifest and Progress color
  themeColor: '#3498DB',
  backgroundColor: '#2b2e3c',
  // Settings for typography.jsx
  headerFontFamily: 'Merriweather',
  bodyFontFamily: 'Roboto',
  baseFontSize: '16px',

You can also configure the styling of the site by editing the theme variables in config/theme.js. overlay are the colors that get randomly selected for the Index page and the project detail view.

import { darken } from 'polished';

const brand = {
  primary: '#cf1993',
  secondary: '#7b8acc',

const colors = {
  grey: '#25252',
  black: '#000',
  bg_color: '#f3f3f3',
  body_color: '#222',
  link_color: brand.primary,
  link_color_hover: `${darken(0.15, brand.primary)}`,

export const overlay = ['#f76262', '#216583', '#65c0ba', '#35477d', '#6c5b7b', '#203541', '#9951ff', '#480032'];

const theme = {
  breakpoints: {
    xs: '400px',
    s: '600px',
    m: '900px',
    l: '1200px',
  container: {
    base: '100rem',
    text: '55rem',
  spacer: {
    horizontal: '2rem',
    vertical: '3rem',

export default theme;

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