• Stars
    star
    337
  • Rank 122,297 (Top 3 %)
  • Language
    TypeScript
  • License
    BSD Zero Clause L...
  • Created over 5 years ago
  • Updated 5 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Image-heavy photography portfolio with colorful accents & customizable pages. Includes adaptive image grids powered by CSS grid and automatic image integration into projects.

LekoArts

Gatsby Starter Portfolio: Jodie

Gatsby Starter Portfolio: Jodie is released under the 0BSD license. GitHub Sponsors Website Follow @lekoarts_de

Image-heavy photography portfolio with colorful accents & customizable pages. Includes adaptive image grids powered by CSS grid and automatic image integration into projects. Using the Gatsby Theme @lekoarts/gatsby-theme-jodie.

Demo Website

Also be sure to check out other Free & Open Source Gatsby Themes and my Personal Website.

✨ Features

  • MDX
  • Fully customizable through the usage of Gatsby Themes (and Theme UI)
  • Create a project by creating an MDX file and dropping the images into the same folder
  • Extensible custom pages
  • Define colors for each page and the sidebar & content will adapt while maintaining WCAG 2 AA contrast ratios
  • SEO (Sitemap, OpenGraph tags, Twitter tags)
  • WebApp Manifest

⏱️ Quick Start

Deploy this starter with one click on Netlify:

Deploy to Netlify

πŸš€ Getting Started

1. Create a Gatsby site.

Use the Gatsby CLI to clone the site and install dependencies:

npx gatsby new gatsby-starter-portfolio-jodie https://github.com/LekoArts/gatsby-starter-portfolio-jodie

2. Navigate to your new project.

cd gatsby-starter-portfolio-jodie

3. Open the code and start customizing!

Start the site by running npm run develop.

Your site is now running at http://localhost:8000!

If you want to learn more about how you can use a Gatsby starter that is configured with a Gatsby theme, you can check out this shorter or longer tutorial. The tutorials don't exactly apply to this starter however the concepts are the same.

πŸ“ Using and modifying this starter

Important Note: Please read the guide Shadowing in Gatsby Themes to understand how to customize the underlying theme!

This starter creates a new Gatsby site that installs and configures the theme @lekoarts/gatsby-theme-jodie.

Have a look at the theme's README and files to see what options are available and how you can shadow the various components including Theme UI. Generally speaking you will want to place your files into src/@lekoarts/gatsby-theme-jodie/ to shadow/override files. The Theme UI config can be configured by shadowing its files in src/gatsby-plugin-theme-ui/.

Changing the logo

Edit the file at src/@lekoarts/gatsby-theme-jodie/icons/logo.jsx.

Changing your fonts

By default, the underlying theme and thus this starter uses "Work Sans" as its font. It's used throughout the site and set as a font-family on the html element.

If you want to change your default font or add any additional fonts, you'll need to change a couple of things:

  1. Font file inside static/fonts
  2. Preload link inside gatsby-ssr.tsx (the name of the font file)
  3. CSS in global.css
  4. The Theme UI config and its fonts key (see Theme UI Typography Docs)

For the sake of this explanation it's assumed that you replaced "Work Sans" with "Roboto Mono".

Change the file src/gatsby-plugin-theme-ui/index.js with the following contents:

// Inside src/gatsby-plugin-theme-ui/index.js
import { merge } from "theme-ui";
import originalTheme from "@lekoarts/gatsby-theme-jodie/src/gatsby-plugin-theme-ui/index";

const theme = merge(originalTheme, {
  fonts: {
    body: `"Roboto Mono", monospace`,
  },
});

export default theme;

As defined in the Theme Specification body is the default body font family.

Another example: You didn't replace "Work Sans" but added "Roboto Mono" additionally since you want to use it for your headings.

Then you'd not overwrite body but add a heading key:

// Inside src/gatsby-plugin-theme-ui/index.js
import { merge } from "theme-ui";
import originalTheme from "@lekoarts/gatsby-theme-jodie/src/gatsby-plugin-theme-ui/index";

const theme = merge(originalTheme, {
  fonts: {
    heading: `"Roboto Mono", monospace`,
  },
});

export default theme;

Customizing the homepage

Both your projects and pages are displayed on the homepage (located at / in the live project and src/components/homepage.tsx in the theme itself). Of course, you can always shadow this and other files to customize the theme to your liking.

However, before completely overriding the homepage you should consider the three available options:

  1. homepagePageLimit
  2. homepageProjectLimit
  3. Shadowing modify-grid.ts

The options 1) and 2) are explained in the theme options -- they limit the number of projects and pages that will randomly be distributed on the page.

Option 3) is a really powerful one! The modifyGrid function is wrapping the entire array of projects & pages before passing it to the render function of the React component. Or in other words: As the name suggests you can modify the items that are passed to the grid on the homepage.

