{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/2020-04-18-hello-world/","result":{"data":{"markdownRemark":{"html":"<h1>This is Patric!</h1>\n<h3>An amazing personal website template</h3>\n<p>Patric is an accessible, performance optimized personal website template. It was built on the goal of being fast and responsive taking into mind JAMStack and mobile-first design philosophies . </p>\n<p>With a perfect performance, SEO and accessibility score on Lighthouse, Patric delivers on this vision greatly.</p>\n<p><span class=\"gatsby-resp-image-wrapper\" style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 720px;\">\n      <a class=\"gatsby-resp-image-link\" href=\"/static/76e20d61bf23eca1cd22b0f7cceb8ef5/412e6/screenshot_65.jpg\" style=\"display: block\" target=\"_blank\" rel=\"noopener\">\n    <span class=\"gatsby-resp-image-background-image\" style=\"padding-bottom: 51.11111111111111%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAIFBv/EABcBAAMBAAAAAAAAAAAAAAAAAAABAgP/2gAMAwEAAhADEAAAAaaZhhWiEVn/AP/EABwQAAEDBQAAAAAAAAAAAAAAAAMAAhMBEBESMf/aAAgBAQABBQKQOXkDpIy1eL//xAAWEQEBAQAAAAAAAAAAAAAAAAAAE2H/2gAIAQMBAT8BT1//xAAVEQEBAAAAAAAAAAAAAAAAAAAAEv/aAAgBAgEBPwFT/8QAHBAAAQMFAAAAAAAAAAAAAAAAAAECAxESIDEy/9oACAEBAAY/Atxi2ujqdNw//8QAGxAAAgIDAQAAAAAAAAAAAAAAAAExcRAhUaH/2gAIAQEAAT8hfFWiobAkaXiKRMP/2gAMAwEAAgADAAAAEBfv/8QAGBEAAgMAAAAAAAAAAAAAAAAAAAERIUH/2gAIAQMBAT8Qmxs9H//EABURAQEAAAAAAAAAAAAAAAAAAABx/9oACAECAQE/EEv/xAAbEAEAAgMBAQAAAAAAAAAAAAABABEhMUFRwf/aAAgBAQABPxAZ3NsMYNOpJaQfcoRNnYVsGz7KPJ//2Q==&apos;); background-size: cover; display: block;\"></span>\n  <picture>\n        <source srcset=\"/static/76e20d61bf23eca1cd22b0f7cceb8ef5/35f4d/screenshot_65.webp 180w,\n/static/76e20d61bf23eca1cd22b0f7cceb8ef5/67ca4/screenshot_65.webp 360w,\n/static/76e20d61bf23eca1cd22b0f7cceb8ef5/713e3/screenshot_65.webp 720w,\n/static/76e20d61bf23eca1cd22b0f7cceb8ef5/9d77b/screenshot_65.webp 1080w,\n/static/76e20d61bf23eca1cd22b0f7cceb8ef5/84e61/screenshot_65.webp 1440w,\n/static/76e20d61bf23eca1cd22b0f7cceb8ef5/68fbe/screenshot_65.webp 1919w\" sizes=\"(max-width: 720px) 100vw, 720px\" type=\"image/webp\">\n        <source srcset=\"/static/76e20d61bf23eca1cd22b0f7cceb8ef5/16a9b/screenshot_65.jpg 180w,\n/static/76e20d61bf23eca1cd22b0f7cceb8ef5/5087e/screenshot_65.jpg 360w,\n/static/76e20d61bf23eca1cd22b0f7cceb8ef5/d2038/screenshot_65.jpg 720w,\n/static/76e20d61bf23eca1cd22b0f7cceb8ef5/1b33f/screenshot_65.jpg 1080w,\n/static/76e20d61bf23eca1cd22b0f7cceb8ef5/babf4/screenshot_65.jpg 1440w,\n/static/76e20d61bf23eca1cd22b0f7cceb8ef5/412e6/screenshot_65.jpg 1919w\" sizes=\"(max-width: 720px) 100vw, 720px\" type=\"image/jpeg\">\n        <img class=\"gatsby-resp-image-image\" src=\"screenshot_65.jpg\" alt=\"Patric&apos;s lighthouse performance results. Performance: 100, Accessibility: 100, Best Practices:  93, SEO: 100\" title=\"Lighthouse performance test.\" loading=\"lazy\" style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\">\n      </picture>\n  </a>\n    </span></p>\n<h2>True PWA!</h2>\n<p><br>\nPatric is also a fully fledged Progressive Web App. Bringing fast and seamless transitions between different pages as well as offline support. That is what the closest thing to a native app on the entire web!</p>\n<h2>Awesome Blog!</h2>\n<p><br>\nBlog with a great CMS.</p>\n<p>Patric utilizes TailwindCSS, Gatsby, GraphQL and React to create a truly dynamic and pleasent experience.<br>\nOther features of Patric includes easy Google analytics implementation [Config] as well as automatic sitemap generation. All made possible by Gatsby and GraphQL.</p>\n<p><br>\nWhat Gatsby and GraphQL also make possible is an amazing custom blog system powered by NetlifyCMS for content management. Blog pages are fast and switching between posts is seamless, the page doesn't reload offering a great native app-like experience!</p>\n<p><span class=\"gatsby-resp-image-wrapper\" style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 720px;\">\n      <a class=\"gatsby-resp-image-link\" href=\"/static/c9b9b9cd4f0c2731452d11ad2d71f484/412e6/screenshot_5.jpg\" style=\"display: block\" target=\"_blank\" rel=\"noopener\">\n    <span class=\"gatsby-resp-image-background-image\" style=\"padding-bottom: 48.888888888888886%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAG4AD//xAAUEAEAAAAAAAAAAAAAAAAAAAAg/9oACAEBAAEFAl//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAUEAEAAAAAAAAAAAAAAAAAAAAg/9oACAEBAAY/Al//xAAXEAADAQAAAAAAAAAAAAAAAAAAESCR/9oACAEBAAE/IWbP/9oADAMBAAIAAwAAABDIL//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABoQAAICAwAAAAAAAAAAAAAAAAERADEgIXH/2gAIAQEAAT8QCQllg8PUqsP/2Q==&apos;); background-size: cover; display: block;\"></span>\n  <picture>\n        <source srcset=\"/static/c9b9b9cd4f0c2731452d11ad2d71f484/35f4d/screenshot_5.webp 180w,\n/static/c9b9b9cd4f0c2731452d11ad2d71f484/67ca4/screenshot_5.webp 360w,\n/static/c9b9b9cd4f0c2731452d11ad2d71f484/713e3/screenshot_5.webp 720w,\n/static/c9b9b9cd4f0c2731452d11ad2d71f484/9d77b/screenshot_5.webp 1080w,\n/static/c9b9b9cd4f0c2731452d11ad2d71f484/84e61/screenshot_5.webp 1440w,\n/static/c9b9b9cd4f0c2731452d11ad2d71f484/68fbe/screenshot_5.webp 1919w\" sizes=\"(max-width: 720px) 100vw, 720px\" type=\"image/webp\">\n        <source srcset=\"/static/c9b9b9cd4f0c2731452d11ad2d71f484/16a9b/screenshot_5.jpg 180w,\n/static/c9b9b9cd4f0c2731452d11ad2d71f484/5087e/screenshot_5.jpg 360w,\n/static/c9b9b9cd4f0c2731452d11ad2d71f484/d2038/screenshot_5.jpg 720w,\n/static/c9b9b9cd4f0c2731452d11ad2d71f484/1b33f/screenshot_5.jpg 1080w,\n/static/c9b9b9cd4f0c2731452d11ad2d71f484/babf4/screenshot_5.jpg 1440w,\n/static/c9b9b9cd4f0c2731452d11ad2d71f484/412e6/screenshot_5.jpg 1919w\" sizes=\"(max-width: 720px) 100vw, 720px\" type=\"image/jpeg\">\n        <img class=\"gatsby-resp-image-image\" src=\"screenshot_5.jpg\" alt=\"NetlifyCMS homepage\" title=\"NetlifyCMS homepage\" loading=\"lazy\" style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\">\n      </picture>\n  </a>\n    </span></p>\n<p><span class=\"gatsby-resp-image-wrapper\" style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 720px;\">\n      <a class=\"gatsby-resp-image-link\" href=\"/static/b99250a21b2c04ea0b000565640c1f4f/412e6/screenshot_4.jpg\" style=\"display: block\" target=\"_blank\" rel=\"noopener\">\n    <span class=\"gatsby-resp-image-background-image\" style=\"padding-bottom: 48.33333333333333%; position: relative; bottom: 0; left: 0; background-image: url(&apos;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAECBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAd5zQhh//8QAFRABAQAAAAAAAAAAAAAAAAAAEAL/2gAIAQEAAQUCaf/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EABgQAAMBAQAAAAAAAAAAAAAAAAABEEER/9oACAEBAAE/IdUaMHJ//9oADAMBAAIAAwAAABCDz//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABoQAQEBAAMBAAAAAAAAAAAAAAEAETFRcaH/2gAIAQEAAT8QcI07+2jcvcDBwm//2Q==&apos;); background-size: cover; display: block;\"></span>\n  <picture>\n        <source srcset=\"/static/b99250a21b2c04ea0b000565640c1f4f/35f4d/screenshot_4.webp 180w,\n/static/b99250a21b2c04ea0b000565640c1f4f/67ca4/screenshot_4.webp 360w,\n/static/b99250a21b2c04ea0b000565640c1f4f/713e3/screenshot_4.webp 720w,\n/static/b99250a21b2c04ea0b000565640c1f4f/9d77b/screenshot_4.webp 1080w,\n/static/b99250a21b2c04ea0b000565640c1f4f/84e61/screenshot_4.webp 1440w,\n/static/b99250a21b2c04ea0b000565640c1f4f/68fbe/screenshot_4.webp 1919w\" sizes=\"(max-width: 720px) 100vw, 720px\" type=\"image/webp\">\n        <source srcset=\"/static/b99250a21b2c04ea0b000565640c1f4f/16a9b/screenshot_4.jpg 180w,\n/static/b99250a21b2c04ea0b000565640c1f4f/5087e/screenshot_4.jpg 360w,\n/static/b99250a21b2c04ea0b000565640c1f4f/d2038/screenshot_4.jpg 720w,\n/static/b99250a21b2c04ea0b000565640c1f4f/1b33f/screenshot_4.jpg 1080w,\n/static/b99250a21b2c04ea0b000565640c1f4f/babf4/screenshot_4.jpg 1440w,\n/static/b99250a21b2c04ea0b000565640c1f4f/412e6/screenshot_4.jpg 1919w\" sizes=\"(max-width: 720px) 100vw, 720px\" type=\"image/jpeg\">\n        <img class=\"gatsby-resp-image-image\" src=\"screenshot_4.jpg\" alt=\"Post editing UI\" title=\"Post editing UI\" loading=\"lazy\" style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\">\n      </picture>\n  </a>\n    </span></p>\n<h2>Pricing and setup.</h2>\n<p>Patric is available now for $30 including free full setup [Text and image swaps and hosting setup. Customization and other edits at an extra cost]. <br>\nTo purchase Patric or for any enquires contact me on my email at <a href=\"mailto:me@khaledelbalal.me\">me@khaledelbalal.me</a> or use the <a href=\"https://patric.netlify.app/contact/\">contact form here!</a><br>\nI also create custom websites, contact me for more details!</p>","frontmatter":{"title":"Hello World!","date":"2020-04-18","featured":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAEFAgP/xAAWAQEBAQAAAAAAAAAAAAAAAAACAwT/2gAMAwEAAhADEAAAAbmZnahQxZ//xAAcEAAABgMAAAAAAAAAAAAAAAAAAQMQERIiMUH/2gAIAQEAAQUC6pNMwWm//8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQMBAT8BqP/EABURAQEAAAAAAAAAAAAAAAAAABAS/9oACAECAQE/AYP/xAAaEAABBQEAAAAAAAAAAAAAAAAAARESICEx/9oACAEBAAY/AhY9Men/xAAaEAACAwEBAAAAAAAAAAAAAAABEQAQQSFh/9oACAEBAAE/IScpRrKzAOlTyoV//9oADAMBAAIAAwAAABDL/wD/xAAXEQEBAQEAAAAAAAAAAAAAAAABABEx/9oACAEDAQE/EHM7et//xAAYEQEBAAMAAAAAAAAAAAAAAAABABFBYf/aAAgBAgEBPxB7sBov/8QAGxABAAMAAwEAAAAAAAAAAAAAAQARQSExUbH/2gAIAQEAAT8QQCLu3fsQQIcrjqIDSqhdhMQnk1n/2Q==","aspectRatio":2.0253164556962027,"src":"/static/f3d900e9fbc60d2679c065e7d284f7d3/a9b9e/screenshot_6.jpg","srcSet":"/static/f3d900e9fbc60d2679c065e7d284f7d3/836e2/screenshot_6.jpg 480w,\n/static/f3d900e9fbc60d2679c065e7d284f7d3/b1cc5/screenshot_6.jpg 960w,\n/static/f3d900e9fbc60d2679c065e7d284f7d3/a9b9e/screenshot_6.jpg 1901w","srcWebp":"/static/f3d900e9fbc60d2679c065e7d284f7d3/a48d7/screenshot_6.webp","srcSetWebp":"/static/f3d900e9fbc60d2679c065e7d284f7d3/35871/screenshot_6.webp 480w,\n/static/f3d900e9fbc60d2679c065e7d284f7d3/fcc10/screenshot_6.webp 960w,\n/static/f3d900e9fbc60d2679c065e7d284f7d3/a48d7/screenshot_6.webp 1901w","sizes":"(max-width: 1901px) 100vw, 1901px"}}}}}},"pageContext":{"slug":"/2020-04-18-hello-world/"}}}