Gatsby Theme Polaroid

Gatsby Theme Polaroid is a photography-focused Gatsby theme for building portfolio websites, developed by Arpit Sheth, that combines a fullscreen photo showcase with an MDX blog and built-in dark mode.

What is Gatsby Theme Polaroid?

Gatsby Theme Polaroid is a Gatsby theme that generates a complete photography portfolio site from content you provide as MDX files located in content/posts and content/pages directories. It outputs a production-ready Gatsby site with a photo-rich homepage, an MDX blog with tags and categories, and light/dark mode support via Theme UI. The theme runs on Gatsby and is published on npm as @shetharp/gatsby-theme-polaroid.

Key Features

• Photo-rich portfolio — A homepage that displays your photos or work in fullscreen, with responsive optimized images, automatic darkening of images in dark mode, customizable gradient overlay props, and customizable titles, descriptions, links, and call-to-action buttons.
• MDX blog and pages — Write blog posts and site pages in MDX, organize posts with tags/categories, and get syntax-highlighted code blocks provided by prism-react-renderer and react-live, including line numbers, line highlighting, language tabs, and file titles.
• Theme UI styling — A custom theme built with Theme UI, offering minimal typography, responsive styling for all screen sizes, and light/dark mode options.
• TypeScript customization — Customizable data for header, header menu toggle, and footer, with TypeScript types defined for easy component shadowing and import.
• Built on minimal-blog-core — Under the hood, Polaroid extends @lekoarts/gatsby-theme-minimal-blog-core and adds photography-focused features on top.
• Workspace structure — The repository uses Yarn workspaces with a theme directory containing the theme source and a demo directory with an example site, letting you start your own theme from this template.

Who is it for?

• Photographers — Build a portfolio website that puts your photos on fullscreen display, with optional call-to-action buttons for bookings or prints.
• Developer bloggers — Publish a photography-focused blog with MDX posts, code syntax highlighting, and tags/categories for organizing technical content.
• Gatsby theme developers — Use the repo as a starting point for creating a new Gatsby theme with TypeScript, MDX, and Theme UI, using the workspace setup to develop and deploy a demo site.

What can you do with it?

• Photographers: Create a stunning portfolio homepage with responsive images, gradient overlays, and customizable titles and CTAs to showcase your work.
• Bloggers: Write and publish MDX blog posts with tags, categories, and syntax-highlighted code blocks, all styled with minimal typography and dark mode.
• Theme developers: Clone or scaffold from the workspace to build your own Gatsby theme, with the demo workspace serving as an example consumer site.

How does it work?

To use the theme, install it with npm i --save @shetharp/gatsby-theme-polaroid or yarn add @shetharp/gatsby-theme-polaroid, add it to the plugins array in your gatsby-config.js, then create .mdx files in the content/posts and content/pages directories. To start developing your own theme, you can run gatsby new with this repo's URL and use the theme and demo workspaces via Yarn commands like yarn workspace demo develop.