You can achieve this by shadowing modify-grid.ts: Create a file at src/@lekoarts/gatsby-theme-jodie/utils/modify-grid.js and define a default export for modifyGrid.

modifyGrid examples

All code snippets are placed inside src/@lekoarts/gatsby-theme-jodie/utils/modify-grid.js

Default behavior:

const modifyGrid = (data) => data;

export default modifyGrid;

I've also created some resolver templates that you can use. They are exported in resolver-templates.ts. They cover the most common use cases and can give you an idea on what to do with the resolver.

Only pages / Only projects:

import {
  onlyPages,
  onlyProjects,
} from "@lekoarts/gatsby-theme-jodie/src/utils/resolver-templates";

const modifyGrid = (data) => onlyPages(data);
// const modifyGrid = (data) => onlyProjects(data)

export default modifyGrid;

Filter by slug:

import { filterBySlug } from "@lekoarts/gatsby-theme-jodie/src/utils/resolver-templates";

const modifyGrid = (data) => filterBySlug(data, ["/about"]);

export default modifyGrid;

Shuffle:

import { shuffle } from "@lekoarts/gatsby-theme-jodie/src/utils/resolver-templates";

const modifyGrid = (data) => shuffle(data);

export default modifyGrid;

Change your static folder

The static folder contains the icons, social media images and robots.txt. Don't forget to change these files, too! You can use Real Favicon Generator to generate the image files inside static.

πŸ€” Questions or problems?

If you have general questions or need help with Gatsby, please go to one of the support platforms mentioned in Gatsby's documentation. If you have a specific question about this project, you can head to the GitHub Discussions of the repository.

πŸŽ“ Learning Gatsby

Looking for more guidance? Full documentation for Gatsby lives on Gatsby's website.

Themes

To learn more about Gatsby themes specifically, I recommend checking out the theme docs.

General

🌟 Supporting me

Thanks for using this project! I'm always interested in seeing what people do with my projects, so don't hesitate to tag me on Twitter and share the project with me.

Please star this project, share it on Social Media or consider supporting me on Patreon or GitHub Sponsor!

More Repositories

1

gatsby-themes

Get high-quality and customizable Gatsby themes to quickly bootstrap your website! Choose from many professionally created and impressive designs with a wide variety of features and customization options.
TypeScript
1,864
star
2

gatsby-starter-portfolio-cara

Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Especially designers and/or photographers will love this theme! Built with MDX and Theme UI.
TypeScript
1,408
star
3

gatsby-starter-minimal-blog

Typography driven, feature-rich blogging theme with minimal aesthetics. Includes tags/categories support and extensive features for code blocks such as live preview, line numbers, and line highlighting.
MDX
1,107
star
4

gatsby-starter-portfolio-emilia

Minimalistic portfolio/photography site with masonry grid, page transitions and big images. Themeable with Theme UI. Includes Light/Dark mode.
TypeScript
346
star
5

gatsby-starter-portfolio-emma

Minimalistic portfolio with full-width grid, page transitions, support for additional MDX pages, and a focus on large images. Especially designers and/or photographers will love this theme! Built with MDX and Theme UI.
MDX
277
star
6

portfolio

v1. Latest version: https://github.com/LekoArts/portfolio-v2
JavaScript
261
star
7

figma-theme-ui

Convert a Theme UI config to Figma Styles
TypeScript
174
star
8

portfolio-v2

Personal website with articles πŸ“š, projects 🎨, and other information about me.
MDX
147
star
9

gatsby-starter-portfolio-bella

A bright single-page portfolio starter for Gatsby powered by Prismic.io. The target audience are designers and photographers.
JavaScript
124
star
10

gatsby-remark-design-system

🎨 Create your design system with Gatsby in Markdown
JavaScript
93
star
11

gatsby-starter-portfolio

Gatsby.js Starters by LekoArts. Primarily aimed at Designers & Photographers. Minimalistic & fast websites!
JavaScript
69
star
12

gatsby-source-tmdb

🎬 Source from The Movie Database (TMDb) in Gatsby
TypeScript
57
star
13

gatsby-status-dashboard

Show the live statuses of your Netlify and CircleCI builds on your website! Easily integrate the customizable components into your site and adapt them to your theme (utilizing Theme UI).
TypeScript
53
star
14

gatsby-starter-tmdb

Source from The Movie Database (TMDb) API (v3) in Gatsby.
TypeScript
49
star
15

gatsby-starter-styleguide

Instantly create a styleguide page based on your Theme UI configuration. Zero-config β€” just install the theme and see your Theme UI config displayed in a beautiful manner.
JavaScript
40
star
16

gatsby-starter-specimens

