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-pagefrom 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, andpage-[page-number]-grid-[grid-index], so uploads are placed simply by naming files. - Customizable logo component — The logo lives in
src/Logoand 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.jsand see browser updates in real time duringgatsby 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/___graphqlfor 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-portfoliowith 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/Logocomponent to use your own text or image instead of a default. - Learn Gatsby and GraphQL — Use the included GraphiQL tool at
http://localhost:8000/___graphqlto 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.
