https://github.com/khriztianmoreno/site-elevator-pitch
👨🏼💻A Gatsby theme presenting a person
https://github.com/khriztianmoreno/site-elevator-pitch
gatsby gatsbyjs hacktoberfest javascript personal-website react reactjs website
Last synced: about 1 year ago
JSON representation
👨🏼💻A Gatsby theme presenting a person
- Host: GitHub
- URL: https://github.com/khriztianmoreno/site-elevator-pitch
- Owner: khriztianmoreno
- License: mit
- Created: 2019-05-12T02:52:42.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-11T19:53:30.000Z (over 3 years ago)
- Last Synced: 2025-04-01T04:32:44.673Z (over 1 year ago)
- Topics: gatsby, gatsbyjs, hacktoberfest, javascript, personal-website, react, reactjs, website
- Language: JavaScript
- Homepage: https://elevator-pitch.netlify.app/
- Size: 33.9 MB
- Stars: 8
- Watchers: 2
- Forks: 4
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://app.netlify.com/sites/elevator-pitch/deploys)
# 👨🏼💻 Khriztianmoreno Elevator Pitch Web Site
A Gatsby theme presenting a person
## Prerequisites
If you do not have Gatsby Cli installed yet, do it first.
```text
npm install --global gatsby-cli
```
More information on [GatsbyJS.org](https://www.gatsbyjs.org/tutorial/part-one)
## 🚀 Quick start
1. **Start developing.**
Navigate into your new site’s directory and start it up.
```sh
cd my-default-starter/
npm start
```
2. **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](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql)._
Open the `my-default-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time!
## Add content
#### Folders structure
Find folders `images` and `screens` inside the `content/elevator-pitch` folder.
```
root
├── content
│ └── elevator-pitch
│ ├── images
│ │ └── ...
│ └── screens
│ └── ...
```
Put a `jpg` file named `avatar.jpg` into the `images` folder. Then add two or more `markdown` files to the `screens` folder.
```
root
├── content
│ └── elevator-pitch
│ ├── images
│ │ └── avatar.jpg
│ └── screens
│ ├── 1___first-screen.md
│ └── 2___second-screen.md
```
#### Files names
You can not use a different name for avatar than `avatar.jpg`.
The names of `markdown` files have to obey a pattern `X___slug.md`. Where `X` is a number indicating position of the screen. The number must be follewed by the `___` separator ( 3 x undescore ). The last part of the name, a `slug` is optional. Knowing that, you can name a file like this `1___.md` or `1__first-scrren.md`. Take a look at the [demo content files](https://github.com/greglobinski/gatsby-themes/tree/master/packages/gatsby-theme-elevator-pitch/content/screens) of the theme in the repository.
#### Markdown `screen` files
This is example of a `markdown` file with content for one screen. Two sections: title (`#`) and a paragraph text below.
```
# This is the screen's title
And the screen's body copy.
```
You can add as many `screen` files as you want. But remember it should be an elevator pitch so less is better. ;)
#### Meta data and social links
Update your `gatsby-config.js`
```
module.exports = {
siteMetadata: {
title: `Gatsby.js 'Elevator Pitch' theme`,
url: `https://khriztianmoreno.dev`,
image: 'preview.png',
language: 'en',
description: 'FullStack Javascript Developer and Community builder | Producer @commitfm | Co-Organize of @MedellinJS @avanet.',
socialLinks: {
github: 'https://github.com/khriztianmoreno',
twitter: 'https://twitter.com/khriztianmoreno',
mailto: 'mailto:khriztianmoreno@gmail.com',
},
},
module.exports = {
__experimentalThemes: ['gatsby-theme-elevator-pitch']
};
```
## 💫 Deploy
[](https://app.netlify.com/start/deploy?repository=https://github.com/khriztianmoreno/site-elevator-pitch)