{"version":3,"sources":["webpack:///./src/pages/case-studies/timestamp.js","webpack:///./src/data/timestamp.js"],"names":["TimestampPage","location","name","data","description","techUsed","sourceLinks","alt","images","main","demoLink","links","href","link","text","imageData","useStaticQuery","imageQuery","console","log","title","image","mainImg","fluid","landing","childImageSharp","reverse","notelist","createMenu","note","completedSequence","search","stats","lightDarkMode","linkText","date","color","illustration","src","sub1","require","sub2","csLink","altMessage","api","frontend"],"mappings":"4FAAA,iLA2MeA,UA3LO,SAAC,GAAkB,IAAhBC,EAAe,EAAfA,SAChBC,EAA6CC,IAA7CD,KAAME,EAAuCD,IAAvCC,YAAaC,EAA0BF,IAA1BE,SAAUC,EAAgBH,IAAhBG,YAC7BC,EAAQJ,IAAKK,OAAOC,KAApBF,IACAG,EAAaP,IAAbO,SAEFC,EACL,yBACC,mBAAGC,KAAMF,EAASG,MAAOH,EAASI,OAI9BC,EAAYC,YAAeC,GAEjC,OADAC,QAAQC,IAAIJ,GAEX,cAAC,IAAD,CAAQd,SAAUA,GACjB,cAAC,IAAD,CAAKmB,MAAM,kBACX,cAAC,IAAD,CACCA,MAAOlB,EACPY,KAAMV,EACNiB,MAAON,EAAUO,QACjBf,IAAKA,EACLI,MAAOA,EACPL,YAAaA,EACbD,SAAUA,IAEX,cAAC,IAAD,KACC,cAAC,IAAD,mCAGA,cAAC,IAAD,KACC,cAAC,IAAD,KACC,cAAC,IAAD,yBACA,wTASD,cAAC,IAAD,CACCkB,MAAOR,EAAUS,QAAQC,gBAAgBF,MACzChB,IAAI,yBAGN,cAAC,IAAD,CAAkBmB,SAAO,GACxB,cAAC,IAAD,KACC,cAAC,IAAD,wBACA,6XAWD,cAAC,IAAD,CACCH,MAAOR,EAAUY,SAASF,gBAAgBF,MAC1ChB,IAAI,yBAGN,cAAC,IAAD,KACC,cAAC,IAAD,KACC,cAAC,IAAD,qBACA,uYAWD,cAAC,IAAD,CACCgB,MAAOR,EAAUa,WAAWH,gBAAgBF,MAC5ChB,IAAI,2BAIN,cAAC,IAAD,CAAkBmB,SAAO,GACxB,cAAC,IAAD,KACC,cAAC,IAAD,yBACA,gZAWD,cAAC,IAAD,CACCH,MAAOR,EAAUc,KAAKJ,gBAAgBF,MACtChB,IAAI,oBAGN,cAAC,IAAD,KACC,cAAC,IAAD,KACC,cAAC,IAAD,wBACA,mWAUD,cAAC,IAAD,CACCgB,MACCR,EAAUe,kBAAkBL,gBAAgBF,MAE7ChB,IAAI,gDAGN,cAAC,IAAD,CAAkBmB,SAAO,GACxB,cAAC,IAAD,KACC,cAAC,IAAD,gCACA,gVAUD,cAAC,IAAD,CACCH,MAAOR,EAAUgB,OAAON,gBAAgBF,MACxChB,IAAI,2BAGN,cAAC,IAAD,KACC,cAAC,IAAD,KACC,cAAC,IAAD,0BACA,wSASD,cAAC,IAAD,CACCgB,MAAOR,EAAUiB,MAAMP,gBAAgBF,MACvChB,IAAI,0BAGN,cAAC,IAAD,CAAkBmB,SAAO,GACxB,cAAC,IAAD,KACC,cAAC,IAAD,2BACA,qaAWD,cAAC,IAAD,CACCH,MAAOR,EAAUkB,cAAcR,gBAAgBF,MAC/ChB,IAAI,6BAGN,cAAC,IAAD,CACCa,MAAM,kCACNc,SAAS,mBASd,IAAMjB,EAAU,c,kCC7MD,KACdf,KAAM,YACNE,YACC,6NACD+B,KAAM,YACNC,MAAO,UACP5B,OAAQ,CACP6B,aAAc,CACbC,IAAK,GACL/B,IAAK,IAENE,KAAM,CACL6B,IAAK,GACL/B,IAAK,iBAENgC,KAAM,CACLD,IAAKE,EAAQ,QACbjC,IAAK,eAENkC,KAAM,CACLH,IAAKE,EAAQ,QACbjC,IAAK,gBAGPmC,OAAQ,CACP7B,KAAM,0BACNC,KAAM,cAEPJ,SAAU,CACTG,KAAM,mCACNC,KAAM,aAEPR,YAAa,CACZqC,WAAY,GACZC,IAAK,CACJ/B,KAAM,4CACNC,KAAM,OAEP+B,SAAU,CACThC,KAAM,iDACNC,KAAM,aAGRT,SAAU,CACT,aACA,UACA,QACA,aACA,UACA,OACA,OACA,SACA,SACA,SACA,QACA,oBACA","file":"component---src-pages-case-studies-timestamp-js-38e2482fe06c21622e40.js","sourcesContent":["import React from 'react';\nimport { graphql, useStaticQuery } from 'gatsby';\n\nimport SEO from '../../components/Layout/SEO';\nimport Layout from '../../components/Layout/Layout';\nimport CaseStudyHeader from '../../components/CaseStudy/CaseStudyHeader';\nimport SectionLight from '../../components/shared/SectionLight';\nimport CaseStudySectionHeader from '../../components/CaseStudy/CaseStudySectionHeader';\nimport CaseStudySection from '../../components/CaseStudy/CaseStudySection';\nimport CaseStudyText from '../../components/CaseStudy/CaseStudyText';\nimport CaseStudyImage from '../../components/CaseStudy/CaseStudyImage';\nimport HeadingArrow from '../../components/shared/HeadingArrow';\nimport Contact from '../../components/shared/Contact';\n\nimport data from '../../data/timestamp';\n\nconst TimestampPage = ({ location }) => {\n\tconst { name, description, techUsed, sourceLinks } = data;\n\tconst { alt } = data.images.main;\n\tconst { demoLink } = data;\n\n\tconst links = (\n\t\t<div>\n\t\t\t<a href={demoLink.link}>{demoLink.text}</a>\n\t\t</div>\n\t);\n\n\tconst imageData = useStaticQuery(imageQuery);\n\tconsole.log(imageData);\n\treturn (\n\t\t<Layout location={location}>\n\t\t\t<SEO title='Timestamp App' />\n\t\t\t<CaseStudyHeader\n\t\t\t\ttitle={name}\n\t\t\t\ttext={description}\n\t\t\t\timage={imageData.mainImg}\n\t\t\t\talt={alt}\n\t\t\t\tlinks={links}\n\t\t\t\tsourceLinks={sourceLinks}\n\t\t\t\ttechUsed={techUsed}\n\t\t\t/>\n\t\t\t<SectionLight>\n\t\t\t\t<CaseStudySectionHeader>\n\t\t\t\t\tCapturing Progress in Time\n\t\t\t\t</CaseStudySectionHeader>\n\t\t\t\t<CaseStudySection>\n\t\t\t\t\t<CaseStudyText>\n\t\t\t\t\t\t<HeadingArrow>Project Overview</HeadingArrow>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tTimestamp is a notes and productivity app with the\n\t\t\t\t\t\t\tcore idea of giving users feedback on how much their\n\t\t\t\t\t\t\tefforts are accumulating to motivate their growth.\n\t\t\t\t\t\t\tUsers have access to multiple statistics to give\n\t\t\t\t\t\t\tthem instant feedback in the moment or to watch as\n\t\t\t\t\t\t\ttheir numbers grow over time.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</CaseStudyText>\n\t\t\t\t\t<CaseStudyImage\n\t\t\t\t\t\tfluid={imageData.landing.childImageSharp.fluid}\n\t\t\t\t\t\talt='Timestamp dashboard'\n\t\t\t\t\t/>\n\t\t\t\t</CaseStudySection>\n\t\t\t\t<CaseStudySection reverse>\n\t\t\t\t\t<CaseStudyText>\n\t\t\t\t\t\t<HeadingArrow>Organizing Data</HeadingArrow>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tTimestamp was one more data heavy apps that I've\n\t\t\t\t\t\t\tdesigned for. Due to the nature of the app\n\t\t\t\t\t\t\trequirements, I knew that much of my design approach\n\t\t\t\t\t\t\twould be around creating strong list components that\n\t\t\t\t\t\t\thad multiple ways of filtering and sorting\n\t\t\t\t\t\t\tinformation. Pagination was another key requirement\n\t\t\t\t\t\t\tfeature, due to possibility of the fast scaling data\n\t\t\t\t\t\t\tgrowth.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</CaseStudyText>\n\t\t\t\t\t<CaseStudyImage\n\t\t\t\t\t\tfluid={imageData.notelist.childImageSharp.fluid}\n\t\t\t\t\t\talt='Timestamp note list'\n\t\t\t\t\t/>\n\t\t\t\t</CaseStudySection>\n\t\t\t\t<CaseStudySection>\n\t\t\t\t\t<CaseStudyText>\n\t\t\t\t\t\t<HeadingArrow>Taking Notes</HeadingArrow>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tNext up, I built a custom modal form component that\n\t\t\t\t\t\t\tlets users easily switch between adding a Project,\n\t\t\t\t\t\t\tTask, or Note to the app. This form can be accessed\n\t\t\t\t\t\t\tin multiple ways to present users with options in\n\t\t\t\t\t\t\thow they use the app. Users can open the modal by\n\t\t\t\t\t\t\tclicking on a button in the global toolbar menu or\n\t\t\t\t\t\t\tadd an item inline on their current Project or Task\n\t\t\t\t\t\t\tlist.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</CaseStudyText>\n\t\t\t\t\t<CaseStudyImage\n\t\t\t\t\t\tfluid={imageData.createMenu.childImageSharp.fluid}\n\t\t\t\t\t\talt='Timestamp create menu'\n\t\t\t\t\t/>\n\t\t\t\t</CaseStudySection>\n\n\t\t\t\t<CaseStudySection reverse>\n\t\t\t\t\t<CaseStudyText>\n\t\t\t\t\t\t<HeadingArrow>Documenting Time</HeadingArrow>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tThe main data input of Timestamp is called a Note.\n\t\t\t\t\t\t\tNotes allow users to document what they work on each\n\t\t\t\t\t\t\tday in a flexible manner. Users can write only a few\n\t\t\t\t\t\t\tsentence fragments to jog their memory or create\n\t\t\t\t\t\t\tlong-form notes with heavier formatting to organize\n\t\t\t\t\t\t\ttheir thoughts. Once a note is entered, it triggers\n\t\t\t\t\t\t\tautomatic scripts that increment a users dashboard\n\t\t\t\t\t\t\tstatistics.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</CaseStudyText>\n\t\t\t\t\t<CaseStudyImage\n\t\t\t\t\t\tfluid={imageData.note.childImageSharp.fluid}\n\t\t\t\t\t\talt='Timestamp note'\n\t\t\t\t\t/>\n\t\t\t\t</CaseStudySection>\n\t\t\t\t<CaseStudySection>\n\t\t\t\t\t<CaseStudyText>\n\t\t\t\t\t\t<HeadingArrow>Start to Finish</HeadingArrow>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tUsers have the option of working on Projects and\n\t\t\t\t\t\t\tTasks for as long as they choose or can decide to\n\t\t\t\t\t\t\tcomplete an item and move on to something new. Once\n\t\t\t\t\t\t\ta Project or Task is completed, the app filters it\n\t\t\t\t\t\t\tinto a Completed list where it can easily be\n\t\t\t\t\t\t\taccessed or reactivated for if a user decides to\n\t\t\t\t\t\t\twork on it again in the future.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</CaseStudyText>\n\t\t\t\t\t<CaseStudyImage\n\t\t\t\t\t\tfluid={\n\t\t\t\t\t\t\timageData.completedSequence.childImageSharp.fluid\n\t\t\t\t\t\t}\n\t\t\t\t\t\talt='Timestamp completed actions sequence image'\n\t\t\t\t\t/>\n\t\t\t\t</CaseStudySection>\n\t\t\t\t<CaseStudySection reverse>\n\t\t\t\t\t<CaseStudyText>\n\t\t\t\t\t\t<HeadingArrow>Searching for Something</HeadingArrow>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tEffective search features can help users feel more\n\t\t\t\t\t\t\tin control of their data. Timestamp gives users the\n\t\t\t\t\t\t\tability to filter by Title, Description, Tag, or\n\t\t\t\t\t\t\tDate to help them refine their search capabilities.\n\t\t\t\t\t\t\tResults are displayed on cards that give quick\n\t\t\t\t\t\t\tsnapshots of key details for easy skimming and\n\t\t\t\t\t\t\tfiltering.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</CaseStudyText>\n\t\t\t\t\t<CaseStudyImage\n\t\t\t\t\t\tfluid={imageData.search.childImageSharp.fluid}\n\t\t\t\t\t\talt='Timestamp search page'\n\t\t\t\t\t/>\n\t\t\t\t</CaseStudySection>\n\t\t\t\t<CaseStudySection>\n\t\t\t\t\t<CaseStudyText>\n\t\t\t\t\t\t<HeadingArrow>Hardwork Pays Off</HeadingArrow>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tUsers can navigate to the Activity page to see\n\t\t\t\t\t\t\tmultiple statistics related to their effort.\n\t\t\t\t\t\t\tTimestamp organizes user data and breaks down\n\t\t\t\t\t\t\tactivity by year, month, and daily statistics. Users\n\t\t\t\t\t\t\tcan swap between year stats to see how much their\n\t\t\t\t\t\t\teffort has grown over time.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</CaseStudyText>\n\t\t\t\t\t<CaseStudyImage\n\t\t\t\t\t\tfluid={imageData.stats.childImageSharp.fluid}\n\t\t\t\t\t\talt='Timestamp stats page'\n\t\t\t\t\t/>\n\t\t\t\t</CaseStudySection>\n\t\t\t\t<CaseStudySection reverse>\n\t\t\t\t\t<CaseStudyText>\n\t\t\t\t\t\t<HeadingArrow>Designing in Color</HeadingArrow>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tSetting up an app for multiple color modes can be\n\t\t\t\t\t\t\tchallenging at times. Brand colors used for links\n\t\t\t\t\t\t\tand buttons might look great against a white\n\t\t\t\t\t\t\tbackground, but end up being too low contrast when\n\t\t\t\t\t\t\tit's inverted. Increasing the HSL lightness value of\n\t\t\t\t\t\t\tthe main brand color by a few percentage points can\n\t\t\t\t\t\t\tkeep colors accessible for key users without much\n\t\t\t\t\t\t\toptical difference on a darker background.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</CaseStudyText>\n\t\t\t\t\t<CaseStudyImage\n\t\t\t\t\t\tfluid={imageData.lightDarkMode.childImageSharp.fluid}\n\t\t\t\t\t\talt='Timestamp settings page'\n\t\t\t\t\t/>\n\t\t\t\t</CaseStudySection>\n\t\t\t\t<Contact\n\t\t\t\t\ttitle='Interested in Working Together?'\n\t\t\t\t\tlinkText='Let Me Know'\n\t\t\t\t/>\n\t\t\t</SectionLight>\n\t\t</Layout>\n\t);\n};\n\nexport default TimestampPage;\n\nconst imageQuery = graphql`\n\tquery TimestampQuery {\n\t\tmainImg: file(\n\t\t\trelativePath: { eq: \"case-study/timestamp/timestamp-multi.png\" }\n\t\t) {\n\t\t\tchildImageSharp {\n\t\t\t\tfluid(quality: 100) {\n\t\t\t\t\t...GatsbyImageSharpFluid_withWebp\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tlanding: file(\n\t\t\trelativePath: { eq: \"case-study/timestamp/app-landing.png\" }\n\t\t) {\n\t\t\tchildImageSharp {\n\t\t\t\tfluid(quality: 100) {\n\t\t\t\t\t...GatsbyImageSharpFluid_withWebp\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tcreateMenu: file(\n\t\t\trelativePath: { eq: \"case-study/timestamp/create-menu.png\" }\n\t\t) {\n\t\t\tchildImageSharp {\n\t\t\t\tfluid(quality: 100) {\n\t\t\t\t\t...GatsbyImageSharpFluid_withWebp\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tlightDarkMode: file(\n\t\t\trelativePath: { eq: \"case-study/timestamp/light-dark-mode.png\" }\n\t\t) {\n\t\t\tchildImageSharp {\n\t\t\t\tfluid(quality: 100) {\n\t\t\t\t\t...GatsbyImageSharpFluid_withWebp\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tnote: file(relativePath: { eq: \"case-study/timestamp/note.png\" }) {\n\t\t\tchildImageSharp {\n\t\t\t\tfluid(quality: 100) {\n\t\t\t\t\t...GatsbyImageSharpFluid_withWebp\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tsearch: file(relativePath: { eq: \"case-study/timestamp/search.png\" }) {\n\t\t\tchildImageSharp {\n\t\t\t\tfluid(quality: 100) {\n\t\t\t\t\t...GatsbyImageSharpFluid_withWebp\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tstats: file(relativePath: { eq: \"case-study/timestamp/stats.png\" }) {\n\t\t\tchildImageSharp {\n\t\t\t\tfluid(quality: 100) {\n\t\t\t\t\t...GatsbyImageSharpFluid_withWebp\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tcompletedSequence: file(\n\t\t\trelativePath: { eq: \"case-study/timestamp/completed-sequence.png\" }\n\t\t) {\n\t\t\tchildImageSharp {\n\t\t\t\tfluid(quality: 100) {\n\t\t\t\t\t...GatsbyImageSharpFluid_withWebp\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tnotelist: file(\n\t\t\trelativePath: { eq: \"case-study/timestamp/notelist.png\" }\n\t\t) {\n\t\t\tchildImageSharp {\n\t\t\t\tfluid(quality: 100) {\n\t\t\t\t\t...GatsbyImageSharpFluid_withWebp\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n`;\n","export default {\n\tname: 'Timestamp',\n\tdescription:\n\t\t'A full stack notes and productivity app focused on helping users maximize efficiency when learning new skills. Users get real-time feedback from progress statistics that show them how much their efforts are paying off.',\n\tdate: 'OCT. 2020',\n\tcolor: '#078368',\n\timages: {\n\t\tillustration: {\n\t\t\tsrc: '',\n\t\t\talt: ''\n\t\t},\n\t\tmain: {\n\t\t\tsrc: '',\n\t\t\talt: 'Timestamp App'\n\t\t},\n\t\tsub1: {\n\t\t\tsrc: require(`../images/placeholder.svg`),\n\t\t\talt: 'placeholder'\n\t\t},\n\t\tsub2: {\n\t\t\tsrc: require(`../images/placeholder.svg`),\n\t\t\talt: 'placeholder'\n\t\t}\n\t},\n\tcsLink: {\n\t\tlink: '/case-studies/timestamp',\n\t\ttext: 'Case Study'\n\t},\n\tdemoLink: {\n\t\tlink: 'https://timestampapp.vercel.app/',\n\t\ttext: 'View Site'\n\t},\n\tsourceLinks: {\n\t\taltMessage: '',\n\t\tapi: {\n\t\t\tlink: 'https://github.com/bcorey85/timestamp-api',\n\t\t\ttext: 'API'\n\t\t},\n\t\tfrontend: {\n\t\t\tlink: 'https://github.com/bcorey85/timestamp-frontend',\n\t\t\ttext: 'Frontend'\n\t\t}\n\t},\n\ttechUsed: [\n\t\t'Typescript',\n\t\t'Next.js',\n\t\t'Redux',\n\t\t'PostgreSQL',\n\t\t'Node.js',\n\t\t'Sass',\n\t\t'Jest',\n\t\t'Enzyme',\n\t\t'Vercel',\n\t\t'Heroku',\n\t\t'Figma',\n\t\t'Affinity Designer',\n\t\t'Affinity Photo'\n\t]\n};\n"],"sourceRoot":""}