{"version":3,"file":"component---src-pages-index-tsx-7fc2f642902ae169d2d9.js","mappings":"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","sources":["webpack://patricknasralla.com/./src/components/ArticleStub.tsx","webpack://patricknasralla.com/./src/components/HeroLogo.tsx","webpack://patricknasralla.com/./src/components/Section.tsx","webpack://patricknasralla.com/./src/components/SocialIcons.tsx","webpack://patricknasralla.com/./src/pages/index.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\n\ninterface ArticleStub {\n  type: string;\n  title: string;\n  excerpt: string;\n}\n\ninterface ColorByType {\n  type: string;\n}\n\nexport const ArticleStub: React.FC<ArticleStub> = ({\n  type,\n  title,\n  excerpt,\n}) => (\n  <Wrapper>\n    <Box type={type} />\n    <TextContainer type={type}>\n      <FrontMatter type={type}>\n        <Title>{title}</Title>\n        <Excerpt>{excerpt}</Excerpt>\n      </FrontMatter>\n    </TextContainer>\n  </Wrapper>\n);\n\nconst Wrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  margin-top: 0;\n  margin-bottom: 4rem;\n  width: 100%;\n\n  :hover {\n    background: ${({ theme }) => theme.backgroundHighlight};\n  }\n\n  @media (min-width: 768px) {\n    flex-direction: row;\n    justify-content: center;\n    align-items: flex-start;\n  }\n`;\n\nconst Box = styled.div<ColorByType>`\n  display: none;\n  @media (min-width: 768px) {\n    display: block;\n    width: 2rem;\n    height: 2rem;\n    background-color: ${({ type, theme }) =>\n      type === 'essay'\n        ? theme.brightPurple\n        : type === 'tutorial'\n        ? theme.brightYellow\n        : type === 'project'\n        ? theme.brightCyan\n        : type === 'other'\n        ? theme.brightGreen\n        : theme.brightBlue};\n  }\n`;\n\nconst TextContainer = styled.div<ColorByType>`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  @media (min-width: 768px) {\n    border-top: none;\n    border-left: 1px solid\n      ${({ type, theme }) =>\n        type === 'essay'\n          ? theme.brightPurple\n          : type === 'tutorial'\n          ? theme.brightYellow\n          : type === 'project'\n          ? theme.brightCyan\n          : type === 'other'\n          ? theme.brightGreen\n          : theme.brightBlue};\n    padding: 0 0 0 2rem;\n  }\n`;\n\nconst FrontMatter = styled.div<ColorByType>`\n  width: 30rem;\n  border-top: 1px solid\n    ${({ type, theme }) =>\n      type === 'essay'\n        ? theme.brightPurple\n        : type === 'tutorial'\n        ? theme.brightYellow\n        : type === 'project'\n        ? theme.brightCyan\n        : type === 'other'\n        ? theme.brightGreen\n        : theme.brightBlue};\n  padding-top: 1rem;\n  @media (min-width: 375px) {\n    width: 35rem;\n  }\n  @media (min-width: 768px) {\n    width: 60rem;\n    padding: 0;\n    border-top: none;\n  }\n  @media (min-width: 980px) {\n    width: 72rem;\n  }\n`;\n\nconst Title = styled.h2`\n  color: ${({ theme }) => theme.highlight};\n  font-family: 'Montserrat', sans-serif;\n  letter-spacing: -0.03rem;\n  margin: 0;\n  font-weight: 500;\n  font-size: 1.6rem;\n  @media (min-width: 980px) {\n    font-size: 2rem;\n  }\n`;\n\nconst Excerpt = styled.p`\n  color: ${({ theme }) => theme.mainBright};\n  font-family: 'Libre Baskerville', serif;\n  font-weight: 400;\n  font-style: italic;\n  letter-spacing: -0.01rem;\n  margin: 0.4rem 0 0.2rem 0;\n  font-size: 1.4rem;\n  @media (min-width: 980px) {\n    margin: 0.5rem 0 0.25rem;\n    font-size: 1.6rem;\n  }\n`;\n","import React from 'react';\nimport styled from 'styled-components';\nimport { useStaticQuery, graphql } from 'gatsby';\nimport Img from 'gatsby-image';\nimport { Logo } from '../assets/svg';\n\nexport const HeroLogo: React.FC = () => {\n  const data = useStaticQuery(graphql`\n    query MyQuery {\n      hero: file(relativePath: { eq: \"assets/img/background.jpg\" }) {\n        childImageSharp {\n          fluid {\n            aspectRatio\n            base64\n            sizes\n            src\n            srcSet\n          }\n        }\n      }\n    }\n  `);\n\n  return (\n    <>\n      <Main>\n        <LogoContainer>\n          <Logo />\n        </LogoContainer>\n        <Title>PATRICK NASRALLA</Title>\n        <TagLine>Software Developer | Medical Doctor</TagLine>\n      </Main>\n      <HeroImage\n        fluid={data.hero.childImageSharp.fluid}\n        alt={'background image'}\n      />\n    </>\n  );\n};\n\nconst Main = styled.div`\n  position: absolute;\n  z-index: 10;\n  height: 100vh;\n  width: 100%;\n  max-width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n`;\n\nconst HeroImage = styled(Img)`\n  height: 100vh;\n  width: 100%;\n  max-width: 100%;\n  overflow: hidden;\n`;\n\nexport const LogoContainer = styled.div`\n  width: 65px;\n  height: 65px;\n  fill: ${({ theme }) => theme.highlight};\n  stroke: ${({ theme }) => theme.highlight};\n  @media (min-width: 980px) {\n    width: 75px;\n    height: 75px;\n  }\n`;\n\nexport const Title = styled.h1`\n  font-family: 'Montserrat', sans-serif;\n  font-weight: 300;\n  letter-spacing: -0.05rem;\n  text-transform: uppercase;\n  font-size: 2.2rem;\n  margin: 3rem 0 1.5rem 0;\n  text-align: center;\n  @media (min-width: 980px) {\n    font-size: 2.4rem;\n    margin: 4rem 0 2rem 0;\n  }\n`;\n\nconst TagLine = styled.h2`\n  font-family: 'Montserrat', sans-serif;\n  font-weight: 300;\n  letter-spacing: -0.05rem;\n  font-size: 1.6rem;\n  margin: 0;\n  text-align: center;\n  @media (min-width: 980px) {\n    font-size: 1.8rem;\n    margin: 0;\n  }\n`;\n","import React from 'react';\nimport styled from 'styled-components';\n\ninterface ISection {\n  title: string;\n  highlight?: boolean;\n}\n\ninterface ISectionWrapper {\n  highlight?: boolean;\n}\n\nexport const Section: React.FC<ISection> = ({ title, highlight, children }) => (\n  <SectionWrapper highlight={highlight}>\n    <Title>\n      <h1>{title}</h1>\n    </Title>\n    {children}\n  </SectionWrapper>\n);\n\nconst SectionWrapper = styled.div<ISectionWrapper>`\n  width: 100%;\n  background-color: ${({ theme, highlight }) =>\n    highlight ? theme.backgroundHighlight : 'transparent'};\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 6rem 0;\n  @media (min-width: 980px) {\n    padding: 8rem 0;\n  }\n`;\n\nexport const Title = styled.div`\n  font-family: 'Montserrat', sans-serif;\n  text-transform: uppercase;\n  margin: 0 auto 3rem auto;\n  text-align: center;\n  width: 30rem;\n  h1 {\n    font-weight: 300;\n    font-size: 2.2rem;\n    letter-spacing: -0.05rem;\n    margin: 0;\n  }\n  @media (min-width: 768px) {\n    width: 72rem;\n    padding-bottom: 1.4rem;\n    margin: 0 0 3.5rem 0;\n    border-bottom: 1px solid ${({ theme }) => theme.highlight};\n    h1 {\n      font-size: 2.3rem;\n    }\n  }\n  @media (min-width: 980px) {\n    width: 96rem;\n    padding-bottom: 1.6rem;\n    margin: 0 0 4rem 0;\n    border-bottom: 1px solid ${({ theme }) => theme.highlight};\n    h1 {\n      font-size: 2.4rem;\n    }\n  }\n`;\n","import React from 'react';\nimport styled from 'styled-components';\nimport { GitHub, LinkedIn, Twitter } from '../assets/svg';\n\nexport const SocialIcons = () => (\n  <IconContainer>\n    <Icon href={'https://twitter.com/GomiNoSensei'}>\n      <Twitter />\n    </Icon>\n    <Icon href={'https://www.linkedin.com/in/patricknasralla/'}>\n      <LinkedIn />\n    </Icon>\n    <Icon href={'https://github.com/patricknasralla'}>\n      <GitHub />\n    </Icon>\n  </IconContainer>\n);\n\nconst IconContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: space-around;\n  margin: 0.8rem 0 0 0;\n  width: 30rem;\n  @media (min-width: 375px) {\n    width: 35rem;\n  }\n  @media (min-width: 768px) {\n    margin: 1rem 0 0 0;\n    width: 72rem;\n  }\n`;\n\nconst Icon = styled.a`\n  width: 24px;\n  height: 24px;\n  :hover {\n    fill: #008eff;\n  }\n`;\n","import React from 'react';\nimport { graphql, Link } from 'gatsby';\nimport styled from 'styled-components';\nimport { ArticleStub } from '../components/ArticleStub';\nimport { Layout } from '../components/Layout';\nimport { Section } from '../components/Section';\nimport { HeroLogo } from '../components/HeroLogo';\nimport { SocialIcons } from '../components/SocialIcons';\nimport SEO from '../components/seo';\n\ninterface IProps {\n  data: {\n    allMarkdownRemark: {\n      edges: {\n        node: {\n          id: string;\n          frontmatter: {\n            title: string;\n            type: string;\n          };\n          excerpt: string;\n          fields: {\n            slug: string;\n          };\n        };\n      }[];\n    };\n  };\n}\n\nexport default ({ data }: IProps) => {\n  return (\n    <Layout>\n      <SEO title={'Home'} description={'patricknasralla.com'} />\n      <HeroLogo />\n      <Section title={'About Me'} highlight={true}>\n        <AboutText>\n          <p>\n            I am the founder of Tr33llion Ltd. As a software engineer and\n            clinician, I create software that addresses the disconnect users\n            have with existing medical note taking systems.\n          </p>\n          <p>\n            User experience and data representation play an important role in\n            our ability to perceive and interact with data. I passionately\n            believe it's a combination of these two things that makes great\n            software.\n          </p>\n          <p>\n            This site is for my personal writing, tutorials and opinions. My\n            hope is that people can benefit from the things I learn!\n          </p>\n        </AboutText>\n        <SocialIcons />\n      </Section>\n      <Section title={'Recent Articles'}>\n        {data.allMarkdownRemark.edges.map(({ node }: any) => (\n          <ArticleLink key={node.id} to={node.fields.slug}>\n            <ArticleStub\n              key={node.id}\n              type={node.frontmatter.type}\n              title={node.frontmatter.title}\n              excerpt={node.excerpt}\n            />\n          </ArticleLink>\n        ))}\n      </Section>\n    </Layout>\n  );\n};\n\n// GraphQL\nexport const query = graphql`\n  query GetRecentArticles {\n    allMarkdownRemark(limit: 10, sort: { fields: frontmatter___date }) {\n      edges {\n        node {\n          id\n          frontmatter {\n            title\n            type\n          }\n          excerpt\n          fields {\n            slug\n          }\n        }\n      }\n    }\n  }\n`;\n\n// Single Use Styles\nexport const AboutText = styled.div`\n  width: 30rem;\n  font-family: 'Libre Baskerville', serif;\n  margin: 0 0 3rem 0;\n  p {\n    letter-spacing: -0.01rem;\n    font-weight: 400;\n    font-size: 1.6rem;\n    text-align: center;\n    line-height: 2.4rem;\n    color: ${({ theme }) => theme.highlight};\n    margin: 0;\n    padding: 0;\n  }\n  p + p {\n    margin-top: 3rem;\n  }\n  @media (min-width: 375px) {\n    width: 35rem;\n  }\n  @media (min-width: 768px) {\n    width: 72rem;\n    margin: 0 0 4rem 0;\n    p {\n      font-size: 1.7rem;\n      line-height: 2.5rem;\n    }\n  }\n  @media (min-width: 980px) {\n    p {\n      font-size: 1.8rem;\n      line-height: 2.6rem;\n    }\n  }\n`;\n\nconst ArticleLink = styled(Link)`\n  text-decoration: none;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n`;\n"],"names":["ArticleStub","type","title","excerpt","Wrapper","Box","TextContainer","FrontMatter","Title","Excerpt","styled","theme","backgroundHighlight","brightPurple","brightYellow","brightCyan","brightGreen","brightBlue","highlight","mainBright","HeroLogo","data","useStaticQuery","Main","LogoContainer","TagLine","HeroImage","fluid","hero","childImageSharp","alt","Img","Section","children","SectionWrapper","SocialIcons","IconContainer","Icon","href","Layout","description","AboutText","allMarkdownRemark","edges","map","node","ArticleLink","key","id","to","fields","slug","frontmatter","Link"],"sourceRoot":""}