Gatsby Fashion Portfolio Starter

Gatsby's Fashion Portfolio Starter is a minimal, professional Gatsby starter for building a fashion portfolio website, providing a home page and a collections page with structured image naming and a customizable logo.

What is Gatsby's Fashion Portfolio Starter?

Gatsby's Fashion Portfolio Starter is a minimal and professional portfolio template built on the Gatsby static site generator. It takes a set of images and a text logo as input and produces a responsive fashion portfolio website with a home page and a collections page. The starter is published under the gatsbyjs GitHub organization and is free to use, with a one-click deploy option for Netlify.

Key Features

• Minimal professional design — A clean layout oriented toward fashion content, emphasizing large images and simple typography, as described by the starter's tagline.
• Home page hero image — The home page displays the image named image-home-page from the images folder; swapping that file updates the hero.
• Structured collections page images — Thumbnail, large, and grid images follow the patterns page-[page-number]-thumb, page-[page-number]-large, and page-[page-number]-grid-[grid-index], so uploads are placed simply by naming files.
• Customizable logo component — The logo lives in src/Logo and can be replaced with your own text or image without touching layout code.
• Built on Gatsby and React — The starter uses Gatsby's data layer and React components; developers can edit src/pages/index.js and see browser updates in real time during gatsby develop.
• CSS Grid responsive layout — The project's topic list includes css-grid, so the page layouts rely on CSS Grid for responsive arrangement.
• GraphiQL data explorer — While developing, a GraphQL playground is available at http://localhost:8000/___graphql for querying the site's data.
• One-click Netlify deploy — A Deploy to Netlify button in the README starts a Netlify deployment directly from the GitHub repository.

Who is it for?

• Fashion designers — Present seasonal collections using the collections page's thumbnail and large image grid.
• Models and influencers — Use the home page hero and grid layouts to display an image-first portfolio.
• Fashion photographers — Reuse the image naming conventions to update a shoot portfolio without restructuring pages.
• Agencies and stylists — Deploy a client portfolio quickly via the Netlify button and customize the logo per client.

What can you do with it?

• Launch a portfolio fast — Run gatsby new my-fashion-portfolio with the starter URL, add images, and deploy to Netlify in one click.
• Customize images per page — Follow the naming patterns to replace thumbnails, large images, and grid images on the collections page.
• Rebrand the logo — Edit the src/Logo component to use your own text or image instead of a default.
• Learn Gatsby and GraphQL — Use the included GraphiQL tool at http://localhost:8000/___graphql to explore the site's data while developing.

How does it work?

Create a new site with the Gatsby CLI using gatsby new my-fashion-portfolio https://github.com/gatsbyjs/gatsby-starter-fashion-portfolio, then run gatsby develop to start a local server at http://localhost:8000. To customize, replace the home page image (keeping the filename image-home-page), add collection images using the documented page- prefixed naming patterns, and update the logo in src/Logo. Changes hot-reload in the browser.

FAQ

Is Gatsby's Fashion Portfolio Starter free?

Yes. It is an open-source Gatsby starter published under the gatsbyjs GitHub organization, and the README includes a PayPal link for optional tips to contributor Shobhit Chittora.

How do I replace the home page image?

Replace the file named image-home-page in the images folder with your own image, keeping the exact same filename. The home page will pick it up automatically.

How do I add images to the Collections page?

Name your collection images following the patterns page-[page-number]-thumb for thumbnails, page-[page-number]-large for large images, and page-[page-number]-grid-[grid-index] for grid images, then place them in the images folder.

What is the GraphiQL link for?

During development, http://localhost:8000/___graphql opens a GraphQL playground where you can experiment with queries against your site's data, as described in the Gatsby tutorial.

Can I deploy this starter to Netlify?

Yes. The README includes a "Deploy to Netlify" button that starts a deployment from the repository, in addition to using the Gatsby CLI workflow.