{"version":3,"sources":["webpack:///./src/pages/about.tsx","webpack:///./src/@narative/gatsby-theme-novela/components/Lists/List.Unordered.tsx"],"names":["About","isDark","useColorMode","title","description","ListContainer","h3","SubscribeLinkContainer","to","href","target","p","theme","colors","primary","accent","mediaqueries","tablet","UnorderedList","articleText","colorModeTransition","desktop","phablet"],"mappings":"kWA4IeA,UAhID,WAAM,IAGZC,EAAuB,SAFTC,cADF,GAKlB,OACE,YAAC,IAAD,KACE,YAAC,IAAD,CACEC,MAAM,uCACNC,YAAY,yDAEd,YAAC,IAAD,KACE,YAACC,EAAD,KACE,YAAC,IAASC,GAAV,sCACA,mSAOA,uBACA,iJAEyD,IACvD,YAACC,EAAD,CAAwBN,OAAQA,GAC9B,YAAC,OAAD,CAAMO,GAAG,cAAT,cACwB,IAL5B,mCAQA,YAAC,IAAD,KACE,sBACE,qDAEF,kCACY,IACV,iBAAGC,KAAK,0BAA0BC,OAAO,UAAzC,WAFF,KAOA,oEAC8C,IAC5C,iBAAGD,KAAK,wBAAwBC,OAAO,UAAvC,YAFF,iBAKiB,IACf,iBAAGD,KAAK,uBAAuBC,OAAO,UAAtC,aAEK,IARP,QASQ,IACN,iBAAGD,KAAK,uBAAuBC,OAAO,UAAtC,WAVF,KAeA,0EACoD,IAClD,iBAAGD,KAAK,+BAA+BC,OAAO,UAA9C,aAFF,KAOA,yDACmC,IACjC,iBAAGD,KAAK,yBAAyBC,OAAO,UAAxC,iBAFF,KAOA,yEACmD,IACjD,iBAAGD,KAAK,wCAAwCC,OAAO,UAAvD,kBAEK,IAJP,MAME,iBACED,KAAK,mHACLC,OAAO,UAEN,IAJH,6DANF,KAeA,qFAC+D,IAC7D,iBAAGD,KAAK,qCAAqCC,OAAO,UACjD,IADH,UAGK,IALP,MAMM,IACJ,iBACED,KAAK,+CACLC,OAAO,UAFT,cAPF,KAeA,uDACiC,IAC/B,iBACED,KAAK,8DACLC,OAAO,UAFT,eAKK,IAPP,WAUA,mDAC6B,IAC3B,iBAAGD,KAAK,kCAAkCC,OAAO,UAAjD,QAEK,IAJP,QAKQ,IACN,iBAAGD,KAAK,+BAA+BC,OAAO,UAA9C,WANF,UAoBZ,IAAML,EAAgB,mBAAH,mBAAG,CAAH,2BAER,SAACM,GAAD,OAAOA,EAAEC,MAAMC,OAAOC,UAFd,uGAYJ,SAACH,GAAD,OAAOA,EAAEC,MAAMC,OAAOE,SAZlB,+BAiBJ,SAACJ,GAAD,OAAOA,EAAEC,MAAMC,OAAOC,UAjBlB,wBAoBXE,IAAaC,OApBF,gEAkCbV,EAAyB,mBAAH,mBAAG,CAAH,4CAKf,SAACI,GAAD,OAAOA,EAAEC,MAAMC,OAAOE,SALP,8E,+wBC7K5B,IAAMG,EAAgB,kBAAH,mBAAG,CAAH,6CAGR,SAACP,GAAD,OAAOA,EAAEC,MAAMC,OAAOM,cAHd,2DAMH,SAACR,GAAD,OAAOA,EAAEC,MAAMQ,sBANZ,4DAWfJ,IAAaK,QAXE,SAcfL,IAAaC,OAdE,SAkBfD,IAAaM,QAlBE,kDAwBbN,IAAaC,OAxBA,SA2BbD,IAAaM,QA3BA,WA+BXN,IAAaC,OA/BF,+GA2CN,SAACN,GAAD,OAAOA,EAAEC,MAAMC,OAAOM,cA3ChB,iGAoDD,SAACR,GAAD,OAAOA,EAAEC,MAAMC,OAAOM,cApDrB,IAqDbH,IAAaC,OArDA,WA2DJC","file":"component---src-pages-about-tsx-e5c5a33dc6949f37b5b2.js","sourcesContent":["import React from \"react\";\nimport { Link } from \"gatsby\";\nimport styled from \"@emotion/styled\";\nimport mediaqueries from \"@styles/media\";\n\nimport Layout from \"@narative/gatsby-theme-novela/src/components/Layout\";\nimport UnorderedList from \"@narative/gatsby-theme-novela/src/components/Lists/List.Unordered\";\nimport Section from \"@narative/gatsby-theme-novela/src/components/Section\";\nimport SEO from \"@narative/gatsby-theme-novela/src/components/SEO\";\nimport Headings from \"@narative/gatsby-theme-novela/src/components/Headings\";\nimport { useColorMode } from \"theme-ui\";\n\nconst About = () => {\n const [colorMode] = useColorMode();\n\n const isDark = colorMode === \"dark\";\n\n return (\n \n \n
\n \n Hi 👋🏽 - I'm Hassan Djirdeh.\n

\n I'm a senior frontend engineer who's worked at different\n organizations to build large production applications at-scale. I've\n also helped thousands of students learn in-depth front engineering\n skills like React, Vue, TypeScript, and GraphQL with educational\n material.\n

\n
\n

\n I'm using this blog to share my knowledge and experience with you.\n If this is something you may find interesting, feel to{\" \"}\n \n subscribe\n {\" \"}\n to the blog/newsletter as well!\n

\n \n
  • \n Some more details about me:\n
    • \n
  • \n I live in{\" \"}\n \n Toronto\n \n .\n
    • \n
  • \n I'm currently a Senior Software Engineer at{\" \"}\n \n Doordash\n \n . Previously @{\" \"}\n \n Instacart\n {\" \"}\n and @{\" \"}\n \n Shopify\n \n .\n
    • \n
  • \n I've created a fullstack React masterclass called{\" \"}\n \n TinyHouse\n \n .\n
    • \n
  • \n I've written a book on Vue named{\" \"}\n \n Fullstack Vue\n \n .\n
    • \n
  • \n I've created some spin-off (free) courses called{\" \"}\n \n 30 Days of Vue\n {\" \"}\n and\n \n {\" \"}\n Building your first GraphQL Server with Node & TypeScript\n \n .\n
    • \n
  • \n I've written web development related blog posts/tutorials on{\" \"}\n \n {\" \"}\n Medium\n {\" \"}\n and{\" \"}\n \n CSS-Tricks\n \n .\n
    • \n
  • \n I've spoken at a few different{\" \"}\n \n conferences\n {\" \"}\n before.\n
    • \n
  • \n I can always be reached by{\" \"}\n \n mail\n {\" \"}\n or on{\" \"}\n \n Twitter\n \n .\n
    • \n     \n     \n
    \n     \n );\n};\n\nexport default About;\n\nconst ListContainer = styled.div`\n margin-top: 100px;\n color: ${(p) => p.theme.colors.primary};\n ul {\n margin-top: 20px;\n margin-left: 0;\n font-size: 15px;\n max-width: initial;\n\n padding: 15px 0 0px 26px;\n\n a {\n color: ${(p) => p.theme.colors.accent};\n font-weight: 600;\n }\n\n li {\n color: ${(p) => p.theme.colors.primary};\n padding-bottom: 10px;\n\n ${mediaqueries.tablet`\n padding-left: 0px;\n `};\n }\n\n li::before {\n left: -25px;\n top: 9px;\n height: 5px;\n width: 5px;\n }\n }\n`;\n\nconst SubscribeLinkContainer = styled.div<{ isDark: boolean }>`\n display: inline;\n margin-left: auto;\n\n a {\n color: ${(p) => p.theme.colors.accent};\n text-decoration: none;\n font-weight: 600;\n }\n\n svg {\n position: relative;\n bottom: 1px;\n }\n`;\n","import styled from \"@emotion/styled\";\nimport mediaqueries from \"@styles/media\";\n\nconst UnorderedList = styled.ul`\n list-style: none;\n counter-reset: list;\n color: ${(p) => p.theme.colors.articleText};\n position: relative;\n padding: 15px 0 30px 30px;\n transition: ${(p) => p.theme.colorModeTransition};\n margin: 0 auto;\n font-size: 18px;\n width: 100%;\n max-width: 680px;\n ${mediaqueries.desktop`\n max-width: 507px;\n `}\n ${mediaqueries.tablet`\n max-width: 486px;\n padding-left: 0px;\n `};\n ${mediaqueries.phablet`\n padding-left: 20px;\n `};\n li {\n position: relative;\n padding-bottom: 15px;\n ${mediaqueries.tablet`\n padding-left: 30px;\n `};\n ${mediaqueries.phablet`\n padding-left: 30px;\n `};\n p {\n ${mediaqueries.tablet`\n padding: 0;\n `};\n }\n }\n li > :not(ol, ul) {\n display: inline;\n }\n li::before {\n width: 3rem;\n display: inline-block;\n position: absolute;\n color: ${(p) => p.theme.colors.articleText};\n }\n li::before {\n content: \"\";\n position: absolute;\n left: -30px;\n top: 8px;\n height: 8px;\n width: 8px;\n background: ${(p) => p.theme.colors.articleText};\n ${mediaqueries.tablet`\n left: 0;\n `};\n }\n`;\n\nexport default UnorderedList;\n"],"sourceRoot":""}