{"componentChunkName":"component---src-templates-post-jsx","path":"/build-your-portfolio-site-in-minutes-with-gatsby-portfolio-story","result":{"data":{"mdx":{"frontmatter":{"slug":"build-your-portfolio-site-in-minutes-with-gatsby-portfolio-story","title":"Build your portfolio site in minutes with Gatsby Portfolio Story","date":"04 January, 2020","image":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wgARCAALABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAMC/8QAFwEAAwEAAAAAAAAAAAAAAAAAAAEDBP/aAAwDAQACEAMQAAABjWDdbbBn/8QAGhAAAQUBAAAAAAAAAAAAAAAAEQABAxIgIf/aAAgBAQABBQIcESeuP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EAB4QAAEBCQAAAAAAAAAAAAAAAAEAAhEgISIxMoGR/9oACAEBAAY/AhULbesmuKRMH//EABwQAQACAQUAAAAAAAAAAAAAAAEAESAhQVFh8f/aAAgBAQABPyFFxyityeChDrDsw//aAAwDAQACAAMAAAAQeM//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAVEQEBAAAAAAAAAAAAAAAAAAAQEf/aAAgBAgEBPxCH/8QAHBABAAICAwEAAAAAAAAAAAAAAREhAKEgQVGB/9oACAEBAAE/EIkqpvgU+J5RkvTq3hEiVsd8P//Z","aspectRatio":1.7751479289940828,"src":"/static/4f3a6d4ee8f3997901b22d64e93a1056/897d1/gatsby-image.jpg","srcSet":"/static/4f3a6d4ee8f3997901b22d64e93a1056/5398f/gatsby-image.jpg 200w,\n/static/4f3a6d4ee8f3997901b22d64e93a1056/26a4d/gatsby-image.jpg 400w,\n/static/4f3a6d4ee8f3997901b22d64e93a1056/897d1/gatsby-image.jpg 600w","srcWebp":"/static/4f3a6d4ee8f3997901b22d64e93a1056/a213b/gatsby-image.webp","srcSetWebp":"/static/4f3a6d4ee8f3997901b22d64e93a1056/04c4c/gatsby-image.webp 200w,\n/static/4f3a6d4ee8f3997901b22d64e93a1056/ebea1/gatsby-image.webp 400w,\n/static/4f3a6d4ee8f3997901b22d64e93a1056/a213b/gatsby-image.webp 600w","sizes":"(max-width: 600px) 100vw, 600px"}}},"excerpt":"Learn how to build a blazing fast portfolio site in minutes with the Gatsby Portfolio Story starter."},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"slug\": \"build-your-portfolio-site-in-minutes-with-gatsby-portfolio-story\",\n  \"date\": \"04 January, 2020\",\n  \"dateForSorting\": \"2020-01-04T18:06:58.493Z\",\n  \"title\": \"Build your portfolio site in minutes with Gatsby Portfolio Story\",\n  \"tags\": [\"Gatsby\", \"React\"],\n  \"excerpt\": \"Learn how to build a blazing fast portfolio site in minutes with the Gatsby Portfolio Story starter.\",\n  \"image\": \"/assets/gatsby-image.jpeg\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"As a developer or designer, having an online makes it easier to showcase your previous work to prospective employers. In this article, I will walk you through how you can build a blazing fast portfolio site powered by Gatsby. This will be done with the help of a Gatsby starter I wrote.\"), mdx(\"p\", null, \"Let us begin!\"), mdx(\"p\", null, \"You can find the starter on Gatsby's plugin library \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.gatsbyjs.org/packages/gatsby-portfolio-story/\"\n  }), \"here\"), \".\"), mdx(\"p\", null, \"To use the starter, install the Gatsby CLI if you don't have it installed:\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"text\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-text\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"npm install -g gatsby-cli\"))), mdx(\"p\", null, \"Now that you have the Gatsby CLI installed, create a new Gatsby project with this command:\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"text\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-text\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"gatsby new {your-project-name} https://github.com/NodeJSs/gatsby-portfolio-story\"))), mdx(\"p\", null, \"Once you have done that, you should have a new Gatsby project with the gatsby-portfolio-story starter installed.\\nNow you can change your directory to that of the new Gatsby project:\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"text\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-text\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"cd {your-project-name}\"))), mdx(\"p\", null, \"Now run this command to get your local development server running so you can see the starter:\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"text\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-text\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"gatsby develop \"))), mdx(\"p\", null, \"or\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"text\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-text\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"npm run develop\"))), mdx(\"p\", null, \"Your server should now be running at \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"http://localhost:8000\"\n  }), \"localhost:8000\"), \".\"), mdx(\"p\", null, \"Your site should look like this\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"590px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/c561ac39708b1832fec715c066fe1595/d2346/gatsby-portfolio-story-image.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"42.19096965210955%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wgARCAAIABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAEDBv/EABYBAQEBAAAAAAAAAAAAAAAAAAABAv/aAAwDAQACEAMQAAABzElUhn//xAAXEAEBAQEAAAAAAAAAAAAAAAABAhMz/9oACAEBAAEFAjlnapUv/8QAFREBAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQMBAT8Bh//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABoQAAIDAQEAAAAAAAAAAAAAAAABERIhcZH/2gAIAQEABj8CeLskKvpVvUf/xAAYEAEBAQEBAAAAAAAAAAAAAAABEQBBUf/aAAgBAQABPyFtFudDQWpr5zP1Ed//2gAMAwEAAgADAAAAEAA//8QAFhEAAwAAAAAAAAAAAAAAAAAAARAh/9oACAEDAQE/EDC//8QAFREBAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQIBAT8Qp//EABkQAQEBAAMAAAAAAAAAAAAAAAERAFFxgf/aAAgBAQABPxAdRqHL9aPAgQUBzdawkVTx3//Z')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Preview of the site\",\n    \"title\": \"Preview of the site\",\n    \"src\": \"/static/c561ac39708b1832fec715c066fe1595/59653/gatsby-portfolio-story-image.jpg\",\n    \"srcSet\": [\"/static/c561ac39708b1832fec715c066fe1595/de1f9/gatsby-portfolio-story-image.jpg 148w\", \"/static/c561ac39708b1832fec715c066fe1595/9963e/gatsby-portfolio-story-image.jpg 295w\", \"/static/c561ac39708b1832fec715c066fe1595/59653/gatsby-portfolio-story-image.jpg 590w\", \"/static/c561ac39708b1832fec715c066fe1595/2385e/gatsby-portfolio-story-image.jpg 885w\", \"/static/c561ac39708b1832fec715c066fe1595/f35e0/gatsby-portfolio-story-image.jpg 1180w\", \"/static/c561ac39708b1832fec715c066fe1595/d2346/gatsby-portfolio-story-image.jpg 1351w\"],\n    \"sizes\": \"(max-width: 590px) 100vw, 590px\",\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"The starter uses Emotion for styling and markdown files for the content(your portfolio). It is also a PWA (Progressive Web App) by default.\"), mdx(\"h2\", null, \"Adding your portfolio\"), mdx(\"p\", null, \"Open the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"content\"), \" folder in the root directory and study the structure of the folders in it. Each folder in the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"content\"), \" folder represents a previous job or work you have done. In each folder, you have a markdown file which contains most of the information about that job and a preview image which will be displayed on the index page.\"), mdx(\"p\", null, \"Let's study one of the mock markdown files\"), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, \"//a-simple-design.md\")), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"markdown\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-markdown\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-markdown\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token hr punctuation\"\n  }), \"---\"), \"\\ntitle: A simple design for Halo\\ndate: 2019-02-04\\npublished: true\\ntags: [mobile, product design]\\nclient: Google\\nrole: Product designer\\nlink: google.com\\ncover_image: \\\"boxed-water-is-better-7mr6Yx-8WLc-unsplash.jpg\\\"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token title important\"\n  }), \"description: The magic of paint brush and a a little coffee\\n\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"---\")), \"\\n\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token title important\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"#\"), \" Mobile app demo\"), \"\\n\\nThey never said winning was easy. Some people can\\u2019t handle success, I can. The key is to drink coconut, fresh coconut, trust me. Give thanks to the most high. Surround yourself with angels. They don\\u2019t want us to win. Give thanks \"))), mdx(\"p\", null, \"The section of the markdown file sandwiched by a pair of \\\"---\\\" is called the frontmatter. This section contains information about a particular job.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Note:\"), \" your date should be in the same format shown above.\"), mdx(\"p\", null, \"After filling the frontmatter, you can proceed to write the other parts of your markdown file with a markdown editor or a CMS.\"), mdx(\"p\", null, \"That's basically all what you need to build your portfolio site, you can then host it using Netlify or your preferred method.\"), mdx(\"p\", null, \"You can reach out to me on twitter if you have any problems.\"));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"build-your-portfolio-site-in-minutes-with-gatsby-portfolio-story"}}}