{"version":3,"sources":["webpack:///./src/components/footer-blog.js","webpack:///./src/components/layout-blog.js","webpack:///./src/components/category-nav.js","webpack:///./src/components/category-nav-mobile.js","webpack:///./src/components/post-card.js","webpack:///./src/pages/writings.js"],"names":["FooterBlog","className","href","target","rel","Layout","children","CategoryNav","to","CategoryNavMobile","PostCard","query","render","data","fluid","imageOne","childImageSharp","alt","BlogList"],"mappings":"25MA4CeA,EAxCI,kBACf,6BAASC,UAAU,6BAef,yBAAKA,UAAU,sCACX,yBAAKA,UAAU,gBACX,wBAAIA,UAAU,gBAAd,iBACA,uBAAGA,UAAU,QAAb,uEACA,yBAAKA,UAAU,sBACX,qDACA,kDAEJ,yBAAKA,UAAU,UACX,4BACI,4BAAI,uBAAGC,KAAK,0CAA0CC,OAAO,SAASC,IAAI,cAAtE,cACJ,0BAAMH,UAAU,gBAAhB,KACA,4BAAI,uBAAGC,KAAK,4DAA4DC,OAAO,SAASC,IAAI,cAAxF,aACJ,0BAAMH,UAAU,gBAAhB,KACA,4BAAI,uBAAGC,KAAK,+BAA+BC,OAAO,SAASC,IAAI,cAA3D,YACJ,0BAAMH,UAAU,gBAAhB,KACA,4BAAI,uBAAGC,KAAK,mCAAmCC,OAAO,SAASC,IAAI,cAA/D,mBClBbC,EAXA,SAAC,GAAD,IAAGC,EAAH,EAAGA,SAAH,OACX,6BACI,kBAAC,IAAD,MACA,kBAAC,IAAD,MAECA,EAED,kBAAC,EAAD,Q,YCMOC,EAhBK,kBAChB,yBAAKN,UAAU,mDACX,yBAAKA,UAAU,gBACX,yBAAKA,UAAU,eACX,yBAAKA,UAAU,yBACX,kBAAC,IAAD,CAASO,GAAG,KAAZ,kBACA,kBAAC,IAAD,CAASA,GAAG,KAAZ,aACA,kBAAC,IAAD,CAASA,GAAG,KAAZ,YACA,kBAAC,IAAD,CAASA,GAAG,KAAZ,YACA,kBAAC,IAAD,CAASA,GAAG,KAAZ,iBCOLC,EAhBW,kBACtB,yBAAKR,UAAU,mDACX,yBAAKA,UAAU,gBACX,yBAAKA,UAAU,eACX,yBAAKA,UAAU,YACX,kBAAC,IAAD,CAASO,GAAG,wBAAZ,kBACA,kBAAC,IAAD,CAASA,GAAG,2BAAZ,aACA,kBAAC,IAAD,CAASA,GAAG,kBAAZ,YACA,kBAAC,IAAD,CAASA,GAAG,kBAAZ,YACA,kBAAC,IAAD,CAASA,GAAG,kBAAZ,iB,6CCoGLE,EA7GE,kBACb,kBAAC,cAAD,CACIC,MAAK,aAgCLC,OAAQ,SAACC,GAAD,OACJ,6BAASZ,UAAU,gBACf,yBAAKA,UAAU,oCACX,yBAAKA,UAAU,gBACX,yBAAKA,UAAU,OACX,yBAAKA,UAAU,uBACX,yBAAKA,UAAU,eACX,kBAAC,OAAD,CAAMO,GAAG,KACL,kBAAC,IAAD,CAAKM,MAAOD,EAAKE,SAASC,gBAAgBF,MAAOG,IAAI,iBAAiBhB,UAAU,qBAGxF,yBAAKA,UAAU,eACX,yBAAKA,UAAU,iBACX,kBAAC,OAAD,CAAMO,GAAG,KAAI,uBAAGP,UAAU,iBAAb,aACb,kBAAC,OAAD,CAAMO,GAAG,KAAI,wBAAIP,UAAU,cAAd,wCACb,kBAAC,OAAD,CAAMO,GAAG,iBAAgB,mEAAwC,0BAAMP,UAAU,aAAhB,mBAhDrG,UCsBWiB,UApBE,SAAC,GAAD,EAAGL,KAAH,OACf,kBAAC,EAAD,KACE,yBAAKZ,UAAU,oCACb,yBAAKA,UAAU,6BACb,yBAAKA,UAAU,gBACb,kBAAC,EAAD,OAEF,yBAAKA,UAAU,sBACb,kBAAC,EAAD,SAIN,yBAAKA,UAAU,8CACb,kBAAC,EAAD","file":"component---src-pages-writings-js-ed873712b6bb1a91dce8.js","sourcesContent":["import React from 'react'\nimport './style.scss'\n// import MailIcon from '../images/mail.svg'\n\nconst FooterBlog = () => (\n    <section className=\"column is-12 margin-top-8\">\n        {/* <div className=\"columns is-centered subscription-section\">\n            <div className=\"column is-6\">\n                <h2>Wanna Weekly Articles and Freebies?</h2>\n                <p className=\"has-text-centered\">\n                    <a href=\"#\" className=\"button subscribe\">\n                        <span className=\"icon-subscribe\">\n                            <img src={MailIcon} alt=\"Download Icon\" className=\"icon-subscribe\" />\n                        </span>\n                        <span>Subscribe to our Newsletter</span>\n                    </a>\n                </p>\n                <p>We respect your privacy. Unsubscribe at any time.</p>\n            </div>\n        </div> */}\n        <div className=\"columns is-centered footer-section\">\n            <div className=\"column is-10\">\n                <h3 className=\"footer-title\">Let's Connect</h3>\n                <p className=\"desc\">Feel free to reach out for collaborations or just a friendly hello.</p>\n                <div className=\"contact-text-white\">\n                    <p>willy.syafiq@gmail.com</p>\n                    <p>(+62)896 3635 4693</p>\n                </div>\n                <div className=\"social\">\n                    <ul>\n                        <li><a href=\"https://www.instagram.com/willy.syafiq/\" target=\"_blank\" rel=\"noreferrer\">Instagram</a></li>\n                        <span className=\"link-divider\">/</span>\n                        <li><a href=\"https://www.linkedin.com/in/willy-ahmad-syafiq-35095610a/\" target=\"_blank\" rel=\"noreferrer\">LinkedIn</a></li>\n                        <span className=\"link-divider\">/</span>\n                        <li><a href=\"https://twitter.com/willy_as\" target=\"_blank\" rel=\"noreferrer\">Twitter</a></li>\n                        <span className=\"link-divider\">/</span>\n                        <li><a href=\"https://dribbble.com/willysyafiq\" target=\"_blank\" rel=\"noreferrer\">Dribbble</a></li>\n                    </ul>\n                </div>\n            </div>\n        </div>\n    </section>\n)\n\nexport default FooterBlog\n","import React from 'react';\n\nimport './style.scss';\nimport Helmet from './helmet';\nimport Header from './header';\nimport FooterBlog from './footer-blog';\n\nconst Layout = ({ children }) => (\n    <div>\n        <Helmet />\n        <Header />\n\n        {children}\n\n        <FooterBlog />\n    </div>\n);\n\nexport default Layout;\n","import React from 'react';\nimport './style.scss';\nimport NavLink from './nav-link'\n\nconst CategoryNav = () => (\n    <div className=\"columns is-centered is-gapless is-hidden-mobile\">\n        <div className=\"column is-10\">\n            <div className=\"navbar-menu\">\n                <div className=\"navbar-start nav-link\">\n                    <NavLink to=\"#\">Product Design</NavLink>\n                    <NavLink to=\"#\">Self Help</NavLink>\n                    <NavLink to=\"#\">Business</NavLink>\n                    <NavLink to=\"#\">Frontend</NavLink>\n                    <NavLink to=\"#\">Freebies</NavLink>\n                </div>\n            </div>\n        </div>\n    </div>\n);\n\nexport default CategoryNav;\n","import React from 'react';\nimport './style.scss';\nimport NavLink from './nav-link'\n\nconst CategoryNavMobile = () => (\n    <div className=\"columns is-centered is-gapless is-hidden-tablet\">\n        <div className=\"column is-10\">\n            <div className=\"navbar-menu\">\n                <div className=\"nav-link\">\n                    <NavLink to=\"/blog/product-design\">Product Design</NavLink>\n                    <NavLink to=\"/blog/product-self-help\">Self Help</NavLink>\n                    <NavLink to=\"/blog/business\">Business</NavLink>\n                    <NavLink to=\"/blog/frontend\">Frontend</NavLink>\n                    <NavLink to=\"/blog/freebies\">Freebies</NavLink>\n                </div>\n            </div>\n        </div>\n    </div>\n);\n\nexport default CategoryNavMobile;\n","import React from \"react\"\nimport { StaticQuery, graphql, Link } from \"gatsby\"\nimport Img from 'gatsby-image';\n\nconst PostCard = () => (\n    <StaticQuery\n        query={graphql`\n            query FeaturedImage {\n                imageOne: file(relativePath: { eq: \"sample-1.png\" }) {\n                    childImageSharp {\n                        fluid(quality: 70) {\n                            ...GatsbyImageSharpFluid\n                        }\n                    }\n                }\n                imageTwo: file(relativePath: { eq: \"sample-2.png\" }) {\n                    childImageSharp {\n                        fluid(quality: 70) {\n                            ...GatsbyImageSharpFluid\n                        }\n                    }\n                }\n                imageThree: file(relativePath: { eq: \"sample-3.png\" }) {\n                    childImageSharp {\n                        fluid(quality: 70) {\n                            ...GatsbyImageSharpFluid\n                        }\n                    }\n                }\n                imageFour: file(relativePath: { eq: \"sample-6.png\" }) {\n                    childImageSharp {\n                        fluid(quality: 70) {\n                            ...GatsbyImageSharpFluid\n                        }\n                    }\n                }\n            }\n    `}\n        render={(data) => (\n            <section className=\"column is-10\">\n                <div className=\"columns is-centered is-multiline\">\n                    <div className=\"column is-12\">\n                        <div className=\"box\">\n                            <div className=\"columns is-centered\">\n                                <div className=\"column is-6\">\n                                    <Link to=\"#\">\n                                        <Img fluid={data.imageOne.childImageSharp.fluid} alt=\"featured image\" className=\"featured-image\" />\n                                    </Link>\n                                </div>\n                                <div className=\"column is-6\">\n                                    <div className=\"featured-card\">\n                                        <Link to=\"#\"><p className=\"post-category\">Category</p></Link>\n                                        <Link to=\"#\"><h2 className=\"post-title\">Hold tight this page is coming soon</h2></Link>\n                                        <Link to=\"/case-studies\"><p>Meanwhile, you can check case studies<span className=\"link-text\"> here</span></p></Link>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    {/* <div className=\"column is-4 is-flex\">\n                        <div className=\"box\">\n                            <div className=\"columns is-centered\">\n                                <div className=\"column is-12\">\n                                    <Link to=\"/\">\n                                        <Img fluid={data.imageTwo.childImageSharp.fluid} alt=\"featured image\" className=\"featured-image\" />\n                                    </Link>\n                                    <div className=\"post-card\">\n                                        <Link to=\"/\"><p className=\"post-category\">Product Design</p></Link>\n                                        <Link to=\"/\"><h2 className=\"post-title\">The Fastest Navigation Layout for a Three-Level ..</h2></Link>\n                                        <Link to=\"/\"><p>Years ago it was common practice to place a link to your sitemap in the footer navigation. Those days are over ..</p></Link>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div className=\"column is-4 is-flex\">\n                        <div className=\"box\">\n                            <div className=\"columns is-centered\">\n                                <div className=\"column is-12\">\n                                    <Link to=\"/\">\n                                        <Img fluid={data.imageThree.childImageSharp.fluid} alt=\"featured image\" className=\"featured-image\" />\n                                    </Link>\n                                    <div className=\"post-card\">\n                                        <Link to=\"/\"><p className=\"post-category\">Product Design</p></Link>\n                                        <Link to=\"/\"><h2 className=\"post-title\">How to Design Destructive Actions That Prevent Data Loss</h2></Link>\n                                        <Link to=\"/\"><p>Data loss is one of the greatest frustrations users can experience with computers. They not only lose their ..</p></Link>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div className=\"column is-4 is-flex\">\n                        <div className=\"box\">\n                            <div className=\"columns is-centered\">\n                                <div className=\"column is-12\">\n                                    <Link to=\"/\">\n                                        <Img fluid={data.imageFour.childImageSharp.fluid} alt=\"featured image\" className=\"featured-image\" />\n                                    </Link>\n                                    <div className=\"post-card\">\n                                        <Link to=\"/\"><p className=\"post-category\">Product Design</p></Link>\n                                        <Link to=\"/\"><h2 className=\"post-title\">When You Need to Show a Button’s Loading State</h2></Link>\n                                        <Link to=\"/\"><p>Buttons have more than an enabled and disabled state. They also have a loading state. The loading state isn't usually ..</p></Link>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div> */}\n                </div>\n            </section>\n        )}\n    />\n)\n\nexport default PostCard","import React from 'react';\nimport LayoutBlog from '../components/layout-blog';\nimport CategoryNav from '../components/category-nav';\nimport CategoryNavMobile from '../components/category-nav-mobile';\nimport PostCard from '../components/post-card';\n// import Pagination from '../components/pagination';\n\nconst BlogList = ({ data }) => (\n  <LayoutBlog>\n    <div className=\"columns is-centered is-multiline\">\n      <div className=\"column is-12 category-nav\">\n        <div className=\"border-bound\">\n          <CategoryNav />\n        </div>\n        <div className=\"mobile-cat-section\">\n          <CategoryNavMobile />\n        </div>\n      </div>\n    </div>\n    <div className=\"columns blog-list is-centered is-multiline\">\n      <PostCard />\n      {/* <Pagination /> */}\n    </div>\n  </LayoutBlog>\n\n);\n\nexport default BlogList;\n"],"sourceRoot":""}