Gatsby Starter Portfolio: Level 2

A minimalistic, responsive and easily configurable Gatsby starter that will help to bring your portfolio to the next level.

That's why we like to call our starter Level 2 or short LvL2. The starter comes with several prepared info sections for your portfolio that can be easily configured with the main Gatsby configuration files. For content creation we are using Markdown files with Frontmatter attributes that can be easily edited or created.

Quick Start
Features
Customize
Content Creation
- Creating Blog Posts
  - Frontmatter for blog posts
- Creating Projects
  - Frontmatter for projects

Quick start

Create a Gatsby site.

Use the Gatsby CLI to create a new site, specifying the level-2 starter.

# create a new Gatsby site using the level-2 starter
gatsby new my-portfolio https://github.com/Knochenmark/gatsby-starter-level-2

Start developing.

Navigate into your new site’s directory and start it up.
```
cd my-portfolio/
gatsby develop
```
Open the source code and start editing!

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

Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

Open the my-portfolio directory in your code editor of choice and edit src/pages/index.js. Save your changes and the browser will update in real time!

Features

Responsive Layout
High configurability
Configurable Sections via Markdown
- Hero
- About
- Featured Projects
- Contact
Social Links
Styled Components with Emotion
Organized Projects by techs and Blog Posts by tags
Posts in Markdown
- Syntax highlighting in code blocks
Pagination support
More to come!

Customize

Gatsby Configuration

To make it easy for you we made sure you can configure as much as possible with the gatsby-config.js already. All you have to do is change the relevant values. For reference you can find an overview of the config below:

siteMetadata: {
  title: 'Level 2',
  titleTemplate: '%s · Level 2',
  image: '/images/logo.png',
  author: 'Max Mustermann',
  description: 'Gatsby starter to quickly setup your portfolio and boost it to the next level.',
  url: 'https://knochenmark.github.io',
  paginationPageSize: 4, // Amount of posts displayed per listing page.
},

Icons

Under src/components/_config you will find further files that allow for configuration of social and navigation icons.

Navigation

To change or add further menu links you can adjust the maps in src/components/_config/menu-links.js. If you want to change the icons that are being used you just have to change the icon property to another solid icon from font-awesome. Please refer to Font Awsome Solid Icons for available icons.

Social

In src/components/_config/social-icon-list.js you are able to add further social links or edit the link property to point to your social profiles. Those social links are currently displayed in the header and footer. Feel free to reuse them where ever you like.

Change the Theme

In order to change the colors of the theme you can just change the values of the css variables in the src/styles/variables.styl file. Every color in the CSS is based on those css variables. This allows you to quickly apply a different theme of your choice.

body
  // Colors
  --bg-color #252839
  --bg-content-color #1b1d2a
  --title-color #fff
  --body-color #ced8de
  --primary-color #F1B631
  --secondary-color #f18731
  // Dimensions & Form
  --radius 6px
  --space 3.5rem
  --header-height 80px
  --content-width 860px
  // Transition Times
  --transition-fast 0.2s
  --transition-normal 0.4s
  --transition-slow 0.6s
  // Misc
  --bg-code rgba(0, 0, 0, 0.3)
  --border-color rgba(255, 255, 255, 0.1)

Content Creation

All content files and the information for the sections on the index page can be found in the content folder.

The folder contains subfolders for:

blog posts
projects
sections

Creating Blog Posts

In order to create a blog post you just have to add a markdown file under content/posts and move images that are used in your blog post into content/posts/images.

Frontmatter for blog posts

The frontmatter information for each blog post is structured as following:

Field	Type	Description	Example
date	Date	Publishing Date	2020-05-31
title	String	Post Title	'Some title'
tags	String[]	List of Tags	['foo', 'bar']
published	Boolean	Is Published Flag	true
cover_image	String	Path of the Cover Image	./images/my-image.jpg
canonical_url	Boolean	is Canonical Link Flag	false
description	String	Post short description	'Some Description'

Followed by the actual Blog content written in Markdown.

Creating Projects

In order to create a project you create a markdown file under content/projects and move images that are used for your project into content/projects/images.

Frontmatter for projects