import React from 'react'
import Helmet from 'react-helmet'
import system from 'system-components'
import Header from '../components/Header'
import Stats from '../components/Stats'
import { Title, Paragraph } from '../components/Typography'
import { useSiteMetadata } from '../utils/hooks'
import { themeHover, themeUnderline } from '../utils/styles'

const AboutLink = system({ is: 'a' }, themeHover, themeUnderline)

const AboutPage = () => {
  const { title } = useSiteMetadata()

  return (
    <>
      <Helmet>
        <title>About • {title}</title>
      </Helmet>

      <article>
        <Header>
          <Title>Self-Doxxing</Title>
        </Header>

        <main>
          <Paragraph fontSize={[1, 2]} lineHeight="copy" mt={5} mb={3}>
            &ldquo;I&rsquo;m a frontend developer &amp; designer, with a passion
            for legibility, performance, and the open web. A quick learner with
            a thirst for knowledge. Enthusiastic and hard-working, I pride
            myself on my attention to detail.&rdquo;
          </Paragraph>

          <Paragraph fontSize={[1, 2]} lineHeight="copy" mt={3} mb={3}>
            That&rsquo;s what the intro on{' '}
            <AboutLink href="https://resume.lowmess.com">my résumé</AboutLink>{' '}
            says. Kind of boring, huh? Well, it&rsquo;s a résumé. They&rsquo;re
            supposed to be boring. (Don&rsquo;t be such a nitpicker.)
          </Paragraph>

          <Paragraph fontSize={[1, 2]} lineHeight="copy" mt={3} mb={0}>
            Here&rsquo;s the fun stuff: my name technically isn&rsquo;t Alec
            (don&rsquo;t worry about it), my favorite beer is all of them, and
            I&rsquo;m a staunch believer in the Oxford comma. If you have any
            questions, I&rsquo;m happy to send you a non sequitur and/or
            fully-serious response if you{' '}
            <AboutLink href="mailto:alec@lowmess.com">email me</AboutLink>.
          </Paragraph>

          <Stats mt={[4, 5]} />
        </main>
      </article>
    </>
  )
}

export default AboutPage

@@ -1661,16 +1661,18 @@
 hem, and
+ I
 %0A       
@@ -1680,56 +1680,37 @@
     
-I&rsquo;m a staunch believer in the Oxford comma
+like to list things in threes
 . If
@@ -1722,28 +1722,16 @@
 have any
-%0A           
  questio
@@ -1743,16 +1743,28 @@
 &rsquo;m
+%0A           
  happy t
@@ -1795,28 +1795,16 @@
 r and/or
-%0A           
  fully-s
@@ -1825,18 +1825,10 @@
 e if
- you%7B' '%7D
 %0A
+ 
     
@@ -1826,32 +1826,35 @@
  if%0A            
+you
  %3CAboutLink href

change about snippet