Leverage the wide variety of powerful React components to build your design system. Display colors, typography or any other design tokens with ease. Works seamlessly with MDX.
MDX
38
star
17

secco

Local package testing made easy
TypeScript
17
star
18

gatsby-starter-graphql-playground

GraphQL Playground to showcase the power of GraphQL. Write your queries and documentation with MDX and display queries in an interactive GraphiQL window. It can source from your localhost or a remote URL (e.g. Codesandbox).
TypeScript
17
star
19

thanks-contributors

This little script accesses GitHub's API to get all contributors and their PRs between two distinct points in the history of commits.
Rust
16
star
20

gatsby-source-behance

Gatsby source plugin for loading information from Behance
JavaScript
15
star
21

gatsby-with-prisma-client

Gatsby powered by Prisma 2 πŸš€
TypeScript
14
star
22

gatsby-remark-design-system-example

Example page for "gatsby-remark-design-system"
JavaScript
13
star
23

annum

Visualize Your Trakt.tv History
TypeScript
12
star
24

vanilla-extract-tutorial

TypeScript
11
star
25

chakra-ui-advanced-multipart-components

Example project showing how to create advanced multi-part components in Chakra UI
TypeScript
11
star
26

gatsby-source-potterapi

Source plugin for https://www.potterapi.com/
JavaScript
9
star
27

gatsby-source-netlify

Source plugin for Netlify's API
JavaScript
6
star
28

figma-plugin-svelte-example

Svelte
5
star
29

lekoarts-stats

Statistic about my social profiles
TypeScript
5
star
30

bare-instagram

JavaScript
5
star
31

gatsby-starter-theme-i18n

Default example for `gatsby-theme-i18n` adding dedicated pages for normal pages and blog posts.
JavaScript
5
star
32

gatsby-source-flickr

Source images from Flickr into Gatsby
TypeScript
4
star
33

minimal-blog-new-content-type

JavaScript
4
star
34

gatsby-dsg-plausible-analytics

Use Gatsby's Deferred Static Generation (DSG) with Plausible Analytics (or any analytics tool)
JavaScript
4
star
35

gatsby-absolute-image-paths

Explanation of using absolute image paths in Gatsby in other data sources like JSON
JavaScript
3
star
36

mdx-components-repro

JavaScript
3
star
37

hmr-double-save-bug

JavaScript
3
star
38

gatsby-source-circleci

Gatsby Source Plugin for CircleCI
TypeScript
3
star
39

gatsby-webinar-getting-started

Demo project on how to get started with Gatsby powered by the new File System Route API and gatsby-plugin-image.
JavaScript
3
star
40

LekoArts

welcome to my crib
2
star
41

gatsby-plugin-starter

My personal boilerplate to create a Gatsby plugin
TypeScript
2
star
42

gatsby-plugin-doctype

Change the DOCTYPE of HTML files in Gatsby
JavaScript
2
star
43

cara-shadow-svg

Shows how you can change the SVG icons in gatsby-starter-portfolio-cara
JavaScript
2
star
44

gatsby-example-graphql2chartjs

Gatsby + graphql2chartjs
JavaScript
2
star
45

gatsby-source-behance-example

Example website for the gatsby-source-behance plugin
JavaScript
2
star
46

gatsby-sanity-theme-from-scratch

This repository is used as an example to showcase Gatsby Themes + Sanity.io. It's used by me as a live demo on talks but you can have a look at the commit history to get a glimpse of what's going on!
JavaScript
2
star
47

minimal-blog-yaml

Using gatsby-theme-minimal-blog - but without MDX and YAML instead!
JavaScript
1
star
48

unified-routes-demo

JavaScript
1
star
49

postcss

JavaScript
1
star
50

examples

Gatsby Examples for my blog posts
JavaScript
1
star
51

talks

Overview of my talks πŸŽ€πŸ’»
CSS
1
star
52

dotfiles

Configuration files
Shell
1
star
53

pp-06.03.19

Example for pair programming
CSS
1
star
54

combine-md-and-yaml

TypeScript
1
star
55

github-actions-playground

Nothing here, just testing.
JavaScript
1
star
56

getting-started-with-typescript-in-gatsby

TypeScript
1
star
57

gatsby-sites-validator

Python
1
star
58

mdx-v2-example

CSS
1
star
59

elitepvpers-reminders

Send reminders to our internal elitepvpers Discord server
1
star
60

testing-gatsby-head-api

An example repository to show how to use Vitest and Playwright with Gatsby Head API
TypeScript
1
star
61

portfolio-test

Sample DatoCMS website built with GatsbyJS
CSS
1
star
62

gatsby-plugin-webpack-statoscope

Gatsby plugin for the statoscope HTML-report from webpack-stats (@statoscope/webpack-plugin)
TypeScript
1
star