# gatsby-theme-modern-portfolio

> Gatbsy theme to create a simple portfolio site

Latest version **1.1.6** (published 2020-01-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install gatsby-theme-modern-portfolio
pnpm add gatsby-theme-modern-portfolio
yarn add gatsby-theme-modern-portfolio
bun add gatsby-theme-modern-portfolio
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.1.6 |
| Published | 2020-01-07 |
| First published | 2019-06-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 19 |
| Unpacked size | 186.8 KB |
| Known vulnerabilities | 0 (+3 in 3 direct dependencies) |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Chris Hogg |
| Maintainers | mrjavascripter |
| Keywords | gatsby, gatsby-theme, blog, portfolio |

## Links

- npm: https://www.npmjs.com/package/gatsby-theme-modern-portfolio
- Repository: https://github.com/cthogg/gatsby-theme-modern-portfolio
- Homepage: https://github.com/cthogg/gatsby-theme-modern-portfolio#readme
- Issues: https://github.com/cthogg/gatsby-theme-modern-portfolio/issues
- npm.io page: https://npm.io/package/gatsby-theme-modern-portfolio

## Dependencies (19)

- [add](https://npm.io/package/add.md) ^2.0.6
- [yarn](https://npm.io/package/yarn.md) ^1.16.0
- [react](https://npm.io/package/react.md) ^16.8.6
- [gatsby](https://npm.io/package/gatsby.md) ^2.4.3
- [react-dom](https://npm.io/package/react-dom.md) ^16.8.6
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [react-icons](https://npm.io/package/react-icons.md) ^3.7.0
- [gatsby-image](https://npm.io/package/gatsby-image.md) ^2.0.41
- [react-helmet](https://npm.io/package/react-helmet.md) ^5.2.1
- [styled-components](https://npm.io/package/styled-components.md) ^4.2.1
- [gatsby-plugin-sharp](https://npm.io/package/gatsby-plugin-sharp.md) ^2.0.37
- [gatsby-plugin-offline](https://npm.io/package/gatsby-plugin-offline.md) ^2.1.0
- [gatsby-plugin-manifest](https://npm.io/package/gatsby-plugin-manifest.md) ^2.1.1
- [gatsby-source-filesystem](https://npm.io/package/gatsby-source-filesystem.md) ^2.0.34
- [gatsby-transformer-sharp](https://npm.io/package/gatsby-transformer-sharp.md) ^2.1.19
- [gatsby-transformer-remark](https://npm.io/package/gatsby-transformer-remark.md) ^2.3.12
- [gatsby-plugin-page-creator](https://npm.io/package/gatsby-plugin-page-creator.md) ^2.0.13
- [gatsby-plugin-react-helmet](https://npm.io/package/gatsby-plugin-react-helmet.md) ^3.0.12
- [gatsby-remark-external-links](https://npm.io/package/gatsby-remark-external-links.md) ^0.0.4

## Alternatives

- [cli-color](https://npm.io/package/cli-color.md) — 3.4M weekly downloads
- [log](https://npm.io/package/log.md) — 1.3M weekly downloads
- [logstash-client](https://npm.io/package/logstash-client.md) — 4.5K weekly downloads
- [@nocobase/plugin-logger](https://npm.io/package/@nocobase/plugin-logger.md) — 2.0K weekly downloads
- [child-process-debug](https://npm.io/package/child-process-debug.md) — 695 weekly downloads

## Recent versions

- 1.1.6 (latest) — 2020-01-07
- 1.1.5 — 2020-01-07
- 1.1.4 — 2020-01-07
- 1.1.3 — 2019-12-30
- 1.1.2 — 2019-12-30
- 1.1.1 — 2019-12-30
- 1.1.0 — 2019-06-03
- 1.0.5 — 2019-06-03
- 1.0.4 — 2019-06-03
- 1.0.3 — 2019-06-03
- 1.0.2 — 2019-06-03
- 1.0.1 — 2019-06-03
- 1.0.0 — 2019-06-03

## README

# 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`
1. Create a`gatsby-config.js` file in the root
1. Set the `gatsby-theme-modern-portfolio` in the `__experimentalThemes` option inside your `gatsby-config.js` 

```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`
1. Create `index.md` in `src/pages/markdown` and add the following to it

```markdown
---
title: "John Doe"
subtitle: "My Website"
email: "john@doe.com"
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

1. Run with `yarn gatsby develop`  

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

### Selecting Fonts
1. Select your chosen font from Google Fonts. 
1. Copy and paste the font url to `index.md`
1. 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](https://github.com/sw-yx/gatsby-theme-dev-blog/tree/master/src) [two](https://github.com/jxnblk/gatsby-theme-mdx-blog/tree/master/example)   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.

---
_Source: https://npm.io/package/gatsby-theme-modern-portfolio · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._