• Stars
    star
    346
  • Rank 119,513 (Top 3 %)
  • Language
    TypeScript
  • License
    BSD Zero Clause L...
  • Created over 6 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

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

LekoArts

Gatsby Starter Portfolio: Emilia

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

Minimalistic portfolio/photography site with masonry grid, page transitions and big images. Themeable with Theme UI. Using the Gatsby Theme @lekoarts/gatsby-theme-emilia.

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)
  • Light Mode / Dark Mode
  • Page Transitions
  • Masonry grid and focus on big images
  • 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-emilia https://github.com/LekoArts/gatsby-starter-portfolio-emilia

2. Navigate to your new project.

cd gatsby-starter-portfolio-emilia

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-emilia.

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-emilia/ to shadow/override files. The Theme UI config can be configured by shadowing its files in src/gatsby-plugin-theme-ui/.

Adding a new project

New projects will be shown on the index page of this theme and can be added by creating MDX files inside content/projects. General setup:

  1. Create a new folder inside content/projects
  2. Create a new index.mdx file, and add the frontmatter
  3. Add images to the created folder (from step 1)
  4. Reference your desired images as your cover in the frontmatter
  5. Write your content below the frontmatter (optional)
  6. Use defer to opt-in into Deferred Static Generation (DSG) (optional)
  7. Add a slug to the frontmatter to use a custom slug, e.g. slug: "/my-slug" (Optional)

Frontmatter reference:

---
cover: "./sean-foley-0JD7kvxAq0Y-unsplash.jpg"
date: "2019-09-10"
title: "Emilia"
defer: false
slug: "/my-slug"
areas:
  - Neon
  - Lights
---

The frontmatter alone is enough, if you'd like to add additional content you can do so by writing your content (as usual with MDX) below the frontmatter. It'll be displayed in the header of the project below the date and areas.

Changing the "About Me" text

Create a file at src/@lekoarts/gatsby-theme-emilia/texts/about-me.mdx to edit the text.

Changing the avatar

Place an image with the name avatar inside the folder content/assets (or your custom assetsPath which you defined for the theme).

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-jodie

Image-heavy photography portfolio with colorful accents & customizable pages. Includes adaptive image grids powered by CSS grid and automatic image integration into projects.
TypeScript
337
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