Show off your portoflio with style.
Live Demo: https://gatsby-theme-contentful-portfolio.netlify.com/
This theme generates a pinterest-like portfolio gallery for your site. It also creates a page for each of your projects.
- Pinterest-like root page
- Ability to open each page as modal.
- Supports and lazy loads videos
- Social media share button
- A11Y friendly
- Uses @reach-ui/dialog for modal focusing
- Press left/right keys when nevigating between pages
- Icons have proper aria-label
- SEO friendly
- OpenGraph sharing support
- Twitter Cards
- Uses Theme-UI
- (Almost) every component can be styled using theme-ui variants
- (Almost) every component is extendeable.
Future features:
- Full dark mode support
- Pagination and infinite scrolling
- "Related projects" at the bottom of each projects
Bugs fixing
- a lot. need help.
- React-masonry-component is not ssr friendly :(
Gonna have to start over and find a better pinterest style grid for the default landing page. Anyway, you can override the gallery page by extending
src/components/gallery-page-content. You'll have access to the graphql data and choose whatever design you want for it.
If you already have an account and a contentful space, you can skip this part
For this to work, you will need to have a Contentful account and the necessary api keys that we use for gatsby-source-contentful.
Once you have created your contentful space, you will need to create a content model that matches this structure. You would also need to have 1 content with all the fields populated.
This exact naming is a requirement. (Sorry, I could have named it Projects but I didn't realize it until I'm too deep into the project).
Name: Portfolio
Api Identifier: Portfolio
| Name | Type | Validations | Example | Description |
|---|---|---|---|---|
| Title | Short Text | Required | My Awesome Project | Name of the portfolio project. |
| Slug | Short Text | Required, Unique | my-awesome-project | Derived from the title. We would append this to the base path to create to the full path for each page. i.e. /portfolio/my-awesome-project/ |
| Category | Short Text | Web Design | ||
| Description | Long Text | I built this in two weeks but I haven't touched it for another two weeks, and now I only have two days to finish it. | ||
| Media | Media | Photo or video | This can be a photo or a video. The theme is smart enough to know which component to use for these specific formats. Might now work with gifs. | |
| Video Link | Short Text | https://www.youtube.com/watch?v=dQw4w9WgXcQ | If you provide a Youtube, Vimeo or any other video urls, the theme will use it instead of the media you uploaded on contentful. |
You can add more fields to your content model but the above fields are required.
Please note that you will need at least 1 content, with all the fields populated for it to work.
| key | default value | Required | description |
|---|---|---|---|
| basePath | /portfolio/ | Yes | Root url that will house the portfolio landing page and will be prepended to each portfolio project path |
| baseTitle | My recent work | The title for the landing page and the SEO title | |
| baseSubtitle | This goes under the title on the landing page. | ||
| siteMetadata.siteUrl | Yes | Your site's url | |
| siteMetadata.siteName | Yes | Your site's name | |
| contentfulOptions | required | Configuration options from gatsby-source-contentful |
npm install gatsby-theme-contentful-portfolio
// gatsby-config.js
module.exports = {
plugins: [
{
resolve:`gatsby-theme-contentful-portfolio`,
options: {
basePath: `/portfolio/`,
baseTitle: `My recent work`,
baseSubtitle: `You can put whatever here. It's all yours champ`,
siteMetadata: {
siteUrl: `localhost:8000`,
siteName: `The New Site`
},
contentfulOptions: {
spaceId: process.env.CONTENTFUL_SPACE_ID,
accessToken: process.env.CONTENTFUL_ACCESS_TOKEN
}
}
},
]
}@TODO: Remove siteMetadata from options since you can query siteMetadata, site wide.
@TODO Extending components with queries example