content: import React from 'react';
  import scrollToElement from 'scroll-to-element';
  
  import classnames from 'classnames';
  
  import Headline from 'grommet/components/Headline';
  import Anchor from 'grommet/components/Anchor';
  import Paragraph from 'grommet/components/Paragraph';
  import Box from 'grommet/components/Box';
  import Value from 'grommet/components/Value';
  import Image from 'grommet/components/Image';
  import InfographicSection from '../components/InfographicSection';
  
  const CLASS_ROOT = "title-section";
  
  export default function Title1 () {
    const classes = classnames([
      CLASS_ROOT,
      `${CLASS_ROOT}--left-align`,
      `${CLASS_ROOT}--column-reverse`
    ]);
  
    return (
      <InfographicSection
        className={classes}
        id="AboutMe"
        direction="row"
        colorIndex="neutral-4-t"
        style={{
          backgroundImage: "#7f00ff", /* fallback for old browsers */
          backgroundImage: "-webkit-linear-gradient(to right, #7f00ff, #e100ff)", /* Chrome 10-25, Safari 5.1-6 */
          backgroundImage: "linear-gradient(to right, #7f00ff, #e100ff)" /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        }}
      >
        <Box className={`${CLASS_ROOT}__col-2`} direction="column" alignContent="start">
          <Headline className={`${CLASS_ROOT}__title`} size="large" strong={true} style={{fontFamily: 'Product Sans'}}>Who is Shane?</Headline>
          <Paragraph size='large' style={{fontFamily: 'Roboto'}}>
            Shane (Wangtao) Lian was born in <Value value={1995} size="small" responsive style={{paddingLeft: 3}}/> in Haining, China. He spent most of his life (16 years to be exact) in 
            <Anchor href='https://www.lonelyplanet.com/china/zhejiang/hangzhou'><Value value={"Hangzhou, China"} size="small" responsive style={{paddingLeft: 3}}/></Anchor>, 
            a beautiful city with a growing high-tech industry.
          </Paragraph>
          <Paragraph
            size='large'
            style={{fontFamily: 'Roboto'}}
          >
            From 
            <Value
              value={2014}
              size="small"
              responsive
              style={{paddingLeft: 3}}
            />
            , he started studying at the University of Wisconsin-Madison majoring 
            <Anchor
              href='https://www.cs.wisc.edu/'
            >
              <Value
                value={"Computer Sciences"}
                size="small"
                responsive
                style={{paddingLeft: 3}}
              />
            </Anchor>. 
            During college, he fell in love with web development and mobile development.
          </Paragraph>
          <Paragraph
            size='large'
            style={{fontFamily: 'Roboto'}}
          >
            Shane enjoys taking pictures with his Sony A7 and DJI Mavic Pro. You can check out some of his works in the 
            <a 
            onClick={()=> {
              scrollToElement('#gallery', {
                offset: 0,
                ease: 'inOutQuad',
                duration: 800
              });
            }}> Gallery
            </a>
            {/* Some of them are <Anchor href='https://www.cs.wisc.edu/' >here</Anchor> on the page. */}
          </Paragraph>
        </Box>
        <Box
          pad={{vertical: "medium", between: "medium"}}
          direction="column" 
          className={`${CLASS_ROOT}__col-1`}
          justify="center"
        >
          <Image
           src='/img/shane.jpg'
           alt='Shane Lian Profile'
           size='large'
           style={{
             borderRadius: '50%'
           }}
          />
        </Box>
      </InfographicSection>
    );
  };
  