Gatsby Theme Photography Portfolio
This is a gatsby theme with big image grid and a minimalistic interface, the whole UI stays out of the way unless opened by hamburger menu. Perfect for keeping the focus on the images.
Every image has its own fullscreen page and all images of a category can be flipped through quickly. Thanks to gatsby-plugin-sharp
and gatsby-plugin-image
the load times are are also very short.
If you want to categorize your images just put them in different folders.
Check out a live demo.
💎 Features
- Swipe gesture support
- Short loading times
- Social media share images
- Quick to navigate
- Minimalistic unobtrusive UI
- Background based on main color
🚀 Installation
For a new site
-
Create a Gatsby site.
To quickly create a new Gatsby page with the
gatsb-theme-photography-portfolio
you can use my starter.npx gatsby new gatsby-photography-portfolio https://github.com/AlexanderProd/gatsby-starter-photography-portfolio
For an existing site
If you already have a site you’d like to add the blog theme to, you can manually configure it.
-
Install the photography portfolio theme
npm install gatsby-theme-photography-portfolio
-
Add the configuration to your gatsby-config.js file
// gatsby-config.js module.exports = { plugins: [ { resolve: `gatsby-theme-photography-portfolio`, options: { // basePath defaults to `/` basePath: `/portfolio`, }, }, ], }
-
Add images
Add images to your site by adding them to
images
directory in the root of your site. You can create categories by putting the images in subfolders.
Usage
Theme options
Key | Default value | Description |
---|---|---|
imagesPath |
images |
The directory where the images are stored. |
Deploy
Checkout my other open-source project JAMStackBox to continuously deploy your Gatsby site on your own server.