{"version":3,"file":"component---src-pages-portfolio-js-43a076f271ce5c4b789f.js","mappings":"0MAQMA,EAAc,WAClB,OACA,gBAAC,EAAAC,EAAD,CACCC,IAAI,wCACJC,UAAU,QACVC,IAAI,gDAHL,sBA8GF,UAtGkB,kBACjB,gCACC,gBAAC,IAAD,CAAKC,MAAM,cACV,wBAAMF,UAAU,aACf,gBAAC,IAAD,MACA,sBAAIA,UAAU,cAAd,aACA,uBAAKA,UAAU,YACd,gBAACH,EAAD,MACA,qBAAGG,UAAU,WAAb,yHAED,uBAAKA,UAAU,YACd,kDAGA,qBAAGG,KAAK,KACP,sBAAIH,UAAU,gBAAd,eAED,gGACA,0BACC,uCACC,qBAAGA,UAAU,YAAY,aAAW,SAASG,KAAK,wBAAlD,aADD,+CAGC,qBAAGH,UAAU,YAAY,aAAW,QAAQG,KAAK,uBAAjD,WAHD,uJAKA,sGACC,qBAAGH,UAAU,YAAY,aAAW,UAAUG,KAAK,uBAAnD,aADD,+JAGA,wGACC,qBAAGH,UAAU,YAAY,aAAW,SAASG,KAAK,qBAAlD,eAED,0BACC,qBAAGH,UAAU,YAAY,aAAW,YAAYG,KAAK,uBAArD,YADD,yDAGA,0BACC,qBAAGH,UAAU,YAAY,aAAW,OAAOG,KAAK,yBAAhD,UACA,qBAAGH,UAAU,YAAY,aAAW,oBAAoBG,KAAK,iCAA7D,wBACA,qBAAGH,UAAU,YAAY,aAAW,gBAAgBG,KAAK,iDAAzD,oBACA,qBAAGH,UAAU,YAAY,aAAW,2BAA2BG,KAAK,0DAApE,8BAJD,gEAMA,mIACC,qBAAGH,UAAU,YAAY,aAAW,gBAAgBG,KAAK,+CAAzD,iBADD,+IAIA,iDACC,qBAAGH,UAAU,YAAY,aAAW,OAAOG,KAAK,sBAAhD,WAED,8DACC,qBAAGH,UAAU,YAAY,aAAW,OAAOG,KAAK,4BAAhD,WAED,sHAED,4KACA,0BAAQH,UAAU,aAClB,qBAAGG,KAAK,iDACP,gBAAC,IAAD,CAAQH,UAAU,iBAAiBC,IAAI,gBACtC,uDAIH,uBAAKD,UAAU,cAEd,qBAAG,aAAW,gBAAgBG,KAAK,sCAClC,sBAAIH,UAAU,gBAAd,mBAED,mHACA,0BAAQA,UAAU,aAClB,qBAAG,aAAW,SAASG,KAAK,6CAC3B,gBAAC,IAAD,CAAQH,UAAU,iBAAiBC,IAAI,gBACtC,sDAIF,qBAAG,aAAW,gBAAgBE,KAAK,6CAClC,sBAAIH,UAAU,gBAAd,kBAED,mIACA,0BAAQA,UAAU,aAClB,qBAAG,aAAW,SAASG,KAAK,6CAC3B,gBAAC,IAAD,CAAQH,UAAU,iBAAiBC,IAAI,gBACtC,sDAKF,qBAAG,aAAW,iBAAiBE,KAAK,kDACnC,sBAAIH,UAAU,gBAAd,mBAED,kIACA,0BAAQA,UAAU,aAClB,qBAAG,aAAW,SAASG,KAAK,oDAC3B,gBAAC,IAAD,CAAQH,UAAU,iBAAiBC,IAAI,gBACtC,wDAKJ,2BACC,gBAAC,IAAD,U","sources":["webpack://clark-newell-blog/./src/pages/portfolio.js"],"sourcesContent":["import React from 'react';\nimport { StaticImage } from 'gatsby-plugin-image';\nimport Seo from '../components/seo';\nimport Header from '../components/Header';\nimport Footer from '../components/Footer';\n\nimport Github from '../assets/github.inline.svg';\n\nconst ClarkWebOne = () => {\n  return ( \n\t\t<StaticImage\n\t\t\tsrc='../images/clarknewell_og-homepage.jpg'\n\t\t\tclassName=\"image\"\n\t\t\talt=\"Original Clark Newell web development website\"\n\t\t/>\n\t)\n}\n\nconst Portfolio = () => (\n\t<>  \n\t\t<Seo title='Portfolio' />\n\t\t\t<main className=\"main-grid\">\n\t\t\t\t<Header />\n\t\t\t\t<h1 className=\"page-title\">portfolio</h1>\n\t\t\t\t<div className=\"grid-one\">\n\t\t\t\t\t<ClarkWebOne />\n\t\t\t\t\t<p className=\"caption\">The first iteration of my personal website was created with an early version of Gatsby and a template from HTML5 UP.</p>\n\t\t\t\t</div>\t\n\t\t\t\t<div className=\"grid-two\">\n\t\t\t\t\t<h2>Highlighted Projects</h2>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t{/* Clark Blog */}\n\t\t\t\t\t<a href='/'>\n\t\t\t\t\t\t<h3 className=\"project-link\">Clark Blog</h3>\n\t\t\t\t\t</a>\n\t\t\t\t\t<p>Version 3.0 of my personal website presents the following features:</p>\t\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t<li>Built with\n\t\t\t\t\t\t\t<a className=\"dark-link\" aria-label=\"gatsby\" href=\"https://gatsbyjs.com\"> Gatsby, </a>\n\t\t\t\t\t\t\t\ta frontend framework based on the opensource \n\t\t\t\t\t\t\t<a className=\"dark-link\" aria-label=\"react\" href=\"https://reactjs.org\"> React </a>\n\t\t\t\t\t\t\tlibrary. Gatsby is a blazing-fast static site builder that comes out of the box with SEO and image handling. This UI stems from the default starter</li>\n\t\t\t\t\t\t<li>Taking advantage of modern jamstack technology, the frontend is hosted by\n\t\t\t\t\t\t\t<a className=\"dark-link\" aria-label=\"netlify\" href=\"https://netlify.com\"> Netlify </a>\n\t\t\t\t\t\t\t\twith CI/CD (Continuous Integration and Continuous Deployment) via Github commits. Netlify also provides the honeypot and data transfer for the contact form</li>\n\t\t\t\t\t\t<li>Custom backend and CMS (Content Management Studio) built with and hosted by\n\t\t\t\t\t\t\t<a className=\"dark-link\" aria-label=\"sanity\" href=\"https://sanity.io\"> Sanity.io</a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<a className=\"dark-link\" aria-label=\"graph q l\" href=\"https://graphql.org\">GraphQL </a>\n\t\t\t\t\t\t\tis implemented to traverse the Gatsby and Sanity APIs</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<a className=\"dark-link\" aria-label=\"sass\" href=\"https://sass-lang.com\">Sass, </a> \n\t\t\t\t\t\t\t<a className=\"dark-link\" aria-label=\"styled components\" href=\"https://styled-components.com\"> Styled Components, </a>\n\t\t\t\t\t\t\t<a className=\"dark-link\" aria-label=\"typography.js\" href=\"https://kyleamathews.github.io/typography.js/\"> Typography.js, </a>\n\t\t\t\t\t\t\t<a className=\"dark-link\" aria-label=\"react syntax highlighter\" href=\"https://www.npmjs.com/package/react-syntax-highlighter\">React Syntax Highlighter, </a> \n\t\t\t\t\t\t\tand a custom responsive grid are implemented for CSS styling</li>\n\t\t\t\t\t\t<li>Light and dark \"star\" modes are implemented with context and state management via React hooks, and the \n\t\t\t\t\t\t\t<a className=\"dark-link\" aria-label=\"use dark mode\" href=\"https://www.npmjs.com/package/use-dark-mode\"> useDarkMode </a>\n\t\t\t\t\t\t\tplugin. P.S. The dark \"star\" mode is meant to be a whimsical gimmick and does not represent my idea of a serious, functional dark mode 😉 ✨\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>Testing created with\n\t\t\t\t\t\t\t<a className=\"dark-link\" aria-label=\"jest\" href=\"https://jestjs.io/\"> Jest </a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>Accessbility audit performed with\n\t\t\t\t\t\t\t<a className=\"dark-link\" aria-label=\"wave\" href=\"https://wave.webaim.org/\"> WAVE </a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>This solo project features custom self-designed logo/branding and original blog content</li>\n\t\t\t\t\t</ul>\n\t\t\t\t\t<p>Already in progress, the next iteration of my site will be rebuilt featuring an expanded portfolio and a more commercial feel and fuctionality.</p>\n\t\t\t\t\t<button className=\"repo-link\">\t\n\t\t\t\t\t<a href='https://github.com/WCNewell/clark-blog-gatsby'>\n\t\t\t\t\t\t<Github className='portfolio-icon' alt='github icon' />\n\t\t\t\t\t\t\t<p>View the code on Github</p>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"grid-three\">\n\t\t\t\t\t\t\t\t\t{/* Clark's Slices */}\n\t\t\t\t\t<a aria-label=\"clarks slices\" href='https://clarks-slices.netlify.app/'>\n\t\t\t\t\t\t<h3 className=\"project-link\">Clark's Slices</h3>\n\t\t\t\t\t</a>\n\t\t\t\t\t<p>Completed the entire Master-Gatsby course from Wes Bos and this is the resulting demo.</p>\n\t\t\t\t\t<button className=\"repo-link\">\t\n\t\t\t\t\t<a aria-label=\"github\" href='https://github.com/WCNewell/master-gatsby'>\n\t\t\t\t\t\t<Github className='portfolio-icon' alt='github icon' />\n\t\t\t\t\t\t\t<p>View the code on Github</p>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t{/* Max Hamburger */}\n\t\t\t\t\t<a aria-label=\"max hamburger\" href='https://wcnewell.github.io/max-hamburger/'>\n\t\t\t\t\t\t<h3 className=\"project-link\">Max Hamburger</h3>\n\t\t\t\t\t</a>\n\t\t\t\t\t<p>Completed the entire Udemy React course from Maximilian Schwarzmueller and this is the resulting demo.</p>\n\t\t\t\t\t<button className=\"repo-link\">\t\n\t\t\t\t\t<a aria-label=\"github\" href='https://github.com/WCNewell/max-hamburger'>\n\t\t\t\t\t\t<Github className='portfolio-icon' alt='github icon' />\n\t\t\t\t\t\t\t<p>View the code on Github</p>\n\t\t\t\t\t</a>\n\t\t\t\t\t</button>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t{/* Vuetiful Goals */}\n\t\t\t\t\t<a aria-label=\"vuetiful goals\" href='https://vuetiful-goals.firebaseapp.com/#/goals'>\n\t\t\t\t\t\t<h3 className=\"project-link\">Vuetiful Goals</h3>\n\t\t\t\t\t</a>\n\t\t\t\t\t<p>Very first CRUD (Create, Read, Update, Delete) application completed while at Galvanize using Vue.js.</p>\n\t\t\t\t\t<button className=\"repo-link\">\t\n\t\t\t\t\t<a aria-label=\"github\" href='https://github.com/WCNewell/VuetifulGoals-client'>\n\t\t\t\t\t\t<Github className='portfolio-icon' alt='github icon' />\n\t\t\t\t\t\t\t<p>View the code on Github</p>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</main>\n\t\t\t<div>\n\t\t\t\t<Footer />\n\t\t\t</div>\n\t</>\n);\n\nexport default Portfolio;\n"],"names":["ClarkWebOne","S","src","className","alt","title","href"],"sourceRoot":""}