<commit_before>import React from 'react';
import { graphql } from 'gatsby';
import {
  // Container, 
  Row, Col
} from 'reactstrap';

import Layout from '../components/layout/layout';
import Email from '../components/UI/ObfuscatedEmail/ObfuscatedEmail';
import ContactInfo from '../components/UI/ContactInfo/ContactInfo';

import ProfileImg from '../images/lxieyang-avatar.jpg';
import CMUAvatar from '../images/cmu.png';
import HCIIAvatar from '../images/hcii-logo-big.jpg';
import HeadshotTooltip from '../components/UI/HeadshotTooltip/HeadshotTooltip';
import BradImg from '../images/people/bradmyers.jpg';
import NikiImg from '../images/people/nikikittur.jpg';
import WalterImg from '../images/people/walterlasecki.jpg';

import { CVPath } from '../utils/constants';

import NewsList from '../utils/news';
import TravelList from '../utils/travel';

import './index.css';

const IndexPage = ({data}) => (
  <Layout>
    <Row>
      <Col md='3' className="d-none d-sm-none d-md-block">
        <div className="homepage-avatar-section">
          <div className="watermark-image-display-container">
            <img src={ProfileImg} alt="profile" style={{maxWidth: '100%', maxHeight: '100%'}}/><br />
            <div className="image-watermark-bottom-right">
              Yellowstone National Park, US
            </div>
          </div>
          <div className="card-words">
            <ContactInfo />
          </div>
        </div>
      </Col>

      <Col md='9'>
        <div className="homepage-word-section">
          <h1>
            <NAME> (刘燮洋)
            &nbsp;
            <img src={ CMUAvatar } width="30" height="30" className="d-inline-block" alt="cmu-avatar"/>
            <img src={ HCIIAvatar } width="30" height="30" className="d-inline-block" alt="hcii-avatar"/>
          </h1>

          <p className="my-title">
            #hci-researcher &nbsp; #developer &nbsp; #adventurer 
          </p>

          <hr/>

          <p className="self-identify-paragraph">
            I am a 2nd year Ph.D. student at <a href="http://www.hcii.cmu.edu">Human-Computer Interaction Institute</a> @ <a href="http://www.cmu.edu">Carnegie Mellon University</a>. <br/>
          </p>
          <hr/>
          <p style={{fontSize: '1.0rem'}}>
            My current research interests include <strong>human-computer interaction</strong>, <strong>user interface development</strong>, and  <strong>sensemaking</strong>. <br/>
            My current advisors are <a href="http://www.cs.cmu.edu/~bam/" id="brad-myers">Dr. <NAME></a> and <a href="http://kittur.org/" id="niki-kittur">Dr. <NAME></a>. <br/>

            <HeadshotTooltip target="brad-myers" headshotPath={ BradImg }/>
            <HeadshotTooltip target="niki-kittur" headshotPath={ NikiImg }/>

            I obtained my two B.S. degrees at <a href="https://www.umich.edu">University of Michigan, Ann Arbor</a> and <a href="http://en.sjtu.edu.cn">Shanghai Jiao Tong University</a>. I worked as an undergraduate researcher with <a href="https://web.eecs.umich.edu/~wlasecki/" id="walter-lasecki">Dr. <NAME>i</a> in the <a href="http://web.eecs.umich.edu/~wlasecki/croma.html">Crowds + Machines Lab (Croma Lab)</a> during my time in Michigan.

            <HeadshotTooltip target="walter-lasecki" headshotPath={ WalterImg }/>
          </p>
          <Row className="contacts">
            <Col sm='12'>
              <span className="contact-name">Curriculum Vitae: [</span><a href={ CVPath }>pdf</a><span className="contact-name">]</span> (September 2017)<br/>
              <span className="contact-name">Github: </span><a href={data.site.siteMetadata.externalLinks.github}>lxieyang</a><br/>
              <span className="contact-name">Facebook: </span><a href={data.site.siteMetadata.externalLinks.facebook}><NAME> (<NAME>)</a><br/>
              <span className="contact-name">Instagram: </span><a href={data.site.siteMetadata.externalLinks.instagram}>xieyangl</a><br/>
            </Col>
          </Row>
        </div>
      </Col>
    </Row>

    <br/><hr/><br/>


    <Row>
      <Col md='6'>  
        <h2>News</h2>
        <ul>
          {
            NewsList.map((newsItem, idx) => (
              <li 
                key={idx} 
                className={newsItem.shouldDisplay === false ? 'old-news' : null}
                dangerouslySetInnerHTML={{
                  __html: newsItem.content
                }}></li>
            ))
          }
        </ul><commit_msg>fix address section on mobile<commit_after>import React from 'react';
import { graphql } from 'gatsby';
import {
  // Container, 
  Row, Col
} from 'reactstrap';

import Layout from '../components/layout/layout';
import ContactInfo from '../components/UI/ContactInfo/ContactInfo';

import ProfileImg from '../images/lxieyang-avatar.jpg';
import CMUAvatar from '../images/cmu.png';
import HCIIAvatar from '../images/hcii-logo-big.jpg';
import HeadshotTooltip from '../components/UI/HeadshotTooltip/HeadshotTooltip';
import BradImg from '../images/people/bradmyers.jpg';
import NikiImg from '../images/people/nikikittur.jpg';
import WalterImg from '../images/people/walterlasecki.jpg';

import { CVPath } from '../utils/constants';

import NewsList from '../utils/news';
import TravelList from '../utils/travel';

import './index.css';

const IndexPage = ({data}) => (
  <Layout>
    <Row>
      <Col md='4' className="d-none d-sm-none d-md-block">
        <div className="homepage-avatar-section">
          <div className="watermark-image-display-container">
            <img src={ProfileImg} alt="profile" style={{maxWidth: '100%', maxHeight: '100%'}}/><br />
            <div className="image-watermark-bottom-right">
              Yellowstone National Park, US
            </div>
          </div>
          <div className="card-words">
            <ContactInfo />
          </div>
        </div>
      </Col>

      <Col md='8'>
        <div className="homepage-word-section">
          <h1>
            <NAME> (刘燮洋)
            &nbsp;
            <img src={ CMUAvatar } width="30" height="30" className="d-inline-block" alt="cmu-avatar"/>
            <img src={ HCIIAvatar } width="30" height="30" className="d-inline-block" alt="hcii-avatar"/>
          </h1>

          <p className="my-title">
            #hci-researcher &nbsp; #developer &nbsp; #adventurer 
          </p>

          <hr/>

          <p className="self-identify-paragraph">
            I am a 2nd year Ph.D. student at <a href="http://www.hcii.cmu.edu">Human-Computer Interaction Institute</a> @ <a href="http://www.cmu.edu">Carnegie Mellon University</a>. <br/>
          </p>

          <hr/>

          <p style={{fontSize: '1.0rem'}}>
            My current research interests include <strong>human-computer interaction</strong>, <strong>user interface development</strong>, and  <strong>sensemaking</strong>. <br/>
            My current advisors are <a href="http://www.cs.cmu.edu/~bam/" id="brad-myers">Dr. <NAME></a> and <a href="http://kittur.org/" id="niki-kittur">Dr. <NAME></a>. <br/>

            <HeadshotTooltip target="brad-myers" headshotPath={ BradImg }/>
            <HeadshotTooltip target="niki-kittur" headshotPath={ NikiImg }/>

            I obtained my two B.S. degrees at <a href="https://www.umich.edu">University of Michigan, Ann Arbor</a> and <a href="http://en.sjtu.edu.cn">Shanghai Jiao Tong University</a>. I worked as an undergraduate researcher with <a href="https://web.eecs.umich.edu/~wlasecki/" id="walter-lasecki">Dr. <NAME></a> in the <a href="http://web.eecs.umich.edu/~wlasecki/croma.html">Crowds + Machines Lab (Croma Lab)</a> during my time in Michigan.

            <HeadshotTooltip target="walter-lasecki" headshotPath={ WalterImg }/>
          </p>
          <Row className="contacts">
            <Col sm='12'>
              <span className="contact-name">Curriculum Vitae: [</span><a href={ CVPath }>pdf</a><span className="contact-name">]</span> (September 2017)<br/>
              <span className="contact-name">Github: </span><a href={data.site.siteMetadata.externalLinks.github}>lxieyang</a><br/>
              <span className="contact-name">Facebook: </span><a href={data.site.siteMetadata.externalLinks.facebook}><NAME> (<NAME>u)</a><br/>
              <span className="contact-name">Instagram: </span><a href={data.site.siteMetadata.externalLinks.instagram}>xieyangl</a><br/>
            </Col>
          </Row>

          <div className="d-sm-block d-md-none d-lg-none">
            <hr/>
            <ContactInfo />
          </div>
        </div>
      </Col>
    </Row>

    <br/><hr/><br/>


    <Row>
      <Col md='6'>  
        <h2>News</h2>
        <ul>
          {
            NewsList.map((newsItem, idx) => (
              <li 
                key={idx} 
                className={newsItem.shouldDisplay === false ? 'old-news' : null}
                dangerouslySetInnerHTML={{
                  __html: newsItem.content
                }}></li>
            ))
          }
        </ul>
{'fraction_non_alphanumeric': 0.171654244076093, 'fraction_numerical': 0.006674824785849371, 'mean_word_length': 2.429988553987028, 'pattern_counts': {'":': 0, '<': 213, '<?xml version=': 0, '>': 217, 'https://': 4, 'lorem ipsum': 0, 'www.': 8, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1503602', 'n_tokens_mistral': 2897, 'n_tokens_neox': 2787, 'n_words': 592}