Gatsby Starter Portfolio Bella is a free single-page portfolio starter for Gatsby v2 built by LekoArts, designed for designers and photographers and powered by the Prismic.io CMS.
What is Gatsby Starter Portfolio Bella?
Gatsby Starter Portfolio Bella is a one-page portfolio starter for Gatsby v2.0.0 with sub-pages for individual project case studies, created by developer LekoArts and distributed as a GitHub repository with 123 stars. It sources portfolio content from a Prismic.io repository and outputs a static white-themed site featuring oversized typography, large images, SEO metadata, offline support, and a web app manifest. A live demo is available at portfolio-bella.netlify.com, and the project can be deployed to Netlify with the one-click "Deploy to Netlify" button.
Key Features
- Gatsby v2.0.0 — The starter runs on Gatsby v2.0.0; scaffold a copy with the Gatsby CLI plus the repository URL, then develop with
npm run devand build the staticpublicfolder withnpm run build. - Prismic.io CMS — All project content is pulled from Prismic.io using gatsby-source-prismic; the README provides the exact "Case Study" custom type JSON (UID, header image, title, subtitle, content) and requires a permanent access token stored as an API_KEY environment variable.
- Emotion styling — CSS is written with Emotion and Emotion-Grid; the color palette (primary #b710a1), container max-width of 1800px, and breakpoints are all editable in
config/theme. - SEO metadata — Includes sitemap generation, Schema.org JSON-LD, OpenGraph tags, and Twitter tags; site title, alt title, URL, language, and author are configured in
config/website. - Offline and manifest support — Ships with web app manifest and offline support, with themeColor #b710a1 and backgroundColor #350d27 configurable in
config/website. - Responsive images — Image handling serves the correct size for every screen, applies traced-SVG placeholders for lazy loading, and supports WebP output.
- Typography.js — Typography.js loads Bree Serif for headings and Open Sans for body text from Google Fonts, both at 400 weight, configurable in
config/typography. - Configurable metadata — A single
config/websitefile controls site title, siteUrl, language, logo, author, Twitter handle, Facebook Open Graph name, and manifest colors;static/robots.txtmust be edited with your domain.
Who is it for?
- Designers — launch a minimalist one-page portfolio with big typography and case-study sub-pages, managing each project through the Prismic dashboard.
- Photographers — display image-heavy project pages where header images are constrained to 1920x1080 in the Prismic custom type and rendered responsively on screen.
- Gatsby developers — use the project as a foundation for a personal site and modify queries and components to swap Prismic for another data source.
- Netlify users — deploy instantly with the Deploy to Netlify button and keep the Prismic API key in a Netlify environment variable.
Use cases
- Freelance designers: publish a one-page portfolio listing selected projects, each linking to a dedicated case study page with a header image, title, subtitle, and free-form content blocks.
- Photographers: create a clean white gallery-style site that emphasizes large images with lazy loading and WebP, so pages stay fast on mobile connections.
- Content editors: add and publish Prismic documents for new projects without touching code; the build regenerates the static site automatically.
- Developers evaluating Gatsby starters: inspect a minimal, well-structured Gatsby v2 codebase that pairs Emotion styling with a headless CMS and Typography.js.
How does it work?
Set up with four steps: install the starter via the Gatsby CLI, create a Prismic repository with the "Case Study" custom type and an API token, publish content documents (using a non-GIF image such as one from Unsplash), then run npm run dev or npm run build for production output. The README also details adding new plugins from the Gatsby plugin library and deploying the generated public folder to any web host.
Alternatives
- gatsby-starter-portfolio-emma — another one-page portfolio starter by the same author, LekoArts.
- gatsby-starter-portfolio-emilia — a portfolio starter by the same author with a different design direction.
- gatsby-starter-portfolio-cara — a portfolio starter by the same author with its own theme and layout.
FAQ
Do I need a Prismic account to use Bella?
Yes. The starter sources all project content from Prismic.io, so you need a Prismic repository with the "Case Study" custom type and a permanent access token. If you prefer another source, you can modify the starter's queries and components.
What fonts does the starter use?
Bree Serif for headings and Open Sans for body text, both loaded from Google Fonts at weight 400. Font families are defined in config/typography, and the body font stack also includes system fallbacks like -apple-system and Segoe UI.
Can I deploy Bella to Netlify?
Yes, the README includes a one-click "Deploy to Netlify" button, and it explains setting the Prismic API key as a Netlify environment variable. Production builds output a static public folder you can deploy anywhere.
Does the starter include SEO?
Yes. It includes a sitemap, Schema.org JSON-LD structured data, OpenGraph tags, and Twitter card tags, with site metadata like siteUrl, language, author, and Twitter handle configured in config/website.
What should I watch out for when adding content?
The README warns not to use the .gif sample image in Prismic because the sharp image processing pipeline can't handle GIFs — use a photo such as one from Unsplash instead. Documents must also be published before they appear on the site.
