{"version":3,"file":"component---src-pages-archive-js-68dce68234b1b64d4954.js","mappings":"qLAWMA,EAAuBC,EAAAA,QAAAA,IAAAA,WAAH,wEAAGA,CAAH,grCA2GZ,qBAAGC,MAAkBC,OAAOC,UAA5B,IA4Hd,UA/GoB,SAAC,GAAwB,IAAtBC,EAAqB,EAArBA,SACfC,EADoC,EAAXC,KACTC,kBAAkBC,MAClCC,GAAcC,EAAAA,EAAAA,QAAO,MACrBC,GAAcD,EAAAA,EAAAA,QAAO,MACrBE,GAAiBF,EAAAA,EAAAA,QAAO,IACxBG,GAAuBC,EAAAA,EAAAA,MAY7B,OAVAC,EAAAA,EAAAA,YAAU,WACJF,IAIJG,EAAAA,EAAAA,OAAUP,EAAYQ,SAASC,EAAAA,EAAAA,aAC/BF,EAAAA,EAAAA,OAAUL,EAAYM,SAASC,EAAAA,EAAAA,UAAS,IAAK,IAC7CN,EAAeK,QAAQE,SAAQ,SAACC,EAAKC,GAAN,OAAYL,EAAAA,EAAAA,OAAUI,GAAKF,EAAAA,EAAAA,UAAa,GAAJG,GAApC,IAChC,GAAE,IAGD,gBAAC,KAAD,CAAQjB,SAAUA,GAChB,gBAAC,IAAD,CAAQkB,MAAM,YAEd,4BACE,0BAAQF,IAAKX,GACX,sBAAIc,UAAU,eAAd,WACA,qBAAGA,UAAU,YAAb,wCAGF,gBAACxB,EAAD,CAAsBqB,IAAKT,GACzB,6BACE,6BACE,0BACE,kCACA,mCACA,sBAAIY,UAAU,kBAAd,WACA,sBAAIA,UAAU,kBAAd,cACA,oCAGJ,6BACGlB,EAASmB,OAAS,GACjBnB,EAASoB,KAAI,WAAWJ,GAAO,IAC7B,EAD4B,EAAdK,KAULC,YARPC,EADF,EACEA,KACAC,EAFF,EAEEA,OACAC,EAHF,EAGEA,SAGAR,EANF,EAMEA,MACAS,EAPF,EAOEA,KACAC,EARF,EAQEA,QAEF,OACE,sBAAIC,IAAKZ,EAAGD,IAAK,SAAAc,GAAE,OAAKtB,EAAeK,QAAQI,GAAKa,CAAjC,GACjB,sBAAIX,UAAU,iBAAd,GAAkC,IAAIY,KAAKP,GAAMQ,eAEjD,sBAAIb,UAAU,SAASD,GAEvB,sBAAIC,UAAU,0BACXS,EAAU,4BAAOA,GAAkB,kCAGtC,sBAAIT,UAAU,wBACXQ,aAAA,EAAAA,EAAMP,QAAS,GACdO,EAAKN,KAAI,SAACY,EAAMhB,GAAP,OACP,wBAAMY,IAAKZ,GACRgB,EACA,GACAhB,IAAMU,EAAKP,OAAS,GAAK,wBAAMD,UAAU,aAAhB,KAJrB,KASb,sBAAIA,UAAU,SACZ,2BACGO,GACC,qBAAGQ,KAAMR,EAAU,aAAW,iBAC5B,gBAAC,KAAD,CAAMS,KAAK,cAGdV,GACC,qBAAGS,KAAMT,EAAQ,aAAW,eAC1B,gBAAC,KAAD,CAAMU,KAAK,cAiBxB,QAOhB,C","sources":["webpack://v4/./src/pages/archive.js"],"sourcesContent":["import React, { useRef, useEffect } from 'react';\nimport { graphql } from 'gatsby';\nimport PropTypes from 'prop-types';\nimport { Helmet } from 'react-helmet';\nimport styled from 'styled-components';\nimport { srConfig } from '@config';\nimport sr from '@utils/sr';\nimport { Layout } from '@components';\nimport { Icon } from '@components/icons';\nimport { usePrefersReducedMotion } from '@hooks';\n\nconst StyledTableContainer = styled.div`\n margin: 100px -20px;\n\n @media (max-width: 768px) {\n margin: 50px -10px;\n }\n\n table {\n width: 100%;\n border-collapse: collapse;\n\n .hide-on-mobile {\n @media (max-width: 768px) {\n display: none;\n }\n }\n\n tbody tr {\n &:hover,\n &:focus {\n background-color: var(--light-navy);\n }\n }\n\n th,\n td {\n padding: 10px;\n text-align: left;\n\n &:first-child {\n padding-left: 20px;\n\n @media (max-width: 768px) {\n padding-left: 10px;\n }\n }\n &:last-child {\n padding-right: 20px;\n\n @media (max-width: 768px) {\n padding-right: 10px;\n }\n }\n\n svg {\n width: 20px;\n height: 20px;\n }\n }\n\n tr {\n cursor: default;\n\n td:first-child {\n border-top-left-radius: var(--border-radius);\n border-bottom-left-radius: var(--border-radius);\n }\n td:last-child {\n border-top-right-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n }\n }\n\n td {\n &.year {\n padding-right: 20px;\n\n @media (max-width: 768px) {\n padding-right: 10px;\n font-size: var(--fz-sm);\n }\n }\n\n &.title {\n padding-top: 15px;\n padding-right: 20px;\n color: var(--lightest-slate);\n font-size: var(--fz-xl);\n font-weight: 600;\n line-height: 1.25;\n }\n\n &.company {\n font-size: var(--fz-lg);\n white-space: nowrap;\n }\n\n &.tech {\n font-size: var(--fz-xxs);\n font-family: var(--font-mono);\n line-height: 1.5;\n .separator {\n margin: 0 5px;\n }\n span {\n display: inline-block;\n }\n }\n\n &.links {\n min-width: 100px;\n\n div {\n display: flex;\n align-items: center;\n\n a {\n ${({ theme }) => theme.mixins.flexCenter};\n flex-shrink: 0;\n }\n\n a + a {\n margin-left: 10px;\n }\n }\n }\n }\n }\n`;\n\nconst ArchivePage = ({ location, data }) => {\n const projects = data.allMarkdownRemark.edges;\n const revealTitle = useRef(null);\n const revealTable = useRef(null);\n const revealProjects = useRef([]);\n const prefersReducedMotion = usePrefersReducedMotion();\n\n useEffect(() => {\n if (prefersReducedMotion) {\n return;\n }\n\n sr.reveal(revealTitle.current, srConfig());\n sr.reveal(revealTable.current, srConfig(200, 0));\n revealProjects.current.forEach((ref, i) => sr.reveal(ref, srConfig(i * 10)));\n }, []);\n\n return (\n \n \n\n
\n
\n

Archive

\n

A big list of things I’ve worked on

\n
\n\n \n \n \n \n \n \n \n \n \n \n \n \n {projects.length > 0 &&\n projects.map(({ node }, i) => {\n const {\n date,\n github,\n external,\n // ios,\n // android,\n title,\n tech,\n company,\n } = node.frontmatter;\n return (\n (revealProjects.current[i] = el)}>\n \n\n \n\n \n\n \n\n \n \n );\n })}\n \n
YearTitleMade atBuilt withLink
{`${new Date(date).getFullYear()}`}{title}\n {company ? {company} : —}\n \n {tech?.length > 0 &&\n tech.map((item, i) => (\n \n {item}\n {''}\n {i !== tech.length - 1 && ·}\n \n ))}\n \n
\n {external && (\n \n \n \n )}\n {github && (\n \n \n \n )}\n {/* {ios && (\n \n \n \n )}\n {android && (\n \n \n \n )} */}\n
\n
\n \n
\n \n );\n};\nArchivePage.propTypes = {\n location: PropTypes.object.isRequired,\n data: PropTypes.object.isRequired,\n};\n\nexport default ArchivePage;\n\nexport const pageQuery = graphql`\n {\n allMarkdownRemark(\n filter: { fileAbsolutePath: { regex: \"/content/projects/\" } }\n sort: { fields: [frontmatter___date], order: DESC }\n ) {\n edges {\n node {\n frontmatter {\n date\n title\n tech\n github\n external\n # ios\n # android\n company\n }\n html\n }\n }\n }\n }\n`;\n"],"names":["StyledTableContainer","styled","theme","mixins","flexCenter","location","projects","data","allMarkdownRemark","edges","revealTitle","useRef","revealTable","revealProjects","prefersReducedMotion","usePrefersReducedMotion","useEffect","sr","current","srConfig","forEach","ref","i","title","className","length","map","node","frontmatter","date","github","external","tech","company","key","el","Date","getFullYear","item","href","name"],"sourceRoot":""}