{"size": 3347, "ext": "js", "max_stars_repo_path": "src/HeaderSection.js", "max_stars_repo_name": "tinypony/artur-cv", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/HeaderSection.js", "max_issues_repo_name": "tinypony/artur-cv", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/HeaderSection.js", "max_forks_repo_name": "tinypony/artur-cv", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 22.4630872483, "max_line_length": 90, "alphanum_fraction": 0.6244397968}
import React from 'react'
import styled from 'styled-components'
import moment from 'moment'
import { Section } from './components'
import head from './assets/img/head.png'

const ContenWrapper = styled.div`
  position: relative;
  display: flex;

  ${props => props.theme.media.desktop} {
      flex-direction: row;
      padding-top: 4rem;
      padding-bottom: 5rem;
  }

  ${props => props.theme.media.upTo.desktop} {
      flex-direction: column;
      align-items: center;
      padding-top: 1rem;
  }
`

const HeadImage = styled.div`
  border-radius: 16rem;
  background-color: white;
  padding: 1rem;
  overflow: hidden;

  ${props => props.theme.media.desktop} {
    position: absolute;
    left: -10rem;
  }

  img {
    width: 16rem;
    border-radius: 16rem;
  }
`

const MainTitle = styled.h1`
  font-family: NexaBold;
  font-size: 3rem;

  ${props => props.theme.media.upTo.desktop} {
    text-align: center;
    font-size: 2rem;
  }
`

const HeadSectionTextContent = styled.div`
  ${props => props.theme.media.desktop} {
    margin-left: 200px;
  }

  ${props => props.theme.media.upTo.tablet} {
    width: 100%;
  }
`

const InfoTable = styled.div`
  font-size: ${props => props.theme.font.size.medium};
`

const InfoTableRow = styled.div`
  display: flex;

  ${props => props.theme.media.from.tablet} {
    flex-direction: row;
  }

  ${props => props.theme.media.upTo.tablet} {
    flex-direction: column;
    margin-bottom: 0.5rem;
  }
`

const InfoTitle = styled.div`
  width: 6rem;
  text-align: right;
  font-family: NexaLight;

  ${props => props.theme.media.upTo.tablet} {
    text-align: left;
    font-family: NexaBold;
  }
`

const InfoPayload = styled.div`
  font-family: NexaBold;

  ${props => props.theme.media.from.tablet} {
    margin-left: 1rem;
  }

  ${props => props.theme.media.upTo.tablet} {
    font-family: NexaLight;
  }
`

const LinkedInLink = styled.a`
  color: #30c0d2;
  text-decoration: none;
  
  &:visited {
    color: #30c0d2;
  }
`

export const HeaderSection = () => {
  const startingDate = moment('2011-05-01')
  const currentDate = moment()
  const duration = moment.duration(currentDate.diff(startingDate))
  const durationYears = duration.years()
  const durationMonths = duration.months()
  return <Section>
    <ContenWrapper>
      <HeadImage>
        <img src={head} />
      </HeadImage>
      <HeadSectionTextContent>
        <MainTitle>Artur Latypov</MainTitle>
        <InfoTable>
          <InfoTableRow>
            <InfoTitle>Degree</InfoTitle>
            <InfoPayload>MSc (Tech.) in Software Engineering</InfoPayload>
          </InfoTableRow>
          <InfoTableRow>
            <InfoTitle>Experience</InfoTitle>
            <InfoPayload>{`${durationYears} years ${durationMonths} months`}</InfoPayload>
          </InfoTableRow>
          <InfoTableRow>
            <InfoTitle>Mobile</InfoTitle>
            <InfoPayload>+358451195095</InfoPayload>
          </InfoTableRow>
          <InfoTableRow>
            <InfoTitle>LinkedIn</InfoTitle>
            <InfoPayload>
              <LinkedInLink href='https://www.linkedin.com/in/arturlatypov/'>
                https://linkedin.com/in/arturlatypov/
              </LinkedInLink>
            </InfoPayload>
          </InfoTableRow>
        </InfoTable>
      </HeadSectionTextContent>
    </ContenWrapper>
  </Section>
}
