Gatsby Modern Portfolio Theme

One file developer portfolios.

That's correct. Create your portfolio from just one markdown file.

Features

• Write a simple portfolio site from just one markdown file
• change the site's ui with simple theming.
• (coming soon): Deploy to netlify in one click.

Out of Scope

• Ability to blog - hopefully this can be composed with another theme later.

Installation

1. On a new repo install gatsby and this theme yarn add gatsby gatsby-theme-modern-portfolio -D
2. Create agatsby-config.js file in the root
3. Set the gatsby-theme-modern-portfolio in the __experimentalThemes option inside your gatsby-config.js

module.exports = {
  __experimentalThemes: [    {
    resolve: "gatsby-theme-modern-portfolio" ,
    options: {
      siteTitle: `Your site title`,
      siteDescription: `Here is a site title`,
    }
  },]
}

1. Create directory src/pages/markdown mkdir -p src/pages/markdown
2. Create index.md in src/pages/markdown and add the following to it

---
title: "John Doe"
subtitle: "My Website"
email: "[email protected]"
linkedin: "https://www.linkedin.com/in/john_doe"
textColor: 'black'
backgroundColor: '#e5f1f6'
fontUrl: '"https://fonts.googleapis.com/css?family=Overlock&display=swap"'
fontFamily: 'Overlock, cursive;'
---

## Experience
- Building websites

1. Add .cache and public to the repo's .gitignore file

2. Run with yarn gatsby develop

3. (coming soon): Deploy to netlify to see it live!

Selecting Fonts

1. Select your chosen font from Google Fonts.
2. Copy and paste the font url to index.md
3. Copy and paste the fontFamily to index.md. *Make sure to remove the quotation marks so that font-family: 'Overlock', cursive; becomes fontFamily: 'Overlock, cursive

TODO:

• Easily deploy to netlify.
• ability to add a favicon
• integrate with netlify-cms (this can come a bit later because the "cms" is very easy with one file!)

With thanks to:

• These two great working examples of themes.
• The Gatsby team to great documentation, and their default starter from which this project was initially based off.
• For this (WHERE) website for the style inspiration.