• This repository has been archived on 27/Dec/2023
  • Stars
    star
    124
  • Rank 281,650 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 6 years ago
  • Updated almost 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A bright single-page portfolio starter for Gatsby powered by Prismic.io. The target audience are designers and photographers.

Gatsby Starter Portfolio: Bella

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

Demo Website

Deploy to Netlify

  • Big Typography & Images
  • White Theme
  • Prismic.io as CMS
  • One-Page layout with sub-pages for projects

Why?

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!

Interest in more advanced usages? Visit gatsby-starter-prismic to use the full power of Prismic!

Features

  • Gatsby v2.0.0
  • Configurable
    • Use the website.js to easily change the most important information
    • Google Fonts
  • Prismic.io as CMS
  • Emotion + Emotion-Grid for CSS
  • 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-bella
cd project-name

Prismic?!

This starter uses Prismic.io as its CMS and therefore you have two options:

  • Setup an account on Prismic and also use it
  • Modify this starter in order to use your favourite data source

If you choose Prismic, you need to create the exact same "Custom Type" if you not want to modify the queries and names in the components. The gatsby-starter-prismic has extensive instructions on setting these things up, you can have a look at them for reference. You can also have a look at the official guide I wrote for Gatsby: Sourcing from Prismic

Go to your custom types:

https://your-name.prismic.io/masks/ and click New. Choose the name Case Study which results in the API ID case_study. On the right side you have your Build mode and JSON editor. Open the JSON editor and copy/paste the following content:

{
  "Content" : {
    "uid" : {
      "type" : "UID",
      "config" : {
        "label" : "SEO",
        "placeholder" : "SEO"
      }
    },
    "header_image" : {
      "type" : "Image",
      "config" : {
        "constraint" : {
          "width" : 1920,
          "height" : 1080
        },
        "thumbnails" : [ ],
        "label" : "Header Image"
      }
    },
    "title" : {
      "type" : "StructuredText",
      "config" : {
        "single" : "heading1",
        "label" : "Title",
        "placeholder" : "Case study title"
      }
    },
    "subtitle" : {
      "type" : "StructuredText",
      "config" : {
        "single" : "heading2",
        "label" : "Subtitle",
        "placeholder" : "Subtitle"
      }
    },
    "content" : {
      "type" : "StructuredText",
      "config" : {
        "multi" : "paragraph, preformatted, heading1, heading2, heading3, heading4, heading5, heading6, strong, em, hyperlink, image, list-item, o-list-item",
        "label" : "content",
        "placeholder" : "Case study content"
      }
    }
  }
}

This is the exact same content type I used for the starter.

You need to define the API Key for your Prismic repository in gatsby-config.js. You can retrieve the key here:

  • You can generate an access token in the "API & Security" section of your repository settings. Setting a "Callback URL" is not necessary.
  • The token will be listed under "Permanent access tokens".

It's best to store the API Key in an environment variable. Create the file .env.development in the root dir of your project. Its content should be:

API_KEY=OIJSOJIO-YOURKEYHERE-EAJNALÖKND

If you deploy to Netlify you can also setup an environment variable.

More information on the source plugin: gatsby-source-prismic

Development

