⚠️ Warning! ⚠️

This repository hasn't been maintained in a long time.

Serena Theme

A minimalist Gatsby theme designed for photography and portfolios — with a masonry grid and lightbox

Check out the live demo

✨Features

• Minimalist and fast
• Define your galleries with YAML
• Local or remote images
• Masonry grid (vertical or horizontal) and lightbox
• Contact form (Netlify)
• Generate About page and more with MDX
• Social links
• Styling with Theme UI
• Responsive
• Offline support
• Perfect Lighthouse score (web.dev)

🚀Installation

New site

Generate a new site pre-configured with Gatsby Theme Serena.

gatsby new my-themed-site https://github.com/daniel-seoane/gatsby-starter-serena

Here are the top-level files and directories you'll see in a site created using the starter:

gatsby-starter-serena
├── content
│   ├── assets
|   ├── ├── icon.png
│   │   └── avatar.webp
│   ├── galleries
│   │   └── index.yml
│   └── pages
│       └── about.mdx
├── static
│   └── og-image.webp
├── src
├── .gitignore
├── gatsby-config.js
├── LICENSE
├── package.json
└── README.md

Add to existing site

1. Install the theme

npm install --save gatsby-theme-serena

or

yarn add gatsby-theme-serena

2. Add the theme to your gatsby-config.js

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-theme-serena',
      options: {
        // See config section for more information
      },
    },
  ],
}

📝Config

Key	Default value	Description
galleriesPath	content/galleries	Location of galleries, can be one or multiple YML files
pagesPath	content/pages	Location of pages
assetPath	content/assets	Location of assets
disableContact	false	Delete the default Contact page
margin	6	Margin between photos in the masonry grid
direction	column	Direction in the masonry grid, "column" (vertical) or "row" (horizontal)
mdx	true	Configure gatsby-plugin-mdx (if your website already is using the plugin pass false to turn this off)

📝Additional Configuration

In addition to the theme options, there are a handful of items you can customize via the siteMetadata object in your site's gatsby-config.js.

// gatsby-config.js
module.exports = {
  siteMetadata: {
    // Used for the site title and SEO
    title: `Serena`,
    // Used for the site description and SEO
    description: `Photography Theme`,
     // Used for SEO
    author: "Gatsby",
    // Used for SEO. Must be the full URL for the default image
    image: 'https://www.example.com/og-image.jpg',
    // Typographic logo
    name: `Serena`,
    // Short tagline
    tagline: `Photography Theme`,
    // Navigation links (this is the default)
    menuLinks: [
      {
        name: "About",
        url: "/about/",
        type: "internal" // internal or anchor
      },
      {
        name: "Contact",
        url: "/contact/",
        type: "internal" // internal or anchor
      }
    ],
    // Social links
    social: [
      {
        name: `Facebook`,
        url: `https://facebook.com`
      },
      {
        name: `Twitter`,
        url: `https://twitter.com`
      },
      {
        name: `Instagram`,
        url: `https://instagram.com`
      }
    ]
  }
}

🖼️Example of gallery

You can use remote or local images, but if you use remote images you cannot use local images and vice versa

Remote (remote images are downloaded and create a File node)

- name: Remote
  slug: /remote
  photos:
    - title: San Francisco
      alt: San Francisco
      url: https://images.unsplash.com/photo-1583743220494-3da91330c2fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1001&q=80
    - title: Italy
      alt: Italy
      url: https://images.unsplash.com/photo-1583855282680-6dbdc69b0932?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80

Local

- name: Local
  slug: /local
  photos:
    - title: San Francisco
      alt: San Francisco
      url: ../assets/san-francisco.png
    - title: Italy
      alt: Italy
      url: ../assets/italy.png

👥Shadowing

Remember that you can use shadowing

Shadowing in Gatsby Themes

License

MIT