Before running the local development server you'll need to add Content to your Prismic site! Go to your documents (https://your-name.prismic.io/documents/) and create content with the newly created caseStudy type. Don't use the .gif image that Prismic has available (sharp can't process that) and use, e.g. an image from Unsplash. You have to publish the documents.

After that you can run the local server:

npm run dev

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/website:

module.exports = {
  pathPrefix: '/', // Prefix for all links. If you deploy your site to example.com/portfolio your pathPrefix should be "portfolio"

  siteTitle: 'Bella - Gatsby Starter Portfolio', // Navigation and Site Title
  siteTitleAlt: 'Bella', // Alternative Site title for SEO
  siteUrl: 'https://portfolio-bella.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: 'A bright single-page portfolio starter with big typography & images for Gatsby.',
  author: 'LekoArts', // Author for schemaORGJSONLD

  // siteFBAppID: '123456789', // Facebook App ID - Optional
  userTwitter: '@bella', // Twitter Username
  ogSiteName: 'bella', // Facebook Site Name
  ogLanguage: 'en_US', // Facebook Language

  // Manifest and Progress color
  themeColor: '#b710a1',
  backgroundColor: '#350d27',
};

You can also change the colors, container widths and other stuff in config/theme:

const theme = {
  colors: {
    primary: '#b710a1', /* Used for the headings and image overlay */
    primaryLight: '#e456e9', /* Used for links */
    primaryDark: '#3d0435', /* Used for backgrounds */
    bg: '#fff',
    text: '#021212',
    textInvert: '#fff',
    greyLight: '#B4B9C1',
    greyMedium: '#414141',
    greyDark: '#2F2F2F',
  },
  fontFamily: {
    body: `'Open Sans', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'`,
    heading: `'Bree Serif', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'`,
  },
  maxWidth: '1800px',
  maxWidthText: '1000px',
  breakpoint: {
    xs: '400px',
    s: '600px',
    m: '900px',
    l: '1200px',
  },
};

You can change the fonts used in config/typography:

headerFontFamily: [
  'Bree Serif',
  '-apple-system',
  'BlinkMacSystemFont',
  'Segoe UI',
  'Roboto',
  'Helvetica',
  'Arial',
  'sans-serif',
  'Apple Color Emoji',
  'Segoe UI Emoji',
  'Segoe UI Symbol',
],
bodyFontFamily: [
  'Open Sans',
  '-apple-system',
  'BlinkMacSystemFont',
  'Segoe UI',
  'Roboto',
  'Helvetica',
  'Arial',
  'sans-serif',
  'Apple Color Emoji',
  'Segoe UI Emoji',
  'Segoe UI Symbol',
],
googleFonts: [
  {
    name: 'Bree Serif',
    styles: ['400'],
  },
  {
    name: 'Open Sans',
    styles: ['400'],
  },
],

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

More Repositories

1

gatsby-themes

Get high-quality and customizable Gatsby themes to quickly bootstrap your website! Choose from many professionally created and impressive designs with a wide variety of features and customization options.
TypeScript
1,864
star
2

gatsby-starter-portfolio-cara

Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Especially designers and/or photographers will love this theme! Built with MDX and Theme UI.
TypeScript
1,408
star
3

gatsby-starter-minimal-blog

Typography driven, feature-rich blogging theme with minimal aesthetics. Includes tags/categories support and extensive features for code blocks such as live preview, line numbers, and line highlighting.
MDX
1,107
star
4

gatsby-starter-portfolio-emilia

Minimalistic portfolio/photography site with masonry grid, page transitions and big images. Themeable with Theme UI. Includes Light/Dark mode.
TypeScript
346
star
5

gatsby-starter-portfolio-jodie

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

gatsby-starter-portfolio-emma

Minimalistic portfolio with full-width grid, page transitions, support for additional MDX pages, and a focus on large images. Especially designers and/or photographers will love this theme! Built with MDX and Theme UI.
MDX
277
star
7

portfolio

v1. Latest version: https://github.com/LekoArts/portfolio-v2
JavaScript
261
star
8

figma-theme-ui

Convert a Theme UI config to Figma Styles
TypeScript
174
star
9

portfolio-v2

Personal website with articles 📚, projects 🎨, and other information about me.
MDX
147
star
10

gatsby-remark-design-system

🎨 Create your design system with Gatsby in Markdown
JavaScript
93
star
11

gatsby-starter-portfolio

Gatsby.js Starters by LekoArts. Primarily aimed at Designers & Photographers. Minimalistic & fast websites!
JavaScript
69
star
12

gatsby-source-tmdb

🎬 Source from The Movie Database (TMDb) in Gatsby
TypeScript
57
star
13

gatsby-status-dashboard

Show the live statuses of your Netlify and CircleCI builds on your website! Easily integrate the customizable components into your site and adapt them to your theme (utilizing Theme UI).
TypeScript
53
star
14

gatsby-starter-tmdb

Source from The Movie Database (TMDb) API (v3) in Gatsby.
TypeScript
49
star
15

gatsby-starter-styleguide

Instantly create a styleguide page based on your Theme UI configuration. Zero-config — just install the theme and see your Theme UI config displayed in a beautiful manner.
JavaScript
40
star
16

gatsby-starter-specimens

Leverage the wide variety of powerful React components to build your design system. Display colors, typography or any other design tokens with ease. Works seamlessly with MDX.
MDX
38
star
17

secco

Local package testing made easy
TypeScript
17
star
18

gatsby-starter-graphql-playground

GraphQL Playground to showcase the power of GraphQL. Write your queries and documentation with MDX and display queries in an interactive GraphiQL window. It can source from your localhost or a remote URL (e.g. Codesandbox).
TypeScript
17
star
19

thanks-contributors

This little script accesses GitHub's API to get all contributors and their PRs between two distinct points in the history of commits.
Rust
16
star
20

gatsby-source-behance

Gatsby source plugin for loading information from Behance
JavaScript
15
star
21

gatsby-with-prisma-client

Gatsby powered by Prisma 2 🚀
TypeScript
14
star
22

gatsby-remark-design-system-example

Example page for "gatsby-remark-design-system"
JavaScript
13
star
23

annum

Visualize Your Trakt.tv History
TypeScript
12
star
24

vanilla-extract-tutorial

TypeScript
11
star
25

chakra-ui-advanced-multipart-components

Example project showing how to create advanced multi-part components in Chakra UI
TypeScript
11
star
26

gatsby-source-potterapi

Source plugin for https://www.potterapi.com/
JavaScript
9
star
27

gatsby-source-netlify

Source plugin for Netlify's API
JavaScript
6
star
28

figma-plugin-svelte-example

Svelte
5
star
29

lekoarts-stats

Statistic about my social profiles
TypeScript
5
star
30

bare-instagram

JavaScript
5
star
31

gatsby-starter-theme-i18n

Default example for `gatsby-theme-i18n` adding dedicated pages for normal pages and blog posts.
JavaScript
5
star
32

gatsby-source-flickr

Source images from Flickr into Gatsby
TypeScript
4
star
33

minimal-blog-new-content-type

JavaScript
4
star
34

gatsby-dsg-plausible-analytics

Use Gatsby's Deferred Static Generation (DSG) with Plausible Analytics (or any analytics tool)
JavaScript
4
star
35

gatsby-absolute-image-paths

Explanation of using absolute image paths in Gatsby in other data sources like JSON
JavaScript
3
star
36

mdx-components-repro

JavaScript
3
star
37

hmr-double-save-bug

JavaScript
3
star
38

gatsby-source-circleci

Gatsby Source Plugin for CircleCI
TypeScript
3
star
39

gatsby-webinar-getting-started

Demo project on how to get started with Gatsby powered by the new File System Route API and gatsby-plugin-image.
JavaScript
3
star
40

LekoArts

welcome to my crib
2
star
41

gatsby-plugin-starter

My personal boilerplate to create a Gatsby plugin
TypeScript
2
star
42

gatsby-plugin-doctype

Change the DOCTYPE of HTML files in Gatsby
JavaScript
2
star
43

cara-shadow-svg

Shows how you can change the SVG icons in gatsby-starter-portfolio-cara
JavaScript
2
star
44

gatsby-example-graphql2chartjs

Gatsby + graphql2chartjs
JavaScript
2
star
45

gatsby-source-behance-example

Example website for the gatsby-source-behance plugin
JavaScript
2
star
46

gatsby-sanity-theme-from-scratch

This repository is used as an example to showcase Gatsby Themes + Sanity.io. It's used by me as a live demo on talks but you can have a look at the commit history to get a glimpse of what's going on!
JavaScript
2
star
47

minimal-blog-yaml

Using gatsby-theme-minimal-blog - but without MDX and YAML instead!
JavaScript
1
star
48

unified-routes-demo

JavaScript
1
star
49

postcss

JavaScript
1
star
50

examples

Gatsby Examples for my blog posts
JavaScript
1
star
51

talks

Overview of my talks 🎤💻
CSS
1
star
52

dotfiles

Configuration files
Shell
1
star
53

pp-06.03.19

Example for pair programming
CSS
1
star
54

combine-md-and-yaml

TypeScript
1
star
55

github-actions-playground

Nothing here, just testing.
JavaScript
1
star
56

getting-started-with-typescript-in-gatsby

TypeScript
1
star
57

gatsby-sites-validator

Python
1
star
58

mdx-v2-example

CSS
1
star
59

elitepvpers-reminders

Send reminders to our internal elitepvpers Discord server
1
star
60

testing-gatsby-head-api

An example repository to show how to use Vitest and Playwright with Gatsby Head API
TypeScript
1
star
61

portfolio-test

Sample DatoCMS website built with GatsbyJS
CSS
1
star
62

gatsby-plugin-webpack-statoscope

Gatsby plugin for the statoscope HTML-report from webpack-stats (@statoscope/webpack-plugin)
TypeScript
1
star